From 5164bda586d8b50bb9225923e1200775923d20b2 Mon Sep 17 00:00:00 2001 From: omunite215 Date: Sun, 12 May 2024 21:31:40 +0530 Subject: [PATCH] Transformed to nextjs --- .eslintrc.json | 3 + .gitignore | 54 +- readme.md => README.md | 6 +- app/components/About.tsx | 78 + app/components/Contact.tsx | 124 + app/components/Experience.tsx | 88 + app/components/Feedbacks.tsx | 74 + app/components/Hero.tsx | 44 + .../HigherOrderComponents/SectionWrapper.tsx | 27 + .../components/HigherOrderComponents/index.ts | 2 +- app/components/Loader.tsx | 34 + app/components/Navbar.tsx | 121 + app/components/ResumeButton.tsx | 33 + app/components/Tech.tsx | 18 + app/components/Works.tsx | 132 + app/components/canvas/Ball.tsx | 56 + app/components/canvas/Computers.tsx | 67 + app/components/canvas/Earth.tsx | 43 + app/components/canvas/Stars.tsx | 50 + .../components/canvas/index.ts | 4 +- .../index.js => app/components/index.ts | 0 app/constants/index.tsx | 276 + app/favicon.ico | Bin 0 -> 188833 bytes app/layout.tsx | 25 + app/page.tsx | 31 + src/index.css => app/styles/globals.css | 161 +- app/utils/motion.ts | 105 + bun.lockb | Bin 0 -> 172839 bytes index.html | 13 - next.config.mjs | 4 + package-lock.json | 4721 ----------------- package.json | 51 +- postcss.config.cjs | 6 - postcss.config.mjs | 8 + {src/assets => public}/backend.webp | Bin {src/assets => public}/close.svg | 0 {src/assets => public}/company/avm.webp | Bin {src/assets => public}/creator.webp | Bin {src/assets => public}/herobg.webp | Bin public/logo.png | Bin 0 -> 363489 bytes public/logo.svg | 66 - {src/assets => public}/menu.svg | 0 {src/assets => public}/mobile.webp | Bin .../projectimg/analytics.webp | Bin .../projectimg/dashboard.webp | Bin .../assets => public}/projectimg/hoobank.webp | Bin .../projectimg/portfoliosample.webp | Bin .../projectimg/provid.webp | Bin {src/assets => public}/projectimg/quote.webp | Bin public/resume.svg | 16 + .../assets => public}/socialmedia/behance.svg | 0 .../assets => public}/socialmedia/dribble.svg | 0 .../socialmedia/linkedin.svg | 0 .../socialmedia/portfolio.svg | 0 {src/assets => public}/tech/bootstrap.webp | Bin {src/assets => public}/tech/css.webp | Bin {src/assets => public}/tech/figma.webp | Bin {src/assets => public}/tech/git.webp | Bin {src/assets => public/tech}/github.webp | Bin {src/assets => public}/tech/html.webp | Bin {src/assets => public}/tech/javascript.webp | Bin {src/assets => public}/tech/netlify.webp | Bin public/tech/nextjs.svg | 8 + {src/assets => public}/tech/reactjs.webp | Bin {src/assets => public}/tech/redux.webp | Bin {src/assets => public}/tech/tailwind.webp | Bin public/tech/threejs.webp | Bin 0 -> 49924 bytes {src/assets => public}/tech/typescript.webp | Bin {src/assets => public}/tech/wordpress.webp | Bin {src/assets => public}/web.webp | Bin src/App.jsx | 29 - src/HigherOrderComponents/SectionWrapper.jsx | 23 - src/assets/index.js | 74 - src/assets/mylogo.webp | Bin 17258 -> 0 bytes src/assets/resume.svg | 9 - src/assets/tech/threejs.svg | 11 - src/assets/tech/wordpress.png | Bin 29059 -> 0 bytes src/components/About.jsx | 69 - src/components/Contact.jsx | 80 - src/components/Experience.jsx | 85 - src/components/Feedbacks.jsx | 56 - src/components/Hero.jsx | 46 - src/components/Loader.jsx | 24 - src/components/Navbar.jsx | 107 - src/components/ResumeButton.jsx | 15 - src/components/Tech.jsx | 19 - src/components/Works.jsx | 111 - src/components/canvas/Ball.jsx | 57 - src/components/canvas/Computers.jsx | 50 - src/components/canvas/Earth.jsx | 44 - src/components/canvas/Stars.jsx | 44 - src/constants/index.jsx | 322 -- src/main.jsx | 8 - src/styles.jsx | 17 - src/utils/motion.jsx | 88 - tailwind.config.cjs | 27 - tailwind.config.ts | 36 + tsconfig.json | 26 + vite.config.js | 7 - 99 files changed, 1691 insertions(+), 6342 deletions(-) create mode 100644 .eslintrc.json rename readme.md => README.md (91%) create mode 100644 app/components/About.tsx create mode 100644 app/components/Contact.tsx create mode 100644 app/components/Experience.tsx create mode 100644 app/components/Feedbacks.tsx create mode 100644 app/components/Hero.tsx create mode 100644 app/components/HigherOrderComponents/SectionWrapper.tsx rename src/HigherOrderComponents/index.jsx => app/components/HigherOrderComponents/index.ts (63%) create mode 100644 app/components/Loader.tsx create mode 100644 app/components/Navbar.tsx create mode 100644 app/components/ResumeButton.tsx create mode 100644 app/components/Tech.tsx create mode 100644 app/components/Works.tsx create mode 100644 app/components/canvas/Ball.tsx create mode 100644 app/components/canvas/Computers.tsx create mode 100644 app/components/canvas/Earth.tsx create mode 100644 app/components/canvas/Stars.tsx rename src/components/canvas/index.js => app/components/canvas/index.ts (69%) rename src/components/index.js => app/components/index.ts (100%) create mode 100644 app/constants/index.tsx create mode 100644 app/favicon.ico create mode 100644 app/layout.tsx create mode 100644 app/page.tsx rename src/index.css => app/styles/globals.css (64%) create mode 100644 app/utils/motion.ts create mode 100755 bun.lockb delete mode 100644 index.html create mode 100644 next.config.mjs delete mode 100644 package-lock.json delete mode 100644 postcss.config.cjs create mode 100644 postcss.config.mjs rename {src/assets => public}/backend.webp (100%) rename {src/assets => public}/close.svg (100%) rename {src/assets => public}/company/avm.webp (100%) rename {src/assets => public}/creator.webp (100%) rename {src/assets => public}/herobg.webp (100%) create mode 100644 public/logo.png delete mode 100644 public/logo.svg rename {src/assets => public}/menu.svg (100%) rename {src/assets => public}/mobile.webp (100%) rename {src/assets => public}/projectimg/analytics.webp (100%) rename {src/assets => public}/projectimg/dashboard.webp (100%) rename {src/assets => public}/projectimg/hoobank.webp (100%) rename {src/assets => public}/projectimg/portfoliosample.webp (100%) rename src/assets/projectimg/Provid.webp => public/projectimg/provid.webp (100%) rename {src/assets => public}/projectimg/quote.webp (100%) create mode 100644 public/resume.svg rename {src/assets => public}/socialmedia/behance.svg (100%) rename {src/assets => public}/socialmedia/dribble.svg (100%) rename {src/assets => public}/socialmedia/linkedin.svg (100%) rename {src/assets => public}/socialmedia/portfolio.svg (100%) rename {src/assets => public}/tech/bootstrap.webp (100%) rename {src/assets => public}/tech/css.webp (100%) rename {src/assets => public}/tech/figma.webp (100%) rename {src/assets => public}/tech/git.webp (100%) rename {src/assets => public/tech}/github.webp (100%) rename {src/assets => public}/tech/html.webp (100%) rename {src/assets => public}/tech/javascript.webp (100%) rename {src/assets => public}/tech/netlify.webp (100%) create mode 100644 public/tech/nextjs.svg rename {src/assets => public}/tech/reactjs.webp (100%) rename {src/assets => public}/tech/redux.webp (100%) rename {src/assets => public}/tech/tailwind.webp (100%) create mode 100644 public/tech/threejs.webp rename {src/assets => public}/tech/typescript.webp (100%) rename {src/assets => public}/tech/wordpress.webp (100%) rename {src/assets => public}/web.webp (100%) delete mode 100644 src/App.jsx delete mode 100644 src/HigherOrderComponents/SectionWrapper.jsx delete mode 100644 src/assets/index.js delete mode 100644 src/assets/mylogo.webp delete mode 100644 src/assets/resume.svg delete mode 100644 src/assets/tech/threejs.svg delete mode 100644 src/assets/tech/wordpress.png delete mode 100644 src/components/About.jsx delete mode 100644 src/components/Contact.jsx delete mode 100644 src/components/Experience.jsx delete mode 100644 src/components/Feedbacks.jsx delete mode 100644 src/components/Hero.jsx delete mode 100644 src/components/Loader.jsx delete mode 100644 src/components/Navbar.jsx delete mode 100644 src/components/ResumeButton.jsx delete mode 100644 src/components/Tech.jsx delete mode 100644 src/components/Works.jsx delete mode 100644 src/components/canvas/Ball.jsx delete mode 100644 src/components/canvas/Computers.jsx delete mode 100644 src/components/canvas/Earth.jsx delete mode 100644 src/components/canvas/Stars.jsx delete mode 100644 src/constants/index.jsx delete mode 100644 src/main.jsx delete mode 100644 src/styles.jsx delete mode 100644 src/utils/motion.jsx delete mode 100644 tailwind.config.cjs create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json delete mode 100644 vite.config.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore index a547bf3..fd3dbb5 100644 --- a/.gitignore +++ b/.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 diff --git a/readme.md b/README.md similarity index 91% rename from readme.md rename to README.md index 0a537de..f8b90b2 100644 --- a/readme.md +++ b/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:

Om's Logo Image -

+

\ No newline at end of file diff --git a/app/components/About.tsx b/app/components/About.tsx new file mode 100644 index 0000000..6014693 --- /dev/null +++ b/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 ( + <> + + +
+ {title} +

+ {title} +

+
+ + + + ); +}; + +const About = () => { + return ( + <> + +

Introduction

+

Overview.

+ + + + 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. + +
+ {services.map((service, index) => ( + + ))} +
+ + ); +}; + +export default SectionWrapper(About, "about"); diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx new file mode 100644 index 0000000..46e0a48 --- /dev/null +++ b/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(null); + + const [form, setForm] = useState({ + name: "", + email: "", + message: "", + }); + + const [loading, setLoading] = useState(false); + + const handleChange = ( + e: React.ChangeEvent, + ) => { + const { name, value } = e.target; + setForm({ ...form, [name]: value }); + }; + + const handleSubmit = (e: React.FormEvent) => { + 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 ( +
+ +

Get in Touch

+

Contact.

+
+ + +