├── src
    ├── app
    │   ├── favicon.ico
    │   ├── providers.tsx
    │   ├── opengraph-image.tsx
    │   ├── twitter-image.tsx
    │   ├── page.tsx
    │   ├── layout.tsx
    │   └── globals.css
    ├── components
    │   ├── sections
    │   │   ├── footer.tsx
    │   │   ├── education.tsx
    │   │   ├── experience.tsx
    │   │   ├── projects.tsx
    │   │   ├── skills.tsx
    │   │   ├── about-me.tsx
    │   │   ├── achievements.tsx
    │   │   ├── github.tsx
    │   │   ├── header.tsx
    │   │   ├── leetcode.tsx
    │   │   ├── blog.tsx
    │   │   ├── navbar.tsx
    │   │   └── contact.tsx
    │   ├── ui
    │   │   ├── FluidCursor.tsx
    │   │   ├── grid-pattern.tsx
    │   │   ├── theme-toggle.tsx
    │   │   ├── github-star-button.tsx
    │   │   └── scroll-to-top.tsx
    │   └── constants
    │   │   └── data.ts
    └── hooks
    │   └── use-FluidCursor.ts
├── public
    ├── profile-gif.gif
    └── profile-image.jpg
├── postcss.config.mjs
├── next-env.d.ts
├── .prettierrc
├── next.config.ts
├── .prettierignore
├── eslint.config.mjs
├── tsconfig.json
├── LICENSE
├── package.json
├── .vscode
    └── settings.json
├── .gitignore
└── README.md


/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shasbinas/my-portfolio-nextjs/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/public/profile-gif.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shasbinas/my-portfolio-nextjs/HEAD/public/profile-gif.gif


--------------------------------------------------------------------------------
/public/profile-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shasbinas/my-portfolio-nextjs/HEAD/public/profile-image.jpg


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | /// <reference path="./.next/types/routes.d.ts" />
4 | 
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
7 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "semi": true,
 3 |   "trailingComma": "es5",
 4 |   "singleQuote": false,
 5 |   "printWidth": 80,
 6 |   "tabWidth": 2,
 7 |   "useTabs": false,
 8 |   "arrowParens": "always",
 9 |   "endOfLine": "lf",
10 |   "bracketSpacing": true,
11 |   "jsxSingleQuote": false,
12 |   "plugins": []
13 | }
14 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from "next";
 2 | 
 3 | const nextConfig: NextConfig = {
 4 |   images: {
 5 |     remotePatterns: [
 6 |       {
 7 |         protocol: "https",
 8 |         hostname: "skillicons.dev",
 9 |       },
10 |     ],
11 |     dangerouslyAllowSVG: true,
12 |   },
13 | };
14 | 
15 | export default nextConfig;
16 | 


--------------------------------------------------------------------------------
/src/components/sections/footer.tsx:
--------------------------------------------------------------------------------
 1 | import { ABOUT_ME } from "@/components/constants/data";
 2 | 
 3 | export default function Footer() {
 4 |   return (
 5 |     <footer className="py-10">
 6 |       <div className="glass-panel text-center text-sm text-muted-foreground">
 7 |         © {new Date().getFullYear()} {ABOUT_ME.name} · crafted in Next.js
 8 |       </div>
 9 |     </footer>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/providers.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { ThemeProvider } from "next-themes";
 4 | 
 5 | export function Providers({ children }: { children: React.ReactNode }) {
 6 |   return (
 7 |     <ThemeProvider
 8 |       attribute="class"
 9 |       defaultTheme="dark"
10 |       enableSystem
11 |       disableTransitionOnChange
12 |     >
13 |       {children}
14 |     </ThemeProvider>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/ui/FluidCursor.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useRef } from "react";
 3 | import useFluidCursor from "@/hooks/use-FluidCursor";
 4 | 
 5 | const FluidCursor = () => {
 6 |   const canvasRef = useRef<HTMLCanvasElement>(null);
 7 |   useFluidCursor(canvasRef);
 8 | 
 9 |   return (
10 |     <div className="fixed top-0 left-0 z-0 pointer-events-none">
11 |       <canvas ref={canvasRef} className="w-screen h-screen" />
12 |     </div>
13 |   );
14 | };
15 | 
16 | export default FluidCursor;
17 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | .pnp
 4 | .pnp.js
 5 | 
 6 | # Testing
 7 | coverage
 8 | 
 9 | # Next.js
10 | .next
11 | out
12 | build
13 | dist
14 | 
15 | # Production
16 | *.min.js
17 | *.min.css
18 | 
19 | # Misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # Debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # Local env files
29 | .env*.local
30 | .env
31 | 
32 | # Vercel
33 | .vercel
34 | 
35 | # TypeScript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 
39 | # Package managers
40 | package-lock.json
41 | yarn.lock
42 | pnpm-lock.yaml
43 | 
44 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 |   {
15 |     rules: {
16 |       // Disable ESLint formatting rules that conflict with Prettier
17 |       "prettier/prettier": "off",
18 |     },
19 |   },
20 | ];
21 | 
22 | export default eslintConfig;
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/ui/grid-pattern.tsx:
--------------------------------------------------------------------------------
 1 | export default function GridPattern() {
 2 |   return (
 3 |     <div
 4 |       className="absolute inset-0 z-0 w-full h-full grid-pattern pointer-events-none"
 5 |       style={{
 6 |         backgroundImage: `
 7 |           radial-gradient(circle at 25% 25%, rgba(74, 222, 128, 0.2), transparent 40%),
 8 |           radial-gradient(circle at 80% 10%, rgba(192, 132, 252, 0.18), transparent 45%),
 9 |           linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
10 |           linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px)
11 |         `,
12 |         backgroundSize: "auto, auto, 60px 60px, 60px 60px",
13 |         mixBlendMode: "screen",
14 |       }}
15 |     />
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/ui/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useTheme } from "next-themes";
 4 | import { useEffect, useState } from "react";
 5 | import { FiSun, FiMoon } from "react-icons/fi";
 6 | 
 7 | export default function ThemeToggle() {
 8 |   const { theme, setTheme } = useTheme();
 9 |   const [mounted, setMounted] = useState(false);
10 | 
11 |   useEffect(() => {
12 |     setMounted(true);
13 |   }, []);
14 | 
15 |   if (!mounted) {
16 |     return (
17 |       <div className="p-2 text-sm rounded-md bg-background box border border-border">
18 |         <div className="w-4 h-4" /> {/* Matches icon size */}
19 |       </div>
20 |     );
21 |   }
22 | 
23 |   return (
24 |     <button
25 |       className="p-2 text-sm rounded-md bg-background box border border-border"
26 |       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
27 |       aria-label="Toggle theme"
28 |     >
29 |       {theme === "dark" ? <FiMoon size={16} /> : <FiSun size={16} />}
30 |     </button>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Shasbin  AS
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/app/opengraph-image.tsx:
--------------------------------------------------------------------------------
 1 | import { ImageResponse } from "next/og";
 2 | import { ABOUT_ME, SOCIAL_LINKS } from "../components/constants/data";
 3 | 
 4 | export const runtime = "edge";
 5 | export const alt = `${ABOUT_ME.name} - Portfolio Website`;
 6 | export const size = {
 7 |   width: 1200,
 8 |   height: 630,
 9 | };
10 | export const contentType = "image/png";
11 | 
12 | export default async function Image() {
13 |   return new ImageResponse(
14 |     (
15 |       <div
16 |         style={{
17 |           height: "100%",
18 |           width: "100%",
19 |           display: "flex",
20 |           flexDirection: "column",
21 |           alignItems: "center",
22 |           justifyContent: "center",
23 |           background: "#111",
24 |         }}
25 |       >
26 |         <h1 style={{ fontSize: 64, color: "#fff", fontWeight: 700, margin: 0 }}>
27 |           {ABOUT_ME.name}
28 |         </h1>
29 |         <p style={{ fontSize: 32, color: "#bbb", margin: "16px 0 0 0" }}>
30 |           {ABOUT_ME.title}
31 |         </p>
32 |         <p style={{ fontSize: 24, color: "#888", margin: "32px 0 0 0" }}>
33 |           {SOCIAL_LINKS.github.replace("https://github.com/", "github.com/")}
34 |         </p>
35 |       </div>
36 |     ),
37 |     {
38 |       width: 1200,
39 |       height: 630,
40 |     }
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/src/app/twitter-image.tsx:
--------------------------------------------------------------------------------
 1 | import { ImageResponse } from "next/og";
 2 | import { ABOUT_ME, SOCIAL_LINKS } from "../components/constants/data";
 3 | 
 4 | export const runtime = "edge";
 5 | export const alt = `${ABOUT_ME.name} - Portfolio Website`;
 6 | export const size = {
 7 |   width: 1200,
 8 |   height: 630,
 9 | };
10 | export const contentType = "image/png";
11 | 
12 | export default async function TwitterImage() {
13 |   return new ImageResponse(
14 |     (
15 |       <div
16 |         style={{
17 |           height: "100%",
18 |           width: "100%",
19 |           display: "flex",
20 |           flexDirection: "column",
21 |           alignItems: "center",
22 |           justifyContent: "center",
23 |           background: "#111",
24 |         }}
25 |       >
26 |         <h1 style={{ fontSize: 64, color: "#fff", fontWeight: 700, margin: 0 }}>
27 |           {ABOUT_ME.name}
28 |         </h1>
29 |         <p style={{ fontSize: 32, color: "#bbb", margin: "16px 0 0 0" }}>
30 |           {ABOUT_ME.title}
31 |         </p>
32 |         <p style={{ fontSize: 24, color: "#888", margin: "32px 0 0 0" }}>
33 |           {SOCIAL_LINKS.github.replace("https://github.com/", "github.com/")}
34 |         </p>
35 |       </div>
36 |     ),
37 |     {
38 |       width: 1200,
39 |       height: 630,
40 |     }
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-portfolio-nextjs",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/shasbinas/my-portfolio-nextjs.git"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "bugs": {
14 |     "url": "https://github.com/shasbinas/my-portfolio-nextjs/issues"
15 |   },
16 |   "homepage": "https://github.com/shasbinas/my-portfolio-nextjs#readme",
17 |   "scripts": {
18 |     "dev": "next dev --turbopack",
19 |     "build": "next build",
20 |     "start": "next start",
21 |     "lint": "next lint",
22 |     "format": "prettier --write .",
23 |     "format:check": "prettier --check ."
24 |   },
25 |   "dependencies": {
26 |     "@vercel/analytics": "^1.5.0",
27 |     "framer-motion": "^12.23.25",
28 |     "lucide-react": "^0.536.0",
29 |     "next": "^15.5.6",
30 |     "next-themes": "^0.4.6",
31 |     "react": "19.1.0",
32 |     "react-dom": "19.1.0",
33 |     "react-github-calendar": "^4.5.9",
34 |     "react-icons": "^5.5.0"
35 |   },
36 |   "devDependencies": {
37 |     "@eslint/eslintrc": "^3",
38 |     "@tailwindcss/postcss": "^4",
39 |     "@types/node": "^20",
40 |     "@types/react": "^19",
41 |     "@types/react-dom": "^19",
42 |     "eslint": "^9",
43 |     "eslint-config-next": "15.4.5",
44 |     "eslint-config-prettier": "^10.1.8",
45 |     "prettier": "^3.6.2",
46 |     "tailwindcss": "^4",
47 |     "typescript": "^5"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/sections/education.tsx:
--------------------------------------------------------------------------------
 1 | import { EDUCATION } from "@/components/constants/data";
 2 | import Link from "next/link";
 3 | import { MdOutlineArrowOutward } from "react-icons/md";
 4 | 
 5 | export default function Education() {
 6 |   return (
 7 |     <section className="py-6 space-y-4">
 8 |       <div className="flex flex-col gap-2">
 9 |         <h2 className="section-title">education.</h2>
10 |         <p className="text-sm text-muted-foreground max-w-2xl">
11 |           Continuous learning through formal programs and self-directed
12 |           research.
13 |         </p>
14 |       </div>
15 | 
16 |       <div className="flex flex-col gap-4">
17 |         {EDUCATION.map((edu, index) => (
18 |           <div key={index} className="tilt-card p-6 space-y-3 w-full">
19 |             <div className="flex items-center justify-between gap-2">
20 |               <h3 className="text-lg font-semibold">{edu.degree}</h3>
21 |               <span className="text-xs uppercase tracking-[0.35em] text-muted-foreground">
22 |                 {edu.period}
23 |               </span>
24 |             </div>
25 |             <Link
26 |               href={edu.institutionLink || "#"}
27 |               target="_blank"
28 |               rel="noopener noreferrer"
29 |               className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-[hsl(var(--border-hover))]"
30 |             >
31 |               {edu.institution}
32 |               <MdOutlineArrowOutward className="w-4 h-4" />
33 |             </Link>
34 |           </div>
35 |         ))}
36 |       </div>
37 |     </section>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/ui/github-star-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import Link from "next/link";
 3 | import { SiGithub } from "react-icons/si";
 4 | 
 5 | export default function GithubStarButton() {
 6 |   return (
 7 |     <div className="fixed bottom-6 left-6 z-50">
 8 |       <Link
 9 |         href="https://github.com/shasbinas/my-portfolio-nextjs"
10 |         target="_blank"
11 |         rel="noopener noreferrer"
12 |         className="relative w-12 h-12 bg-accent rounded-full shadow-md transition-[background-color,box-shadow,transform] duration-300 hover:shadow-lg hover:scale-110 group flex items-center justify-center"
13 |         aria-label="Star this repository on GitHub"
14 |       >
15 |         <SiGithub
16 |           size={18}
17 |           color="hsl(var(--foreground))"
18 |           className="transition-transform duration-300 group-hover:scale-110"
19 |         />
20 | 
21 |         {/* Tooltip */}
22 |         <span className="absolute left-full ml-3 px-3 py-1.5 text-xs font-medium text-white bg-black border border-gray-700 rounded-lg shadow-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-300 flex items-center">
23 |           Give it a ⭐ on GitHub!
24 |           {/* Tooltip arrow pointing left */}
25 |           <span className="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-r-[6px] border-r-gray-700"></span>
26 |           <span className="absolute right-full top-1/2 -translate-y-1/2 ml-[1px] w-0 h-0 border-t-[5px] border-t-transparent border-b-[5px] border-b-transparent border-r-[5px] border-r-black"></span>
27 |         </span>
28 |       </Link>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "workbench.colorCustomizations": {
 3 |     "activityBar.activeBackground": "#ab307e",
 4 |     "activityBar.background": "#ab307e",
 5 |     "activityBar.foreground": "#e7e7e7",
 6 |     "activityBar.inactiveForeground": "#e7e7e799",
 7 |     "activityBarBadge.background": "#25320e",
 8 |     "activityBarBadge.foreground": "#e7e7e7",
 9 |     "commandCenter.border": "#e7e7e799",
10 |     "sash.hoverBorder": "#ab307e",
11 |     "statusBar.background": "#832561",
12 |     "statusBar.foreground": "#e7e7e7",
13 |     "statusBarItem.hoverBackground": "#ab307e",
14 |     "statusBarItem.remoteBackground": "#832561",
15 |     "statusBarItem.remoteForeground": "#e7e7e7",
16 |     "titleBar.activeBackground": "#832561",
17 |     "titleBar.activeForeground": "#e7e7e7",
18 |     "titleBar.inactiveBackground": "#83256199",
19 |     "titleBar.inactiveForeground": "#e7e7e799"
20 |   },
21 |   "peacock.color": "#832561",
22 |   "editor.defaultFormatter": "esbenp.prettier-vscode",
23 |   "editor.formatOnSave": true,
24 |   "editor.codeActionsOnSave": {
25 |     "source.fixAll.eslint": "explicit"
26 |   },
27 |   "[javascript]": {
28 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
29 |   },
30 |   "[javascriptreact]": {
31 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
32 |   },
33 |   "[typescript]": {
34 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
35 |   },
36 |   "[typescriptreact]": {
37 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
38 |   },
39 |   "[json]": {
40 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
41 |   },
42 |   "[jsonc]": {
43 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
44 |   },
45 |   "[css]": {
46 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
47 |   },
48 |   "[scss]": {
49 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
50 |   },
51 |   "[html]": {
52 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
53 |   },
54 |   "[markdown]": {
55 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import GridPattern from "@/components/ui/grid-pattern";
 2 | import ScrollToTop from "@/components/ui/scroll-to-top";
 3 | import GithubStarButton from "@/components/ui/github-star-button";
 4 | import Navbar from "@/components/sections/navbar";
 5 | import Header from "@/components/sections/header";
 6 | import AboutMe from "@/components/sections/about-me";
 7 | import Skills from "@/components/sections/skills";
 8 | import Projects from "@/components/sections/projects";
 9 | import Experience from "@/components/sections/experience";
10 | import Education from "@/components/sections/education";
11 | import Achievements from "@/components/sections/achievements";
12 | import Github from "@/components/sections/github";
13 | import LeetCode from "@/components/sections/leetcode";
14 | // import Blog from "@/components/sections/blog";
15 | import Contact from "@/components/sections/contact";
16 | import Footer from "@/components/sections/footer";
17 | 
18 | export default function Home() {
19 |   return (
20 |     <div className="font-sans min-h-screen flex flex-col items-center justify-center relative overflow-hidden">
21 |       <GridPattern />
22 |       <div className="aurora-glow" aria-hidden />
23 | 
24 |       <main className="relative z-10 max-w-5xl w-full mx-auto px-4 sm:px-6 md:px-8 pb-16 space-y-10 pt-20 lg:pt-24">
25 |         <Navbar />
26 |         <ScrollToTop />
27 |         <GithubStarButton />
28 | 
29 |         <section id="header">
30 |           <Header />
31 |         </section>
32 |         <section id="about">
33 |           <AboutMe />
34 |         </section>
35 |         <section id="skills">
36 |           <Skills />
37 |         </section>
38 |         <section id="github">
39 |           <Github />
40 |         </section>
41 |         <section id="leetcode">
42 |           <LeetCode />
43 |         </section>
44 |         <section id="projects">
45 |           <Projects />
46 |         </section>
47 |         <section id="achievements">
48 |           <Achievements />
49 |         </section>
50 |         <section id="experience">
51 |           <Experience />
52 |         </section>
53 |         <section id="education">
54 |           <Education />
55 |         </section>
56 |         <section id="contact">
57 |           <Contact />
58 |         </section>
59 |         <Footer />
60 |       </main>
61 |     </div>
62 |   );
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/sections/experience.tsx:
--------------------------------------------------------------------------------
 1 | import { EXPERIENCE } from "@/components/constants/data";
 2 | import Link from "next/link";
 3 | import { MdOutlineArrowOutward } from "react-icons/md";
 4 | 
 5 | export default function Experience() {
 6 |   return (
 7 |     <section className="py-6 space-y-4">
 8 |       <div className="flex flex-col gap-2">
 9 |         <h2 className="section-title">work experience.</h2>
10 |         <p className="text-sm text-muted-foreground max-w-2xl">
11 |           Collaborating with teams to ship resilient platforms, streamline
12 |           developer workflows, and ship products with a focus on security,
13 |           scale, and craft.
14 |         </p>
15 |       </div>
16 | 
17 |       <div className="grid gap-5">
18 |         {EXPERIENCE.map((exp, index) => (
19 |           <div key={index} className="tilt-card p-6 space-y-4">
20 |             <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
21 |               <div>
22 |                 <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">
23 |                   {exp.period}
24 |                 </p>
25 |                 <h3 className="text-xl font-semibold mt-1">{exp.role}</h3>
26 |                 <Link
27 |                   href={exp.companyLink || "#"}
28 |                   target="_blank"
29 |                   rel="noopener noreferrer"
30 |                   className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-[hsl(var(--border-hover))]"
31 |                 >
32 |                   {exp.company}
33 |                   <MdOutlineArrowOutward className="w-4 h-4" />
34 |                 </Link>
35 |               </div>
36 | 
37 |               <span className="text-xs font-mono uppercase tracking-[0.3em] text-muted-foreground">
38 |                 {exp.location}
39 |               </span>
40 |             </div>
41 | 
42 |             <p className="text-sm text-muted-foreground leading-relaxed">
43 |               {exp.description}
44 |             </p>
45 | 
46 |             <div className="flex flex-wrap gap-1.5">
47 |               {exp.skills.map((skill) => (
48 |                 <span key={skill} className="badge-chip">
49 |                   {skill}
50 |                 </span>
51 |               ))}
52 |             </div>
53 |           </div>
54 |         ))}
55 |       </div>
56 |     </section>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/src/components/sections/projects.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { PROJECTS } from "@/components/constants/data";
 3 | 
 4 | export default function Projects() {
 5 |   return (
 6 |     <section className="py-6 space-y-4">
 7 |       <div className="flex flex-col gap-2">
 8 |         <h2 className="section-title">featured builds.</h2>
 9 |         <p className="text-sm text-muted-foreground max-w-2xl">
10 |           Shipping polished experiences from rapid prototypes to
11 |           production-ready systems. Each build blends performance, resilience,
12 |           and a touch of futurism.
13 |         </p>
14 |       </div>
15 | 
16 |       <div className="grid gap-5 md:grid-cols-2">
17 |         {PROJECTS.map((project) => (
18 |           <div key={project.name} className="tilt-card p-5 space-y-4">
19 |             <div className="flex items-start justify-between gap-3">
20 |               <div>
21 |                 <h3 className="text-xl font-semibold tracking-tight">
22 |                   {project.name}
23 |                 </h3>
24 |                 <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground mt-1">
25 |                   featured case study
26 |                 </p>
27 |               </div>
28 |               <div className="flex gap-2">
29 |                 {project.link && (
30 |                   <Link
31 |                     href={project.link}
32 |                     target="_blank"
33 |                     rel="noopener noreferrer"
34 |                     className="glow-button text-xs"
35 |                     aria-label="Open live project"
36 |                   >
37 |                     live
38 |                   </Link>
39 |                 )}
40 |                 <Link
41 |                   href={project.github}
42 |                   target="_blank"
43 |                   rel="noopener noreferrer"
44 |                   className="glow-button glow-button--ghost text-xs"
45 |                   aria-label="View source code"
46 |                 >
47 |                   code
48 |                 </Link>
49 |               </div>
50 |             </div>
51 | 
52 |             <p className="text-sm text-muted-foreground leading-relaxed">
53 |               {project.description}
54 |             </p>
55 | 
56 |             <div className="flex flex-wrap gap-1.5">
57 |               {project.tech.map((tech) => (
58 |                 <span key={tech} className="badge-chip">
59 |                   {tech}
60 |                 </span>
61 |               ))}
62 |             </div>
63 |           </div>
64 |         ))}
65 |       </div>
66 |     </section>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-to-top.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useState, useEffect } from "react";
 3 | import { FaArrowUp } from "react-icons/fa";
 4 | 
 5 | export default function ScrollToTop() {
 6 |   const [isVisible, setIsVisible] = useState(false);
 7 |   const [scrollProgress, setScrollProgress] = useState(0);
 8 | 
 9 |   useEffect(() => {
10 |     const handleScroll = () => {
11 |       const scrollTop = window.pageYOffset;
12 |       const docHeight =
13 |         document.documentElement.scrollHeight - window.innerHeight;
14 |       const scrollPercent = (scrollTop / docHeight) * 100;
15 | 
16 |       setIsVisible(scrollTop > 100);
17 |       setScrollProgress(scrollPercent);
18 |     };
19 | 
20 |     window.addEventListener("scroll", handleScroll);
21 |     return () => window.removeEventListener("scroll", handleScroll);
22 |   }, []);
23 | 
24 |   const scrollToTop = () => {
25 |     window.scrollTo({ top: 0, behavior: "smooth" });
26 |   };
27 | 
28 |   return (
29 |     <div
30 |       className={`fixed bottom-6 right-6 z-50 transition-[opacity,transform] duration-300 ease-in-out ${
31 |         isVisible
32 |           ? "opacity-100 translate-y-0"
33 |           : "opacity-0 translate-y-4 pointer-events-none"
34 |       }`}
35 |     >
36 |       <button
37 |         onClick={scrollToTop}
38 |         className="relative w-8 h-8 bg-accent rounded-full shadow-md transition-[background-color,box-shadow,transform] duration-300 hover:shadow-lg hover:scale-110 group"
39 |         aria-label="Scroll to top"
40 |       >
41 |         {/* Progress Circle */}
42 |         <svg
43 |           className="absolute inset-0 w-8 h-8 -rotate-90"
44 |           viewBox="0 0 48 48"
45 |         >
46 |           <circle
47 |             cx="24"
48 |             cy="24"
49 |             r="20"
50 |             fill="none"
51 |             stroke="hsl(var(--foreground))"
52 |             strokeWidth="3"
53 |             opacity="0.25"
54 |           />
55 |           <circle
56 |             cx="24"
57 |             cy="24"
58 |             r="20"
59 |             fill="none"
60 |             stroke="hsl(var(--foreground))"
61 |             strokeWidth="3"
62 |             strokeLinecap="round"
63 |             strokeDasharray={125.66}
64 |             className="transition-[stroke-dashoffset] duration-150"
65 |             strokeDashoffset={125.66 * (1 - scrollProgress / 100)}
66 |           />
67 |         </svg>
68 | 
69 |         <div className="absolute inset-0 flex items-center justify-center">
70 |           <FaArrowUp
71 |             size={12}
72 |             color="hsl(var(--foreground))"
73 |             className="transition-transform duration-300 group-hover:-translate-y-0.5"
74 |           />
75 |         </div>
76 |       </button>
77 |     </div>
78 |   );
79 | }
80 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # Snowpack dependency directory (https://snowpack.dev/)
 45 | web_modules/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Optional stylelint cache
 57 | .stylelintcache
 58 | 
 59 | # Optional REPL history
 60 | .node_repl_history
 61 | 
 62 | # Output of 'npm pack'
 63 | *.tgz
 64 | 
 65 | # Yarn Integrity file
 66 | .yarn-integrity
 67 | 
 68 | # dotenv environment variable files
 69 | .env
 70 | .env.*
 71 | !.env.example
 72 | 
 73 | # parcel-bundler cache (https://parceljs.org/)
 74 | .cache
 75 | .parcel-cache
 76 | 
 77 | # Next.js build output
 78 | .next
 79 | out
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and not Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # vuepress v2.x temp and cache directory
 95 | .temp
 96 | .cache
 97 | 
 98 | # Sveltekit cache directory
 99 | .svelte-kit/
100 | 
101 | # vitepress build output
102 | **/.vitepress/dist
103 | 
104 | # vitepress cache directory
105 | **/.vitepress/cache
106 | 
107 | # Docusaurus cache and generated files
108 | .docusaurus
109 | 
110 | # Serverless directories
111 | .serverless/
112 | 
113 | # FuseBox cache
114 | .fusebox/
115 | 
116 | # DynamoDB Local files
117 | .dynamodb/
118 | 
119 | # Firebase cache directory
120 | .firebase/
121 | 
122 | # TernJS port file
123 | .tern-port
124 | 
125 | # Stores VSCode versions used for testing VSCode extensions
126 | .vscode-test
127 | 
128 | # yarn v3
129 | .pnp.*
130 | .yarn/*
131 | !.yarn/patches
132 | !.yarn/plugins
133 | !.yarn/releases
134 | !.yarn/sdks
135 | !.yarn/versions
136 | 
137 | # Vite logs files
138 | vite.config.js.timestamp-*
139 | vite.config.ts.timestamp-*
140 | 


--------------------------------------------------------------------------------
/src/components/sections/skills.tsx:
--------------------------------------------------------------------------------
  1 | import { SKILLS } from "@/components/constants/data";
  2 | import Image from "next/image";
  3 | 
  4 | const SKILL_ICONS: Record<string, string> = {
  5 |   HTML: "html",
  6 |   CSS: "css",
  7 |   JavaScript: "js",
  8 |   TypeScript: "ts",
  9 |   React: "react",
 10 |   "Next.js": "nextjs",
 11 |   "Vue.js": "vue",
 12 |   Angular: "angular",
 13 |   Redux: "redux",
 14 |   TailwindCSS: "tailwind",
 15 |   Bootstrap: "bootstrap",
 16 |   Sass: "sass",
 17 |   Less: "less",
 18 |   jQuery: "jquery",
 19 |   "Node.js": "nodejs",
 20 |   "Express.js": "express",
 21 |   NestJS: "nestjs",
 22 |   Django: "django",
 23 |   Flask: "flask",
 24 |   "Spring Boot": "spring",
 25 |   "Ruby on Rails": "rails",
 26 |   Laravel: "laravel",
 27 |   "ASP.NET": "dotnet",
 28 |   FastAPI: "fastapi",
 29 |   MongoDB: "mongodb",
 30 |   MySQL: "mysql",
 31 |   PostgreSQL: "postgresql",
 32 |   SQLite: "sqlite",
 33 |   Redis: "redis",
 34 |   Firebase: "firebase",
 35 |   Supabase: "supabase",
 36 |   C: "c",
 37 |   "C++": "cpp",
 38 |   "C#": "cs",
 39 |   Java: "java",
 40 |   Python: "py",
 41 |   Go: "go",
 42 |   Rust: "rust",
 43 |   Ruby: "ruby",
 44 |   PHP: "php",
 45 |   Kotlin: "kotlin",
 46 |   Swift: "swift",
 47 |   Dart: "dart",
 48 |   Scala: "scala",
 49 |   AWS: "aws",
 50 |   Azure: "azure",
 51 |   GCP: "gcp",
 52 |   Docker: "docker",
 53 |   Kubernetes: "kubernetes",
 54 |   Vercel: "vercel",
 55 |   Netlify: "netlify",
 56 |   Heroku: "heroku",
 57 |   "GitHub Actions": "githubactions",
 58 |   Jenkins: "jenkins",
 59 |   "VS Code": "vscode",
 60 |   Git: "git",
 61 |   GitHub: "github",
 62 |   GitLab: "gitlab",
 63 |   Bitbucket: "bitbucket",
 64 |   Postman: "postman",
 65 |   Figma: "figma",
 66 |   Vite: "vite",
 67 |   Webpack: "webpack",
 68 |   Babel: "babel",
 69 |   Jest: "jest",
 70 |   Cypress: "cypress",
 71 |   Linux: "linux",
 72 |   Windows: "windows",
 73 |   MacOS: "apple",
 74 | };
 75 | 
 76 | const SkillBadge = ({ skill }: { skill: string }) => (
 77 |   <span className="skill-chip">
 78 |     {SKILL_ICONS[skill] && (
 79 |       <Image
 80 |         src={`https://skillicons.dev/icons?i=${SKILL_ICONS[skill]}`}
 81 |         alt={`${skill} icon`}
 82 |         width={16}
 83 |         height={16}
 84 |         className="w-4 h-4"
 85 |       />
 86 |     )}
 87 |     {skill}
 88 |   </span>
 89 | );
 90 | 
 91 | const Skills = () => {
 92 |   return (
 93 |     <section className="py-6 space-y-4">
 94 |       <h2 className="section-title w-full">technical skills.</h2>
 95 |       <div className="glass-panel hover-lift space-y-5">
 96 |         {Object.entries(SKILLS).map(([key, skills]) => (
 97 |           <div
 98 |             key={key}
 99 |             className="rounded-2xl border p-4 bg-[hsl(var(--muted)/0.35)] transition-all hover:border-[hsl(var(--border-hover))]"
100 |             style={{ borderColor: "hsl(var(--border) / 0.6)" }}
101 |           >
102 |             <h3 className="text-sm uppercase tracking-[0.35em] text-muted-foreground mb-3">
103 |               {"< " + key + " />"}
104 |             </h3>
105 |             <div className="flex flex-wrap gap-2">
106 |               {skills.map((skill) => (
107 |                 <SkillBadge key={skill} skill={skill} />
108 |               ))}
109 |             </div>
110 |           </div>
111 |         ))}
112 |       </div>
113 |     </section>
114 |   );
115 | };
116 | 
117 | export default Skills;
118 | 


--------------------------------------------------------------------------------
/src/components/sections/about-me.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Link from "next/link";
  4 | import { ABOUT_ME, SOCIAL_LINKS } from "@/components/constants/data";
  5 | import { Mail, FileText } from "lucide-react";
  6 | import { SiLeetcode } from "react-icons/si";
  7 | import { FaGithub, FaLinkedin } from "react-icons/fa";
  8 | 
  9 | // =============================================
 10 | // SOCIAL BUTTONS DATA
 11 | // =============================================
 12 | const SOCIAL_BUTTONS = [
 13 |   {
 14 |     href: SOCIAL_LINKS.github,
 15 |     label: "GitHub",
 16 |     icon: <FaGithub className="w-5 h-5" />,
 17 |   },
 18 |   {
 19 |     href: SOCIAL_LINKS.linkedin,
 20 |     label: "LinkedIn",
 21 |     icon: <FaLinkedin className="w-5 h-5" />,
 22 |   },
 23 |   {
 24 |     href: SOCIAL_LINKS.leetcode,
 25 |     label: "LeetCode",
 26 |     icon: <SiLeetcode className="w-5 h-5" />,
 27 |   },
 28 |   {
 29 |     href: SOCIAL_LINKS.resume,
 30 |     label: "Resume",
 31 |     icon: (
 32 |       <>
 33 |         <FileText className="w-5 h-5" /> Resume
 34 |       </>
 35 |     ),
 36 |     className: "flex items-center gap-2 font-medium",
 37 |   },
 38 |   {
 39 |     href: SOCIAL_LINKS.email,
 40 |     label: "Email",
 41 |     icon: (
 42 |       <>
 43 |         <Mail className="w-5 h-5" /> Email
 44 |       </>
 45 |     ),
 46 |     className: "flex items-center gap-2 font-medium",
 47 |   },
 48 | ];
 49 | 
 50 | const handleSpecialNavigation = (
 51 |   event: React.MouseEvent<HTMLAnchorElement>,
 52 |   href: string
 53 | ) => {
 54 |   if (!href) return;
 55 |   const trimmed = href.trim();
 56 |   if (
 57 |     typeof window !== "undefined" &&
 58 |     (trimmed.startsWith("mailto:") || trimmed.startsWith("tel:"))
 59 |   ) {
 60 |     event.preventDefault();
 61 |     window.location.href = trimmed;
 62 |   }
 63 | };
 64 | 
 65 | // =============================================
 66 | // MAIN COMPONENT
 67 | // =============================================
 68 | export default function AboutMe() {
 69 |   return (
 70 |     <section className="pb-6">
 71 |       <div className="glass-panel hover-lift space-y-6">
 72 |         <div className="space-y-4 text-sm sm:text-base text-muted-foreground leading-relaxed">
 73 |           {ABOUT_ME.description.map((para, i) => (
 74 |             <p key={i}>{para}</p>
 75 |           ))}
 76 |         </div>
 77 | 
 78 |         <div className="flex gap-3 flex-wrap">
 79 |           {SOCIAL_BUTTONS.filter(
 80 |             (btn) => btn.href && btn.href.trim() !== ""
 81 |           ).map((btn) => {
 82 |             const href = btn.href.trim();
 83 |             const isExternal = href.startsWith("http");
 84 | 
 85 |             const isSpecial =
 86 |               href.startsWith("mailto:") || href.startsWith("tel:");
 87 | 
 88 |             if (isExternal) {
 89 |               return (
 90 |                 <Link
 91 |                   key={btn.label}
 92 |                   href={href}
 93 |                   target="_blank"
 94 |                   rel="noopener noreferrer"
 95 |                   className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-foreground/85 tracking-wide transition-all hover-lift ${btn.className || ""}`}
 96 |                   style={{ borderColor: "hsl(var(--border) / 0.6)" }}
 97 |                   aria-label={btn.label}
 98 |                 >
 99 |                   {btn.icon}
100 |                 </Link>
101 |               );
102 |             }
103 | 
104 |             return (
105 |               <a
106 |                 key={btn.label}
107 |                 href={href}
108 |                 onClick={(event) =>
109 |                   isSpecial && handleSpecialNavigation(event, href)
110 |                 }
111 |                 className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-foreground/85 tracking-wide transition-all hover-lift ${btn.className || ""}`}
112 |                 style={{ borderColor: "hsl(var(--border) / 0.6)" }}
113 |                 aria-label={btn.label}
114 |               >
115 |                 {btn.icon}
116 |               </a>
117 |             );
118 |           })}
119 |         </div>
120 |       </div>
121 |     </section>
122 |   );
123 | }
124 | 


--------------------------------------------------------------------------------
/src/components/sections/achievements.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | const PLACEHOLDER_BADGES = [
  4 |   // {
  5 |   //   title: "GitHub Foundations",
  6 |   //   platform: "GitHub",
  7 |   //   description: "GitHub Foundations certification",
  8 |   //   imagePath: "https://images.credly.com/images/024d0122-724d-4c5a-bd83-cfe3c4b7a073/image.png"
  9 |   // },
 10 |   {
 11 |     title: "50 Days Badge",
 12 |     platform: "LeetCode",
 13 |     description: "Solved problems for 50 consecutive days",
 14 |     imagePath: "https://assets.leetcode.com/static_assets/others/2550.gif",
 15 |   },
 16 |   {
 17 |     title: "100 Days Badge",
 18 |     platform: "LeetCode",
 19 |     description: "Solved problems for 100 consecutive days",
 20 |     imagePath:
 21 |       "https://assets.leetcode.com/static_assets/marketing/2024-100.gif",
 22 |   },
 23 |   {
 24 |     title: "Pull Shark",
 25 |     platform: "GitHub",
 26 |     description: "Opened pull requests that have been merged",
 27 |     imagePath:
 28 |       "https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png",
 29 |   },
 30 |   {
 31 |     title: "Quickdraw",
 32 |     platform: "GitHub",
 33 |     description: "Closed an issue or pull request within 5 minutes",
 34 |     imagePath:
 35 |       "https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png",
 36 |   },
 37 |   {
 38 |     title: "YOLO",
 39 |     platform: "GitHub",
 40 |     description: "Merged a pull request without code review",
 41 |     imagePath:
 42 |       "https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png",
 43 |   },
 44 |   {
 45 |     title: "Starstruck",
 46 |     platform: "GitHub",
 47 |     description: "Created a repository that has 16+ stars",
 48 |     imagePath:
 49 |       "https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png",
 50 |   },
 51 |   {
 52 |     title: "Pair Extraordinaire",
 53 |     platform: "GitHub",
 54 |     description: "Co-authored commits on merged pull requests",
 55 |     imagePath:
 56 |       "https://github.githubassets.com/images/modules/profile/achievements/pair-extraordinaire-default.png",
 57 |   },
 58 | ];
 59 | 
 60 | const BadgeCard = ({
 61 |   title,
 62 |   platform,
 63 |   description,
 64 |   imagePath,
 65 | }: (typeof PLACEHOLDER_BADGES)[number]) => (
 66 |   <div className="tilt-card p-4 flex flex-col gap-3">
 67 |     <div className="w-full h-32 md:h-40 rounded-2xl border border-dashed border-[hsl(var(--border)/0.6)] bg-gradient-to-br from-[hsl(var(--accent)/0.25)] to-[hsl(var(--accent-secondary)/0.25)] flex items-center justify-center overflow-hidden">
 68 |       {imagePath ? (
 69 |         // eslint-disable-next-line @next/next/no-img-element
 70 |         <img
 71 |           src={imagePath}
 72 |           alt={title}
 73 |           className="max-w-full max-h-full object-contain p-3"
 74 |         />
 75 |       ) : (
 76 |         <span className="text-xs uppercase tracking-[0.35em] text-muted-foreground font-mono text-center">
 77 |           Badge Image
 78 |         </span>
 79 |       )}
 80 |     </div>
 81 |     <div className="space-y-1 text-center">
 82 |       <p className="text-sm font-semibold">{title}</p>
 83 |       <p className="text-xs uppercase tracking-[0.35em] text-muted-foreground">
 84 |         {platform}
 85 |       </p>
 86 |       <p className="text-xs text-muted-foreground">{description}</p>
 87 |     </div>
 88 |   </div>
 89 | );
 90 | 
 91 | export default function Achievements() {
 92 |   return (
 93 |     <section className="py-6 space-y-4" id="achievements">
 94 |       <div className="flex flex-col gap-2">
 95 |         <h2 className="section-title">achievements.</h2>
 96 |         <p className="text-sm text-muted-foreground max-w-2xl">
 97 |           Showcase GitHub trophies, LeetCode badges, hackathon recognitions, or
 98 |           certifications. Drop your media into any card to keep this reel up to
 99 |           date.
100 |         </p>
101 |       </div>
102 | 
103 |       <div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
104 |         {PLACEHOLDER_BADGES.map((badge) => (
105 |           <BadgeCard key={badge.title} {...badge} />
106 |         ))}
107 |       </div>
108 |     </section>
109 |   );
110 | }
111 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
  1 | import type { Metadata } from "next";
  2 | import { Outfit } from "next/font/google";
  3 | import "./globals.css";
  4 | import { Providers } from "./providers";
  5 | import { Analytics } from "@vercel/analytics/next";
  6 | import FluidCursor from "@/components/ui/FluidCursor";
  7 | 
  8 | const outfit = Outfit({
  9 |   variable: "--font-outfit",
 10 |   subsets: ["latin"],
 11 |   display: "swap",
 12 |   preload: true,
 13 | });
 14 | 
 15 | export const metadata: Metadata = {
 16 |   title: "Shasbin AS  - Portfolio Website",
 17 |   description:
 18 |     "Your portfolio showcasing your development projects and skills. Update this description with your own details.",
 19 |   keywords: [
 20 |     "Shasbin AS ",
 21 |     "Full Stack Developer",
 22 |     "React",
 23 |     "Next.js",
 24 |     "TypeScript",
 25 |     "Web Development",
 26 |     "Portfolio",
 27 |     "Frontend Developer",
 28 |     "Backend Developer",
 29 |     "JavaScript",
 30 |     "Node.js",
 31 |     "Your City",
 32 |     "Your Country",
 33 |   ],
 34 |   authors: [{ name: "Shasbin AS " }],
 35 |   creator: "Shasbin AS ",
 36 |   publisher: "Shasbin AS ",
 37 |   metadataBase: new URL("https://your-portfolio-url.com"),
 38 |   alternates: {
 39 |     canonical: "/",
 40 |   },
 41 |   openGraph: {
 42 |     type: "website",
 43 |     locale: "en_US",
 44 |     url: "https://your-portfolio-url.com",
 45 |     title: "Shasbin AS  - Portfolio Website for a Full Stack Developer",
 46 |     description:
 47 |       "Personal portfolio showcasing skills, projects, experience, and more. Built with modern web technologies.",
 48 |     siteName: "Shasbin AS  Portfolio",
 49 |   },
 50 |   twitter: {
 51 |     card: "summary_large_image",
 52 |     title: "Shasbin AS  - Portfolio Website for a Full Stack Developer",
 53 |     description:
 54 |       "Personal portfolio showcasing skills, projects, experience, and more. Built with modern web technologies.",
 55 |     creator: "@your_twitter_handle",
 56 |   },
 57 |   robots: {
 58 |     index: true,
 59 |     follow: true,
 60 |     googleBot: {
 61 |       index: true,
 62 |       follow: true,
 63 |       "max-video-preview": -1,
 64 |       "max-image-preview": "large",
 65 |       "max-snippet": -1,
 66 |     },
 67 |   },
 68 |   verification: {
 69 |     google: "",
 70 |   },
 71 | };
 72 | 
 73 | export default function RootLayout({
 74 |   children,
 75 | }: Readonly<{
 76 |   children: React.ReactNode;
 77 | }>) {
 78 |   return (
 79 |     <html
 80 |       lang="en"
 81 |       className={`${outfit.variable} dark`}
 82 |       suppressHydrationWarning
 83 |     >
 84 |       <head>
 85 |         <link rel="icon" href="/favicon.ico" />
 86 |         <link rel="preconnect" href="https://fonts.googleapis.com" />
 87 |         <link
 88 |           rel="preconnect"
 89 |           href="https://fonts.gstatic.com"
 90 |           crossOrigin="anonymous"
 91 |         />
 92 |         <link rel="preconnect" href="https://skillicons.dev" />
 93 | 
 94 |         <script
 95 |           type="application/ld+json"
 96 |           dangerouslySetInnerHTML={{
 97 |             __html: JSON.stringify({
 98 |               "@context": "https://schema.org",
 99 |               "@type": "Person",
100 |               name: "Shasbin AS ",
101 |               url: "https://your-portfolio-url.com",
102 |               jobTitle: "Full Stack Developer",
103 |               description:
104 |                 "Personal portfolio showcasing skills, projects, experience, and more. Built with modern web technologies.",
105 |               knowsAbout: [
106 |                 "React",
107 |                 "Next.js",
108 |                 "TypeScript",
109 |                 "JavaScript",
110 |                 "Node.js",
111 |                 "Full Stack Development",
112 |                 "Web Development",
113 |               ],
114 |               sameAs: [
115 |                 "https://github.com/your-github-username",
116 |                 "https://linkedin.com/in/your-linkedin",
117 |                 "https://twitter.com/your-twitter",
118 |               ],
119 |             }),
120 |           }}
121 |         />
122 |       </head>
123 |       <body
124 |         className={`${outfit.className} antialiased`}
125 |         suppressHydrationWarning
126 |       >
127 |         <Providers>{children}</Providers>
128 |         <FluidCursor />
129 |         <Analytics />
130 |       </body>
131 |     </html>
132 |   );
133 | }
134 | 


--------------------------------------------------------------------------------
/src/components/sections/github.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import GitHubCalendar from "react-github-calendar";
  4 | import { useEffect, useState } from "react";
  5 | import { MdOutlineArrowOutward } from "react-icons/md";
  6 | import { SiGithub } from "react-icons/si";
  7 | import Link from "next/link";
  8 | import { USER_NAMES, SOCIAL_LINKS } from "@/components/constants/data";
  9 | 
 10 | const useTheme = () => {
 11 |   const [colorScheme, setColorScheme] = useState<"light" | "dark">("dark");
 12 | 
 13 |   useEffect(() => {
 14 |     const updateTheme = () => {
 15 |       setColorScheme(
 16 |         document.documentElement.classList.contains("dark") ? "dark" : "light"
 17 |       );
 18 |     };
 19 | 
 20 |     updateTheme();
 21 |     const observer = new MutationObserver(updateTheme);
 22 |     observer.observe(document.documentElement, {
 23 |       attributes: true,
 24 |       attributeFilter: ["class"],
 25 |     });
 26 | 
 27 |     return () => observer.disconnect();
 28 |   }, []);
 29 | 
 30 |   return colorScheme;
 31 | };
 32 | 
 33 | export default function Github() {
 34 |   const colorScheme = useTheme();
 35 |   const [stats, setStats] = useState({
 36 |     followers: 0,
 37 |     stars: 0,
 38 |     loading: true,
 39 |     error: "",
 40 |   });
 41 |   const username = USER_NAMES.githubUsername;
 42 | 
 43 |   useEffect(() => {
 44 |     if (!username) return;
 45 | 
 46 |     const controller = new AbortController();
 47 | 
 48 |     const fetchStats = async () => {
 49 |       try {
 50 |         const profilePromise = fetch(
 51 |           `https://api.github.com/users/${username}`,
 52 |           {
 53 |             signal: controller.signal,
 54 |           }
 55 |         ).then((res) => res.json());
 56 | 
 57 |         const gatherStars = async () => {
 58 |           let stars = 0;
 59 |           let page = 1;
 60 |           while (true) {
 61 |             const res = await fetch(
 62 |               `https://api.github.com/users/${username}/repos?per_page=100&page=${page}`,
 63 |               { signal: controller.signal }
 64 |             );
 65 |             const repos = await res.json();
 66 |             if (!Array.isArray(repos) || repos.length === 0) break;
 67 |             stars += repos.reduce(
 68 |               (sum, repo) => sum + (repo?.stargazers_count || 0),
 69 |               0
 70 |             );
 71 |             if (repos.length < 100) break;
 72 |             page += 1;
 73 |           }
 74 |           return stars;
 75 |         };
 76 | 
 77 |         const [profile, stars] = await Promise.all([
 78 |           profilePromise,
 79 |           gatherStars(),
 80 |         ]);
 81 | 
 82 |         setStats({
 83 |           followers: profile?.followers || 0,
 84 |           stars,
 85 |           loading: false,
 86 |           error: "",
 87 |         });
 88 |       } catch {
 89 |         if (controller.signal.aborted) return;
 90 |         setStats((prev) => ({
 91 |           ...prev,
 92 |           loading: false,
 93 |           error: "Unable to fetch GitHub stats.",
 94 |         }));
 95 |       }
 96 |     };
 97 | 
 98 |     fetchStats();
 99 | 
100 |     return () => controller.abort();
101 |   }, [username]);
102 | 
103 |   const pillClasses =
104 |     "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.65rem] uppercase tracking-[0.35em] border-blue-500 bg-blue-500/15 text-blue-500";
105 | 
106 |   return (
107 |     <section className="py-6 space-y-4" id="github">
108 |       <div className="flex flex-col gap-2">
109 |         <h2 className="section-title">github.</h2>
110 |         <p className="text-sm text-muted-foreground">
111 |           Building in public – contributions, experiments, and playful repos.
112 |         </p>
113 |       </div>
114 | 
115 |       <div className="glass-panel hover-lift space-y-4">
116 |         <div className="flex flex-wrap items-center gap-3 text-sm font-mono text-muted-foreground">
117 |           <Link
118 |             href={SOCIAL_LINKS.github}
119 |             target="_blank"
120 |             rel="noopener noreferrer"
121 |             className="inline-flex items-center gap-2 hover:text-[hsl(var(--border-hover))]"
122 |           >
123 |             <SiGithub className="w-4 h-4" />
124 |             {USER_NAMES.githubUsername}
125 |             <MdOutlineArrowOutward className="w-4 h-4" />
126 |           </Link>
127 |           <div className="flex flex-wrap items-center gap-2">
128 |             <span className={pillClasses}>activity</span>
129 |             <span className={pillClasses} aria-label="Total followers">
130 |               followers
131 |               <span className="text-sm font-semibold tracking-normal text-red-800">
132 |                 {stats.loading ? "…" : stats.followers.toLocaleString()}
133 |               </span>
134 |             </span>
135 |             <span className={pillClasses} aria-label="Total stars">
136 |               total stars
137 |               <span className="text-sm font-semibold tracking-normal text-red-800">
138 |                 {stats.loading ? "…" : stats.stars.toLocaleString()}
139 |               </span>
140 |             </span>
141 |           </div>
142 |         </div>
143 | 
144 |         {stats.error && (
145 |           <p className="text-xs text-red-400 font-mono">{stats.error}</p>
146 |         )}
147 | 
148 |         <div
149 |           className="w-full overflow-hidden rounded-2xl border"
150 |           style={{ borderColor: "hsl(var(--border) / 0.4)" }}
151 |         >
152 |           <div className="w-full overflow-x-auto p-4">
153 |             <GitHubCalendar
154 |               username={USER_NAMES.githubUsername}
155 |               blockSize={11}
156 |               blockMargin={4}
157 |               colorScheme={colorScheme}
158 |               fontSize={12}
159 |               style={{ width: "100%" }}
160 |             />
161 |           </div>
162 |         </div>
163 |       </div>
164 |     </section>
165 |   );
166 | }
167 | 


--------------------------------------------------------------------------------
/src/components/constants/data.ts:
--------------------------------------------------------------------------------
  1 | // This file contains constants and data used across the portfolio template.
  2 | // Update the values to personalize your portfolio.
  3 | 
  4 | export const ABOUT_ME = {
  5 |   name: "Shasbin AS",
  6 |   title: "Backend Developer",
  7 |   location: "Irinjalakuda, Thrissur, Kerala, India",
  8 |   email: "shasbin.official@gmail.com",
  9 |   description: [
 10 |     "Hi, I’m Shasbin A.S, a backend developer with a strong focus on building reliable, scalable, and secure server-side applications. I enjoy solving complex problems and turning ideas into efficient APIs and systems.",
 11 |     "I’m passionate about developing secure authentication flows, robust RESTful APIs, and intelligent data-driven applications. I enjoy crafting backend systems that are scalable, maintainable, and built with clean, modern architecture.",
 12 |   ],
 13 |   profileImage: "/profile-image.jpg", // Replace with your profile image
 14 |   profileGif: "/profile-gif.gif", // Replace with your personalised gif
 15 | };
 16 | 
 17 | export const USER_NAMES = {
 18 |   githubUsername: "shasbinas",
 19 |   leetcodeUsername: "shasbinas", // remove or keep blank if you don't have a LeetCode profile
 20 |   //   hashnodeUsername: "your-hashnode-username", // remove or keep blank if you don't have a Hashnode profile
 21 | };
 22 | 
 23 | export const SOCIAL_LINKS = {
 24 |   github: "https://github.com/shasbinas",
 25 |   linkedin: "https://linkedin.com/in/shasbinasdev",
 26 |   // twitter: "https://twitter.com/your-twitter",
 27 |   leetcode: "https://leetcode.com/shasbinas",
 28 |   // peerlist: "https://peerlist.io/your-peerlist", // remove or keep blank if you don't have a Peerlist profile
 29 |   instagram: "",
 30 |   email: "mailto:shasbin.official@gmail.com",
 31 |   // blog: "https://yourblog.com", // remove if you don't have a blog
 32 |   resume:
 33 |     "https://drive.google.com/file/d/1lf2eQpjK10k9CFMpI7HCLGmskxRb3hdT/view?usp=sharing",
 34 |   phone: "+91 9746998909",
 35 |   whatsapp: "https://wa.me/ 9746998909",
 36 | };
 37 | 
 38 | // Contact form endpoint (update with your own Formspree endpoint)
 39 | export const FORM_ENDPOINT = "https://formspree.io/f/your-form-id";
 40 | 
 41 | export const SKILLS = {
 42 |   // Keep only the skills you want to showcase and remove the rest
 43 |   frontend: [
 44 |     "HTML",
 45 |     "CSS",
 46 |     "JavaScript",
 47 |     "TypeScript",
 48 |     "React",
 49 |     "Next.js",
 50 |     "Bootstrap",
 51 |   ],
 52 |   backend: ["Node.js", "Express.js"],
 53 |   databases: ["MongoDB", "MySQL", "PostgreSQL", "Redis"],
 54 |   languages: [
 55 |     "C",
 56 |     "C++",
 57 |     "Java",
 58 |     "Python",
 59 |     "Django",
 60 |     "JavaScript",
 61 |     "TypeScript",
 62 |   ],
 63 |   cloudDevOps: ["AWS", "Docker", "Vercel", "GitHub Actions"],
 64 |   tools: [
 65 |     "VS Code",
 66 |     "Git",
 67 |     "GitHub",
 68 |     "GitLab",
 69 |     "Postman",
 70 |     "Figma",
 71 |     "Jest",
 72 |     "Windows",
 73 |   ],
 74 | };
 75 | 
 76 | export const PROJECTS = [
 77 |   {
 78 |     name: "task-manager-api-ts",
 79 |     description:
 80 |       " A production-ready Task Manager REST API built with TypeScript, Express, PostgreSQL, Prisma, and Redis — featuring secure auth, role-based access, task management, comments, user controls, and Cloudinary uploads.",
 81 |     tech: [
 82 |       "Node.js",
 83 |       "TypeScript",
 84 |       "JWT",
 85 |       "Redis",
 86 |       "PostgreSQL",
 87 |       "Prisma ORM",
 88 |       "argon2",
 89 |       "Cloudinary",
 90 |       "Jest + Supertest",
 91 |     ],
 92 |     link: "",
 93 |     github: "https://github.com/shasbinas/task-manager-api-ts",
 94 |   },
 95 |   {
 96 |     name: "ChronoRoyale-Ecommerce-WebApp",
 97 |     description:
 98 |       "ChronoRoyale is built to deliver a modern e-commerce experience specifically for luxury watches. Users can browse, wishlist, add to cart, and place orders. Admins can manage products, users, and orders with ease.",
 99 |     tech: [
100 |       "Node.js",
101 |       "JavaScript",
102 |       "Bootstrap 5",
103 |       "Handlebars",
104 |       "Chart.js",
105 |       "Express.js",
106 |       "Multer",
107 |       "MongoDBAtlas",
108 |       "JWT",
109 |     ],
110 |     link: "https://chronoroyale-ecommerce-webapp.onrender.com",
111 |     github: "https://github.com/shasbinas/ChronoRoyale-Ecommerce-WebApp.git",
112 |   },
113 |   // Add more projects as needed
114 | ];
115 | 
116 | export const EXPERIENCE = [
117 |   {
118 |     company: "G-Tec Computer Education",
119 |     companyLink: "",
120 |     role: "Full Stack Development Intern",
121 |     period: "Jun 2025 - Feb 2026 (Expected)",
122 |     location: "Onsite",
123 |     description:
124 |       "Working on full-stack development with a focus on backend engineering. Building secure RESTful APIs, implementing caching and session management with Redis, designing scalable architectures, and integrating relational and NoSQL databases. Gaining hands-on experience with containerization, API performance optimization, and modern JavaScript development workflows.",
125 |     skills: [
126 |       "Node.js",
127 |       "Express.js",
128 |       "JavaScript",
129 |       "TypeScript",
130 |       "React",
131 |       "PostgreSQL",
132 |       "MongoDB",
133 |       "Redis",
134 |       "Docker",
135 |       "REST APIs",
136 |       "Backend Architecture",
137 |     ],
138 |   },
139 | ];
140 | 
141 | export const EDUCATION = [
142 |   {
143 |     degree: "Bachelor of Computer Applications (BCA) – Online Degree",
144 |     institution: " Yenepoya University",
145 |     institutionLink: "https://www.yenepoya.edu.in/",
146 |     period: "Oct 2025 - Jan 2028  Expected",
147 |   },
148 |   {
149 |     degree: "Senior Secondary (Plus Two) ",
150 |     institution: "Lbsm Higher Secondary School ",
151 |     // institutionLink: "https://www.yenepoya.edu.in/",
152 |     period: "Jul 2021 - Mar 2023",
153 |   },
154 |   {
155 |     degree: "Secondary (SSLC)",
156 |     institution: "Lbsm Higher Secondary School ",
157 |     // institutionLink: "https://www.yenepoya.edu.in/",
158 |     period: "Jul 2020 - Mar 2021",
159 |   },
160 | 
161 |   // Add more education as needed
162 | ];
163 | 


--------------------------------------------------------------------------------
/src/components/sections/header.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import Image from "next/image";
  5 | import { MdVerified } from "react-icons/md";
  6 | import { FaLocationCrosshairs } from "react-icons/fa6";
  7 | import { ABOUT_ME } from "@/components/constants/data";
  8 | 
  9 | // =============================================
 10 | // TYPE DEFINITIONS
 11 | // =============================================
 12 | interface ProfileImageProps {
 13 |   isHovering: boolean;
 14 |   setIsHovering: (hovering: boolean) => void;
 15 | }
 16 | 
 17 | // interface VerifiedBadgeProps {
 18 | //   showTooltip: boolean;
 19 | //   setShowTooltip: (show: boolean) => void;
 20 | // }
 21 | 
 22 | interface LocationTimeProps {
 23 |   currentTime: string;
 24 | }
 25 | 
 26 | // =============================================
 27 | // CUSTOM HOOKS
 28 | // =============================================
 29 | const useISTTime = () => {
 30 |   const [currentTime, setCurrentTime] = useState("");
 31 | 
 32 |   useEffect(() => {
 33 |     const updateTime = () => {
 34 |       const timeString = new Date().toLocaleTimeString("en-IN", {
 35 |         timeZone: "Asia/Kolkata",
 36 |         hour12: true,
 37 |         hour: "2-digit",
 38 |         minute: "2-digit",
 39 |         second: "2-digit",
 40 |       });
 41 |       setCurrentTime(timeString);
 42 |     };
 43 | 
 44 |     updateTime();
 45 |     const interval = setInterval(updateTime, 1000);
 46 |     return () => clearInterval(interval);
 47 |   }, []);
 48 | 
 49 |   return currentTime;
 50 | };
 51 | 
 52 | // =============================================
 53 | // UI COMPONENTS
 54 | // =============================================
 55 | const ProfileImage = ({ isHovering, setIsHovering }: ProfileImageProps) => (
 56 |   <div className="flex-shrink-0 relative">
 57 |     <div
 58 |       className="w-28 h-28 rounded-3xl overflow-hidden border border-border cursor-pointer duration-300 hover-lift"
 59 |       onMouseEnter={() => setIsHovering(true)}
 60 |       onMouseLeave={() => setIsHovering(false)}
 61 |     >
 62 |       {isHovering ? (
 63 |         <Image
 64 |           src={ABOUT_ME.profileGif}
 65 |           alt="Profile GIF"
 66 |           width={112}
 67 |           height={112}
 68 |           className="w-full h-full object-cover"
 69 |           unoptimized
 70 |         />
 71 |       ) : (
 72 |         <Image
 73 |           src={ABOUT_ME.profileImage}
 74 |           alt={ABOUT_ME.name}
 75 |           width={112}
 76 |           height={112}
 77 |           className="w-full h-full object-cover"
 78 |           priority
 79 |         />
 80 |       )}
 81 |     </div>
 82 |     <span className="absolute -inset-3 blur-2xl bg-gradient-to-br from-[hsl(var(--accent)/0.45)] to-[hsl(var(--accent-secondary)/0.35)] opacity-60 pointer-events-none"></span>
 83 |   </div>
 84 | );
 85 | 
 86 | const VerifiedBadge = () => (
 87 |   <div className="inline-flex items-center">
 88 |     <MdVerified className="w-5 h-5 text-blue-500" />
 89 |   </div>
 90 | );
 91 | 
 92 | const LocationTime = ({ currentTime }: LocationTimeProps) => (
 93 |   <div className="hidden md:flex flex-col items-end gap-2 text-right text-sm">
 94 |     <div className="contact-card flex items-center gap-2 text-muted-foreground">
 95 |       <FaLocationCrosshairs className="w-4 h-4 text-[hsl(var(--border-hover))]" />
 96 |       <span className="font-mono uppercase tracking-wide">
 97 |         {ABOUT_ME.location}
 98 |       </span>
 99 |     </div>
100 |     <div className="contact-card font-mono text-foreground">
101 |       {currentTime ? `${currentTime} IST` : "Loading IST..."}
102 |     </div>
103 |   </div>
104 | );
105 | 
106 | // =============================================
107 | // MAIN COMPONENT
108 | // =============================================
109 | const Header = () => {
110 |   const currentTime = useISTTime();
111 |   const [isHovering, setIsHovering] = useState<boolean>(false);
112 | 
113 |   return (
114 |     <section className="pt-4">
115 |       <div className="glass-panel hover-lift space-y-6">
116 |         <div className="flex flex-col gap-6 md:flex-row md:items-center">
117 |           <ProfileImage isHovering={isHovering} setIsHovering={setIsHovering} />
118 | 
119 |           <div className="flex-1 space-y-3">
120 |             <div className="flex flex-wrap items-center gap-3">
121 |               <h1 className="text-3xl font-semibold tracking-tight">
122 |                 {ABOUT_ME.name}
123 |               </h1>
124 |               <VerifiedBadge />
125 |             </div>
126 |             <p className="text-sm uppercase tracking-[0.35em] text-muted-foreground">
127 |               {ABOUT_ME.title}
128 |             </p>
129 |             <p className="text-sm text-muted-foreground leading-relaxed max-w-2xl">
130 |               {ABOUT_ME.description[0]}
131 |             </p>
132 |           </div>
133 | 
134 |           <LocationTime currentTime={currentTime} />
135 |         </div>
136 | 
137 |         <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
138 |           <div className="contact-card">
139 |             <p className="text-blue-500 uppercase tracking-[0.3em] text-[0.6rem] mb-1">
140 |               availability
141 |             </p>
142 |             <p className="font-semibold">
143 |               Open to remote collabs · 9:00 AM - 7:00 PM IST
144 |             </p>
145 |           </div>
146 |           <div className="contact-card">
147 |             <p className="text-blue-500 uppercase tracking-[0.3em] text-[0.6rem] mb-1">
148 |               speciality
149 |             </p>
150 |             <p className="font-semibold">Backend systems & secure APIs</p>
151 |           </div>
152 |           <div className="contact-card">
153 |             <p className="text-blue-500 uppercase tracking-[0.3em] text-[0.6rem] mb-1">
154 |               timezone
155 |             </p>
156 |             <p className="font-semibold">
157 |               {currentTime ? `${currentTime} IST` : "Loading IST..."}
158 |             </p>
159 |             <p className="text-xs text-muted-foreground">
160 |               Asia/Kolkata · UTC+05:30
161 |             </p>
162 |           </div>
163 |         </div>
164 |       </div>
165 |     </section>
166 |   );
167 | };
168 | 
169 | export default Header;
170 | 


--------------------------------------------------------------------------------
/src/components/sections/leetcode.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Link from "next/link";
  4 | import { useEffect, useState } from "react";
  5 | import { MdOutlineArrowOutward } from "react-icons/md";
  6 | import { SiLeetcode } from "react-icons/si";
  7 | import { USER_NAMES, SOCIAL_LINKS } from "@/components/constants/data";
  8 | 
  9 | // =============================================
 10 | // TYPES & API
 11 | // =============================================
 12 | interface LeetCodeStats {
 13 |   totalSolved: number;
 14 |   totalQuestions: number;
 15 |   easySolved: number;
 16 |   totalEasy: number;
 17 |   mediumSolved: number;
 18 |   totalMedium: number;
 19 |   hardSolved: number;
 20 |   totalHard: number;
 21 |   ranking: number;
 22 |   recentSubmissions?: {
 23 |     title: string;
 24 |     statusDisplay: string;
 25 |     timestamp: string | number;
 26 |   }[];
 27 | }
 28 | 
 29 | const fetchLeetCodeStats = async (
 30 |   username: string
 31 | ): Promise<LeetCodeStats | null> => {
 32 |   try {
 33 |     const response = await fetch(`https://leetscan.vercel.app/${username}`);
 34 |     return await response.json();
 35 |   } catch {
 36 |     throw new Error("Failed to load LeetCode stats");
 37 |   }
 38 | };
 39 | 
 40 | const formatDate = (timestamp: string | number): string => {
 41 |   const date = new Date(Number(timestamp) * 1000);
 42 |   return `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear().toString().slice(-2)}`;
 43 | };
 44 | 
 45 | // =============================================
 46 | // COMPONENTS
 47 | // =============================================
 48 | const StatCard = ({
 49 |   label,
 50 |   value,
 51 |   color = "hsl(var(--foreground))",
 52 | }: {
 53 |   label: string;
 54 |   value: string;
 55 |   color?: string;
 56 | }) => (
 57 |   <div className="tilt-card p-4 flex flex-col gap-1 min-h-[110px]">
 58 |     <span className="text-[0.65rem] uppercase tracking-[0.3em] text-muted-foreground">
 59 |       {label}
 60 |     </span>
 61 |     <span className="text-base font-mono font-semibold" style={{ color }}>
 62 |       {value}
 63 |     </span>
 64 |   </div>
 65 | );
 66 | 
 67 | export default function LeetCodeCard() {
 68 |   const [stats, setStats] = useState<LeetCodeStats | null>(null);
 69 |   const [loading, setLoading] = useState(true);
 70 |   const [error, setError] = useState("");
 71 | 
 72 |   useEffect(() => {
 73 |     fetchLeetCodeStats(USER_NAMES.leetcodeUsername)
 74 |       .then(setStats)
 75 |       .catch((err) => setError(err.message))
 76 |       .finally(() => setLoading(false));
 77 |   }, []);
 78 | 
 79 |   if (
 80 |     !USER_NAMES.leetcodeUsername ||
 81 |     USER_NAMES.leetcodeUsername.trim() === ""
 82 |   ) {
 83 |     return null;
 84 |   }
 85 | 
 86 |   if (loading) {
 87 |     return (
 88 |       <section className="py-6">
 89 |         <div className="glass-panel text-center text-sm text-muted-foreground animate-pulse">
 90 |           Loading LeetCode stats...
 91 |         </div>
 92 |       </section>
 93 |     );
 94 |   }
 95 | 
 96 |   if (error || !stats) {
 97 |     return (
 98 |       <section className="py-6">
 99 |         <div className="glass-panel text-center text-sm text-red-400">
100 |           {error || "No data found."}
101 |         </div>
102 |       </section>
103 |     );
104 |   }
105 | 
106 |   return (
107 |     <section className="py-6 space-y-4" id="leetcode">
108 |       <h2 className="section-title w-full">leetcode.</h2>
109 | 
110 |       <div className="glass-panel hover-lift space-y-5">
111 |         <div className="flex items-center gap-2 text-sm font-mono text-muted-foreground">
112 |           <Link
113 |             href={SOCIAL_LINKS.leetcode}
114 |             target="_blank"
115 |             rel="noopener noreferrer"
116 |             className="inline-flex items-center gap-2 hover:text-[hsl(var(--border-hover))]"
117 |           >
118 |             <SiLeetcode className="w-4 h-4 text-yellow-400" />
119 |             {USER_NAMES.leetcodeUsername}
120 |             <MdOutlineArrowOutward className="w-4 h-4" />
121 |           </Link>
122 |         </div>
123 | 
124 |         <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 w-full">
125 |           <div className="lg:col-span-3 flex flex-col gap-4">
126 |             <div className="grid grid-cols-2 gap-3">
127 |               <StatCard
128 |                 label="Solved"
129 |                 value={`${stats.totalSolved} / ${stats.totalQuestions}`}
130 |               />
131 |               <StatCard label="Rank" value={`# ${stats.ranking}`} />
132 |             </div>
133 |             <div className="grid grid-cols-3 gap-3">
134 |               <StatCard
135 |                 label="Easy"
136 |                 value={`${stats.easySolved} / ${stats.totalEasy}`}
137 |                 color="rgb(74 222 128)"
138 |               />
139 |               <StatCard
140 |                 label="Medium"
141 |                 value={`${stats.mediumSolved} / ${stats.totalMedium}`}
142 |                 color="rgb(250 204 21)"
143 |               />
144 |               <StatCard
145 |                 label="Hard"
146 |                 value={`${stats.hardSolved} / ${stats.totalHard}`}
147 |                 color="rgb(248 113 113)"
148 |               />
149 |             </div>
150 |           </div>
151 | 
152 |           <div className="lg:col-span-2 flex flex-col">
153 |             <div className="tilt-card p-4 h-full space-y-3">
154 |               <span className="text-sm font-semibold text-foreground block">
155 |                 Recent Submissions
156 |               </span>
157 |               <div className="flex flex-col gap-3">
158 |                 {stats.recentSubmissions &&
159 |                 stats.recentSubmissions.length > 0 ? (
160 |                   stats.recentSubmissions.slice(0, 4).map((sub, idx) => (
161 |                     <div
162 |                       key={idx}
163 |                       className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground border-b border-dashed border-[hsl(var(--border)/0.4)] pb-2 last:border-b-0 last:pb-0"
164 |                     >
165 |                       <span className="font-mono text-foreground flex-1 min-w-[140px]">
166 |                         {sub.title}
167 |                       </span>
168 |                       <span>{sub.statusDisplay}</span>
169 |                       <span>{formatDate(sub.timestamp)}</span>
170 |                     </div>
171 |                   ))
172 |                 ) : (
173 |                   <span className="text-xs text-muted-foreground">
174 |                     No recent submissions
175 |                   </span>
176 |                 )}
177 |               </div>
178 |             </div>
179 |           </div>
180 |         </div>
181 |       </div>
182 |     </section>
183 |   );
184 | }
185 | 


--------------------------------------------------------------------------------
/src/components/sections/blog.tsx:
--------------------------------------------------------------------------------
  1 | // "use client";
  2 | 
  3 | // import { useState, useEffect } from "react";
  4 | // import { USER_NAMES } from "../constants/data";
  5 | // import { MdOutlineArrowOutward, MdArrowForward } from "react-icons/md";
  6 | // import { SiHashnode } from "react-icons/si";
  7 | // import Link from "next/link";
  8 | 
  9 | // // =============================================
 10 | // // CONSTANTS & TYPES
 11 | // // =============================================
 12 | // const HASHNODE_API = "https://gql.hashnode.com/";
 13 | // const HASHNODE_URL = `https://${USER_NAMES.hashnodeUsername}.hashnode.dev`;
 14 | 
 15 | // interface Blog {
 16 | //   title: string;
 17 | //   brief: string;
 18 | //   coverImage: string | null;
 19 | //   slug: string;
 20 | //   publishedAt: string;
 21 | //   readTimeInMinutes: number;
 22 | // }
 23 | 
 24 | // interface PostNode {
 25 | //   node: {
 26 | //     title: string;
 27 | //     brief: string;
 28 | //     coverImage: { url: string } | null;
 29 | //     slug: string;
 30 | //     publishedAt: string;
 31 | //     readTimeInMinutes: number;
 32 | //   };
 33 | // }
 34 | 
 35 | // // =============================================
 36 | // // API & UTILITY FUNCTIONS
 37 | // // =============================================
 38 | // const fetchBlogs = async (): Promise<Blog[]> => {
 39 | //   const query = `{
 40 | //     user(username: "${USER_NAMES.hashnodeUsername}") {
 41 | //       publications(first: 1) {
 42 | //         edges {
 43 | //           node {
 44 | //             posts(first: 3) {
 45 | //               edges {
 46 | //                 node {
 47 | //                   title
 48 | //                   brief
 49 | //                   coverImage { url }
 50 | //                   slug
 51 | //                   publishedAt
 52 | //                   readTimeInMinutes
 53 | //                 }
 54 | //               }
 55 | //             }
 56 | //           }
 57 | //         }
 58 | //       }
 59 | //     }
 60 | //   }`;
 61 | 
 62 | //   try {
 63 | //     const response = await fetch(HASHNODE_API, {
 64 | //       method: "POST",
 65 | //       headers: { "Content-Type": "application/json" },
 66 | //       body: JSON.stringify({ query }),
 67 | //     });
 68 | //     const data = await response.json();
 69 | 
 70 | //     const posts: PostNode[] =
 71 | //       data?.data?.user?.publications?.edges?.[0]?.node?.posts?.edges || [];
 72 | //     return posts.map((post: PostNode) => ({
 73 | //       title: post.node.title,
 74 | //       brief: post.node.brief,
 75 | //       coverImage: post.node.coverImage?.url || null,
 76 | //       slug: post.node.slug,
 77 | //       publishedAt: post.node.publishedAt,
 78 | //       readTimeInMinutes: post.node.readTimeInMinutes,
 79 | //     }));
 80 | //   } catch (error) {
 81 | //     console.error("Error fetching blogs:", error);
 82 | //     return [];
 83 | //   }
 84 | // };
 85 | 
 86 | // const useBlogs = () => {
 87 | //   const [blogs, setBlogs] = useState<Blog[]>([]);
 88 | //   const [loading, setLoading] = useState(true);
 89 | 
 90 | //   useEffect(() => {
 91 | //     fetchBlogs()
 92 | //       .then(setBlogs)
 93 | //       .finally(() => setLoading(false));
 94 | //   }, []);
 95 | 
 96 | //   return { blogs, loading };
 97 | // };
 98 | 
 99 | // // =============================================
100 | // // MAIN COMPONENT
101 | // // =============================================
102 | 
103 | // const BlogSection = () => {
104 | 
105 | //   const { blogs, loading } = useBlogs();
106 | //   if (!USER_NAMES.hashnodeUsername || USER_NAMES.hashnodeUsername.trim() === "") {
107 | //     return null;
108 | //   }
109 | 
110 | //   return (
111 | //     <section className="py-5" id="blog">
112 | //       <h2 className="text-xl font-semibold mb-4">latest blogs.</h2>
113 | 
114 | //       <div className="mb-4 flex items-center gap-1">
115 | //         <Link
116 | //           href={HASHNODE_URL}
117 | //           target="_blank"
118 | //           rel="noopener noreferrer"
119 | //           className="text-link text-sm font-mono font-medium text-muted-foreground transition-colors flex items-center gap-1"
120 | //         >
121 | //           <SiHashnode
122 | //             className="inline-block align-middle mr-1 text-blue-500"
123 | //             size={16}
124 | //           />
125 | //           {USER_NAMES.hashnodeUsername}
126 | //           <MdOutlineArrowOutward className="inline-block w-4 h-4 ml-1" />
127 | //         </Link>
128 | //       </div>
129 | 
130 | //       {loading ? (
131 | //         <div className="text-center text-muted-foreground py-8 text-base animate-pulse">
132 | //           Loading Hashnode blogs...
133 | //         </div>
134 | //       ) : blogs.length === 0 ? (
135 | //         <div className="text-center text-muted-foreground py-8 text-base">
136 | //           No blogs found.
137 | //         </div>
138 | //       ) : (
139 | //         <div className="space-y-6">
140 | //           {blogs.map((blog) => (
141 | //             <div
142 | //               key={blog.slug}
143 | //               className="box bg-background border border-border p-4"
144 | //             >
145 | //               <div className="flex flex-col gap-1">
146 | //                 <a
147 | //                   href={`${HASHNODE_URL}/${blog.slug}`}
148 | //                   target="_blank"
149 | //                   rel="noopener noreferrer"
150 | //                   className="font-medium text-base text-foreground transition-colors w-fit"
151 | //                 >
152 | //                   {blog.title}
153 | //                 </a>
154 | //                 <p className="text-sm leading-tight text-muted-foreground line-clamp-2">
155 | //                   {blog.brief}
156 | //                 </p>
157 | //                 <div className="flex justify-between items-center">
158 | //                   <div className="flex items-center gap-2 text-xs text-muted-foreground">
159 | //                     <span>
160 | //                       {new Date(blog.publishedAt).toLocaleDateString()}
161 | //                     </span>
162 | //                     <span>•</span>
163 | //                     <span>{blog.readTimeInMinutes} min read</span>
164 | //                   </div>
165 | //                   <a
166 | //                     href={`${HASHNODE_URL}/${blog.slug}`}
167 | //                     target="_blank"
168 | //                     rel="noopener noreferrer"
169 | //                     className="text-xs text-link font-medium transition"
170 | //                   >
171 | //                     Read More
172 | //                     <MdArrowForward className="inline-block w-4 h-4 ml-1" />
173 | //                   </a>
174 | //                 </div>
175 | //               </div>
176 | //             </div>
177 | //           ))}
178 | //         </div>
179 | //       )}
180 | //     </section>
181 | //   );
182 | // };
183 | 
184 | // export default BlogSection;
185 | 


--------------------------------------------------------------------------------
/src/components/sections/navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import Link from "next/link";
  5 | import { Menu, X, ArrowRight } from "lucide-react";
  6 | import { motion } from "framer-motion";
  7 | import { ABOUT_ME } from "../constants/data";
  8 | import ThemeToggle from "../ui/theme-toggle";
  9 | 
 10 | const STAGGER = 30; // Delay between each letter in milliseconds
 11 | 
 12 | // Navigation items with their respective href values
 13 | const navItems = [
 14 |   { name: "skills", href: "#skills" },
 15 |   { name: "github", href: "#github" },
 16 |   { name: "leetcode", href: "#leetcode" },
 17 |   { name: "projects", href: "#projects" },
 18 |   { name: "achievements", href: "#achievements" },
 19 |   { name: "education", href: "#education" },
 20 |   { name: "contact", href: "#contact" },
 21 | ];
 22 | 
 23 | export default function Navbar() {
 24 |   const [isMenuOpen, setIsMenuOpen] = useState(false);
 25 |   const [isScrolled, setIsScrolled] = useState(false);
 26 |   const [activeSection, setActiveSection] = useState("");
 27 | 
 28 |   // Handle scroll to detect when to make navbar sticky
 29 |   useEffect(() => {
 30 |     const handleScroll = () => {
 31 |       setIsScrolled(window.scrollY > 20);
 32 |     };
 33 | 
 34 |     window.addEventListener("scroll", handleScroll);
 35 |     return () => window.removeEventListener("scroll", handleScroll);
 36 |   }, []);
 37 | 
 38 |   // Track active section using IntersectionObserver
 39 |   useEffect(() => {
 40 |     const sections = document.querySelectorAll("section");
 41 |     const observer = new IntersectionObserver(
 42 |       (entries) => {
 43 |         const visibleSection = entries.find((entry) => entry.isIntersecting);
 44 |         if (visibleSection) {
 45 |           setActiveSection(visibleSection.target.id);
 46 |         }
 47 |       },
 48 |       { threshold: 0.3 }
 49 |     );
 50 | 
 51 |     sections.forEach((section) => observer.observe(section));
 52 |     return () => sections.forEach((section) => observer.unobserve(section));
 53 |   }, []);
 54 | 
 55 |   // Prevent body scroll when menu is open
 56 |   useEffect(() => {
 57 |     if (isMenuOpen) {
 58 |       document.body.style.overflow = "hidden";
 59 |     } else {
 60 |       document.body.style.overflow = "unset";
 61 |     }
 62 |     return () => {
 63 |       document.body.style.overflow = "unset";
 64 |     };
 65 |   }, [isMenuOpen]);
 66 | 
 67 |   // Handle smooth scroll to section when nav link is clicked
 68 |   const handleScrollToSection = (
 69 |     e: React.MouseEvent<HTMLAnchorElement>,
 70 |     href: string
 71 |   ) => {
 72 |     e.preventDefault();
 73 |     const element = document.getElementById(href.substring(1)); // Remove '#' from href
 74 |     if (element) {
 75 |       element.scrollIntoView({ behavior: "smooth" });
 76 |       setIsMenuOpen(false); // Close menu on mobile after clicking
 77 |     }
 78 |   };
 79 | 
 80 |   return (
 81 |     <>
 82 |       <nav
 83 |         className={`fixed top-2 left-1/2 transform -translate-x-1/2 z-50 w-[90%] max-w-6xl rounded-2xl transition-all duration-300 ${
 84 |           isScrolled
 85 |             ? "bg-background/80 dark:bg-background/80 backdrop-blur-md outline outline-1 outline-[hsl(var(--link))]"
 86 |             : "bg-transparent"
 87 |         }`}
 88 |       >
 89 |         <div className="flex items-center justify-between h-12 px-4">
 90 |           {/* Logo/Brand link */}
 91 |           <Link
 92 |             href="/"
 93 |             className="text-lg font-semibold text-foreground cursor-pointer"
 94 |           >
 95 |             {ABOUT_ME.name?.split(" ")[0]}.
 96 |           </Link>
 97 | 
 98 |           {/* Desktop navigation menu */}
 99 |           <div className="hidden lg:flex space-x-5 items-center relative">
100 |             {navItems.map((item) => {
101 |               const sectionId = item.href.substring(1);
102 |               const isActive = activeSection === sectionId;
103 | 
104 |               return (
105 |                 <Link
106 |                   key={item.name}
107 |                   href={item.href}
108 |                   onClick={(e) => handleScrollToSection(e, item.href)}
109 |                   className="relative block w-fit leading-[1.5] py-1 text-sm text-foreground/80 cursor-pointer group nav-link hover:text-[hsl(var(--link))] hover:scale-105 transition-transform"
110 |                 >
111 |                   {/* Container for letter animations */}
112 |                   <span className="relative inline-block">
113 |                     {item.name.split("").map((letter, i) => (
114 |                       <span
115 |                         key={i}
116 |                         className="relative inline-block overflow-hidden"
117 |                       >
118 |                         {/* Original letter that slides up on hover */}
119 |                         <span
120 |                           className="block transition-all duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:-translate-y-full group-hover:opacity-80"
121 |                           style={{
122 |                             transitionDelay: `${i * STAGGER}ms`,
123 |                           }}
124 |                         >
125 |                           {letter}
126 |                         </span>
127 | 
128 |                         {/* Duplicate letter that slides down from above on hover WITH LINK COLOR */}
129 |                         <span
130 |                           className="block absolute left-0 top-0 font-medium translate-y-full opacity-0 transition-all duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:translate-y-0 group-hover:opacity-100"
131 |                           style={{
132 |                             transitionDelay: `${i * STAGGER}ms`,
133 |                             color: "hsl(var(--link))",
134 |                           }}
135 |                         >
136 |                           {letter}
137 |                         </span>
138 |                       </span>
139 |                     ))}
140 |                   </span>
141 | 
142 |                   {/* Active section underline indicator */}
143 |                   {isActive && (
144 |                     <motion.div
145 |                       layoutId="underline"
146 |                       className="absolute -bottom-1 left-0 w-full h-[2px] bg-[hsl(var(--link))]"
147 |                       transition={{
148 |                         type: "spring",
149 |                         stiffness: 500,
150 |                         damping: 20,
151 |                       }}
152 |                     />
153 |                   )}
154 |                 </Link>
155 |               );
156 |             })}
157 | 
158 |             <ThemeToggle />
159 | 
160 |             {/* Request a Project button */}
161 |             <Link
162 |               href="#contact"
163 |               onClick={(e) => handleScrollToSection(e, "#contact")}
164 |               className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[hsl(var(--link))] text-white text-sm hover:opacity-90 transition-opacity"
165 |             >
166 |               Request a Project
167 |               <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5" />
168 |             </Link>
169 |           </div>
170 | 
171 |           {/* Mobile menu button */}
172 |           <div className="flex lg:hidden items-center space-x-2">
173 |             <ThemeToggle />
174 |             <button
175 |               onClick={() => setIsMenuOpen(!isMenuOpen)}
176 |               className="p-2 rounded-lg bg-foreground/10 hover:bg-foreground/20 transition-colors"
177 |               aria-label="Toggle menu"
178 |               aria-expanded={isMenuOpen}
179 |             >
180 |               {isMenuOpen ? (
181 |                 <X className="w-5 h-5 text-foreground" />
182 |               ) : (
183 |                 <Menu className="w-5 h-5 text-foreground" />
184 |               )}
185 |             </button>
186 |           </div>
187 |         </div>
188 | 
189 |         {/* Mobile menu */}
190 |         {isMenuOpen && (
191 |           <div className="lg:hidden bg-background/95 dark:bg-background/95 rounded-b-xl shadow-lg border-t border-border">
192 |             <div className="px-4 pt-2 pb-3 space-y-1">
193 |               {navItems.map((item) => {
194 |                 const sectionId = item.href.substring(1);
195 |                 const isActive = activeSection === sectionId;
196 | 
197 |                 return (
198 |                   <Link
199 |                     key={item.name}
200 |                     href={item.href}
201 |                     onClick={(e) => {
202 |                       handleScrollToSection(e, item.href);
203 |                       setIsMenuOpen(false);
204 |                     }}
205 |                     className={`block px-3 py-2 rounded-md text-sm text-center text-foreground/80 hover:bg-foreground/10 transition-colors capitalize ${
206 |                       isActive ? "text-[hsl(var(--link))] font-medium" : ""
207 |                     }`}
208 |                   >
209 |                     {item.name}
210 |                   </Link>
211 |                 );
212 |               })}
213 |               <Link
214 |                 href="#contact"
215 |                 onClick={(e) => {
216 |                   handleScrollToSection(e, "#contact");
217 |                   setIsMenuOpen(false);
218 |                 }}
219 |                 className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg bg-[hsl(var(--link))] text-white text-sm hover:opacity-90 transition-opacity mt-2"
220 |               >
221 |                 Request a Project
222 |                 <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5" />
223 |               </Link>
224 |             </div>
225 |           </div>
226 |         )}
227 |       </nav>
228 |     </>
229 |   );
230 | }
231 | 


--------------------------------------------------------------------------------
/src/components/sections/contact.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, MouseEvent } from "react";
  4 | import {
  5 |   Mail,
  6 |   Github,
  7 |   Linkedin,
  8 |   Phone,
  9 |   Instagram,
 10 |   Copy,
 11 |   Check,
 12 | } from "lucide-react";
 13 | import { SiLeetcode, SiWhatsapp } from "react-icons/si";
 14 | import { ABOUT_ME, SOCIAL_LINKS } from "../constants/data";
 15 | 
 16 | type ContactLink = {
 17 |   label: string;
 18 |   value: string;
 19 |   href?: string;
 20 |   icon: React.ComponentType<{ className?: string }>;
 21 | };
 22 | 
 23 | const Contact = () => {
 24 |   const emailAddress =
 25 |     SOCIAL_LINKS.email?.replace("mailto:", "") || ABOUT_ME.email;
 26 |   const emailHref =
 27 |     SOCIAL_LINKS.email && SOCIAL_LINKS.email.trim() !== ""
 28 |       ? SOCIAL_LINKS.email.trim()
 29 |       : `mailto:${ABOUT_ME.email}`;
 30 |   const [copied, setCopied] = useState(false);
 31 |   const whatsappLink = SOCIAL_LINKS.whatsapp;
 32 | 
 33 |   const contactLinks: ContactLink[] = [
 34 |     {
 35 |       label: "Email",
 36 |       value: emailAddress,
 37 |       href: SOCIAL_LINKS.email,
 38 |       icon: Mail,
 39 |     },
 40 |     SOCIAL_LINKS.github && {
 41 |       label: "GitHub",
 42 |       value: SOCIAL_LINKS.github.replace("https://", ""),
 43 |       href: SOCIAL_LINKS.github,
 44 |       icon: Github,
 45 |     },
 46 |     SOCIAL_LINKS.linkedin && {
 47 |       label: "LinkedIn",
 48 |       value: SOCIAL_LINKS.linkedin.replace("https://", ""),
 49 |       href: SOCIAL_LINKS.linkedin,
 50 |       icon: Linkedin,
 51 |     },
 52 |     SOCIAL_LINKS.leetcode && {
 53 |       label: "LeetCode",
 54 |       value: SOCIAL_LINKS.leetcode.replace("https://", ""),
 55 |       href: SOCIAL_LINKS.leetcode,
 56 |       icon: SiLeetcode,
 57 |     },
 58 |     SOCIAL_LINKS.phone && {
 59 |       label: "Phone",
 60 |       value: SOCIAL_LINKS.phone,
 61 |       href: `tel:${SOCIAL_LINKS.phone.replace(/\s+/g, "")}`,
 62 |       icon: Phone,
 63 |     },
 64 |     SOCIAL_LINKS.instagram && {
 65 |       label: "Instagram",
 66 |       value: SOCIAL_LINKS.instagram.replace("https://", ""),
 67 |       href: SOCIAL_LINKS.instagram,
 68 |       icon: Instagram,
 69 |     },
 70 |   ].filter(Boolean) as ContactLink[];
 71 | 
 72 |   const handleCopyEmail = async () => {
 73 |     try {
 74 |       await navigator.clipboard.writeText(emailAddress);
 75 |       setCopied(true);
 76 |       setTimeout(() => setCopied(false), 2000);
 77 |     } catch {
 78 |       // no-op
 79 |     }
 80 |   };
 81 | 
 82 |   const handleOpenWhatsApp = () => {
 83 |     if (whatsappLink) {
 84 |       window.open(whatsappLink, "_blank", "noopener,noreferrer");
 85 |     }
 86 |   };
 87 | 
 88 |   const handleSpecialNavigation = (
 89 |     event: MouseEvent<HTMLAnchorElement>,
 90 |     href: string
 91 |   ) => {
 92 |     if (!href) return;
 93 |     const trimmed = href.trim();
 94 |     if (
 95 |       typeof window !== "undefined" &&
 96 |       (trimmed.startsWith("mailto:") || trimmed.startsWith("tel:"))
 97 |     ) {
 98 |       event.preventDefault();
 99 |       window.location.href = trimmed;
100 |     }
101 |   };
102 | 
103 |   return (
104 |     <section className="py-6 space-y-4">
105 |       <h2 className="section-title w-full">let&apos;s connect.</h2>
106 | 
107 |       <div className="grid gap-6 lg:grid-cols-2">
108 |         <div className="glass-panel p-6 space-y-6">
109 |           <div>
110 |             <p className="text-xl font-semibold">Let&apos;s Connect</p>
111 |             <p className="text-sm text-muted-foreground">
112 |               I&apos;m always open to new opportunities, freelance gigs, or a
113 |               quick coffee chat about ideas.
114 |             </p>
115 |           </div>
116 | 
117 |           <div className="space-y-3">
118 |             {contactLinks.map((item) => {
119 |               const Icon = item.icon;
120 |               const content = (
121 |                 <div className="flex items-center gap-4">
122 |                   <div className="w-10 h-10 rounded-xl bg-[hsl(var(--accent)/0.15)] flex items-center justify-center">
123 |                     <Icon className="w-5 h-5" />
124 |                   </div>
125 |                   <div className="space-y-1">
126 |                     <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
127 |                       {item.label}
128 |                     </p>
129 |                     <p className="text-sm font-mono text-foreground break-all">
130 |                       {item.value}
131 |                     </p>
132 |                   </div>
133 |                 </div>
134 |               );
135 | 
136 |               if (item.href) {
137 |                 const isMailLink = item.href.startsWith("mailto:");
138 |                 const isExternal = item.href.startsWith("http");
139 |                 if (isMailLink) {
140 |                   return (
141 |                     <a
142 |                       key={item.label}
143 |                       href={item.href}
144 |                       onClick={(event) =>
145 |                         handleSpecialNavigation(event, item.href!)
146 |                       }
147 |                       className="flex items-center gap-4 rounded-2xl border border-transparent bg-[hsl(var(--background)/0.4)]/50 px-4 py-3 text-left transition-colors hover:border-[hsl(var(--border)/0.6)]"
148 |                     >
149 |                       {content}
150 |                     </a>
151 |                   );
152 |                 }
153 | 
154 |                 return (
155 |                   <a
156 |                     key={item.label}
157 |                     href={item.href}
158 |                     target={isExternal ? "_blank" : undefined}
159 |                     rel={isExternal ? "noopener noreferrer" : undefined}
160 |                     className="flex items-center gap-4 rounded-2xl border border-transparent bg-[hsl(var(--background)/0.4)]/50 px-4 py-3 transition-colors hover:border-[hsl(var(--border)/0.6)]"
161 |                   >
162 |                     {content}
163 |                   </a>
164 |                 );
165 |               }
166 | 
167 |               return (
168 |                 <div
169 |                   key={item.label}
170 |                   className="flex items-center gap-4 rounded-2xl border border-transparent bg-[hsl(var(--background)/0.4)]/50 px-4 py-3"
171 |                 >
172 |                   {content}
173 |                 </div>
174 |               );
175 |             })}
176 |           </div>
177 |         </div>
178 | 
179 |         <div className="glass-panel p-6 space-y-4">
180 |           <div>
181 |             <p className="text-xl font-semibold">Get In Touch</p>
182 |             <p className="text-sm text-muted-foreground">
183 |               Choose your preferred way to reach me.
184 |             </p>
185 |           </div>
186 | 
187 |           <div className="rounded-2xl border border-[hsl(var(--border)/0.35)] p-5 space-y-4">
188 |             <div className="flex items-center gap-3">
189 |               <div className="w-10 h-10 rounded-full bg-[hsl(var(--accent)/0.15)] flex items-center justify-center">
190 |                 <Mail className="w-5 h-5" />
191 |               </div>
192 |               <div>
193 |                 <p className="text-sm font-semibold">Email Me</p>
194 |                 <p className="text-xs text-muted-foreground">
195 |                   Send me an email directly.
196 |                 </p>
197 |               </div>
198 |             </div>
199 | 
200 |             <div className="space-y-3">
201 |               <div className="relative px-4 py-3 rounded-xl border border-[hsl(var(--border)/0.35)] bg-[hsl(var(--background)/0.6)] text-sm font-mono flex items-center justify-between gap-3">
202 |                 <span className="truncate">{emailAddress}</span>
203 |                 <button
204 |                   type="button"
205 |                   onClick={handleCopyEmail}
206 |                   className="inline-flex items-center gap-1 text-xs font-semibold rounded-lg px-3 py-1.5 bg-[hsl(var(--accent))] text-[hsl(var(--background))]"
207 |                 >
208 |                   {copied ? (
209 |                     <Check className="w-4 h-4" />
210 |                   ) : (
211 |                     <Copy className="w-4 h-4" />
212 |                   )}
213 |                   {copied ? "Copied" : "Copy"}
214 |                 </button>
215 |               </div>
216 |               <a
217 |                 href={emailHref}
218 |                 onClick={(event) => handleSpecialNavigation(event, emailHref)}
219 |                 className="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-[hsl(var(--accent))] text-[hsl(var(--background))] text-sm font-semibold py-3 transition hover:bg-[hsl(var(--accent)/0.9)]"
220 |               >
221 |                 <Mail className="w-4 h-4" />
222 |                 Send Email
223 |               </a>
224 |             </div>
225 |           </div>
226 | 
227 |           <div className="rounded-2xl border border-[hsl(var(--border)/0.35)] p-5 space-y-4">
228 |             <div className="flex items-center gap-3">
229 |               <div className="w-10 h-10 rounded-full bg-green-500/10 text-green-400 flex items-center justify-center">
230 |                 <SiWhatsapp className="w-5 h-5" />
231 |               </div>
232 |               <div>
233 |                 <p className="text-sm font-semibold">WhatsApp</p>
234 |                 <p className="text-xs text-muted-foreground">
235 |                   Chat with me instantly.
236 |                 </p>
237 |               </div>
238 |             </div>
239 | 
240 |             <button
241 |               type="button"
242 |               onClick={handleOpenWhatsApp}
243 |               disabled={!whatsappLink}
244 |               className="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-green-500 text-white text-sm font-semibold py-3 transition hover:bg-green-400 disabled:opacity-40 disabled:cursor-not-allowed"
245 |             >
246 |               <SiWhatsapp className="w-4 h-4" />
247 |               Open WhatsApp
248 |             </button>
249 |           </div>
250 |         </div>
251 |       </div>
252 |     </section>
253 |   );
254 | };
255 | 
256 | export default Contact;
257 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🚀 Modern Portfolio Website
  2 | 
  3 | <div align="center">
  4 | 
  5 | ![Next.js](https://img.shields.io/badge/Next.js-15.5.6-black?style=for-the-badge&logo=next.js&logoColor=white)
  6 | ![React](https://img.shields.io/badge/React-19.1.0-61DAFB?style=for-the-badge&logo=react&logoColor=black)
  7 | ![TypeScript](https://img.shields.io/badge/TypeScript-5.0-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
  8 | ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.0-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
  9 | ![Framer Motion](https://img.shields.io/badge/Framer_Motion-12.23.25-0055FF?style=for-the-badge&logo=framer&logoColor=white)
 10 | 
 11 | [![GitHub stars](https://img.shields.io/github/stars/shasbinas/my-portfolio-nextjs?style=for-the-badge&logo=github)](https://github.com/shasbinas/my-portfolio-nextjs/stargazers)
 12 | [![GitHub forks](https://img.shields.io/github/forks/shasbinas/my-portfolio-nextjs?style=for-the-badge&logo=github)](https://github.com/shasbinas/my-portfolio-nextjs/network/members)
 13 | [![GitHub issues](https://img.shields.io/github/issues/shasbinas/my-portfolio-nextjs?style=for-the-badge&logo=github)](https://github.com/shasbinas/my-portfolio-nextjs/issues)
 14 | [![License](https://img.shields.io/badge/License-ISC-blue?style=for-the-badge)](LICENSE)
 15 | 
 16 | **A modern, responsive, and feature-rich portfolio website built with Next.js 15, React 19, and TypeScript**
 17 | 
 18 | [Report Bug](https://github.com/shasbinas/my-portfolio-nextjs/issues) • [Request Feature](https://github.com/shasbinas/my-portfolio-nextjs/issues)
 19 | 
 20 | </div>
 21 | 
 22 | ---
 23 | 
 24 | ## 📋 Table of Contents
 25 | 
 26 | - [About The Project](#-about-the-project)
 27 | - [Features](#-features)
 28 | - [Tech Stack](#-tech-stack)
 29 | - [Getting Started](#-getting-started)
 30 |   - [Prerequisites](#prerequisites)
 31 |   - [Installation](#installation)
 32 |   - [Configuration](#configuration)
 33 | - [Project Structure](#-project-structure)
 34 | - [Why This Portfolio?](#-why-this-portfolio)
 35 | - [Screenshots](#-screenshots)
 36 | - [Contributing](#-contributing)
 37 | - [License](#-license)
 38 | - [Contact](#-contact)
 39 | 
 40 | ---
 41 | 
 42 | ## 🎯 About The Project
 43 | 
 44 | This is a modern, fully responsive portfolio website designed to showcase your skills, projects, and professional experience. Built with cutting-edge technologies, it features smooth animations, dark mode support, and an intuitive user interface that stands out from traditional portfolio templates.
 45 | 
 46 | The portfolio includes sections for:
 47 | 
 48 | - **Personal Information** - Profile with animated GIF support
 49 | - **Skills** - Categorized technical skills with visual icons
 50 | - **Projects** - Showcase your best work with live demos and GitHub links
 51 | - **Experience** - Professional work history and internships
 52 | - **Education** - Academic background and certifications
 53 | - **GitHub Activity** - Dynamic GitHub contribution calendar
 54 | - **LeetCode Stats** - Competitive programming achievements
 55 | - **Achievements** - Certifications and accomplishments
 56 | - **Contact** - Multiple ways to get in touch
 57 | 
 58 | ---
 59 | 
 60 | ## ✨ Features
 61 | 
 62 | ### 🎨 **Modern UI/UX**
 63 | 
 64 | - **Responsive Design** - Perfect on all devices (mobile, tablet, desktop)
 65 | - **Dark Mode Support** - Seamless theme switching with system preference detection
 66 | - **Smooth Animations** - Framer Motion powered transitions and micro-interactions
 67 | - **Fluid Cursor Effect** - Interactive WebGL-based cursor animation
 68 | - **Glass Morphism** - Modern glass-panel design elements
 69 | - **Grid Pattern Background** - Subtle animated background patterns
 70 | 
 71 | ### 🧭 **Navigation & Interaction**
 72 | 
 73 | - **Sticky Navbar** - Fixed navigation with active section highlighting
 74 | - **Smooth Scrolling** - Seamless section-to-section navigation
 75 | - **Letter Hover Animation** - Unique letter-by-letter hover effects on nav items
 76 | - **Mobile Hamburger Menu** - Clean slide-in menu for mobile devices
 77 | - **Scroll to Top** - Quick navigation button
 78 | 
 79 | ### 📊 **Dynamic Content**
 80 | 
 81 | - **GitHub Integration** - Real-time GitHub contribution calendar
 82 | - **LeetCode Integration** - Display your LeetCode statistics
 83 | - **Project Showcase** - Featured projects with tech stack badges
 84 | - **Skills Visualization** - Categorized skills with icons
 85 | - **Experience Timeline** - Professional experience with detailed descriptions
 86 | 
 87 | ### 🚀 **Performance & SEO**
 88 | 
 89 | - **Next.js 15** - Latest Next.js with App Router
 90 | - **TypeScript** - Full type safety
 91 | - **Optimized Images** - Next.js Image optimization
 92 | - **SEO Optimized** - Meta tags, Open Graph, and structured data
 93 | - **Vercel Analytics** - Built-in analytics integration
 94 | - **Fast Loading** - Optimized bundle size and code splitting
 95 | 
 96 | ### 🎯 **Developer Experience**
 97 | 
 98 | - **Easy Configuration** - Single data file for all content
 99 | - **TypeScript Support** - Full type definitions
100 | - **ESLint & Prettier** - Code quality and formatting with auto-format on save
101 | - **Format Scripts** - `npm run format` to format all files, `npm run format:check` to verify
102 | - **VS Code Integration** - Pre-configured settings for format on save
103 | - **Component-Based** - Reusable and maintainable components
104 | 
105 | ---
106 | 
107 | ## 🛠 Tech Stack
108 | 
109 | ### **Frontend Framework & Language**
110 | 
111 | ![Next.js](https://img.shields.io/badge/Next.js-15.5.6-black?logo=next.js)
112 | ![React](https://img.shields.io/badge/React-19.1.0-61DAFB?logo=react)
113 | ![TypeScript](https://img.shields.io/badge/TypeScript-5.0-3178C6?logo=typescript&logoColor=white)
114 | 
115 | ### **Styling & UI**
116 | 
117 | ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.0-38B2AC?logo=tailwind-css)
118 | ![Framer Motion](https://img.shields.io/badge/Framer_Motion-12.23.25-0055FF?logo=framer)
119 | ![Lucide React](https://img.shields.io/badge/Lucide_React-0.536-FF6B6B?logo=lucide)
120 | 
121 | ### **Icons & Graphics**
122 | 
123 | ![React Icons](https://img.shields.io/badge/React_Icons-5.5.0-F7DF1E?logo=react)
124 | ![Skill Icons](https://img.shields.io/badge/Skill_Icons-API-FF6B6B)
125 | 
126 | ### **Integrations**
127 | 
128 | ![Vercel Analytics](https://img.shields.io/badge/Vercel_Analytics-1.5.0-000000?logo=vercel)
129 | ![GitHub Calendar](https://img.shields.io/badge/GitHub_Calendar-4.5.9-181717?logo=github)
130 | 
131 | ### **Development Tools**
132 | 
133 | ![ESLint](https://img.shields.io/badge/ESLint-9.0-4B32C3?logo=eslint)
134 | ![Prettier](https://img.shields.io/badge/Prettier-3.6.2-F7B93E?logo=prettier&logoColor=black)
135 | ![ESLint Prettier](https://img.shields.io/badge/ESLint_Prettier-10.1.8-4B32C3?logo=eslint)
136 | ![Turbopack](https://img.shields.io/badge/Turbopack-Enabled-000000?logo=turborepo)
137 | 
138 | ### **Deployment**
139 | 
140 | ![Vercel](https://img.shields.io/badge/Vercel-Deployed-000000?logo=vercel)
141 | 
142 | ---
143 | 
144 | ## 🚀 Getting Started
145 | 
146 | ### Prerequisites
147 | 
148 | Before you begin, ensure you have the following installed:
149 | 
150 | - **Node.js** 18.17 or later
151 | - **npm** or **yarn** or **pnpm**
152 | - **Git**
153 | 
154 | ### Installation
155 | 
156 | 1. **Clone the repository**
157 | 
158 |    ```bash
159 |    git clone https://github.com/shasbinas/my-portfolio-nextjs.git
160 |    cd my-portfolio-nextjs
161 |    ```
162 | 
163 | 2. **Install dependencies**
164 | 
165 |    ```bash
166 |    npm install
167 |    # or
168 |    yarn install
169 |    # or
170 |    pnpm install
171 |    ```
172 | 
173 | 3. **Run the development server**
174 | 
175 |    ```bash
176 |    npm run dev
177 |    # or
178 |    yarn dev
179 |    # or
180 |    pnpm dev
181 |    ```
182 | 
183 | 4. **Open your browser**
184 |    Navigate to [http://localhost:3000](http://localhost:3000)
185 | 
186 | ### Configuration
187 | 
188 | 1. **Update Personal Information**
189 |    Edit `src/components/constants/data.ts` and update:
190 |    - `ABOUT_ME` - Your name, title, location, email, description
191 |    - `USER_NAMES` - GitHub and LeetCode usernames
192 |    - `SOCIAL_LINKS` - All your social media links
193 |    - `SKILLS` - Your technical skills
194 |    - `PROJECTS` - Your featured projects
195 |    - `EXPERIENCE` - Your work experience
196 |    - `EDUCATION` - Your educational background
197 | 
198 | 2. **Add Profile Images**
199 |    - Place your profile image at `public/profile-image.jpg`
200 |    - Place your profile GIF at `public/profile-gif.gif`
201 | 
202 | 3. **Update Metadata**
203 |    Edit `src/app/layout.tsx` to update:
204 |    - Page title and description
205 |    - Open Graph images
206 |    - Twitter card information
207 | 
208 | 4. **Configure Contact Form** (Optional)
209 |    - Update `FORM_ENDPOINT` in `data.ts` with your Formspree endpoint
210 |    - Or integrate your preferred form service
211 | 
212 | 5. **Format Code** (Optional but recommended)
213 | 
214 |    ```bash
215 |    npm run format        # Format all files
216 |    npm run format:check  # Check formatting without making changes
217 |    ```
218 | 
219 | 6. **Build for Production**
220 |    ```bash
221 |    npm run build
222 |    npm start
223 |    ```
224 | 
225 | ---
226 | 
227 | ## 📁 Project Structure
228 | 
229 | ```
230 | my-portfolio-nextjs/
231 | ├── public/
232 | │   ├── profile-image.jpg      # Profile image
233 | │   ├── profile-gif.gif        # Profile animated GIF
234 | │   └── favicon.ico            # Site favicon
235 | ├── src/
236 | │   ├── app/
237 | │   │   ├── layout.tsx          # Root layout with metadata
238 | │   │   ├── page.tsx            # Home page
239 | │   │   ├── globals.css         # Global styles
240 | │   │   └── providers.tsx       # Theme provider
241 | │   ├── components/
242 | │   │   ├── constants/
243 | │   │   │   └── data.ts         # All portfolio data
244 | │   │   ├── sections/
245 | │   │   │   ├── navbar.tsx       # Navigation bar
246 | │   │   │   ├── header.tsx      # Hero section
247 | │   │   │   ├── about-me.tsx    # About section
248 | │   │   │   ├── skills.tsx      # Skills section
249 | │   │   │   ├── projects.tsx     # Projects section
250 | │   │   │   ├── experience.tsx  # Experience section
251 | │   │   │   ├── education.tsx   # Education section
252 | │   │   │   ├── github.tsx      # GitHub section
253 | │   │   │   ├── leetcode.tsx    # LeetCode section
254 | │   │   │   ├── achievements.tsx # Achievements section
255 | │   │   │   ├── contact.tsx     # Contact section
256 | │   │   │   └── footer.tsx      # Footer
257 | │   │   └── ui/
258 | │   │       ├── theme-toggle.tsx    # Dark mode toggle
259 | │   │       ├── scroll-to-top.tsx   # Scroll button
260 | │   │       ├── grid-pattern.tsx    # Background pattern
261 | │   │       ├── FluidCursor.tsx     # Fluid cursor effect
262 | │   │       └── github-star-button.tsx # GitHub star button
263 | │   └── hooks/
264 | │       └── use-FluidCursor.ts      # Fluid cursor hook
265 | ├── next.config.ts              # Next.js configuration
266 | ├── tailwind.config.js          # Tailwind CSS configuration
267 | ├── tsconfig.json               # TypeScript configuration
268 | ├── .prettierrc                 # Prettier configuration
269 | ├── .prettierignore             # Prettier ignore patterns
270 | ├── eslint.config.mjs            # ESLint configuration
271 | └── package.json                # Dependencies
272 | ```
273 | 
274 | ---
275 | 
276 | ## 💡 Why This Portfolio?
277 | 
278 | ### 🎯 **Professional & Modern**
279 | 
280 | - Built with the latest Next.js 15 and React 19
281 | - TypeScript for type safety and better developer experience
282 | - Modern design patterns and best practices
283 | 
284 | ### ⚡ **Performance Optimized**
285 | 
286 | - Server-side rendering for fast initial load
287 | - Image optimization with Next.js Image component
288 | - Code splitting and lazy loading
289 | - Minimal bundle size
290 | 
291 | ### 🎨 **Unique Design Elements**
292 | 
293 | - Custom fluid cursor animation using WebGL
294 | - Letter-by-letter hover animations
295 | - Glass morphism effects
296 | - Smooth page transitions
297 | 
298 | ### 📱 **Fully Responsive**
299 | 
300 | - Mobile-first design approach
301 | - Works perfectly on all screen sizes
302 | - Touch-friendly interactions
303 | 
304 | ### 🔧 **Easy to Customize**
305 | 
306 | - Single data file for all content
307 | - Component-based architecture
308 | - Well-organized code structure
309 | - Comprehensive documentation
310 | 
311 | ### 🚀 **Production Ready**
312 | 
313 | - SEO optimized
314 | - Analytics integration
315 | - Error handling
316 | - Accessibility features
317 | 
318 | ### 🌟 **Showcases Your Skills**
319 | 
320 | - GitHub contribution calendar
321 | - LeetCode statistics
322 | - Project showcase with live demos
323 | - Skills visualization
324 | - Professional experience timeline
325 | 
326 | ---
327 | 
328 | ## 📸 Screenshots
329 | 
330 | > **Note:** Add screenshots of your portfolio here
331 | 
332 | <!--
333 | ![Home Page](./screenshots/home.png)
334 | ![Projects Section](./screenshots/projects.png)
335 | ![Dark Mode](./screenshots/dark-mode.png)
336 | -->
337 | 
338 | ---
339 | 
340 | ## 🤝 Contributing
341 | 
342 | Contributions are welcome! If you have suggestions for improvements or find any bugs, please feel free to:
343 | 
344 | 1. Fork the repository
345 | 2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
346 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
347 | 4. Push to the branch (`git push origin feature/AmazingFeature`)
348 | 5. Open a Pull Request
349 | 
350 | ---
351 | 
352 | ## 📄 License
353 | 
354 | This project is licensed under the ISC License. See the [LICENSE](LICENSE) file for details.
355 | 
356 | ---
357 | 
358 | ## 📧 Contact
359 | 
360 | **Shasbin AS** - Backend Developer
361 | 
362 | - 📧 Email: [shasbin.official@gmail.com](mailto:shasbin.official@gmail.com)
363 | - 💼 LinkedIn: [shasbinasdev](https://linkedin.com/in/shasbinasdev)
364 | - 🐙 GitHub: [@shasbinas](https://github.com/shasbinas)
365 | - 💻 LeetCode: [@shasbinas](https://leetcode.com/shasbinas)
366 | - 📱 Phone: +91 9746998909
367 | - 📄 Resume: [View Resume](https://drive.google.com/file/d/1lf2eQpjK10k9CFMpI7HCLGmskxRb3hdT/view?usp=sharing)
368 | 
369 | **Project Link:** [https://github.com/shasbinas/my-portfolio-nextjs](https://github.com/shasbinas/my-portfolio-nextjs)
370 | 
371 | ---
372 | 
373 | ## 🙏 Acknowledgments
374 | 
375 | - [Next.js](https://nextjs.org/) - The React Framework
376 | - [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
377 | - [Framer Motion](https://www.framer.com/motion/) - Animation library
378 | - [Lucide Icons](https://lucide.dev/) - Beautiful icon library
379 | - [React Icons](https://react-icons.github.io/react-icons/) - Icon library
380 | - [Skill Icons](https://skillicons.dev/) - Skill icons API
381 | - [Prettier](https://prettier.io/) - Code formatter
382 | - [ESLint](https://eslint.org/) - Code linter
383 | - [Vercel](https://vercel.com/) - Deployment platform
384 | 
385 | ---
386 | 
387 | <div align="center">
388 | 
389 | **⭐ If you like this project, give it a star on [GitHub](https://github.com/shasbinas/my-portfolio-nextjs)! ⭐**
390 | 
391 | Made with ❤️ by [Shasbin AS](https://github.com/shasbinas)
392 | 
393 | </div>
394 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @layer base {
  4 |   :root {
  5 |     --background: 275 80% 99%;
  6 |     --foreground: 256 32% 18%;
  7 |     --muted: 280 45% 97%;
  8 |     --muted-foreground: 258 18% 40%;
  9 |     --hover-bg: 276 85% 92%;
 10 |     --border: 274 28% 88%;
 11 |     --border-hover: 282 70% 52%;
 12 |     --accent: 278 70% 55%;
 13 |     --accent-secondary: 294 70% 62%;
 14 |     --grid-line: 276 30% 90%;
 15 |     --radius: 1.25rem;
 16 |   }
 17 | 
 18 |   .dark {
 19 |     --background: 260 65% 5%;
 20 |     --foreground: 288 60% 96%;
 21 |     --muted: 262 40% 12%;
 22 |     --muted-foreground: 279 28% 72%;
 23 |     --hover-bg: 284 80% 24%;
 24 |     --border: 270 30% 20%;
 25 |     --border-hover: 297 85% 65%;
 26 |     --accent: 284 80% 58%;
 27 |     --accent-secondary: 312 80% 60%;
 28 |     --grid-line: 265 28% 18%;
 29 |   }
 30 | 
 31 |   * {
 32 |     scroll-behavior: smooth;
 33 |     font-family:
 34 |       var(--font-outfit),
 35 |       "Space Grotesk",
 36 |       "Segoe UI",
 37 |       system-ui,
 38 |       -apple-system;
 39 |   }
 40 | 
 41 |   body {
 42 |     overflow-x: hidden;
 43 |     min-height: 100vh;
 44 |     background-color: hsl(var(--background));
 45 |     background-image:
 46 |       radial-gradient(
 47 |         circle at 8% 18%,
 48 |         hsl(var(--accent) / 0.28),
 49 |         transparent 45%
 50 |       ),
 51 |       radial-gradient(
 52 |         circle at 78% 2%,
 53 |         hsl(var(--accent-secondary) / 0.2),
 54 |         transparent 40%
 55 |       ),
 56 |       linear-gradient(135deg, hsl(275 80% 99%), hsl(284 60% 98%));
 57 |     background-attachment: fixed;
 58 |     color: hsl(var(--foreground));
 59 |     font-smooth: always;
 60 |     -webkit-font-smoothing: antialiased;
 61 |   }
 62 | 
 63 |   .dark body,
 64 |   body.dark {
 65 |     background-color: hsl(var(--background));
 66 |     background-image:
 67 |       radial-gradient(
 68 |         circle at 18% 25%,
 69 |         hsl(var(--accent) / 0.4),
 70 |         transparent 55%
 71 |       ),
 72 |       radial-gradient(
 73 |         circle at 80% 5%,
 74 |         hsl(var(--accent-secondary) / 0.3),
 75 |         transparent 45%
 76 |       ),
 77 |       linear-gradient(135deg, hsl(258 65% 5%), hsl(265 60% 8%));
 78 |   }
 79 | 
 80 |   body::before {
 81 |     content: "";
 82 |     position: fixed;
 83 |     inset: 0;
 84 |     pointer-events: none;
 85 |     background-image:
 86 |       repeating-linear-gradient(
 87 |         90deg,
 88 |         hsl(var(--grid-line) / 0.35) 0,
 89 |         transparent 1px,
 90 |         transparent 40px
 91 |       ),
 92 |       repeating-linear-gradient(
 93 |         0deg,
 94 |         hsl(var(--grid-line) / 0.35) 0,
 95 |         transparent 1px,
 96 |         transparent 40px
 97 |       );
 98 |     opacity: 0.25;
 99 |     mask-image: linear-gradient(
100 |       180deg,
101 |       transparent,
102 |       black 20%,
103 |       black 80%,
104 |       transparent
105 |     );
106 |     z-index: 0;
107 |   }
108 | 
109 |   ::selection {
110 |     background: hsl(var(--accent));
111 |     color: hsl(var(--background));
112 |   }
113 | 
114 |   .dark ::selection {
115 |     background: hsl(var(--accent-secondary));
116 |     color: hsl(var(--background));
117 |   }
118 | }
119 | 
120 | @layer utilities {
121 |   a,
122 |   .link {
123 |     color: inherit;
124 |     text-decoration: none;
125 |     transition:
126 |       color 200ms ease,
127 |       text-shadow 200ms ease;
128 |   }
129 | 
130 |   a:hover:not(.btn):not(.btn *),
131 |   .link:hover:not(.btn):not(.btn *) {
132 |     color: hsl(var(--border-hover));
133 |     text-shadow: 0 0 12px hsl(var(--border-hover) / 0.5);
134 |   }
135 | 
136 |   .btn {
137 |     position: relative;
138 |     background-image: linear-gradient(
139 |       120deg,
140 |       hsl(var(--accent)),
141 |       hsl(var(--accent-secondary))
142 |     );
143 |     color: hsl(var(--background));
144 |     border-radius: var(--radius);
145 |     padding: 0.65rem 1.25rem;
146 |     border: 1px solid hsl(var(--border-hover) / 0.4);
147 |     box-shadow:
148 |       0 10px 35px hsl(var(--accent) / 0.25),
149 |       inset 0 0 20px hsl(var(--accent-secondary) / 0.3);
150 |     transition:
151 |       transform 200ms ease,
152 |       box-shadow 200ms ease,
153 |       filter 200ms ease;
154 |   }
155 | 
156 |   .btn:hover {
157 |     transform: translateY(-2px) scale(1.01);
158 |     box-shadow:
159 |       0 15px 45px hsl(var(--accent) / 0.35),
160 |       inset 0 0 25px hsl(var(--accent-secondary) / 0.5);
161 |   }
162 | 
163 |   .btn:disabled {
164 |     opacity: 0.7;
165 |     cursor: not-allowed;
166 |     filter: grayscale(0.2);
167 |   }
168 | 
169 |   .badge {
170 |     background: linear-gradient(
171 |       130deg,
172 |       hsl(var(--muted) / 0.7),
173 |       hsl(var(--muted) / 0.4)
174 |     );
175 |     border: 1px solid hsl(var(--border) / 0.6);
176 |     border-radius: 999px;
177 |     padding: 0.35rem 0.75rem;
178 |     font-size: 0.85rem;
179 |     letter-spacing: 0.02em;
180 |     backdrop-filter: blur(8px);
181 |     transition:
182 |       border-color 200ms ease,
183 |       color 200ms ease;
184 |   }
185 | 
186 |   .badge:hover {
187 |     border-color: hsl(var(--border-hover));
188 |     color: hsl(var(--border-hover));
189 |   }
190 | 
191 |   .badge-chip {
192 |     position: relative;
193 |     padding: 0.35rem 0.85rem;
194 |     border-radius: 999px;
195 |     border: 1px solid hsl(var(--border) / 0.6);
196 |     background: hsl(var(--background));
197 |     font-size: 0.78rem;
198 |     letter-spacing: 0.05em;
199 |     text-transform: uppercase;
200 |     transition:
201 |       color 200ms ease,
202 |       border-color 200ms ease,
203 |       box-shadow 200ms ease;
204 |   }
205 | 
206 |   .badge-chip::after {
207 |     content: "";
208 |     position: absolute;
209 |     inset: 0;
210 |     border-radius: inherit;
211 |     border: 1px solid transparent;
212 |     background: linear-gradient(
213 |         120deg,
214 |         hsl(var(--accent) / 0.6),
215 |         hsl(var(--accent-secondary) / 0.6)
216 |       )
217 |       border-box;
218 |     mask:
219 |       linear-gradient(#fff 0 0) padding-box,
220 |       linear-gradient(#fff 0 0);
221 |     mask-composite: exclude;
222 |     opacity: 0;
223 |     transition: opacity 200ms ease;
224 |   }
225 | 
226 |   .badge-chip:hover {
227 |     border-color: hsl(var(--border-hover));
228 |     color: hsl(var(--border-hover));
229 |     box-shadow: 0 8px 24px hsl(var(--border-hover) / 0.3);
230 |   }
231 | 
232 |   .badge-chip:hover::after {
233 |     opacity: 1;
234 |   }
235 | 
236 |   .box {
237 |     background: hsl(var(--muted) / 0.6);
238 |     border: 1px solid hsl(var(--border) / 0.5);
239 |     border-radius: var(--radius);
240 |     backdrop-filter: blur(12px);
241 |     transition:
242 |       transform 250ms ease,
243 |       border-color 200ms ease,
244 |       box-shadow 200ms ease;
245 |   }
246 | 
247 |   .box:hover {
248 |     border-color: hsl(var(--border-hover));
249 |     box-shadow: 0 10px 40px hsl(var(--accent) / 0.15);
250 |     transform: translateY(-3px);
251 |   }
252 | 
253 |   .section-title {
254 |     display: inline-flex;
255 |     align-items: center;
256 |     gap: 0.75rem;
257 |     font-size: clamp(1.25rem, 2vw, 1.5rem);
258 |     font-weight: 600;
259 |     text-transform: lowercase;
260 |     letter-spacing: 0.04em;
261 |     background: linear-gradient(
262 |       120deg,
263 |       hsl(var(--accent)),
264 |       hsl(var(--accent-secondary))
265 |     );
266 |     color: transparent;
267 |     -webkit-background-clip: text;
268 |     background-clip: text;
269 |   }
270 | 
271 |   .section-title::after {
272 |     content: "";
273 |     flex: 1;
274 |     height: 1px;
275 |     background: linear-gradient(90deg, hsl(var(--border-hover)), transparent);
276 |     opacity: 0.5;
277 |   }
278 | 
279 |   .glass-panel {
280 |     position: relative;
281 |     background: hsl(var(--muted) / 0.6);
282 |     border: 1px solid hsl(var(--border) / 0.5);
283 |     border-radius: calc(var(--radius) * 1.1);
284 |     padding: clamp(1.5rem, 3vw, 2.5rem);
285 |     backdrop-filter: blur(18px);
286 |     box-shadow:
287 |       0 30px 80px hsl(var(--accent) / 0.15),
288 |       inset 0 0 20px hsl(var(--muted) / 0.4);
289 |     overflow: hidden;
290 |   }
291 | 
292 |   .glass-panel::before {
293 |     content: "";
294 |     position: absolute;
295 |     inset: 0;
296 |     background: radial-gradient(
297 |       circle at 20% 20%,
298 |       hsl(var(--accent) / 0.3),
299 |       transparent 45%
300 |     );
301 |     opacity: 0.5;
302 |     pointer-events: none;
303 |   }
304 | 
305 |   .glass-panel > * {
306 |     position: relative;
307 |     z-index: 1;
308 |   }
309 | 
310 |   .hover-lift {
311 |     transition:
312 |       transform 300ms ease,
313 |       box-shadow 300ms ease;
314 |   }
315 | 
316 |   .hover-lift:hover {
317 |     transform: translateY(-6px) scale(1.01);
318 |     box-shadow: 0 30px 70px hsl(var(--accent) / 0.25);
319 |   }
320 | 
321 |   .tilt-card {
322 |     position: relative;
323 |     border-radius: calc(var(--radius) * 1.1);
324 |     border: 1px solid hsl(var(--border) / 0.45);
325 |     background: hsl(var(--muted) / 0.55);
326 |     backdrop-filter: blur(18px);
327 |     transition:
328 |       transform 350ms ease,
329 |       border-color 250ms ease,
330 |       box-shadow 350ms ease;
331 |     overflow: hidden;
332 |   }
333 | 
334 |   .tilt-card::before {
335 |     content: "";
336 |     position: absolute;
337 |     inset: -1px;
338 |     border-radius: inherit;
339 |     background: linear-gradient(
340 |       120deg,
341 |       hsl(var(--accent) / 0.45),
342 |       transparent,
343 |       hsl(var(--accent-secondary) / 0.45)
344 |     );
345 |     opacity: 0;
346 |     transition: opacity 300ms ease;
347 |   }
348 | 
349 |   .tilt-card:hover {
350 |     transform: translateY(-10px) rotate3d(1, -1, 0, 6deg);
351 |     border-color: hsl(var(--border-hover));
352 |     box-shadow: 0 35px 90px hsl(var(--accent) / 0.25);
353 |   }
354 | 
355 |   .tilt-card:hover::before {
356 |     opacity: 1;
357 |   }
358 | 
359 |   .glow-button {
360 |     position: relative;
361 |     padding: 0.55rem 1.35rem;
362 |     border-radius: 999px;
363 |     border: none;
364 |     background-image: linear-gradient(
365 |       120deg,
366 |       hsl(var(--accent)),
367 |       hsl(var(--accent-secondary))
368 |     );
369 |     color: hsl(var(--background));
370 |     font-weight: 600;
371 |     text-transform: lowercase;
372 |     letter-spacing: 0.06em;
373 |     transition:
374 |       transform 200ms ease,
375 |       box-shadow 200ms ease;
376 |     overflow: hidden;
377 |   }
378 | 
379 |   .glow-button::after {
380 |     content: "";
381 |     position: absolute;
382 |     inset: 0;
383 |     border-radius: inherit;
384 |     border: 1px solid hsl(var(--border-hover) / 0.6);
385 |     opacity: 0;
386 |     transition: opacity 200ms ease;
387 |   }
388 | 
389 |   .glow-button:hover {
390 |     transform: translateY(-3px);
391 |     box-shadow:
392 |       0 12px 35px hsl(var(--accent) / 0.35),
393 |       inset 0 0 25px hsl(var(--accent-secondary) / 0.4);
394 |   }
395 | 
396 |   .glow-button:hover::after {
397 |     opacity: 1;
398 |   }
399 | 
400 |   .glow-button--ghost {
401 |     border: 1px solid hsl(var(--border-hover) / 0.6);
402 |     background: transparent;
403 |     color: hsl(var(--border-hover));
404 |     box-shadow: none;
405 |   }
406 | 
407 |   .glow-button--ghost:hover {
408 |     background: hsl(var(--border-hover) / 0.08);
409 |     box-shadow: 0 15px 35px hsl(var(--border-hover) / 0.2);
410 |   }
411 | 
412 |   .orbital-border {
413 |     position: relative;
414 |     border-radius: inherit;
415 |   }
416 | 
417 |   .orbital-border::after {
418 |     content: "";
419 |     position: absolute;
420 |     inset: -1px;
421 |     border-radius: inherit;
422 |     background: conic-gradient(
423 |       from 90deg,
424 |       hsl(var(--accent)),
425 |       hsl(var(--accent-secondary)),
426 |       hsl(var(--accent))
427 |     );
428 |     opacity: 0.4;
429 |     filter: blur(12px);
430 |     z-index: -1;
431 |   }
432 | 
433 |   .nav-pill {
434 |     padding: 0.45rem 1.2rem;
435 |     border-radius: 999px;
436 |     border: 1px solid hsl(var(--border) / 0.6);
437 |     background: hsl(var(--muted) / 0.2);
438 |     color: hsl(var(--foreground) / 0.8);
439 |     font-size: 0.9rem;
440 |     text-transform: lowercase;
441 |     transition:
442 |       color 200ms ease,
443 |       border-color 200ms ease,
444 |       box-shadow 200ms ease,
445 |       transform 200ms ease;
446 |   }
447 | 
448 |   .nav-pill:hover {
449 |     color: hsl(var(--foreground));
450 |     border-color: hsl(var(--border-hover));
451 |     box-shadow: 0 0 20px hsl(var(--border-hover) / 0.35);
452 |     transform: translateY(-3px);
453 |   }
454 | 
455 |   .skill-chip {
456 |     display: inline-flex;
457 |     align-items: center;
458 |     gap: 0.4rem;
459 |     padding: 0.4rem 0.85rem;
460 |     border-radius: 999px;
461 |     background: hsl(var(--muted) / 0.45);
462 |     border: 1px solid hsl(var(--border) / 0.5);
463 |     font-size: 0.85rem;
464 |     letter-spacing: 0.03em;
465 |     text-transform: uppercase;
466 |     color: hsl(var(--foreground));
467 |     transition:
468 |       border-color 200ms ease,
469 |       background 200ms ease,
470 |       transform 200ms ease;
471 |   }
472 | 
473 |   .skill-chip:hover {
474 |     border-color: hsl(var(--border-hover));
475 |     background: hsl(var(--muted) / 0.7);
476 |     transform: translateY(-2px);
477 |   }
478 | 
479 |   .field-control {
480 |     width: 100%;
481 |     padding: 0.85rem 1rem 0.85rem 2.75rem;
482 |     border-radius: calc(var(--radius) * 0.6);
483 |     border: 1px solid hsl(var(--border) / 0.6);
484 |     background: hsl(var(--muted) / 0.35);
485 |     color: hsl(var(--foreground));
486 |     caret-color: hsl(var(--border-hover));
487 |     transition:
488 |       border-color 200ms ease,
489 |       box-shadow 200ms ease,
490 |       background 200ms ease;
491 |   }
492 | 
493 |   .field-control::placeholder {
494 |     color: hsl(var(--muted-foreground));
495 |   }
496 | 
497 |   .field-control:focus {
498 |     outline: none;
499 |     border-color: hsl(var(--border-hover));
500 |     background: hsl(var(--muted) / 0.5);
501 |     box-shadow: 0 0 0 2px hsl(var(--border-hover) / 0.25);
502 |   }
503 | 
504 |   textarea.field-control {
505 |     min-height: 140px;
506 |     resize: none;
507 |   }
508 | 
509 |   .contact-card {
510 |     border-radius: calc(var(--radius) * 0.9);
511 |     border: 1px solid hsl(var(--border) / 0.6);
512 |     padding: 1rem;
513 |     background: linear-gradient(
514 |       145deg,
515 |       hsl(var(--muted) / 0.7),
516 |       hsl(var(--muted) / 0.4)
517 |     );
518 |     box-shadow: inset 0 0 20px hsl(var(--muted) / 0.5);
519 |     transition:
520 |       transform 250ms ease,
521 |       border-color 200ms ease;
522 |   }
523 | 
524 |   .contact-card:hover {
525 |     transform: translateY(-4px);
526 |     border-color: hsl(var(--border-hover));
527 |   }
528 | 
529 |   .retro-grid {
530 |     background-image:
531 |       radial-gradient(
532 |         circle at 50% 0%,
533 |         hsl(var(--accent-secondary) / 0.18),
534 |         transparent 70%
535 |       ),
536 |       repeating-linear-gradient(
537 |         to right,
538 |         transparent,
539 |         transparent 39px,
540 |         hsl(var(--grid-line) / 0.25) 40px
541 |       ),
542 |       repeating-linear-gradient(
543 |         to bottom,
544 |         transparent,
545 |         transparent 39px,
546 |         hsl(var(--grid-line) / 0.25) 40px
547 |       );
548 |   }
549 | 
550 |   .grid-pattern {
551 |     -webkit-mask-image: linear-gradient(
552 |       150deg,
553 |       #000 0%,
554 |       #000 4%,
555 |       transparent 35%,
556 |       transparent 100%
557 |     );
558 |     mask-image: linear-gradient(
559 |       150deg,
560 |       #000 0%,
561 |       #000 4%,
562 |       transparent 35%,
563 |       transparent 100%
564 |     );
565 |     animation: grid-move 40s linear infinite;
566 |     opacity: 0.6;
567 |   }
568 | 
569 |   .aurora-glow {
570 |     position: fixed;
571 |     inset: 0;
572 |     pointer-events: none;
573 |     background:
574 |       radial-gradient(
575 |         circle at 20% 30%,
576 |         hsl(var(--accent) / 0.25),
577 |         transparent 55%
578 |       ),
579 |       radial-gradient(
580 |         circle at 80% 10%,
581 |         hsl(var(--accent-secondary) / 0.25),
582 |         transparent 50%
583 |       ),
584 |       conic-gradient(
585 |         from 120deg,
586 |         hsl(var(--accent) / 0.08),
587 |         transparent,
588 |         hsl(var(--accent-secondary) / 0.08)
589 |       );
590 |     mix-blend-mode: screen;
591 |     opacity: 0.65;
592 |     animation: auroraFlow 18s ease-in-out infinite alternate;
593 |   }
594 | 
595 |   @media (max-width: 768px) {
596 |     .grid-pattern {
597 |       -webkit-mask-image: linear-gradient(
598 |         170deg,
599 |         #000 0%,
600 |         #000 2%,
601 |         transparent 20%,
602 |         transparent 100%
603 |       );
604 |       mask-image: linear-gradient(
605 |         170deg,
606 |         #000 0%,
607 |         #000 2%,
608 |         transparent 20%,
609 |         transparent 100%
610 |       );
611 |     }
612 | 
613 |     .aurora-glow {
614 |       opacity: 0.35;
615 |     }
616 |   }
617 | 
618 |   @keyframes grid-move {
619 |     0% {
620 |       transform: translateY(0);
621 |     }
622 |     100% {
623 |       transform: translateY(80px);
624 |     }
625 |   }
626 | 
627 |   @keyframes float {
628 |     0%,
629 |     100% {
630 |       transform: translateY(0px);
631 |     }
632 |     50% {
633 |       transform: translateY(-6px);
634 |     }
635 |   }
636 | 
637 |   @keyframes aurora {
638 |     0% {
639 |       background-position: 0% 50%;
640 |     }
641 |     50% {
642 |       background-position: 100% 50%;
643 |     }
644 |     100% {
645 |       background-position: 0% 50%;
646 |     }
647 |   }
648 | 
649 |   @keyframes auroraFlow {
650 |     0% {
651 |       transform: translateY(0) scale(1);
652 |       filter: blur(0);
653 |     }
654 |     50% {
655 |       transform: translateY(-25px) scale(1.05);
656 |       filter: blur(2px);
657 |     }
658 |     100% {
659 |       transform: translateY(15px) scale(0.98);
660 |       filter: blur(1px);
661 |     }
662 |   }
663 | }
664 | 


--------------------------------------------------------------------------------
/src/hooks/use-FluidCursor.ts:
--------------------------------------------------------------------------------
   1 | /* eslint-disable @typescript-eslint/no-explicit-any */
   2 | import { useEffect, RefObject } from "react";
   3 | 
   4 | const useFluidCursor = (canvasRef: RefObject<HTMLCanvasElement | null>) => {
   5 |   useEffect(() => {
   6 |     const canvas = canvasRef.current;
   7 |     if (!canvas) return;
   8 | 
   9 |     // Canvas is guaranteed to be non-null here
  10 |     const canvasElement = canvas;
  11 | 
  12 |     //try to adjust settings
  13 |     const config = {
  14 |       SIM_RESOLUTION: 128,
  15 |       DYE_RESOLUTION: 1440,
  16 |       CAPTURE_RESOLUTION: 512,
  17 |       DENSITY_DISSIPATION: 3.5,
  18 |       VELOCITY_DISSIPATION: 2,
  19 |       PRESSURE: 0.1,
  20 |       PRESSURE_ITERATIONS: 20,
  21 |       CURL: 3,
  22 |       SPLAT_RADIUS: 0.2,
  23 |       SPLAT_FORCE: 6000,
  24 |       SHADING: true,
  25 |       COLOR_UPDATE_SPEED: 10,
  26 |       PAUSED: false,
  27 |       BACK_COLOR: { r: 0.5, g: 0, b: 0 },
  28 |       TRANSPARENT: true,
  29 |     };
  30 | 
  31 |     interface Pointer {
  32 |       id: number;
  33 |       texcoordX: number;
  34 |       texcoordY: number;
  35 |       prevTexcoordX: number;
  36 |       prevTexcoordY: number;
  37 |       deltaX: number;
  38 |       deltaY: number;
  39 |       down: boolean;
  40 |       moved: boolean;
  41 |       color: number[] | { r: number; g: number; b: number };
  42 |     }
  43 | 
  44 |     function createPointer(): Pointer {
  45 |       return {
  46 |         id: -1,
  47 |         texcoordX: 0,
  48 |         texcoordY: 0,
  49 |         prevTexcoordX: 0,
  50 |         prevTexcoordY: 0,
  51 |         deltaX: 0,
  52 |         deltaY: 0,
  53 |         down: false,
  54 |         moved: false,
  55 |         color: [0, 0, 0],
  56 |       };
  57 |     }
  58 | 
  59 |     const pointers: Pointer[] = [];
  60 |     pointers.push(createPointer());
  61 | 
  62 |     // Helper functions that don't need gl
  63 |     function scaleByPixelRatio(input: number): number {
  64 |       const pixelRatio = window.devicePixelRatio || 1;
  65 |       return Math.floor(input * pixelRatio);
  66 |     }
  67 | 
  68 |     function resizeCanvas(): boolean {
  69 |       const width = scaleByPixelRatio(canvasElement.clientWidth);
  70 |       const height = scaleByPixelRatio(canvasElement.clientHeight);
  71 |       if (canvasElement.width != width || canvasElement.height != height) {
  72 |         canvasElement.width = width;
  73 |         canvasElement.height = height;
  74 |         return true;
  75 |       }
  76 |       return false;
  77 |     }
  78 | 
  79 |     function getWebGLContext(canvas: HTMLCanvasElement): any {
  80 |       const params = {
  81 |         alpha: true,
  82 |         depth: false,
  83 |         stencil: false,
  84 |         antialias: false,
  85 |         preserveDrawingBuffer: false,
  86 |       };
  87 | 
  88 |       let gl = canvas.getContext("webgl2", params) as
  89 |         | WebGLRenderingContext
  90 |         | WebGL2RenderingContext
  91 |         | null;
  92 |       const isWebGL2 = !!gl;
  93 |       if (!isWebGL2)
  94 |         gl = (canvas.getContext("webgl", params) ||
  95 |           canvas.getContext(
  96 |             "experimental-webgl",
  97 |             params
  98 |           )) as WebGLRenderingContext | null;
  99 | 
 100 |       if (!gl) {
 101 |         console.error("WebGL not supported");
 102 |         return { gl: null, ext: null };
 103 |       }
 104 | 
 105 |       let halfFloat: OES_texture_half_float | null = null;
 106 |       let supportLinearFiltering:
 107 |         | OES_texture_float_linear
 108 |         | OES_texture_half_float_linear
 109 |         | null = null;
 110 |       if (isWebGL2) {
 111 |         gl.getExtension("EXT_color_buffer_float");
 112 |         supportLinearFiltering = gl.getExtension("OES_texture_float_linear");
 113 |       } else {
 114 |         halfFloat = gl.getExtension("OES_texture_half_float");
 115 |         supportLinearFiltering = gl.getExtension(
 116 |           "OES_texture_half_float_linear"
 117 |         );
 118 |       }
 119 | 
 120 |       gl.clearColor(0.0, 0.0, 0.0, 1.0);
 121 | 
 122 |       const halfFloatTexType = isWebGL2
 123 |         ? (gl as WebGL2RenderingContext).HALF_FLOAT
 124 |         : halfFloat?.HALF_FLOAT_OES || 0;
 125 |       let formatRGBA;
 126 |       let formatRG;
 127 |       let formatR;
 128 | 
 129 |       const gl2 = gl as WebGL2RenderingContext;
 130 |       const gl1 = gl as WebGLRenderingContext;
 131 | 
 132 |       if (isWebGL2) {
 133 |         formatRGBA = getSupportedFormat(
 134 |           gl,
 135 |           gl2.RGBA16F,
 136 |           gl2.RGBA,
 137 |           halfFloatTexType
 138 |         );
 139 |         formatRG = getSupportedFormat(gl, gl2.RG16F, gl2.RG, halfFloatTexType);
 140 |         formatR = getSupportedFormat(gl, gl2.R16F, gl2.RED, halfFloatTexType);
 141 |       } else {
 142 |         formatRGBA = getSupportedFormat(
 143 |           gl,
 144 |           gl1.RGBA,
 145 |           gl1.RGBA,
 146 |           halfFloatTexType
 147 |         );
 148 |         formatRG = getSupportedFormat(gl, gl1.RGBA, gl1.RGBA, halfFloatTexType);
 149 |         formatR = getSupportedFormat(gl, gl1.RGBA, gl1.RGBA, halfFloatTexType);
 150 |       }
 151 | 
 152 |       return {
 153 |         gl,
 154 |         ext: {
 155 |           formatRGBA,
 156 |           formatRG,
 157 |           formatR,
 158 |           halfFloatTexType,
 159 |           supportLinearFiltering,
 160 |         },
 161 |       };
 162 |     }
 163 | 
 164 |     // Initialize WebGL context FIRST, before any functions that use gl
 165 |     resizeCanvas();
 166 |     const webGLContext = getWebGLContext(canvasElement);
 167 |     const gl = webGLContext.gl;
 168 |     const ext = webGLContext.ext;
 169 | 
 170 |     if (!gl || !ext) {
 171 |       console.error("WebGL initialization failed");
 172 |       return;
 173 |     }
 174 | 
 175 |     if (!ext.supportLinearFiltering) {
 176 |       config.DYE_RESOLUTION = 256;
 177 |       config.SHADING = false;
 178 |     }
 179 | 
 180 |     function getSupportedFormat(
 181 |       gl: any,
 182 |       internalFormat: number,
 183 |       format: number,
 184 |       type: number
 185 |     ): any {
 186 |       if (!supportRenderTextureFormat(gl, internalFormat, format, type)) {
 187 |         switch (internalFormat) {
 188 |           case gl.R16F:
 189 |             return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
 190 |           case gl.RG16F:
 191 |             return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
 192 |           default:
 193 |             return null;
 194 |         }
 195 |       }
 196 | 
 197 |       return {
 198 |         internalFormat,
 199 |         format,
 200 |       };
 201 |     }
 202 | 
 203 |     function supportRenderTextureFormat(
 204 |       gl: any,
 205 |       internalFormat: number,
 206 |       format: number,
 207 |       type: number
 208 |     ): boolean {
 209 |       const texture = gl.createTexture();
 210 |       gl.bindTexture(gl.TEXTURE_2D, texture);
 211 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 212 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 213 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 214 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 215 |       gl.texImage2D(
 216 |         gl.TEXTURE_2D,
 217 |         0,
 218 |         internalFormat,
 219 |         4,
 220 |         4,
 221 |         0,
 222 |         format,
 223 |         type,
 224 |         null
 225 |       );
 226 | 
 227 |       const fbo = gl.createFramebuffer();
 228 |       gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
 229 |       gl.framebufferTexture2D(
 230 |         gl.FRAMEBUFFER,
 231 |         gl.COLOR_ATTACHMENT0,
 232 |         gl.TEXTURE_2D,
 233 |         texture,
 234 |         0
 235 |       );
 236 | 
 237 |       const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 238 |       return status == gl.FRAMEBUFFER_COMPLETE;
 239 |     }
 240 | 
 241 |     class Material {
 242 |       vertexShader: WebGLShader;
 243 |       fragmentShaderSource: string;
 244 |       programs: any[];
 245 |       activeProgram: WebGLProgram | null;
 246 |       uniforms: any;
 247 | 
 248 |       constructor(vertexShader: WebGLShader, fragmentShaderSource: string) {
 249 |         this.vertexShader = vertexShader;
 250 |         this.fragmentShaderSource = fragmentShaderSource;
 251 |         this.programs = [];
 252 |         this.activeProgram = null;
 253 |         this.uniforms = [];
 254 |       }
 255 | 
 256 |       setKeywords(keywords: string[]) {
 257 |         let hash = 0;
 258 |         for (let i = 0; i < keywords.length; i++) hash += hashCode(keywords[i]);
 259 | 
 260 |         let program = this.programs[hash];
 261 |         if (program == null) {
 262 |           const fragmentShader = compileShader(
 263 |             gl.FRAGMENT_SHADER,
 264 |             this.fragmentShaderSource,
 265 |             keywords
 266 |           );
 267 |           program = createProgram(this.vertexShader, fragmentShader);
 268 |           this.programs[hash] = program;
 269 |         }
 270 | 
 271 |         if (program == this.activeProgram) return;
 272 | 
 273 |         this.uniforms = getUniforms(program);
 274 |         this.activeProgram = program;
 275 |       }
 276 | 
 277 |       bind() {
 278 |         gl.useProgram(this.activeProgram);
 279 |       }
 280 |     }
 281 | 
 282 |     class Program {
 283 |       uniforms: any;
 284 |       program: WebGLProgram;
 285 | 
 286 |       constructor(vertexShader: WebGLShader, fragmentShader: WebGLShader) {
 287 |         this.uniforms = {};
 288 |         this.program = createProgram(vertexShader, fragmentShader);
 289 |         this.uniforms = getUniforms(this.program);
 290 |       }
 291 | 
 292 |       bind() {
 293 |         gl.useProgram(this.program);
 294 |       }
 295 |     }
 296 | 
 297 |     function createProgram(
 298 |       vertexShader: WebGLShader,
 299 |       fragmentShader: WebGLShader
 300 |     ): WebGLProgram {
 301 |       const program = gl.createProgram();
 302 |       gl.attachShader(program, vertexShader);
 303 |       gl.attachShader(program, fragmentShader);
 304 |       gl.linkProgram(program);
 305 | 
 306 |       if (!gl.getProgramParameter(program, gl.LINK_STATUS))
 307 |         console.trace(gl.getProgramInfoLog(program));
 308 | 
 309 |       return program;
 310 |     }
 311 | 
 312 |     function getUniforms(program: WebGLProgram): any {
 313 |       const uniforms: any = [];
 314 |       const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
 315 |       for (let i = 0; i < uniformCount; i++) {
 316 |         const uniformName = gl.getActiveUniform(program, i)?.name;
 317 |         uniforms[uniformName] = gl.getUniformLocation(program, uniformName);
 318 |       }
 319 |       return uniforms;
 320 |     }
 321 | 
 322 |     function compileShader(
 323 |       type: number,
 324 |       source: string,
 325 |       keywords: string[] | null
 326 |     ): WebGLShader {
 327 |       source = addKeywords(source, keywords);
 328 | 
 329 |       const shader = gl.createShader(type);
 330 |       gl.shaderSource(shader, source);
 331 |       gl.compileShader(shader);
 332 | 
 333 |       if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
 334 |         console.trace(gl.getShaderInfoLog(shader));
 335 | 
 336 |       return shader;
 337 |     }
 338 | 
 339 |     function addKeywords(source: string, keywords: string[] | null): string {
 340 |       if (keywords == null) return source;
 341 |       let keywordsString = "";
 342 |       keywords.forEach((keyword) => {
 343 |         keywordsString += "#define " + keyword + "\n";
 344 |       });
 345 | 
 346 |       return keywordsString + source;
 347 |     }
 348 | 
 349 |     const baseVertexShader = compileShader(
 350 |       gl.VERTEX_SHADER,
 351 |       `
 352 |          precision highp float;
 353 |      
 354 |          attribute vec2 aPosition;
 355 |          varying vec2 vUv;
 356 |          varying vec2 vL;
 357 |          varying vec2 vR;
 358 |          varying vec2 vT;
 359 |          varying vec2 vB;
 360 |          uniform vec2 texelSize;
 361 |      
 362 |          void main () {
 363 |              vUv = aPosition * 0.5 + 0.5;
 364 |              vL = vUv - vec2(texelSize.x, 0.0);
 365 |              vR = vUv + vec2(texelSize.x, 0.0);
 366 |              vT = vUv + vec2(0.0, texelSize.y);
 367 |              vB = vUv - vec2(0.0, texelSize.y);
 368 |              gl_Position = vec4(aPosition, 0.0, 1.0);
 369 |          }
 370 |      `,
 371 |       null
 372 |     );
 373 | 
 374 |     // eslint-disable-next-line @typescript-eslint/no-unused-vars
 375 |     const blurVertexShader = compileShader(
 376 |       gl.VERTEX_SHADER,
 377 |       `
 378 |          precision highp float;
 379 |      
 380 |          attribute vec2 aPosition;
 381 |          varying vec2 vUv;
 382 |          varying vec2 vL;
 383 |          varying vec2 vR;
 384 |          uniform vec2 texelSize;
 385 |      
 386 |          void main () {
 387 |              vUv = aPosition * 0.5 + 0.5;
 388 |              float offset = 1.33333333;
 389 |              vL = vUv - texelSize * offset;
 390 |              vR = vUv + texelSize * offset;
 391 |              gl_Position = vec4(aPosition, 0.0, 1.0);
 392 |          }
 393 |      `,
 394 |       null
 395 |     );
 396 | 
 397 |     // eslint-disable-next-line @typescript-eslint/no-unused-vars
 398 |     const blurShader = compileShader(
 399 |       gl.FRAGMENT_SHADER,
 400 |       `
 401 |          precision mediump float;
 402 |          precision mediump sampler2D;
 403 |      
 404 |          varying vec2 vUv;
 405 |          varying vec2 vL;
 406 |          varying vec2 vR;
 407 |          uniform sampler2D uTexture;
 408 |      
 409 |          void main () {
 410 |              vec4 sum = texture2D(uTexture, vUv) * 0.29411764;
 411 |              sum += texture2D(uTexture, vL) * 0.35294117;
 412 |              sum += texture2D(uTexture, vR) * 0.35294117;
 413 |              gl_FragColor = sum;
 414 |          }
 415 |      `,
 416 |       null
 417 |     );
 418 | 
 419 |     const copyShader = compileShader(
 420 |       gl.FRAGMENT_SHADER,
 421 |       `
 422 |          precision mediump float;
 423 |          precision mediump sampler2D;
 424 |      
 425 |          varying highp vec2 vUv;
 426 |          uniform sampler2D uTexture;
 427 |      
 428 |          void main () {
 429 |              gl_FragColor = texture2D(uTexture, vUv);
 430 |          }
 431 |      `,
 432 |       null
 433 |     );
 434 | 
 435 |     const clearShader = compileShader(
 436 |       gl.FRAGMENT_SHADER,
 437 |       `
 438 |          precision mediump float;
 439 |          precision mediump sampler2D;
 440 |      
 441 |          varying highp vec2 vUv;
 442 |          uniform sampler2D uTexture;
 443 |          uniform float value;
 444 |      
 445 |          void main () {
 446 |              gl_FragColor = value * texture2D(uTexture, vUv);
 447 |          }
 448 |      `,
 449 |       null
 450 |     );
 451 | 
 452 |     // eslint-disable-next-line @typescript-eslint/no-unused-vars
 453 |     const colorShader = compileShader(
 454 |       gl.FRAGMENT_SHADER,
 455 |       `
 456 |          precision mediump float;
 457 |      
 458 |          uniform vec4 color;
 459 |      
 460 |          void main () {
 461 |              gl_FragColor = color;
 462 |          }
 463 |      `,
 464 |       null
 465 |     );
 466 | 
 467 |     const displayShaderSource = `
 468 |          precision highp float;
 469 |          precision highp sampler2D;
 470 |      
 471 |          varying vec2 vUv;
 472 |          varying vec2 vL;
 473 |          varying vec2 vR;
 474 |          varying vec2 vT;
 475 |          varying vec2 vB;
 476 |          uniform sampler2D uTexture;
 477 |          uniform sampler2D uDithering;
 478 |          uniform vec2 ditherScale;
 479 |          uniform vec2 texelSize;
 480 |      
 481 |          vec3 linearToGamma (vec3 color) {
 482 |              color = max(color, vec3(0));
 483 |              return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0));
 484 |          }
 485 |      
 486 |          void main () {
 487 |              vec3 c = texture2D(uTexture, vUv).rgb;
 488 |      
 489 |          #ifdef SHADING
 490 |              vec3 lc = texture2D(uTexture, vL).rgb;
 491 |              vec3 rc = texture2D(uTexture, vR).rgb;
 492 |              vec3 tc = texture2D(uTexture, vT).rgb;
 493 |              vec3 bc = texture2D(uTexture, vB).rgb;
 494 |      
 495 |              float dx = length(rc) - length(lc);
 496 |              float dy = length(tc) - length(bc);
 497 |      
 498 |              vec3 n = normalize(vec3(dx, dy, length(texelSize)));
 499 |              vec3 l = vec3(0.0, 0.0, 1.0);
 500 |      
 501 |              float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
 502 |              c *= diffuse;
 503 |          #endif
 504 |      
 505 |              float a = max(c.r, max(c.g, c.b));
 506 |              gl_FragColor = vec4(c, a);
 507 |          }
 508 |      `;
 509 | 
 510 |     const splatShader = compileShader(
 511 |       gl.FRAGMENT_SHADER,
 512 |       `
 513 |          precision highp float;
 514 |          precision highp sampler2D;
 515 |      
 516 |          varying vec2 vUv;
 517 |          uniform sampler2D uTarget;
 518 |          uniform float aspectRatio;
 519 |          uniform vec3 color;
 520 |          uniform vec2 point;
 521 |          uniform float radius;
 522 |      
 523 |          void main () {
 524 |              vec2 p = vUv - point.xy;
 525 |              p.x *= aspectRatio;
 526 |              vec3 splat = exp(-dot(p, p) / radius) * color;
 527 |              vec3 base = texture2D(uTarget, vUv).xyz;
 528 |              gl_FragColor = vec4(base + splat, 1.0);
 529 |          }
 530 |      `,
 531 |       null
 532 |     );
 533 | 
 534 |     const advectionShader = compileShader(
 535 |       gl.FRAGMENT_SHADER,
 536 |       `
 537 |          precision highp float;
 538 |          precision highp sampler2D;
 539 |      
 540 |          varying vec2 vUv;
 541 |          uniform sampler2D uVelocity;
 542 |          uniform sampler2D uSource;
 543 |          uniform vec2 texelSize;
 544 |          uniform vec2 dyeTexelSize;
 545 |          uniform float dt;
 546 |          uniform float dissipation;
 547 |      
 548 |          vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
 549 |              vec2 st = uv / tsize - 0.5;
 550 |      
 551 |              vec2 iuv = floor(st);
 552 |              vec2 fuv = fract(st);
 553 |      
 554 |              vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
 555 |              vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
 556 |              vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
 557 |              vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
 558 |      
 559 |              return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
 560 |          }
 561 |      
 562 |          void main () {
 563 |          #ifdef MANUAL_FILTERING
 564 |              vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
 565 |              vec4 result = bilerp(uSource, coord, dyeTexelSize);
 566 |          #else
 567 |              vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
 568 |              vec4 result = texture2D(uSource, coord);
 569 |          #endif
 570 |              float decay = 1.0 + dissipation * dt;
 571 |              gl_FragColor = result / decay;
 572 |          }`,
 573 |       ext.supportLinearFiltering ? null : ["MANUAL_FILTERING"]
 574 |     );
 575 | 
 576 |     const divergenceShader = compileShader(
 577 |       gl.FRAGMENT_SHADER,
 578 |       `
 579 |          precision mediump float;
 580 |          precision mediump sampler2D;
 581 |      
 582 |          varying highp vec2 vUv;
 583 |          varying highp vec2 vL;
 584 |          varying highp vec2 vR;
 585 |          varying highp vec2 vT;
 586 |          varying highp vec2 vB;
 587 |          uniform sampler2D uVelocity;
 588 |      
 589 |          void main () {
 590 |              float L = texture2D(uVelocity, vL).x;
 591 |              float R = texture2D(uVelocity, vR).x;
 592 |              float T = texture2D(uVelocity, vT).y;
 593 |              float B = texture2D(uVelocity, vB).y;
 594 |      
 595 |              vec2 C = texture2D(uVelocity, vUv).xy;
 596 |              if (vL.x < 0.0) { L = -C.x; }
 597 |              if (vR.x > 1.0) { R = -C.x; }
 598 |              if (vT.y > 1.0) { T = -C.y; }
 599 |              if (vB.y < 0.0) { B = -C.y; }
 600 |      
 601 |              float div = 0.5 * (R - L + T - B);
 602 |              gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
 603 |          }
 604 |      `,
 605 |       null
 606 |     );
 607 | 
 608 |     const curlShader = compileShader(
 609 |       gl.FRAGMENT_SHADER,
 610 |       `
 611 |          precision mediump float;
 612 |          precision mediump sampler2D;
 613 |      
 614 |          varying highp vec2 vUv;
 615 |          varying highp vec2 vL;
 616 |          varying highp vec2 vR;
 617 |          varying highp vec2 vT;
 618 |          varying highp vec2 vB;
 619 |          uniform sampler2D uVelocity;
 620 |      
 621 |          void main () {
 622 |              float L = texture2D(uVelocity, vL).y;
 623 |              float R = texture2D(uVelocity, vR).y;
 624 |              float T = texture2D(uVelocity, vT).x;
 625 |              float B = texture2D(uVelocity, vB).x;
 626 |              float vorticity = R - L - T + B;
 627 |              gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
 628 |          }
 629 |      `,
 630 |       null
 631 |     );
 632 | 
 633 |     const vorticityShader = compileShader(
 634 |       gl.FRAGMENT_SHADER,
 635 |       `
 636 |          precision highp float;
 637 |          precision highp sampler2D;
 638 |      
 639 |          varying vec2 vUv;
 640 |          varying vec2 vL;
 641 |          varying vec2 vR;
 642 |          varying vec2 vT;
 643 |          varying vec2 vB;
 644 |          uniform sampler2D uVelocity;
 645 |          uniform sampler2D uCurl;
 646 |          uniform float curl;
 647 |          uniform float dt;
 648 |      
 649 |          void main () {
 650 |              float L = texture2D(uCurl, vL).x;
 651 |              float R = texture2D(uCurl, vR).x;
 652 |              float T = texture2D(uCurl, vT).x;
 653 |              float B = texture2D(uCurl, vB).x;
 654 |              float C = texture2D(uCurl, vUv).x;
 655 |      
 656 |              vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
 657 |              force /= length(force) + 0.0001;
 658 |              force *= curl * C;
 659 |              force.y *= -1.0;
 660 |      
 661 |              vec2 velocity = texture2D(uVelocity, vUv).xy;
 662 |              velocity += force * dt;
 663 |              velocity = min(max(velocity, -1000.0), 1000.0);
 664 |              gl_FragColor = vec4(velocity, 0.0, 1.0);
 665 |          }
 666 |      `,
 667 |       null
 668 |     );
 669 | 
 670 |     const pressureShader = compileShader(
 671 |       gl.FRAGMENT_SHADER,
 672 |       `
 673 |          precision mediump float;
 674 |          precision mediump sampler2D;
 675 |      
 676 |          varying highp vec2 vUv;
 677 |          varying highp vec2 vL;
 678 |          varying highp vec2 vR;
 679 |          varying highp vec2 vT;
 680 |          varying highp vec2 vB;
 681 |          uniform sampler2D uPressure;
 682 |          uniform sampler2D uDivergence;
 683 |      
 684 |          void main () {
 685 |              float L = texture2D(uPressure, vL).x;
 686 |              float R = texture2D(uPressure, vR).x;
 687 |              float T = texture2D(uPressure, vT).x;
 688 |              float B = texture2D(uPressure, vB).x;
 689 |              float C = texture2D(uPressure, vUv).x;
 690 |              float divergence = texture2D(uDivergence, vUv).x;
 691 |              float pressure = (L + R + B + T - divergence) * 0.25;
 692 |              gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
 693 |          }
 694 |      `,
 695 |       null
 696 |     );
 697 | 
 698 |     const gradientSubtractShader = compileShader(
 699 |       gl.FRAGMENT_SHADER,
 700 |       `
 701 |          precision mediump float;
 702 |          precision mediump sampler2D;
 703 |      
 704 |          varying highp vec2 vUv;
 705 |          varying highp vec2 vL;
 706 |          varying highp vec2 vR;
 707 |          varying highp vec2 vT;
 708 |          varying highp vec2 vB;
 709 |          uniform sampler2D uPressure;
 710 |          uniform sampler2D uVelocity;
 711 |      
 712 |          void main () {
 713 |              float L = texture2D(uPressure, vL).x;
 714 |              float R = texture2D(uPressure, vR).x;
 715 |              float T = texture2D(uPressure, vT).x;
 716 |              float B = texture2D(uPressure, vB).x;
 717 |              vec2 velocity = texture2D(uVelocity, vUv).xy;
 718 |              velocity.xy -= vec2(R - L, T - B);
 719 |              gl_FragColor = vec4(velocity, 0.0, 1.0);
 720 |          }
 721 |      `,
 722 |       null
 723 |     );
 724 | 
 725 |     const blit = (() => {
 726 |       gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
 727 |       gl.bufferData(
 728 |         gl.ARRAY_BUFFER,
 729 |         new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]),
 730 |         gl.STATIC_DRAW
 731 |       );
 732 |       gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
 733 |       gl.bufferData(
 734 |         gl.ELEMENT_ARRAY_BUFFER,
 735 |         new Uint16Array([0, 1, 2, 0, 2, 3]),
 736 |         gl.STATIC_DRAW
 737 |       );
 738 |       gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
 739 |       gl.enableVertexAttribArray(0);
 740 | 
 741 |       return (target: any, clear = false) => {
 742 |         if (target == null) {
 743 |           gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
 744 |           gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 745 |         } else {
 746 |           gl.viewport(0, 0, target.width, target.height);
 747 |           gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
 748 |         }
 749 |         if (clear) {
 750 |           gl.clearColor(0.0, 0.0, 0.0, 1.0);
 751 |           gl.clear(gl.COLOR_BUFFER_BIT);
 752 |         }
 753 |         gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
 754 |       };
 755 |     })();
 756 | 
 757 |     let dye: any;
 758 |     let velocity: any;
 759 |     let divergence: any;
 760 |     let curl: any;
 761 |     let pressure: any;
 762 | 
 763 |     const copyProgram = new Program(baseVertexShader, copyShader);
 764 |     const clearProgram = new Program(baseVertexShader, clearShader);
 765 |     const splatProgram = new Program(baseVertexShader, splatShader);
 766 |     const advectionProgram = new Program(baseVertexShader, advectionShader);
 767 |     const divergenceProgram = new Program(baseVertexShader, divergenceShader);
 768 |     const curlProgram = new Program(baseVertexShader, curlShader);
 769 |     const vorticityProgram = new Program(baseVertexShader, vorticityShader);
 770 |     const pressureProgram = new Program(baseVertexShader, pressureShader);
 771 |     const gradienSubtractProgram = new Program(
 772 |       baseVertexShader,
 773 |       gradientSubtractShader
 774 |     );
 775 | 
 776 |     const displayMaterial = new Material(baseVertexShader, displayShaderSource);
 777 | 
 778 |     function initFramebuffers(): void {
 779 |       const simRes = getResolution(config.SIM_RESOLUTION);
 780 |       const dyeRes = getResolution(config.DYE_RESOLUTION);
 781 | 
 782 |       const texType = ext.halfFloatTexType;
 783 |       const rgba = ext.formatRGBA;
 784 |       const rg = ext.formatRG;
 785 |       const r = ext.formatR;
 786 |       const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
 787 | 
 788 |       gl.disable(gl.BLEND);
 789 | 
 790 |       if (dye == null)
 791 |         dye = createDoubleFBO(
 792 |           dyeRes.width,
 793 |           dyeRes.height,
 794 |           rgba.internalFormat,
 795 |           rgba.format,
 796 |           texType,
 797 |           filtering
 798 |         );
 799 |       else
 800 |         dye = resizeDoubleFBO(
 801 |           dye,
 802 |           dyeRes.width,
 803 |           dyeRes.height,
 804 |           rgba.internalFormat,
 805 |           rgba.format,
 806 |           texType,
 807 |           filtering
 808 |         );
 809 | 
 810 |       if (velocity == null)
 811 |         velocity = createDoubleFBO(
 812 |           simRes.width,
 813 |           simRes.height,
 814 |           rg.internalFormat,
 815 |           rg.format,
 816 |           texType,
 817 |           filtering
 818 |         );
 819 |       else
 820 |         velocity = resizeDoubleFBO(
 821 |           velocity,
 822 |           simRes.width,
 823 |           simRes.height,
 824 |           rg.internalFormat,
 825 |           rg.format,
 826 |           texType,
 827 |           filtering
 828 |         );
 829 | 
 830 |       divergence = createFBO(
 831 |         simRes.width,
 832 |         simRes.height,
 833 |         r.internalFormat,
 834 |         r.format,
 835 |         texType,
 836 |         gl.NEAREST
 837 |       );
 838 |       curl = createFBO(
 839 |         simRes.width,
 840 |         simRes.height,
 841 |         r.internalFormat,
 842 |         r.format,
 843 |         texType,
 844 |         gl.NEAREST
 845 |       );
 846 |       pressure = createDoubleFBO(
 847 |         simRes.width,
 848 |         simRes.height,
 849 |         r.internalFormat,
 850 |         r.format,
 851 |         texType,
 852 |         gl.NEAREST
 853 |       );
 854 |     }
 855 | 
 856 |     function createFBO(
 857 |       w: number,
 858 |       h: number,
 859 |       internalFormat: number,
 860 |       format: number,
 861 |       type: number,
 862 |       param: number
 863 |     ): any {
 864 |       gl.activeTexture(gl.TEXTURE0);
 865 |       const texture = gl.createTexture();
 866 |       gl.bindTexture(gl.TEXTURE_2D, texture);
 867 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
 868 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
 869 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 870 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 871 |       gl.texImage2D(
 872 |         gl.TEXTURE_2D,
 873 |         0,
 874 |         internalFormat,
 875 |         w,
 876 |         h,
 877 |         0,
 878 |         format,
 879 |         type,
 880 |         null
 881 |       );
 882 | 
 883 |       const fbo = gl.createFramebuffer();
 884 |       gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
 885 |       gl.framebufferTexture2D(
 886 |         gl.FRAMEBUFFER,
 887 |         gl.COLOR_ATTACHMENT0,
 888 |         gl.TEXTURE_2D,
 889 |         texture,
 890 |         0
 891 |       );
 892 |       gl.viewport(0, 0, w, h);
 893 |       gl.clear(gl.COLOR_BUFFER_BIT);
 894 | 
 895 |       const texelSizeX = 1.0 / w;
 896 |       const texelSizeY = 1.0 / h;
 897 | 
 898 |       return {
 899 |         texture,
 900 |         fbo,
 901 |         width: w,
 902 |         height: h,
 903 |         texelSizeX,
 904 |         texelSizeY,
 905 |         attach(id: number) {
 906 |           gl.activeTexture(gl.TEXTURE0 + id);
 907 |           gl.bindTexture(gl.TEXTURE_2D, texture);
 908 |           return id;
 909 |         },
 910 |       };
 911 |     }
 912 | 
 913 |     function createDoubleFBO(
 914 |       w: number,
 915 |       h: number,
 916 |       internalFormat: number,
 917 |       format: number,
 918 |       type: number,
 919 |       param: number
 920 |     ): any {
 921 |       let fbo1 = createFBO(w, h, internalFormat, format, type, param);
 922 |       let fbo2 = createFBO(w, h, internalFormat, format, type, param);
 923 | 
 924 |       return {
 925 |         width: w,
 926 |         height: h,
 927 |         texelSizeX: fbo1.texelSizeX,
 928 |         texelSizeY: fbo1.texelSizeY,
 929 |         get read() {
 930 |           return fbo1;
 931 |         },
 932 |         set read(value) {
 933 |           fbo1 = value;
 934 |         },
 935 |         get write() {
 936 |           return fbo2;
 937 |         },
 938 |         set write(value) {
 939 |           fbo2 = value;
 940 |         },
 941 |         swap() {
 942 |           const temp = fbo1;
 943 |           fbo1 = fbo2;
 944 |           fbo2 = temp;
 945 |         },
 946 |       };
 947 |     }
 948 | 
 949 |     function resizeFBO(
 950 |       target: any,
 951 |       w: number,
 952 |       h: number,
 953 |       internalFormat: number,
 954 |       format: number,
 955 |       type: number,
 956 |       param: number
 957 |     ): any {
 958 |       const newFBO = createFBO(w, h, internalFormat, format, type, param);
 959 |       copyProgram.bind();
 960 |       gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0));
 961 |       blit(newFBO);
 962 |       return newFBO;
 963 |     }
 964 | 
 965 |     function resizeDoubleFBO(
 966 |       target: any,
 967 |       w: number,
 968 |       h: number,
 969 |       internalFormat: number,
 970 |       format: number,
 971 |       type: number,
 972 |       param: number
 973 |     ): any {
 974 |       if (target.width == w && target.height == h) return target;
 975 |       target.read = resizeFBO(
 976 |         target.read,
 977 |         w,
 978 |         h,
 979 |         internalFormat,
 980 |         format,
 981 |         type,
 982 |         param
 983 |       );
 984 |       target.write = createFBO(w, h, internalFormat, format, type, param);
 985 |       target.width = w;
 986 |       target.height = h;
 987 |       target.texelSizeX = 1.0 / w;
 988 |       target.texelSizeY = 1.0 / h;
 989 |       return target;
 990 |     }
 991 | 
 992 |     // eslint-disable-next-line @typescript-eslint/no-unused-vars
 993 |     function createTextureAsync(url: string) {
 994 |       const texture = gl.createTexture();
 995 |       gl.bindTexture(gl.TEXTURE_2D, texture);
 996 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 997 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 998 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
 999 |       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
1000 |       gl.texImage2D(
1001 |         gl.TEXTURE_2D,
1002 |         0,
1003 |         gl.RGB,
1004 |         1,
1005 |         1,
1006 |         0,
1007 |         gl.RGB,
1008 |         gl.UNSIGNED_BYTE,
1009 |         new Uint8Array([255, 255, 255])
1010 |       );
1011 | 
1012 |       const obj = {
1013 |         texture,
1014 |         width: 1,
1015 |         height: 1,
1016 |         attach(id: number) {
1017 |           gl.activeTexture(gl.TEXTURE0 + id);
1018 |           gl.bindTexture(gl.TEXTURE_2D, texture);
1019 |           return id;
1020 |         },
1021 |       };
1022 | 
1023 |       const image = new Image();
1024 |       image.onload = () => {
1025 |         obj.width = image.width;
1026 |         obj.height = image.height;
1027 |         gl.bindTexture(gl.TEXTURE_2D, texture);
1028 |         gl.texImage2D(
1029 |           gl.TEXTURE_2D,
1030 |           0,
1031 |           gl.RGB,
1032 |           gl.RGB,
1033 |           gl.UNSIGNED_BYTE,
1034 |           image
1035 |         );
1036 |       };
1037 |       image.src = url;
1038 | 
1039 |       return obj;
1040 |     }
1041 | 
1042 |     function updateKeywords(): void {
1043 |       const displayKeywords: string[] = [];
1044 |       if (config.SHADING) displayKeywords.push("SHADING");
1045 |       displayMaterial.setKeywords(displayKeywords);
1046 |     }
1047 | 
1048 |     function getResolution(resolution: number) {
1049 |       let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight;
1050 |       if (aspectRatio < 1) aspectRatio = 1.0 / aspectRatio;
1051 | 
1052 |       const min = Math.round(resolution);
1053 |       const max = Math.round(resolution * aspectRatio);
1054 | 
1055 |       if (gl.drawingBufferWidth > gl.drawingBufferHeight)
1056 |         return { width: max, height: min };
1057 |       else return { width: min, height: max };
1058 |     }
1059 | 
1060 |     function hashCode(s: string): number {
1061 |       if (s.length == 0) return 0;
1062 |       let hash = 0;
1063 |       for (let i = 0; i < s.length; i++) {
1064 |         hash = (hash << 5) - hash + s.charCodeAt(i);
1065 |         hash |= 0; // Convert to 32bit integer
1066 |       }
1067 |       return hash;
1068 |     }
1069 | 
1070 |     function generateColor(): { r: number; g: number; b: number } {
1071 |       const c = HSVtoRGB(Math.random(), 1.0, 1.0);
1072 |       c.r *= 0.15;
1073 |       c.g *= 0.15;
1074 |       c.b *= 0.15;
1075 |       return c;
1076 |     }
1077 | 
1078 |     function HSVtoRGB(h: number, s: number, v: number) {
1079 |       let r = 0;
1080 |       let g = 0;
1081 |       let b = 0;
1082 |       const i = Math.floor(h * 6);
1083 |       const f = h * 6 - i;
1084 |       const p = v * (1 - s);
1085 |       const q = v * (1 - f * s);
1086 |       const t = v * (1 - (1 - f) * s);
1087 | 
1088 |       switch (i % 6) {
1089 |         case 0:
1090 |           r = v;
1091 |           g = t;
1092 |           b = p;
1093 |           break;
1094 |         case 1:
1095 |           r = q;
1096 |           g = v;
1097 |           b = p;
1098 |           break;
1099 |         case 2:
1100 |           r = p;
1101 |           g = v;
1102 |           b = t;
1103 |           break;
1104 |         case 3:
1105 |           r = p;
1106 |           g = q;
1107 |           b = v;
1108 |           break;
1109 |         case 4:
1110 |           r = t;
1111 |           g = p;
1112 |           b = v;
1113 |           break;
1114 |         case 5:
1115 |           r = v;
1116 |           g = p;
1117 |           b = q;
1118 |           break;
1119 |       }
1120 | 
1121 |       return {
1122 |         r,
1123 |         g,
1124 |         b,
1125 |       };
1126 |     }
1127 | 
1128 |     function wrap(value: number, min: number, max: number): number {
1129 |       const range = max - min;
1130 |       if (range == 0) return min;
1131 |       return ((value - min) % range) + min;
1132 |     }
1133 | 
1134 |     function updatePointerDownData(
1135 |       pointer: Pointer,
1136 |       id: number,
1137 |       posX: number,
1138 |       posY: number
1139 |     ): void {
1140 |       pointer.id = id;
1141 |       pointer.down = true;
1142 |       pointer.moved = false;
1143 |       pointer.texcoordX = posX / canvasElement.width;
1144 |       pointer.texcoordY = 1.0 - posY / canvasElement.height;
1145 |       pointer.prevTexcoordX = pointer.texcoordX;
1146 |       pointer.prevTexcoordY = pointer.texcoordY;
1147 |       pointer.deltaX = 0;
1148 |       pointer.deltaY = 0;
1149 |       pointer.color = generateColor();
1150 |     }
1151 | 
1152 |     function updatePointerMoveData(
1153 |       pointer: Pointer,
1154 |       posX: number,
1155 |       posY: number,
1156 |       color: any
1157 |     ): void {
1158 |       pointer.prevTexcoordX = pointer.texcoordX;
1159 |       pointer.prevTexcoordY = pointer.texcoordY;
1160 |       pointer.texcoordX = posX / canvasElement.width;
1161 |       pointer.texcoordY = 1.0 - posY / canvasElement.height;
1162 |       pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX);
1163 |       pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY);
1164 |       pointer.moved =
1165 |         Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;
1166 |       pointer.color = color;
1167 |     }
1168 | 
1169 |     function updatePointerUpData(pointer: Pointer): void {
1170 |       pointer.down = false;
1171 |     }
1172 | 
1173 |     function correctDeltaX(delta: number) {
1174 |       const aspectRatio = canvasElement.width / canvasElement.height;
1175 |       if (aspectRatio < 1) delta *= aspectRatio;
1176 |       return delta;
1177 |     }
1178 | 
1179 |     function correctDeltaY(delta: number) {
1180 |       const aspectRatio = canvasElement.width / canvasElement.height;
1181 |       if (aspectRatio > 1) delta /= aspectRatio;
1182 |       return delta;
1183 |     }
1184 | 
1185 |     function splatPointer(pointer: any) {
1186 |       const dx = pointer.deltaX * config.SPLAT_FORCE;
1187 |       const dy = pointer.deltaY * config.SPLAT_FORCE;
1188 |       splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
1189 |     }
1190 | 
1191 |     function clickSplat(pointer: any) {
1192 |       const color = generateColor();
1193 |       color.r *= 10.0;
1194 |       color.g *= 10.0;
1195 |       color.b *= 10.0;
1196 |       const dx = 10 * (Math.random() - 0.5);
1197 |       const dy = 30 * (Math.random() - 0.5);
1198 |       splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
1199 |     }
1200 | 
1201 |     function splat(
1202 |       x: number,
1203 |       y: number,
1204 |       dx: number,
1205 |       dy: number,
1206 |       color: any
1207 |     ): void {
1208 |       splatProgram.bind();
1209 |       gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
1210 |       gl.uniform1f(
1211 |         splatProgram.uniforms.aspectRatio,
1212 |         canvasElement.width / canvasElement.height
1213 |       );
1214 |       gl.uniform2f(splatProgram.uniforms.point, x, y);
1215 |       gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0.0);
1216 |       gl.uniform1f(
1217 |         splatProgram.uniforms.radius,
1218 |         correctRadius(config.SPLAT_RADIUS / 100.0)
1219 |       );
1220 |       blit(velocity.write);
1221 |       velocity.swap();
1222 | 
1223 |       gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0));
1224 |       gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
1225 |       blit(dye.write);
1226 |       dye.swap();
1227 |     }
1228 | 
1229 |     function correctRadius(radius: number) {
1230 |       const aspectRatio = canvasElement.width / canvasElement.height;
1231 |       if (aspectRatio > 1) radius *= aspectRatio;
1232 |       return radius;
1233 |     }
1234 | 
1235 |     function updateColors(dt: number): void {
1236 |       colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED;
1237 |       if (colorUpdateTimer >= 1) {
1238 |         colorUpdateTimer = wrap(colorUpdateTimer, 0, 1);
1239 |         pointers.forEach((p) => {
1240 |           p.color = generateColor();
1241 |         });
1242 |       }
1243 |     }
1244 | 
1245 |     function applyInputs(): void {
1246 |       pointers.forEach((p) => {
1247 |         if (p.moved) {
1248 |           p.moved = false;
1249 |           splatPointer(p);
1250 |         }
1251 |       });
1252 |     }
1253 | 
1254 |     function step(dt: number): void {
1255 |       gl.disable(gl.BLEND);
1256 | 
1257 |       curlProgram.bind();
1258 |       gl.uniform2f(
1259 |         curlProgram.uniforms.texelSize,
1260 |         velocity.texelSizeX,
1261 |         velocity.texelSizeY
1262 |       );
1263 |       gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0));
1264 |       blit(curl);
1265 | 
1266 |       vorticityProgram.bind();
1267 |       gl.uniform2f(
1268 |         vorticityProgram.uniforms.texelSize,
1269 |         velocity.texelSizeX,
1270 |         velocity.texelSizeY
1271 |       );
1272 |       gl.uniform1i(
1273 |         vorticityProgram.uniforms.uVelocity,
1274 |         velocity.read.attach(0)
1275 |       );
1276 |       gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1));
1277 |       gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
1278 |       gl.uniform1f(vorticityProgram.uniforms.dt, dt);
1279 |       blit(velocity.write);
1280 |       velocity.swap();
1281 | 
1282 |       divergenceProgram.bind();
1283 |       gl.uniform2f(
1284 |         divergenceProgram.uniforms.texelSize,
1285 |         velocity.texelSizeX,
1286 |         velocity.texelSizeY
1287 |       );
1288 |       gl.uniform1i(
1289 |         divergenceProgram.uniforms.uVelocity,
1290 |         velocity.read.attach(0)
1291 |       );
1292 |       blit(divergence);
1293 | 
1294 |       clearProgram.bind();
1295 |       gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0));
1296 |       gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE);
1297 |       blit(pressure.write);
1298 |       pressure.swap();
1299 | 
1300 |       pressureProgram.bind();
1301 |       gl.uniform2f(
1302 |         pressureProgram.uniforms.texelSize,
1303 |         velocity.texelSizeX,
1304 |         velocity.texelSizeY
1305 |       );
1306 |       gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0));
1307 |       for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
1308 |         gl.uniform1i(
1309 |           pressureProgram.uniforms.uPressure,
1310 |           pressure.read.attach(1)
1311 |         );
1312 |         blit(pressure.write);
1313 |         pressure.swap();
1314 |       }
1315 | 
1316 |       gradienSubtractProgram.bind();
1317 |       gl.uniform2f(
1318 |         gradienSubtractProgram.uniforms.texelSize,
1319 |         velocity.texelSizeX,
1320 |         velocity.texelSizeY
1321 |       );
1322 |       gl.uniform1i(
1323 |         gradienSubtractProgram.uniforms.uPressure,
1324 |         pressure.read.attach(0)
1325 |       );
1326 |       gl.uniform1i(
1327 |         gradienSubtractProgram.uniforms.uVelocity,
1328 |         velocity.read.attach(1)
1329 |       );
1330 |       blit(velocity.write);
1331 |       velocity.swap();
1332 | 
1333 |       advectionProgram.bind();
1334 |       gl.uniform2f(
1335 |         advectionProgram.uniforms.texelSize,
1336 |         velocity.texelSizeX,
1337 |         velocity.texelSizeY
1338 |       );
1339 |       if (!ext.supportLinearFiltering)
1340 |         gl.uniform2f(
1341 |           advectionProgram.uniforms.dyeTexelSize,
1342 |           velocity.texelSizeX,
1343 |           velocity.texelSizeY
1344 |         );
1345 |       const velocityId = velocity.read.attach(0);
1346 |       gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId);
1347 |       gl.uniform1i(advectionProgram.uniforms.uSource, velocityId);
1348 |       gl.uniform1f(advectionProgram.uniforms.dt, dt);
1349 |       gl.uniform1f(
1350 |         advectionProgram.uniforms.dissipation,
1351 |         config.VELOCITY_DISSIPATION
1352 |       );
1353 |       blit(velocity.write);
1354 |       velocity.swap();
1355 | 
1356 |       if (!ext.supportLinearFiltering)
1357 |         gl.uniform2f(
1358 |           advectionProgram.uniforms.dyeTexelSize,
1359 |           dye.texelSizeX,
1360 |           dye.texelSizeY
1361 |         );
1362 |       gl.uniform1i(
1363 |         advectionProgram.uniforms.uVelocity,
1364 |         velocity.read.attach(0)
1365 |       );
1366 |       gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1));
1367 |       gl.uniform1f(
1368 |         advectionProgram.uniforms.dissipation,
1369 |         config.DENSITY_DISSIPATION
1370 |       );
1371 |       blit(dye.write);
1372 |       dye.swap();
1373 |     }
1374 | 
1375 |     function render(target: any): void {
1376 |       gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
1377 |       gl.enable(gl.BLEND);
1378 |       drawDisplay(target);
1379 |     }
1380 | 
1381 |     function drawDisplay(target: any) {
1382 |       const width = target == null ? gl.drawingBufferWidth : target.width;
1383 |       const height = target == null ? gl.drawingBufferHeight : target.height;
1384 | 
1385 |       displayMaterial.bind();
1386 |       if (config.SHADING)
1387 |         gl.uniform2f(
1388 |           displayMaterial.uniforms.texelSize,
1389 |           1.0 / width,
1390 |           1.0 / height
1391 |         );
1392 |       gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0));
1393 |       blit(target);
1394 |     }
1395 | 
1396 |     updateKeywords();
1397 |     initFramebuffers();
1398 | 
1399 |     let lastUpdateTime = Date.now();
1400 |     let colorUpdateTimer = 0.0;
1401 |     let animationFrameId: number | null = null;
1402 | 
1403 |     function calcDeltaTime() {
1404 |       const now = Date.now();
1405 |       let dt = (now - lastUpdateTime) / 1000;
1406 |       dt = Math.min(dt, 0.016666);
1407 |       lastUpdateTime = now;
1408 |       return dt;
1409 |     }
1410 | 
1411 |     function update() {
1412 |       if (config.PAUSED) {
1413 |         animationFrameId = requestAnimationFrame(update);
1414 |         return;
1415 |       }
1416 | 
1417 |       const dt = calcDeltaTime();
1418 |       if (resizeCanvas()) initFramebuffers();
1419 |       updateColors(dt);
1420 |       applyInputs();
1421 |       step(dt);
1422 |       render(null);
1423 |       animationFrameId = requestAnimationFrame(update);
1424 |     }
1425 | 
1426 |     // Event handlers
1427 |     const handleMouseDown = (e: MouseEvent) => {
1428 |       const pointer = pointers[0];
1429 |       const posX = scaleByPixelRatio(e.clientX);
1430 |       const posY = scaleByPixelRatio(e.clientY);
1431 |       updatePointerDownData(pointer, -1, posX, posY);
1432 |       clickSplat(pointer);
1433 |     };
1434 | 
1435 |     const handleFirstMouseMove = (e: MouseEvent) => {
1436 |       const pointer = pointers[0];
1437 |       const posX = scaleByPixelRatio(e.clientX);
1438 |       const posY = scaleByPixelRatio(e.clientY);
1439 |       const color = generateColor();
1440 | 
1441 |       update();
1442 |       updatePointerMoveData(pointer, posX, posY, color);
1443 | 
1444 |       document.body.removeEventListener("mousemove", handleFirstMouseMove);
1445 |     };
1446 | 
1447 |     const handleMouseMove = (e: MouseEvent) => {
1448 |       const pointer = pointers[0];
1449 |       const posX = scaleByPixelRatio(e.clientX);
1450 |       const posY = scaleByPixelRatio(e.clientY);
1451 |       const color = pointer.color;
1452 | 
1453 |       updatePointerMoveData(pointer, posX, posY, color);
1454 |     };
1455 | 
1456 |     const handleFirstTouchStart = (e: TouchEvent) => {
1457 |       const touches = e.targetTouches;
1458 |       const pointer = pointers[0];
1459 | 
1460 |       for (let i = 0; i < touches.length; i++) {
1461 |         const posX = scaleByPixelRatio(touches[i].clientX);
1462 |         const posY = scaleByPixelRatio(touches[i].clientY);
1463 | 
1464 |         update();
1465 |         updatePointerDownData(pointer, touches[i].identifier, posX, posY);
1466 |       }
1467 | 
1468 |       document.body.removeEventListener("touchstart", handleFirstTouchStart);
1469 |     };
1470 | 
1471 |     const handleTouchStart = (e: TouchEvent) => {
1472 |       const touches = e.targetTouches;
1473 |       const pointer = pointers[0];
1474 |       for (let i = 0; i < touches.length; i++) {
1475 |         const posX = scaleByPixelRatio(touches[i].clientX);
1476 |         const posY = scaleByPixelRatio(touches[i].clientY);
1477 |         updatePointerDownData(pointer, touches[i].identifier, posX, posY);
1478 |       }
1479 |     };
1480 | 
1481 |     const handleTouchMove = (e: TouchEvent) => {
1482 |       const touches = e.targetTouches;
1483 |       const pointer = pointers[0];
1484 |       for (let i = 0; i < touches.length; i++) {
1485 |         const posX = scaleByPixelRatio(touches[i].clientX);
1486 |         const posY = scaleByPixelRatio(touches[i].clientY);
1487 |         updatePointerMoveData(pointer, posX, posY, pointer.color);
1488 |       }
1489 |     };
1490 | 
1491 |     const handleTouchEnd = (e: TouchEvent) => {
1492 |       const touches = e.changedTouches;
1493 |       const pointer = pointers[0];
1494 | 
1495 |       for (let i = 0; i < touches.length; i++) {
1496 |         updatePointerUpData(pointer);
1497 |       }
1498 |     };
1499 | 
1500 |     // Add event listeners
1501 |     window.addEventListener("mousedown", handleMouseDown);
1502 |     document.body.addEventListener("mousemove", handleFirstMouseMove);
1503 |     window.addEventListener("mousemove", handleMouseMove);
1504 |     document.body.addEventListener("touchstart", handleFirstTouchStart);
1505 |     window.addEventListener("touchstart", handleTouchStart);
1506 |     window.addEventListener("touchmove", handleTouchMove);
1507 |     window.addEventListener("touchend", handleTouchEnd);
1508 | 
1509 |     // Start animation loop
1510 |     animationFrameId = requestAnimationFrame(update);
1511 | 
1512 |     // Cleanup function
1513 |     return () => {
1514 |       if (animationFrameId !== null) {
1515 |         cancelAnimationFrame(animationFrameId);
1516 |       }
1517 |       window.removeEventListener("mousedown", handleMouseDown);
1518 |       document.body.removeEventListener("mousemove", handleFirstMouseMove);
1519 |       window.removeEventListener("mousemove", handleMouseMove);
1520 |       document.body.removeEventListener("touchstart", handleFirstTouchStart);
1521 |       window.removeEventListener("touchstart", handleTouchStart);
1522 |       window.removeEventListener("touchmove", handleTouchMove);
1523 |       window.removeEventListener("touchend", handleTouchEnd);
1524 |     };
1525 |   }, [canvasRef]);
1526 | };
1527 | 
1528 | export default useFluidCursor;
1529 | 


--------------------------------------------------------------------------------