Updated To Latest TechStack

.eslintrc.json

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

.gitignore

@@ -1,25 +1,41 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+yarn.lock
+
+# 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?
-*Dockerfile
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,65 +1,36 @@
-## Converting Old Legacy React Portfolio to Latest Vite + TypeScript Build
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-### Practicing TypeScript
+## Getting Started
 
-- Day 1: Added Context, Converted it to typescript.
+First, run the development server:
 
-- Day 2: Added Navbar, Converted it to typescript, Added Some Animations.
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-- Day 3: Added Home page, Converted it to typescript, Added Animations, Removed Themes for now.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-- Day 4: Made Different Peices (Components) of Home Page Code.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-- Day 5: Added and Converted About Page to TypeScript.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-- Day 6: Seperated, About Page Components, and Added Fade Animations.
+## Learn More
 
-- Day 7: Added Some Animations and Fixed UI of About Page.
+To learn more about Next.js, take a look at the following resources:
 
-- Day 8: Added My Certificates Section, and Added Some Animations to it.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-- Day 9: Added My Experiences Section, Converted it to TypeScript.
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-- Day 10: Styled My Experience Section to TimeLine Section, Componentized, and added My projects Section,
+## Deploy on Vercel
 
-- Day 11: Converted Experience Section to Timeline, and Added Projects Section with Slider.
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-- Day 12: Working on GitHub Calendar.
-
-- Day 13: Added Technical Skills Section with TypeScript
-
-- Day 14: Fixed Issues with Technical Skills, and Changed the UI
-
-- Day 15: Added Copy Buttons and Fixed Styling Issues.
-
-- Day 16: Added Footer, and changed it's styling.
-
-- Day 17: Removed Unnecessary Files, Design Fixes.
-
-- Day 18: Another Code Clean up/Fix
-
-- Day 19: Image Compression Done.
-
-- Day 20: Contact Form Service Added, and added Validations.
-
-- Day 21: Added Intersection Observer Hook, now we re-animate elements.
-
-- Day 22: Added Blue theme and maintaining it in overall project.
-
-- Day 23: Colors Maintained across project using theme.
-
-- Day 24: Fixed Eslint Errors
-
-## My Learnings
-
-- Basic types
-- Type Aliases
-- Structuring a TypeScript Project, with "tsconfig.json" file
-- Interfaces, and its inheritance with classes / OOPS
-- Generic types
-- Type Combinations using Intersection and Union Operators - "&", "|"
-- Classes, Abstraction, Inheritance, Encapsulation using TypeScript features.
-- Type Inference
-- Usage of "unknown" type than "any" type.
-- Handling React Components and Contexts with TypeScript.
-- Handling Ref's with TypeScript
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

next.config.ts

@@ -0,0 +1,9 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  experimental: {
+    optimizePackageImports: ["@chakra-ui/react"],
+  },
+};
+
+export default nextConfig;

package.json

@@ -1,44 +1,37 @@
 {
-  "name": "frontend",
+  "name": "next",
+  "version": "1.3.0-next",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "gen": "npx @chakra-ui/cli typegen ./src/styles/theme.ts"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "axios": "^1.6.1",
-    "framer-motion": "^11.1.7",
-    "nanoid": "^5.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-ga4": "^2.1.0",
-    "react-github-calendar": "^4.0.1",
-    "react-icons": "^5.1.0",
+    "@chakra-ui/react": "^3.1.1",
+    "@emotion/react": "^11.13.3",
+    "framer-motion": "^11.11.11",
+    "next": "15.0.3",
+    "next-themes": "^0.4.3",
+    "nodemailer": "^6.9.16",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-github-calendar": "^4.5.1",
+    "react-icons": "^5.3.0",
     "react-slick": "^0.30.2",
-    "react-vertical-timeline-component": "^3.6.0",
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-slick": "^0.23.12",
-    "@types/react-vertical-timeline-component": "^3.3.6",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "jquery": ">=1.8.0",
-    "typescript": "^5.0.2",
-    "vite": "^5.2.10"
+    "@types/node": "^20",
+    "@types/nodemailer": "^6.4.17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-slick": "^0.23.13",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "typescript": "^5"
   },
-  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "author": "Sayyed Sharuk<[email protected]>"
 }