Transformed to nextjs

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,24 +1,36 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

readme.md → README.md

@@ -56,11 +56,11 @@ The website should now be up and running on http://localhost:3000.
 
 ## 🏠 Built With:
 
-[![My Skills](https://skillicons.dev/icons?i=vscode,vite,react,threejs,tailwind,netlify)](https://skillicons.dev)
+[![My Skills](https://skillicons.dev/icons?i=vscode,vite,react,nextjs,threejs,tailwind,netlify)](https://skillicons.dev)
 
 ## 🛠 Skills
 
-[![My Skills](https://skillicons.dev/icons?i=html,css,js,react,tailwind,threejs)](https://skillicons.dev)
+[![My Skills](https://skillicons.dev/icons?i=html,css,js,react,nextjs,tailwind,threejs)](https://skillicons.dev)
 
 ## 🚀 About Me
 Specializations:
@@ -87,4 +87,4 @@ Specializations:
 
 <p align="center">
   <img src="https://github.com/omunite215/Project_3DPortfolio/assets/78680563/2fcf609b-e802-4fec-8c82-8f55fd043437" alt="Om's Logo Image"/>
-</p>
+</p>

app/components/About.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { SectionWrapper } from "./HigherOrderComponents";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { Tilt } from "react-tilt";
+import { services } from "../constants";
+import { fadeIn, textVariant } from "@/app/utils/motion";
+
+type ServiceCardProps = {
+	index: number;
+	title: string;
+	icon: string;
+};
+
+const ServiceCard = ({ index, title, icon }: ServiceCardProps) => {
+	return (
+		<>
+			<Tilt
+				options={{ max: 45, scale: 1, speed: 450 }}
+				className="xs:w-[250px] w-full"
+			>
+				<motion.div
+					variants={fadeIn("right", "spring", 0.5 * index, 0.75)}
+					className="w-full green-pink-gradient p-px rounded-[20px] shadow-card"
+				>
+					<div className="bg-tertiary rounded-[20px] py-5 px-12 min-h-[280px] flex justify-evenly items-center flex-col">
+						<Image
+							src={icon}
+							width={64}
+							height={64}
+							alt={title}
+							className="w-16 h-16 object-contain"
+						/>
+						<h3 className="text-white text-[20px] font-bold text-center">
+							{title}
+						</h3>
+					</div>
+				</motion.div>
+			</Tilt>
+		</>
+	);
+};
+
+const About = () => {
+	return (
+		<>
+			<motion.div variants={textVariant()}>
+				<p className="sectionSubText">Introduction</p>
+				<h2 className="styles.sectionHeadText">Overview.</h2>
+			</motion.div>
+
+			<motion.p
+				variants={fadeIn("", "", 0.1, 1)}
+				className="mt-4 text-secondary text-[17px] max-w-[3xl] leading-[30px]"
+			>
+				As a talented Front-End Web Developer and UI/UX Designer, I have honed
+				my skills in working with a variety of JavaScript libraries, including
+				React.js, Next.js and Three.js. Through my experience, I have developed
+				a deep understanding of how these libraries can be leveraged to create
+				dynamic and engaging user interfaces. In addition, I am a quick learner
+				and have worked on numerous projects using popular CSS frameworks such
+				as Tailwind and Bootstrap. I am confident in my ability to create sleek
+				and responsive designs that meet the specific needs of any project. With
+				a keen eye for detail and a passion for delivering high-quality work, I
+				am dedicated to creating beautiful and user-friendly experiences that
+				delight users.
+			</motion.p>
+			<div className="mt-20 flex flex-wrap gap-10">
+				{services.map((service, index) => (
+					<ServiceCard key={service.title} index={index} {...service} />
+				))}
+			</div>
+		</>
+	);
+};
+
+export default SectionWrapper(About, "about");

app/components/Contact.tsx

@@ -0,0 +1,124 @@
+"use client";
+import { slideIn } from "@/app/utils/motion";
+import emailjs from "@emailjs/browser";
+import { motion } from "framer-motion";
+import { useRef, useState } from "react";
+import { SectionWrapper } from "./HigherOrderComponents";
+import { EarthCanvas } from "./canvas";
+
+const Contact = () => {
+	const formRef = useRef<HTMLFormElement>(null);
+
+	const [form, setForm] = useState({
+		name: "",
+		email: "",
+		message: "",
+	});
+
+	const [loading, setLoading] = useState(false);
+
+	const handleChange = (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		const { name, value } = e.target;
+		setForm({ ...form, [name]: value });
+	};
+
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		setLoading(true);
+		emailjs
+			.send(
+				"service_91ssn8g",
+				"template_jjegxdr",
+				{
+					from_name: form.name,
+					to_name: "Om Patel",
+					from_email: form.email,
+					to_email: "omunite21@gmail.com",
+					message: form.message,
+				},
+				"VeFeVdEHL9F9_i6xp",
+			)
+			.then(() => {
+				setLoading(false);
+				alert(
+					"A humble thanks for reaching me out. I will respond to you as soon as possible.",
+				);
+				setForm({
+					name: "",
+					email: "",
+					message: "",
+				});
+			})
+			.catch((error) => {
+				setLoading(false);
+				alert("Sorry!! Something went wrong!!");
+			});
+	};
+
+	return (
+		<div className="xl:mt-12 xl:flex-row flex-col-reverse flex gap-10 overflow-hidden">
+			<motion.div
+				variants={slideIn("left", "tween", 0.2, 1)}
+				className="flex-[0.75] bg-black-100 p-8 rounded-2xl"
+			>
+				<p className="heroSubText">Get in Touch</p>
+				<h3 className="heroHeadText">Contact.</h3>
+				<form
+					ref={formRef}
+					onSubmit={handleSubmit}
+					className="mt-12 flex flex-col gap-8"
+				>
+					<label className="flex flex-col">
+						<span className="text-white font-medium mb-4">Your Name.</span>
+						<input
+							type="text"
+							name="name"
+							value={form.name}
+							onChange={handleChange}
+							placeholder="Whats's your name?"
+							className="bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"
+						/>
+					</label>
+					<label className="flex flex-col">
+						<span className="text-white font-medium mb-4">Your Email.</span>
+						<input
+							type="email"
+							name="email"
+							value={form.email}
+							onChange={handleChange}
+							placeholder="Whats's your email?"
+							className="bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"
+						/>
+					</label>
+					<label className="flex flex-col">
+						<span className="text-white font-medium mb-4">Your Message.</span>
+						<textarea
+							rows={7}
+							name="message"
+							value={form.message}
+							onChange={handleChange}
+							placeholder="What do you want to say?"
+							className="bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"
+						/>
+					</label>
+					<button
+						type="submit"
+						className="bg-tertiary py-3 px-8 outline-none w-fit text-white font-bold shadow-md shadow-primary rounded-xl"
+					>
+						{loading ? "Sending..." : "Sent"}
+					</button>
+				</form>
+			</motion.div>
+			<motion.div
+				variants={slideIn("right", "tween", 0.2, 1)}
+				className="xl:flex-1 xl:h-auto md:h-[550px] h-[350px]"
+			>
+				<EarthCanvas />
+			</motion.div>
+		</div>
+	);
+};
+
+export default SectionWrapper(Contact, "contact");

app/components/Experience.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { SectionWrapper } from "@/app/components/HigherOrderComponents";
+import { experiences } from "@/app/constants";
+import { textVariant } from "@/app/utils/motion";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import React from "react";
+import {
+	VerticalTimeline,
+	VerticalTimelineElement,
+} from "react-vertical-timeline-component";
+import "react-vertical-timeline-component/style.min.css";
+
+type ExperienceCardProps = {
+	experience: (typeof experiences)[0];
+};
+
+const ExperienceCard = ({ experience }: ExperienceCardProps) => {
+	return (
+		<VerticalTimelineElement
+			contentStyle={{
+				background: "#1d1836",
+				color: "#fff",
+			}}
+			contentArrowStyle={{ borderRight: "7px solid  #232631" }}
+			date={experience.date}
+			iconStyle={{ background: experience.iconBg }}
+			icon={
+				<div className="flex justify-center items-center w-full h-full">
+					<Image
+						src={experience.icon}
+						width={0}
+						height={0}
+						alt={experience.company_name}
+						className="w-[60%] h-[60%] object-contain"
+					/>
+				</div>
+			}
+		>
+			<div>
+				<h3 className="text-white text-[24px] font-bold">{experience.title}</h3>
+				<p
+					className="text-secondary text-[16px] font-semibold"
+					style={{ margin: 0 }}
+				>
+					{experience.company_name}
+				</p>
+			</div>
+
+			<ul className="mt-5 list-disc ml-5 space-y-2">
+				{experience.points.map((point, index) => (
+					<li
+						key={`experience-point-${index}`}
+						className="text-white-100 text-[14px] pl-1 tracking-wider"
+					>
+						{point}
+					</li>
+				))}
+			</ul>
+		</VerticalTimelineElement>
+	);
+};
+
+const Experience = () => {
+	return (
+		<>
+			<motion.div variants={textVariant()}>
+				<p className="styles.sectionSubText text-center">
+					What I have done so far
+				</p>
+				<h2 className="sectionHeadText text-center">Work Experience.</h2>
+			</motion.div>
+
+			<div className="mt-20 flex flex-col">
+				<VerticalTimeline>
+					{experiences.map((experience, index) => (
+						<ExperienceCard
+							key={`experience-${index}`}
+							experience={experience}
+						/>
+					))}
+				</VerticalTimeline>
+			</div>
+		</>
+	);
+};
+
+export default SectionWrapper(Experience, "work");