commit 75c9a62b378eafed8873059396696b16171041c3
Author: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date:   Fri Sep 4 18:23:26 2026 +0330

    chore: create initial project snapshot
    
    Capture the portfolio source, design references, and production assets with repository-specific ignore rules.

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4b18126
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,42 @@
+# Dependencies
+/node_modules/
+
+# Next.js build output and static export
+/.next/
+/out/
+
+# Other build and test output
+/dist/
+/build/
+/coverage/
+
+# Local environment files
+.env
+.env.*
+!.env.example
+
+# TypeScript incremental build cache
+*.tsbuildinfo
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Hosting providers
+.vercel/
+
+# IDE and OS metadata
+.vscode/
+.idea/
+.DS_Store
+Thumbs.db
+Desktop.ini
+
+# Local temporary files
+*.tmp
+*.temp
+*.swp
+*~
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..2a4d166
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..05c1535
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..98d6a5c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1033 @@
+{
+  "name": "portfolio-v2-antigravity",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "portfolio-v2-antigravity",
+      "version": "0.1.0",
+      "dependencies": {
+        "@next/swc-win32-x64-msvc": "*",
+        "lucide-react": "^1.16.0",
+        "next": "^15.1.7",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.13.4",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
+        "typescript": "^5.7.3"
+      },
+      "optionalDependencies": {
+        "@next/swc-win32-x64-msvc": "^16.3.4"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@emnapi/runtime/-/runtime-1.11.3.tgz",
+      "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.4.tgz",
+      "integrity": "sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.4.tgz",
+      "integrity": "sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.4.tgz",
+      "integrity": "sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.3.tgz",
+      "integrity": "sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.3.tgz",
+      "integrity": "sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.3.tgz",
+      "integrity": "sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.3.tgz",
+      "integrity": "sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.3.tgz",
+      "integrity": "sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.3.tgz",
+      "integrity": "sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.3.tgz",
+      "integrity": "sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.3.tgz",
+      "integrity": "sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.3.tgz",
+      "integrity": "sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.3.tgz",
+      "integrity": "sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.4.tgz",
+      "integrity": "sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.4.tgz",
+      "integrity": "sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.4.tgz",
+      "integrity": "sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.4.tgz",
+      "integrity": "sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.4.tgz",
+      "integrity": "sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.4.tgz",
+      "integrity": "sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.4.tgz",
+      "integrity": "sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.4.tgz",
+      "integrity": "sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-wasm32/-/sharp-wasm32-0.35.4.tgz",
+      "integrity": "sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.4.tgz",
+      "integrity": "sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.4.tgz",
+      "integrity": "sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.4.tgz",
+      "integrity": "sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.4.tgz",
+      "integrity": "sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/env/-/env-15.5.25.tgz",
+      "integrity": "sha512-42h1lLr07vl4gawALP1hsgRZjHB1xYa58JfUfHwr0f7jG/zhPakh5GHkADHXOC9ZxUvlQFOPIrp7s6qX4DezPQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.25.tgz",
+      "integrity": "sha512-w+RR0v/QuApnWEjRGm1z6gcObKwGMb5YPA7V3bzBEVSBpMFUXprer0tS27UxjUcEnqbhL7Zuzohej79B6rYmBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.25.tgz",
+      "integrity": "sha512-QiGGBUSakt8S1H4Lt9Ehsh6Ja87axiBnQQgysOObvCbI7iUfJnRGntF1P64S4/ijuHFnSB8KLsEddkY3nN26uw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.25.tgz",
+      "integrity": "sha512-ehLos/66zo0d/mJCU5u96a/VDcr01aaUrX0o/i16UdInxz8qPTCDSxGtjk/Lps1sIr1RJFdiX3hxc0fxJo+cPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.25.tgz",
+      "integrity": "sha512-ZVMrqLiJ7DiChgmbkQwFtdhAnUkSH/4p7tB29QY+giATb0Q/XGHNRSKAb/B8XGDHRUaA67NepOW5W8u3ZRJBAA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.25.tgz",
+      "integrity": "sha512-UOewtDGkTMJTiODrEdeLZ50yGb59xCZSriNpXkfPMxRRgwDkGc7i8mLWqV5076wEdb+Ca/XN7MhJyM3CupyNyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.25.tgz",
+      "integrity": "sha512-UBHwA8AhkCZgtRfU1aJpunuAJe/6gZv6jDESQe4p5MjTb5V0YEeJBWCdNqx15Vj3x+5jmauRfeMJSjfQj9HGFQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.25.tgz",
+      "integrity": "sha512-QcFcPRr16djk5IqK5+e8O80eZfgWzIvVBXfitIq0tQ/uc+eyfdoZ0NmKc0cnbIJyfVwREapKuG97YcxWA9gcpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.3.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.4.tgz",
+      "integrity": "sha512-vvBzwu1pYQCp92maZCFCIw/XgOTMR5tur9GjakwIo2cmwRTMKajRZZDS9+e4KsUZWKu1E007WUeAFXRRjZeuzw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.20.1",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@types/node/-/node-22.20.1.tgz",
+      "integrity": "sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.18",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.7",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@types/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-I8bPpDLcHBv1qiIiXDCy71Rt8eQDKJP0sMSWJphDdAcdqiJ1sGpZamavoEIRZmYzjia9LuEb2HlYdDpmoENpvQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001810",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.40.0",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/lucide-react/-/lucide-react-1.40.0.tgz",
+      "integrity": "sha512-MaG+8WnOXkDWz9XeElj7TnQ890tTZUB0a36i03aRRCKGWE6e7jJpmdCvtxxuxcjjdqyN6m4sL6qlHVuSUDtYgg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/next/-/next-15.5.25.tgz",
+      "integrity": "sha512-OMWNulIIqKM2ykvC2qMjIt0IoavB4UB2SCs4iXJ6z6847FvyH8jBmBWcvrF5iuhTu8Przh20Fo/aoszIdqx4PA==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.5.25",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.5.25",
+        "@next/swc-darwin-x64": "15.5.25",
+        "@next/swc-linux-arm64-gnu": "15.5.25",
+        "@next/swc-linux-arm64-musl": "15.5.25",
+        "@next/swc-linux-x64-gnu": "15.5.25",
+        "@next/swc-linux-x64-musl": "15.5.25",
+        "@next/swc-win32-arm64-msvc": "15.5.25",
+        "@next/swc-win32-x64-msvc": "15.5.25",
+        "sharp": "^0.34.3 || ^0.35.4"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.25",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.25.tgz",
+      "integrity": "sha512-zREeykps3ndWr9egJgvJKqVkkDuaw6Zrrg23cYBos0ygydFkAWYU4+PaPVwXzP1eAYQJe53ShSK45iDM529BOg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.8",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.8"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.35.4",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/sharp/-/sharp-0.35.4.tgz",
+      "integrity": "sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.1.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.8.5"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.35.4",
+        "@img/sharp-darwin-x64": "0.35.4",
+        "@img/sharp-freebsd-wasm32": "0.35.4",
+        "@img/sharp-libvips-darwin-arm64": "1.3.3",
+        "@img/sharp-libvips-darwin-x64": "1.3.3",
+        "@img/sharp-libvips-linux-arm": "1.3.3",
+        "@img/sharp-libvips-linux-arm64": "1.3.3",
+        "@img/sharp-libvips-linux-ppc64": "1.3.3",
+        "@img/sharp-libvips-linux-riscv64": "1.3.3",
+        "@img/sharp-libvips-linux-s390x": "1.3.3",
+        "@img/sharp-libvips-linux-x64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3",
+        "@img/sharp-linux-arm": "0.35.4",
+        "@img/sharp-linux-arm64": "0.35.4",
+        "@img/sharp-linux-ppc64": "0.35.4",
+        "@img/sharp-linux-riscv64": "0.35.4",
+        "@img/sharp-linux-s390x": "0.35.4",
+        "@img/sharp-linux-x64": "0.35.4",
+        "@img/sharp-linuxmusl-arm64": "0.35.4",
+        "@img/sharp-linuxmusl-x64": "0.35.4",
+        "@img/sharp-webcontainers-wasm32": "0.35.4",
+        "@img/sharp-win32-arm64": "0.35.4",
+        "@img/sharp-win32-ia32": "0.35.4",
+        "@img/sharp-win32-x64": "0.35.4"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8c9218e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "portfolio-v2-antigravity",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "lucide-react": "^1.16.0",
+    "next": "^15.1.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.4",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "typescript": "^5.7.3"
+  },
+  "optionalDependencies": {
+    "@next/swc-win32-x64-msvc": "^16.3.4"
+  }
+}
diff --git a/public/assets/footer-background 1.png b/public/assets/footer-background 1.png
new file mode 100644
index 0000000..4dd1110
Binary files /dev/null and b/public/assets/footer-background 1.png differ
diff --git a/public/assets/footer-background-dark.png b/public/assets/footer-background-dark.png
new file mode 100644
index 0000000..5a396e3
Binary files /dev/null and b/public/assets/footer-background-dark.png differ
diff --git a/public/assets/landing-to-river-artwork-dark.png b/public/assets/landing-to-river-artwork-dark.png
new file mode 100644
index 0000000..9f3a327
Binary files /dev/null and b/public/assets/landing-to-river-artwork-dark.png differ
diff --git a/public/assets/landing-to-river-artwork.png b/public/assets/landing-to-river-artwork.png
new file mode 100644
index 0000000..2aeb969
Binary files /dev/null and b/public/assets/landing-to-river-artwork.png differ
diff --git a/public/assets/step-01-digital-artist.png b/public/assets/step-01-digital-artist.png
new file mode 100644
index 0000000..467e773
Binary files /dev/null and b/public/assets/step-01-digital-artist.png differ
diff --git a/public/assets/step-02-computer-science.png b/public/assets/step-02-computer-science.png
new file mode 100644
index 0000000..1f5f4b7
Binary files /dev/null and b/public/assets/step-02-computer-science.png differ
diff --git a/public/assets/step-03-ui-ux-designer.png b/public/assets/step-03-ui-ux-designer.png
new file mode 100644
index 0000000..ebc5828
Binary files /dev/null and b/public/assets/step-03-ui-ux-designer.png differ
diff --git a/public/assets/step-04-software-engineer.png b/public/assets/step-04-software-engineer.png
new file mode 100644
index 0000000..2ea2470
Binary files /dev/null and b/public/assets/step-04-software-engineer.png differ
diff --git a/public/assets/step-05-product-engineer.png b/public/assets/step-05-product-engineer.png
new file mode 100644
index 0000000..b9851be
Binary files /dev/null and b/public/assets/step-05-product-engineer.png differ
diff --git a/public/images/avatar.png b/public/images/avatar.png
new file mode 100644
index 0000000..54207cf
Binary files /dev/null and b/public/images/avatar.png differ
diff --git a/public/images/cert-bootcamp.png b/public/images/cert-bootcamp.png
new file mode 100644
index 0000000..9ecd463
Binary files /dev/null and b/public/images/cert-bootcamp.png differ
diff --git a/public/images/cert-django.png b/public/images/cert-django.png
new file mode 100644
index 0000000..eb900eb
Binary files /dev/null and b/public/images/cert-django.png differ
diff --git a/public/images/cert-hackathon.png b/public/images/cert-hackathon.png
new file mode 100644
index 0000000..56e6ba0
Binary files /dev/null and b/public/images/cert-hackathon.png differ
diff --git a/public/images/cert-icpc-2024.png b/public/images/cert-icpc-2024.png
new file mode 100644
index 0000000..ebbeda3
Binary files /dev/null and b/public/images/cert-icpc-2024.png differ
diff --git a/public/images/cert-icpc-2025.png b/public/images/cert-icpc-2025.png
new file mode 100644
index 0000000..5cc105b
Binary files /dev/null and b/public/images/cert-icpc-2025.png differ
diff --git a/public/images/logo-baduno.png b/public/images/logo-baduno.png
new file mode 100644
index 0000000..84b14e7
Binary files /dev/null and b/public/images/logo-baduno.png differ
diff --git a/public/images/logo-fiotrix.png b/public/images/logo-fiotrix.png
new file mode 100644
index 0000000..779cc51
Binary files /dev/null and b/public/images/logo-fiotrix.png differ
diff --git a/public/images/logo-guilan-assoc.png b/public/images/logo-guilan-assoc.png
new file mode 100644
index 0000000..45a7c2c
Binary files /dev/null and b/public/images/logo-guilan-assoc.png differ
diff --git a/public/images/logo-guilan-crest.png b/public/images/logo-guilan-crest.png
new file mode 100644
index 0000000..138e5d2
Binary files /dev/null and b/public/images/logo-guilan-crest.png differ
diff --git a/public/images/logo-guilan-ta.png b/public/images/logo-guilan-ta.png
new file mode 100644
index 0000000..90f6c5d
Binary files /dev/null and b/public/images/logo-guilan-ta.png differ
diff --git a/public/images/logo-quera.png b/public/images/logo-quera.png
new file mode 100644
index 0000000..e2de38e
Binary files /dev/null and b/public/images/logo-quera.png differ
diff --git a/public/images/logo-sharif.png b/public/images/logo-sharif.png
new file mode 100644
index 0000000..d768af1
Binary files /dev/null and b/public/images/logo-sharif.png differ
diff --git a/public/images/project-guilan-ace.png b/public/images/project-guilan-ace.png
new file mode 100644
index 0000000..f26577b
Binary files /dev/null and b/public/images/project-guilan-ace.png differ
diff --git a/public/images/project-interanet-solutionspng.png b/public/images/project-interanet-solutionspng.png
new file mode 100644
index 0000000..bac5a5b
Binary files /dev/null and b/public/images/project-interanet-solutionspng.png differ
diff --git a/public/images/project-iran-implant.png b/public/images/project-iran-implant.png
new file mode 100644
index 0000000..78746bc
Binary files /dev/null and b/public/images/project-iran-implant.png differ
diff --git a/public/images/project-postgresql-job-queue.png b/public/images/project-postgresql-job-queue.png
new file mode 100644
index 0000000..bac5a5b
Binary files /dev/null and b/public/images/project-postgresql-job-queue.png differ
diff --git a/public/images/project-qlockify.png b/public/images/project-qlockify.png
new file mode 100644
index 0000000..51f0077
Binary files /dev/null and b/public/images/project-qlockify.png differ
diff --git a/public/images/project-subsource.png b/public/images/project-subsource.png
new file mode 100644
index 0000000..e660dea
Binary files /dev/null and b/public/images/project-subsource.png differ
diff --git a/public/images/project-zarinpal.png b/public/images/project-zarinpal.png
new file mode 100644
index 0000000..cb6d6ec
Binary files /dev/null and b/public/images/project-zarinpal.png differ
diff --git a/public/images/tools/antigravity.png b/public/images/tools/antigravity.png
new file mode 100644
index 0000000..3fb4fc9
Binary files /dev/null and b/public/images/tools/antigravity.png differ
diff --git a/public/images/tools/caddy.png b/public/images/tools/caddy.png
new file mode 100644
index 0000000..ca74901
Binary files /dev/null and b/public/images/tools/caddy.png differ
diff --git a/public/images/tools/celery.png b/public/images/tools/celery.png
new file mode 100644
index 0000000..7e7857e
Binary files /dev/null and b/public/images/tools/celery.png differ
diff --git a/public/images/tools/codex.png b/public/images/tools/codex.png
new file mode 100644
index 0000000..22f7bce
Binary files /dev/null and b/public/images/tools/codex.png differ
diff --git a/public/images/tools/django.png b/public/images/tools/django.png
new file mode 100644
index 0000000..4c3817a
Binary files /dev/null and b/public/images/tools/django.png differ
diff --git a/public/images/tools/docker.png b/public/images/tools/docker.png
new file mode 100644
index 0000000..2285b2a
Binary files /dev/null and b/public/images/tools/docker.png differ
diff --git a/public/images/tools/fastapi.png b/public/images/tools/fastapi.png
new file mode 100644
index 0000000..0f385a3
Binary files /dev/null and b/public/images/tools/fastapi.png differ
diff --git a/public/images/tools/git.png b/public/images/tools/git.png
new file mode 100644
index 0000000..d7077de
Binary files /dev/null and b/public/images/tools/git.png differ
diff --git a/public/images/tools/github.png b/public/images/tools/github.png
new file mode 100644
index 0000000..5897702
Binary files /dev/null and b/public/images/tools/github.png differ
diff --git a/public/images/tools/grafana.png b/public/images/tools/grafana.png
new file mode 100644
index 0000000..818b944
Binary files /dev/null and b/public/images/tools/grafana.png differ
diff --git a/public/images/tools/kubernetes.png b/public/images/tools/kubernetes.png
new file mode 100644
index 0000000..06df724
Binary files /dev/null and b/public/images/tools/kubernetes.png differ
diff --git a/public/images/tools/linux.png b/public/images/tools/linux.png
new file mode 100644
index 0000000..6c382c0
Binary files /dev/null and b/public/images/tools/linux.png differ
diff --git a/public/images/tools/minio.png b/public/images/tools/minio.png
new file mode 100644
index 0000000..184c64a
Binary files /dev/null and b/public/images/tools/minio.png differ
diff --git a/public/images/tools/mongodb.png b/public/images/tools/mongodb.png
new file mode 100644
index 0000000..51f1d89
Binary files /dev/null and b/public/images/tools/mongodb.png differ
diff --git a/public/images/tools/neo4j.png b/public/images/tools/neo4j.png
new file mode 100644
index 0000000..4817356
Binary files /dev/null and b/public/images/tools/neo4j.png differ
diff --git a/public/images/tools/nextjs.png b/public/images/tools/nextjs.png
new file mode 100644
index 0000000..d3e4569
Binary files /dev/null and b/public/images/tools/nextjs.png differ
diff --git a/public/images/tools/nginx.png b/public/images/tools/nginx.png
new file mode 100644
index 0000000..c0f8acb
Binary files /dev/null and b/public/images/tools/nginx.png differ
diff --git a/public/images/tools/postgresql.png b/public/images/tools/postgresql.png
new file mode 100644
index 0000000..6c562e2
Binary files /dev/null and b/public/images/tools/postgresql.png differ
diff --git a/public/images/tools/prometheus.png b/public/images/tools/prometheus.png
new file mode 100644
index 0000000..0f6df40
Binary files /dev/null and b/public/images/tools/prometheus.png differ
diff --git a/public/images/tools/python.png b/public/images/tools/python.png
new file mode 100644
index 0000000..9cbdcdb
Binary files /dev/null and b/public/images/tools/python.png differ
diff --git a/public/images/tools/react.png b/public/images/tools/react.png
new file mode 100644
index 0000000..92c3904
Binary files /dev/null and b/public/images/tools/react.png differ
diff --git a/public/images/tools/redis.png b/public/images/tools/redis.png
new file mode 100644
index 0000000..23c1067
Binary files /dev/null and b/public/images/tools/redis.png differ
diff --git a/public/images/tools/typescript.png b/public/images/tools/typescript.png
new file mode 100644
index 0000000..28b611e
Binary files /dev/null and b/public/images/tools/typescript.png differ
diff --git a/public/images/tools/vscode.png b/public/images/tools/vscode.png
new file mode 100644
index 0000000..97c5a3d
Binary files /dev/null and b/public/images/tools/vscode.png differ
diff --git a/resources/assets/footer-background 1.png b/resources/assets/footer-background 1.png
new file mode 100644
index 0000000..4dd1110
Binary files /dev/null and b/resources/assets/footer-background 1.png differ
diff --git a/resources/assets/footer-background-dark.png b/resources/assets/footer-background-dark.png
new file mode 100644
index 0000000..5a396e3
Binary files /dev/null and b/resources/assets/footer-background-dark.png differ
diff --git a/resources/assets/landing-to-river-artwork-dark.png b/resources/assets/landing-to-river-artwork-dark.png
new file mode 100644
index 0000000..9f3a327
Binary files /dev/null and b/resources/assets/landing-to-river-artwork-dark.png differ
diff --git a/resources/assets/landing-to-river-artwork.png b/resources/assets/landing-to-river-artwork.png
new file mode 100644
index 0000000..2aeb969
Binary files /dev/null and b/resources/assets/landing-to-river-artwork.png differ
diff --git a/resources/assets/step-01-digital-artist.png b/resources/assets/step-01-digital-artist.png
new file mode 100644
index 0000000..467e773
Binary files /dev/null and b/resources/assets/step-01-digital-artist.png differ
diff --git a/resources/assets/step-02-computer-science.png b/resources/assets/step-02-computer-science.png
new file mode 100644
index 0000000..1f5f4b7
Binary files /dev/null and b/resources/assets/step-02-computer-science.png differ
diff --git a/resources/assets/step-03-ui-ux-designer.png b/resources/assets/step-03-ui-ux-designer.png
new file mode 100644
index 0000000..ebc5828
Binary files /dev/null and b/resources/assets/step-03-ui-ux-designer.png differ
diff --git a/resources/assets/step-04-software-engineer.png b/resources/assets/step-04-software-engineer.png
new file mode 100644
index 0000000..2ea2470
Binary files /dev/null and b/resources/assets/step-04-software-engineer.png differ
diff --git a/resources/assets/step-05-product-engineer.png b/resources/assets/step-05-product-engineer.png
new file mode 100644
index 0000000..b9851be
Binary files /dev/null and b/resources/assets/step-05-product-engineer.png differ
diff --git a/resources/design-system/01-primitives.json b/resources/design-system/01-primitives.json
new file mode 100644
index 0000000..2d95b3c
--- /dev/null
+++ b/resources/design-system/01-primitives.json
@@ -0,0 +1,28 @@
+{
+  "blue": {
+    "950": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
+    "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.027451, 0.07451, 0.184314], "alpha": 1, "hex": "#07132F" } },
+    "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.035294, 0.109804, 0.247059], "alpha": 1, "hex": "#091C3F" } },
+    "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.184314, 0.372549], "alpha": 1, "hex": "#0B2F5F" } },
+    "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } },
+    "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.082353, 0.341176, 0.65098], "alpha": 1, "hex": "#1557A6" } },
+    "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } },
+    "300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } },
+    "200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.901961, 0.941176, 0.996078], "alpha": 1, "hex": "#E6F0FE" } },
+    "100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
+    "white": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
+  },
+  "slate": {
+    "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.219608, 0.321569, 0.431373], "alpha": 1, "hex": "#38526E" } },
+    "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.4, 0.439216, 0.521569], "alpha": 1, "hex": "#667085" } },
+    "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.639216, 0.694118, 0.776471], "alpha": 1, "hex": "#A3B1C6" } },
+    "300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.811765, 0.878431], "alpha": 1, "hex": "#C3CFE0" } }
+  },
+  "border": {
+    "light": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.85098, 0.886275, 0.937255], "alpha": 1, "hex": "#D9E2EF" } },
+    "dark": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.117647, 0.203922, 0.345098], "alpha": 1, "hex": "#1E3458" } },
+    "strong-light": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.662745, 0.745098, 0.854902], "alpha": 1, "hex": "#A9BEDA" } },
+    "strong-dark": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.258824, 0.419608, 0.615686], "alpha": 1, "hex": "#426B9D" } }
+  },
+  "black": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 1, "hex": "#000000" } }
+}
diff --git a/resources/design-system/02-semantic-dark.json b/resources/design-system/02-semantic-dark.json
new file mode 100644
index 0000000..131da71
--- /dev/null
+++ b/resources/design-system/02-semantic-dark.json
@@ -0,0 +1,32 @@
+{
+  "bg": {
+    "page": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
+    "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.027451, 0.07451, 0.184314], "alpha": 1, "hex": "#07132F" } },
+    "raised": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.047059, 0.101961, 0.227451], "alpha": 1, "hex": "#0C1A3A" } },
+    "subtle": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.035294, 0.109804, 0.247059], "alpha": 1, "hex": "#091C3F" } }
+  },
+  "text": {
+    "primary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
+    "secondary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.811765, 0.878431], "alpha": 1, "hex": "#C3CFE0" } },
+    "muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.639216, 0.694118, 0.776471], "alpha": 1, "hex": "#A3B1C6" } },
+    "on-band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
+  },
+  "border": {
+    "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.117647, 0.203922, 0.345098], "alpha": 1, "hex": "#1E3458" } },
+    "strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.258824, 0.419608, 0.615686], "alpha": 1, "hex": "#426B9D" } }
+  },
+  "accent": { "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } } },
+  "action": {
+    "link": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } },
+    "primary": {
+      "bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
+      "fg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
+      "hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.862745, 0.909804, 0.968627], "alpha": 1, "hex": "#DCE8F7" } },
+      "pressed": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.835294, 0.92549], "alpha": 1, "hex": "#C3D5EC" } }
+    }
+  },
+  "brand": { "band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
+  "focus": { "ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } } },
+  "overlay": { "contact": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 0.721569, "hex": "#010D27" } } },
+  "shadow": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.239216, "hex": "#000000" } } }
+}
diff --git a/resources/design-system/02-semantic-light.json b/resources/design-system/02-semantic-light.json
new file mode 100644
index 0000000..6a8ddf0
--- /dev/null
+++ b/resources/design-system/02-semantic-light.json
@@ -0,0 +1,32 @@
+{
+  "bg": {
+    "page": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
+    "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.980392, 0.980392, 0.980392], "alpha": 1, "hex": "#FAFAFA" } },
+    "raised": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
+    "subtle": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.901961, 0.941176, 0.996078], "alpha": 1, "hex": "#E6F0FE" } }
+  },
+  "text": {
+    "primary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.184314, 0.372549], "alpha": 1, "hex": "#0B2F5F" } },
+    "secondary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.219608, 0.321569, 0.431373], "alpha": 1, "hex": "#38526E" } },
+    "muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.4, 0.439216, 0.521569], "alpha": 1, "hex": "#667085" } },
+    "on-band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
+  },
+  "border": {
+    "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.85098, 0.886275, 0.937255], "alpha": 1, "hex": "#D9E2EF" } },
+    "strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.662745, 0.745098, 0.854902], "alpha": 1, "hex": "#A9BEDA" } }
+  },
+  "accent": { "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
+  "action": {
+    "link": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.082353, 0.341176, 0.65098], "alpha": 1, "hex": "#1557A6" } },
+    "primary": {
+      "bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } },
+      "fg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
+      "hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.196078, 0.407843], "alpha": 1, "hex": "#0B3268" } },
+      "pressed": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.031373, 0.156863, 0.309804], "alpha": 1, "hex": "#08284F" } }
+    }
+  },
+  "brand": { "band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } } },
+  "focus": { "ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
+  "overlay": { "contact": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 0.721569, "hex": "#FFFFFF" } } },
+  "shadow": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 0.078431, "hex": "#103F7F" } } }
+}
diff --git a/resources/design-system/03-dimensions.json b/resources/design-system/03-dimensions.json
new file mode 100644
index 0000000..a306214
--- /dev/null
+++ b/resources/design-system/03-dimensions.json
@@ -0,0 +1,51 @@
+{
+  "space": {
+    "0": { "$type": "dimension", "$value": { "value": 0, "unit": "px" } },
+    "1": { "$type": "dimension", "$value": { "value": 4, "unit": "px" } },
+    "2": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
+    "3": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
+    "4": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+    "5": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "6": { "$type": "dimension", "$value": { "value": 32, "unit": "px" } },
+    "7": { "$type": "dimension", "$value": { "value": 40, "unit": "px" } },
+    "8": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
+    "9": { "$type": "dimension", "$value": { "value": 64, "unit": "px" } },
+    "10": { "$type": "dimension", "$value": { "value": 80, "unit": "px" } },
+    "11": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
+    "12": { "$type": "dimension", "$value": { "value": 120, "unit": "px" } }
+  },
+  "radius": {
+    "sm": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
+    "md": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
+    "lg": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+    "xl": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "pill": { "$type": "dimension", "$value": { "value": 999, "unit": "px" } }
+  },
+  "stroke": {
+    "default": { "$type": "dimension", "$value": { "value": 1, "unit": "px" } },
+    "strong": { "$type": "dimension", "$value": { "value": 2, "unit": "px" } }
+  },
+  "layout": {
+    "frame": { "$type": "dimension", "$value": { "value": 1440, "unit": "px" } },
+    "container": { "$type": "dimension", "$value": { "value": 1320, "unit": "px" } },
+    "page-gutter": { "$type": "dimension", "$value": { "value": 60, "unit": "px" } },
+    "grid-gutter": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "grid-column": { "$type": "dimension", "$value": { "value": 88, "unit": "px" } },
+    "section-gap": { "$type": "dimension", "$value": { "value": 120, "unit": "px" } },
+    "section-padding": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
+    "text-measure": { "$type": "dimension", "$value": { "value": 720, "unit": "px" } }
+  },
+  "size": {
+    "icon-sm": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+    "icon-md": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } },
+    "icon-lg": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "icon-button": { "$type": "dimension", "$value": { "value": 44, "unit": "px" } },
+    "button-height": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
+    "social-button": { "$type": "dimension", "$value": { "value": 56, "unit": "px" } },
+    "avatar": { "$type": "dimension", "$value": { "value": 200, "unit": "px" } },
+    "journey-image": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
+    "project-width": { "$type": "dimension", "$value": { "value": 360, "unit": "px" } },
+    "project-media-height": { "$type": "dimension", "$value": { "value": 225, "unit": "px" } },
+    "tool-tile": { "$type": "dimension", "$value": { "value": 72, "unit": "px" } }
+  }
+}
diff --git a/resources/design-system/04-typography.json b/resources/design-system/04-typography.json
new file mode 100644
index 0000000..1b2ec4f
--- /dev/null
+++ b/resources/design-system/04-typography.json
@@ -0,0 +1,43 @@
+{
+  "font": {
+    "family": {
+      "primary": { "$type": "fontFamily", "$value": "IRANYekanX(Pro)" },
+      "display": { "$type": "fontFamily", "$value": "Pacifico" }
+    },
+    "weight": {
+      "regular": { "$type": "number", "$value": 400 },
+      "medium": { "$type": "number", "$value": 500 },
+      "demi-bold": { "$type": "number", "$value": 600 },
+      "bold": { "$type": "number", "$value": 700 }
+    }
+  },
+  "type": {
+    "size": {
+      "display-hero": { "$type": "dimension", "$value": { "value": 64, "unit": "px" } },
+      "display-footer": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
+      "h1": { "$type": "dimension", "$value": { "value": 40, "unit": "px" } },
+      "h2": { "$type": "dimension", "$value": { "value": 32, "unit": "px" } },
+      "h3": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } },
+      "body-large": { "$type": "dimension", "$value": { "value": 18, "unit": "px" } },
+      "body-default": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+      "body-small": { "$type": "dimension", "$value": { "value": 14, "unit": "px" } },
+      "label-small": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
+      "button": { "$type": "dimension", "$value": { "value": 15, "unit": "px" } }
+    },
+    "line-height": {
+      "display-hero": { "$type": "dimension", "$value": { "value": 72, "unit": "px" } },
+      "display-footer": { "$type": "dimension", "$value": { "value": 56, "unit": "px" } },
+      "h1": { "$type": "dimension", "$value": { "value": 52, "unit": "px" } },
+      "h2": { "$type": "dimension", "$value": { "value": 42, "unit": "px" } },
+      "h3": { "$type": "dimension", "$value": { "value": 28, "unit": "px" } },
+      "body-large": { "$type": "dimension", "$value": { "value": 30, "unit": "px" } },
+      "body-default": { "$type": "dimension", "$value": { "value": 26, "unit": "px" } },
+      "body-small": { "$type": "dimension", "$value": { "value": 22, "unit": "px" } },
+      "label-small": { "$type": "dimension", "$value": { "value": 18, "unit": "px" } },
+      "button": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } }
+    },
+    "letter-spacing": {
+      "eyebrow": { "$type": "number", "$value": 0.16 }
+    }
+  }
+}
diff --git a/resources/design-system/README-FIGMA-IMPORT.md b/resources/design-system/README-FIGMA-IMPORT.md
new file mode 100644
index 0000000..60893cb
--- /dev/null
+++ b/resources/design-system/README-FIGMA-IMPORT.md
@@ -0,0 +1,22 @@
+# Portfolio design tokens for Figma
+
+These files use Figma's Design Tokens Community Group (DTCG) JSON import format.
+
+## Recommended import order
+
+1. In Figma, open the Variables view.
+2. Create a collection named `01 Primitives`, then import `01-primitives.json`.
+3. Create a collection named `02 Semantic`, then import both `02-semantic-light.json` and `02-semantic-dark.json` together. Figma creates one mode per imported file; rename the modes to `Light` and `Dark`.
+4. Create a collection named `03 Dimensions`, then import `03-dimensions.json`.
+5. Create a collection named `04 Typography`, then import `04-typography.json`.
+6. Create text styles manually using the imported typography variables. Figma imports the typography values, but it does not automatically create complete text styles.
+
+## Important
+
+The semantic color files contain resolved values so they import reliably. After importing, you may replace those values with aliases to matching variables in `01 Primitives` (for example, `text/primary` → `blue/700`). Do this only after confirming the variable names in your Figma file.
+
+Do not import the Light and Dark semantic files into two separate collections. Import them together into the same collection so they become two modes.
+
+## Starter-plan workaround
+
+Starter does not include variable modes. Import `02-semantic-light.json` into a collection named `02 Semantic — Light`, and import `02-semantic-dark.json` into a separate collection named `02 Semantic — Dark`. Apply the Light collection to the light desktop frame and the Dark collection to the dark desktop frame. The variables still work, but you will not have a single Light/Dark mode switch.
diff --git a/resources/final/EN-1.png b/resources/final/EN-1.png
new file mode 100644
index 0000000..f9439b6
Binary files /dev/null and b/resources/final/EN-1.png differ
diff --git a/resources/final/EN.png b/resources/final/EN.png
new file mode 100644
index 0000000..4a4b825
Binary files /dev/null and b/resources/final/EN.png differ
diff --git a/resources/final/FA-1.png b/resources/final/FA-1.png
new file mode 100644
index 0000000..e5b0e99
Binary files /dev/null and b/resources/final/FA-1.png differ
diff --git a/resources/final/FA.png b/resources/final/FA.png
new file mode 100644
index 0000000..d6be6d2
Binary files /dev/null and b/resources/final/FA.png differ
diff --git a/resources/scratch/crops/about_full_section.png b/resources/scratch/crops/about_full_section.png
new file mode 100644
index 0000000..3b16f69
Binary files /dev/null and b/resources/scratch/crops/about_full_section.png differ
diff --git a/resources/scratch/crops/about_header.png b/resources/scratch/crops/about_header.png
new file mode 100644
index 0000000..6b1d3b1
Binary files /dev/null and b/resources/scratch/crops/about_header.png differ
diff --git a/resources/scratch/crops/about_river_1.png b/resources/scratch/crops/about_river_1.png
new file mode 100644
index 0000000..9bc0b3e
Binary files /dev/null and b/resources/scratch/crops/about_river_1.png differ
diff --git a/resources/scratch/crops/about_river_2.png b/resources/scratch/crops/about_river_2.png
new file mode 100644
index 0000000..1babf5d
Binary files /dev/null and b/resources/scratch/crops/about_river_2.png differ
diff --git a/resources/scratch/crops/about_river_dark.png b/resources/scratch/crops/about_river_dark.png
new file mode 100644
index 0000000..5fb5296
Binary files /dev/null and b/resources/scratch/crops/about_river_dark.png differ
diff --git a/resources/scratch/crops/artwork_check.png b/resources/scratch/crops/artwork_check.png
new file mode 100644
index 0000000..843e727
Binary files /dev/null and b/resources/scratch/crops/artwork_check.png differ
diff --git a/resources/scratch/crops/avatar_200.png b/resources/scratch/crops/avatar_200.png
new file mode 100644
index 0000000..49e2a2b
Binary files /dev/null and b/resources/scratch/crops/avatar_200.png differ
diff --git a/resources/scratch/crops/education.png b/resources/scratch/crops/education.png
new file mode 100644
index 0000000..339a605
Binary files /dev/null and b/resources/scratch/crops/education.png differ
diff --git a/resources/scratch/crops/experience_1.png b/resources/scratch/crops/experience_1.png
new file mode 100644
index 0000000..004c2d6
Binary files /dev/null and b/resources/scratch/crops/experience_1.png differ
diff --git a/resources/scratch/crops/experience_2.png b/resources/scratch/crops/experience_2.png
new file mode 100644
index 0000000..4d83f1c
Binary files /dev/null and b/resources/scratch/crops/experience_2.png differ
diff --git a/resources/scratch/crops/footer.png b/resources/scratch/crops/footer.png
new file mode 100644
index 0000000..7085527
Binary files /dev/null and b/resources/scratch/crops/footer.png differ
diff --git a/resources/scratch/crops/footer_dark.png b/resources/scratch/crops/footer_dark.png
new file mode 100644
index 0000000..3330867
Binary files /dev/null and b/resources/scratch/crops/footer_dark.png differ
diff --git a/resources/scratch/crops/full_skills_card.png b/resources/scratch/crops/full_skills_card.png
new file mode 100644
index 0000000..5bf4649
Binary files /dev/null and b/resources/scratch/crops/full_skills_card.png differ
diff --git a/resources/scratch/crops/hero.png b/resources/scratch/crops/hero.png
new file mode 100644
index 0000000..833caf7
Binary files /dev/null and b/resources/scratch/crops/hero.png differ
diff --git a/resources/scratch/crops/hero_dark.png b/resources/scratch/crops/hero_dark.png
new file mode 100644
index 0000000..778b4d5
Binary files /dev/null and b/resources/scratch/crops/hero_dark.png differ
diff --git a/resources/scratch/crops/milestones.png b/resources/scratch/crops/milestones.png
new file mode 100644
index 0000000..d724a45
Binary files /dev/null and b/resources/scratch/crops/milestones.png differ
diff --git a/resources/scratch/crops/projects.png b/resources/scratch/crops/projects.png
new file mode 100644
index 0000000..176a819
Binary files /dev/null and b/resources/scratch/crops/projects.png differ
diff --git a/resources/scratch/crops/projects_dark.png b/resources/scratch/crops/projects_dark.png
new file mode 100644
index 0000000..3ec6bfe
Binary files /dev/null and b/resources/scratch/crops/projects_dark.png differ
diff --git a/resources/scratch/crops/skills.png b/resources/scratch/crops/skills.png
new file mode 100644
index 0000000..7b59011
Binary files /dev/null and b/resources/scratch/crops/skills.png differ
diff --git a/resources/scratch/crops/step_01_zone.png b/resources/scratch/crops/step_01_zone.png
new file mode 100644
index 0000000..46795d0
Binary files /dev/null and b/resources/scratch/crops/step_01_zone.png differ
diff --git a/resources/scratch/crops/step_02_zone.png b/resources/scratch/crops/step_02_zone.png
new file mode 100644
index 0000000..90ef501
Binary files /dev/null and b/resources/scratch/crops/step_02_zone.png differ
diff --git a/resources/scratch/crops/step_03_zone.png b/resources/scratch/crops/step_03_zone.png
new file mode 100644
index 0000000..ead2a2e
Binary files /dev/null and b/resources/scratch/crops/step_03_zone.png differ
diff --git a/resources/scratch/crops/step_04_zone.png b/resources/scratch/crops/step_04_zone.png
new file mode 100644
index 0000000..d68668d
Binary files /dev/null and b/resources/scratch/crops/step_04_zone.png differ
diff --git a/resources/scratch/crops/step_05_zone.png b/resources/scratch/crops/step_05_zone.png
new file mode 100644
index 0000000..4150156
Binary files /dev/null and b/resources/scratch/crops/step_05_zone.png differ
diff --git a/resources/scratch/crops/tools_row1.png b/resources/scratch/crops/tools_row1.png
new file mode 100644
index 0000000..d0299ad
Binary files /dev/null and b/resources/scratch/crops/tools_row1.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..b7e6a91
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from 'next';
+import { ThemeProvider } from '@/context/ThemeContext';
+import '@/styles/globals.css';
+
+export const metadata: Metadata = {
+  title: "Amirhossein Khalili | Dedicated Product Engineer",
+  description:
+    "Personal portfolio of Amirhossein Khalili, Product Engineer & Software Developer based in Iran.",
+  keywords: [
+    'Amirhossein Khalili',
+    'Product Engineer',
+    'Software Engineer',
+    'Full Stack Developer',
+    'Portfolio',
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" data-theme="light">
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..3003db5
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ScenicHeroJourney } from '@/components/ScenicHeroJourney';
+import { ProjectsSection } from '@/components/ProjectsSection';
+import { ExperienceSection } from '@/components/ExperienceSection';
+import { SkillsSection } from '@/components/SkillsSection';
+import { EducationSection } from '@/components/EducationSection';
+import { MilestonesSection } from '@/components/MilestonesSection';
+import { FooterSection } from '@/components/FooterSection';
+
+export default function Home() {
+  return (
+    <main className="desktop-canvas">
+      {/* 1. Hero & About Me River Journey (Seamless Scenic Background) */}
+      <ScenicHeroJourney />
+
+      {/* 2. Projects Carousel Section */}
+      <ProjectsSection />
+
+      {/* 3. Work Experience Timeline Section */}
+      <ExperienceSection />
+
+      {/* 4. Skills & Tools Matrix Section */}
+      <SkillsSection />
+
+      {/* 5. Education Foundation Section */}
+      <EducationSection />
+
+      {/* 6. Milestones & Awards Section */}
+      <MilestonesSection />
+
+      {/* 7. Footer CTA & Social Section */}
+      <FooterSection />
+    </main>
+  );
+}
diff --git a/src/components/EducationSection.module.css b/src/components/EducationSection.module.css
new file mode 100644
index 0000000..1245698
--- /dev/null
+++ b/src/components/EducationSection.module.css
@@ -0,0 +1,79 @@
+.educationSection {
+  position: relative;
+  width: 1440px;
+  padding-top: 60px;
+  padding-bottom: 80px;
+}
+
+.card {
+  width: 1320px;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
+  padding: 36px 44px;
+  display: flex;
+  gap: 56px;
+  box-shadow: 0 4px 20px var(--shadow-color);
+  transition: border-color 0.2s ease;
+}
+
+.card:hover {
+  border-color: var(--accent-default);
+}
+
+.crestCol {
+  width: 240px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.crestContainer {
+  width: 180px;
+  height: 60px;
+  margin-bottom: 12px;
+}
+
+.crestImage {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
+.institution {
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-default);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.date {
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  font-weight: 700;
+  letter-spacing: var(--letter-spacing-eyebrow);
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+
+.detailsCol {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.degreeTitle {
+  font-size: var(--font-size-h3);
+  line-height: var(--line-height-h3);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.description {
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-large);
+  color: var(--text-secondary);
+}
diff --git a/src/components/EducationSection.tsx b/src/components/EducationSection.tsx
new file mode 100644
index 0000000..dd1149d
--- /dev/null
+++ b/src/components/EducationSection.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { education } from '@/data/education';
+import styles from './EducationSection.module.css';
+
+export const EducationSection: React.FC = () => {
+  return (
+    <section id="education" className={styles.educationSection}>
+      <div className="content-container">
+        {/* Section Header */}
+        <div className="section-header">
+          <span className="section-eyebrow">EDUCATION</span>
+          <div className="section-title-wrap">
+            <h2 className="section-title">Where I Built the Foundation</h2>
+            <div className="section-underline" />
+          </div>
+        </div>
+
+        {/* Degree Card */}
+        <div className={styles.card}>
+          <div className={styles.crestCol}>
+            <div className={styles.crestContainer}>
+              <Image
+                src={education.logo}
+                alt={education.institution}
+                width={180}
+                height={60}
+                className={styles.crestImage}
+              />
+            </div>
+            <div className={styles.institution}>{education.institution}</div>
+            <div className={styles.date}>{education.date}</div>
+          </div>
+
+          <div className={styles.detailsCol}>
+            <h3 className={styles.degreeTitle}>{education.degree}</h3>
+            <p className={styles.description}>{education.description}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/ExperienceSection.module.css b/src/components/ExperienceSection.module.css
new file mode 100644
index 0000000..32d5391
--- /dev/null
+++ b/src/components/ExperienceSection.module.css
@@ -0,0 +1,184 @@
+.experienceSection {
+  position: relative;
+  width: 1440px;
+  padding-top: 60px;
+  padding-bottom: 80px;
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-top: 20px;
+}
+
+.timelineItem {
+  display: flex;
+  position: relative;
+  min-height: 180px;
+}
+
+.spineColumn {
+  position: relative;
+  width: 40px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.nodeDot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: var(--color-slate-400);
+  margin-top: 6px;
+  z-index: 2;
+  transition: all 0.2s ease;
+}
+
+.nodeCurrent {
+  background-color: var(--accent-default);
+  box-shadow: 0 0 0 4px rgba(61, 138, 250, 0.25);
+}
+
+.verticalLine {
+  position: absolute;
+  top: 20px;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--border-default);
+  z-index: 1;
+}
+
+.itemContent {
+  display: flex;
+  flex-grow: 1;
+  padding-left: 20px;
+  padding-bottom: 56px;
+  gap: 48px;
+}
+
+.identityCol {
+  width: 380px;
+  flex-shrink: 0;
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.dateBadge {
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  font-weight: 700;
+  letter-spacing: var(--letter-spacing-eyebrow);
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+
+.locationWrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--font-size-label-small);
+  color: var(--text-muted);
+}
+
+.locationIcon {
+  color: var(--text-muted);
+}
+
+.locationText {
+  font-weight: 500;
+}
+
+.roleIdentityRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.logoContainer {
+  width: 72px;
+  height: 72px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.logoImage {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
+.roleTitles {
+  display: flex;
+  flex-direction: column;
+  padding-top: 4px;
+}
+
+.roleTitle {
+  font-size: var(--font-size-h3);
+  line-height: var(--line-height-h3);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.companyName {
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-default);
+  color: var(--action-link);
+  font-weight: 500;
+}
+
+.detailsCol {
+  flex-grow: 1;
+  max-width: 820px;
+  padding-top: 4px;
+}
+
+.summary {
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-default);
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+
+.bulletList {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bulletItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.bulletDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: var(--text-muted);
+  margin-top: 10px;
+  flex-shrink: 0;
+}
+
+.bulletText {
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  color: var(--text-secondary);
+}
diff --git a/src/components/ExperienceSection.tsx b/src/components/ExperienceSection.tsx
new file mode 100644
index 0000000..947fe74
--- /dev/null
+++ b/src/components/ExperienceSection.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { MapPin } from 'lucide-react';
+import { experiences } from '@/data/experience';
+import styles from './ExperienceSection.module.css';
+
+export const ExperienceSection: React.FC = () => {
+  return (
+    <section id="experience" className={styles.experienceSection}>
+      <div className="content-container">
+        {/* Section Header */}
+        <div className="section-header">
+          <span className="section-eyebrow">EXPERIENCES</span>
+          <div className="section-title-wrap">
+            <h2 className="section-title">Where I&apos;ve Made an Impact</h2>
+            <div className="section-underline" />
+          </div>
+        </div>
+
+        {/* Timeline Container */}
+        <div className={styles.timeline}>
+          {experiences.map((item, index) => (
+            <div key={item.id} className={styles.timelineItem}>
+              {/* Vertical Spine & Node Indicator */}
+              <div className={styles.spineColumn}>
+                <div
+                  className={`${styles.nodeDot} ${
+                    item.isCurrent ? styles.nodeCurrent : ''
+                  }`}
+                />
+                {index < experiences.length - 1 && (
+                  <div className={styles.verticalLine} />
+                )}
+              </div>
+
+              {/* Item Content Layout: Left Identity & Right Details */}
+              <div className={styles.itemContent}>
+                {/* Left Identity Column */}
+                <div className={styles.identityCol}>
+                  <div className={styles.metaRow}>
+                    <span className={styles.dateBadge}>{item.date}</span>
+                    <div className={styles.locationWrapper}>
+                      <MapPin size={14} className={styles.locationIcon} />
+                      <span className={styles.locationText}>{item.location}</span>
+                    </div>
+                  </div>
+
+                  <div className={styles.roleIdentityRow}>
+                    <div className={styles.logoContainer}>
+                      <Image
+                        src={item.logo}
+                        alt={`${item.company} logo`}
+                        width={72}
+                        height={72}
+                        className={styles.logoImage}
+                      />
+                    </div>
+
+                    <div className={styles.roleTitles}>
+                      <h3 className={styles.roleTitle}>{item.role}</h3>
+                      <div className={styles.companyName}>{item.company}</div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Right Details Column */}
+                <div className={styles.detailsCol}>
+                  <p className={styles.summary}>{item.summary}</p>
+
+                  <ul className={styles.bulletList}>
+                    {item.bullets.map((bullet, bIdx) => (
+                      <li key={bIdx} className={styles.bulletItem}>
+                        <span className={styles.bulletDot} />
+                        <span className={styles.bulletText}>{bullet}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/FooterSection.module.css b/src/components/FooterSection.module.css
new file mode 100644
index 0000000..42ede3d
--- /dev/null
+++ b/src/components/FooterSection.module.css
@@ -0,0 +1,111 @@
+.footerSection {
+  position: relative;
+  width: 1440px;
+  height: 480px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.bgContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1440px;
+  height: 480px;
+  z-index: 1;
+}
+
+.bgImage {
+  object-fit: cover;
+  object-position: bottom center;
+}
+
+.content {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin-top: -60px; /* aligns with visual layout */
+}
+
+.ctaTitle {
+  font-size: var(--font-size-display-footer);
+  line-height: var(--line-height-display-footer);
+  color: var(--text-primary);
+  margin-bottom: 12px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.ctaSubtitle {
+  font-size: var(--font-size-body-large);
+  line-height: var(--line-height-body-large);
+  color: var(--text-secondary);
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  margin-bottom: 40px;
+}
+
+.socialRow {
+  display: flex;
+  align-items: center;
+  gap: 48px;
+}
+
+.socialItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: transform 0.2s ease;
+}
+
+.socialItem:hover {
+  transform: translateY(-4px);
+}
+
+.iconCircle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-social-button);
+  height: var(--size-social-button);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border-default);
+  color: var(--text-primary);
+  box-shadow: 0 4px 12px var(--shadow-color);
+  transition: all 0.2s ease;
+}
+
+.socialItem:hover .iconCircle {
+  border-color: var(--accent-default);
+  color: var(--accent-default);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+[data-theme="dark"] .iconCircle {
+  background: rgba(9, 28, 63, 0.7);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .socialItem:hover .iconCircle {
+  background: rgba(16, 63, 127, 0.9);
+  border-color: var(--accent-default);
+  color: #ffffff;
+}
+
+.socialLabel {
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  font-weight: 600;
+  color: var(--text-primary);
+}
diff --git a/src/components/FooterSection.tsx b/src/components/FooterSection.tsx
new file mode 100644
index 0000000..b113b1d
--- /dev/null
+++ b/src/components/FooterSection.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { Phone, Send, Coffee } from 'lucide-react';
+import { useTheme } from '@/context/ThemeContext';
+import styles from './FooterSection.module.css';
+
+export const FooterSection: React.FC = () => {
+  const { theme } = useTheme();
+
+  return (
+    <footer id="footer" className={styles.footerSection}>
+      {/* Background artwork */}
+      <div className={styles.bgContainer}>
+        <Image
+          src={
+            theme === 'dark'
+              ? '/assets/footer-background-dark.png'
+              : '/assets/footer-background 1.png'
+          }
+          alt="Footer mountains background"
+          fill
+          className={styles.bgImage}
+        />
+      </div>
+
+      {/* Content */}
+      <div className={styles.content}>
+        <h2 className={`font-display ${styles.ctaTitle}`}>
+          Let&apos;s build something meaningful.
+        </h2>
+
+        <p className={styles.ctaSubtitle}>
+          Open to opportunities and interesting projects.
+        </p>
+
+        {/* 4 Social / Contact Links */}
+        <div className={styles.socialRow}>
+          {/* Phone */}
+          <a href="tel:+989388263077" className={styles.socialItem}>
+            <div className={styles.iconCircle}>
+              <Phone size={24} />
+            </div>
+            <span className={styles.socialLabel}>09388263077</span>
+          </a>
+
+          {/* LinkedIn */}
+          <a
+            href="https://linkedin.com/in/amiirkhl"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.socialItem}
+          >
+            <div className={styles.iconCircle}>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.64 1.64 0 0 0 1.64-1.64A1.64 1.64 0 0 0 6.46 5.5a1.64 1.64 0 0 0-1.64 1.62c0 .9.74 1.64 1.64 1.64m1.39 9.74v-8.37H5.07v8.37h2.78Z" />
+              </svg>
+            </div>
+            <span className={styles.socialLabel}>@amiirkhl</span>
+          </a>
+
+          {/* Git / Coffee */}
+          <a
+            href="https://git.amiirkhl.ir"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.socialItem}
+          >
+            <div className={styles.iconCircle}>
+              <Coffee size={24} />
+            </div>
+            <span className={styles.socialLabel}>git.amiirkhl.ir</span>
+          </a>
+
+          {/* Telegram */}
+          <a
+            href="https://t.me/amiirkhl"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.socialItem}
+          >
+            <div className={styles.iconCircle}>
+              <Send size={24} />
+            </div>
+            <span className={styles.socialLabel}>@amiirkhl</span>
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css
new file mode 100644
index 0000000..bd60ea7
--- /dev/null
+++ b/src/components/HeroSection.module.css
@@ -0,0 +1,160 @@
+.heroContentWrapper {
+  position: relative;
+  width: 1440px;
+  height: 680px;
+  z-index: 5;
+}
+
+.topBar {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 36px 60px 0 60px;
+}
+
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-icon-button);
+  height: var(--size-icon-button);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--border-default);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-primary);
+}
+
+.iconButton:hover {
+  background: rgba(255, 255, 255, 0.7);
+  transform: scale(1.05);
+}
+
+[data-theme="dark"] .iconButton {
+  background: rgba(9, 28, 63, 0.6);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .iconButton:hover {
+  background: rgba(16, 63, 127, 0.8);
+}
+
+.controlIcon {
+  color: var(--text-primary);
+}
+
+.heroContent {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-top: 10px;
+}
+
+.avatarWrapper {
+  margin-bottom: 24px;
+}
+
+.avatarRingOuter {
+  padding: 4px;
+  border-radius: 50%;
+  border: 3px solid var(--color-blue-700);
+  background: transparent;
+  display: inline-block;
+  box-shadow: 0 8px 24px var(--shadow-color);
+}
+
+[data-theme="dark"] .avatarRingOuter {
+  border-color: var(--color-blue-300);
+}
+
+.avatarContainer {
+  width: 192px;
+  height: 192px;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  border: 2px solid #ffffff;
+}
+
+.avatarImg {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.heroTitle {
+  font-size: var(--font-size-display-hero);
+  line-height: var(--line-height-display-hero);
+  color: var(--text-primary);
+  margin-bottom: 12px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.heroSubtitle {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  margin-bottom: 32px;
+  opacity: 0.9;
+}
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 36px;
+}
+
+.actionButtons a {
+  min-width: 110px;
+}
+
+.contactBar {
+  display: inline-flex;
+  align-items: center;
+  gap: 20px;
+  padding: 10px 24px;
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border-default);
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .contactBar {
+  background: rgba(9, 28, 63, 0.6);
+  border-color: var(--border-default);
+}
+
+.contactItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: inherit;
+  transition: opacity 0.2s ease;
+}
+
+.contactItem:hover {
+  opacity: 0.8;
+}
+
+.contactIcon {
+  color: var(--accent-default);
+}
+
+.contactDivider {
+  width: 1px;
+  height: 16px;
+  background-color: var(--border-default);
+}
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
new file mode 100644
index 0000000..e4bda1c
--- /dev/null
+++ b/src/components/HeroSection.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { Moon, Sun, Languages, Mail, Phone, MapPin } from 'lucide-react';
+import { useTheme } from '@/context/ThemeContext';
+import styles from './HeroSection.module.css';
+
+export const HeroSection: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className={styles.heroContentWrapper}>
+      {/* Top Floating Controls */}
+      <div className={styles.topBar}>
+        <button
+          onClick={toggleTheme}
+          className={styles.iconButton}
+          aria-label="Toggle theme"
+          title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`}
+        >
+          {theme === 'light' ? (
+            <Moon size={20} className={styles.controlIcon} />
+          ) : (
+            <Sun size={20} className={styles.controlIcon} />
+          )}
+        </button>
+
+        <button
+          className={styles.iconButton}
+          aria-label="Switch Language"
+          title="Farsi version coming soon"
+        >
+          <Languages size={20} className={styles.controlIcon} />
+        </button>
+      </div>
+
+      {/* Hero Central Content */}
+      <div className={styles.heroContent}>
+        {/* Avatar with double ring */}
+        <div className={styles.avatarWrapper}>
+          <div className={styles.avatarRingOuter}>
+            <div className={styles.avatarContainer}>
+              <Image
+                src="/images/avatar.png"
+                alt="Amirhossein Khalili"
+                width={192}
+                height={192}
+                className={styles.avatarImg}
+                priority
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Display Typography */}
+        <h1 className={`font-display ${styles.heroTitle}`}>
+          Hi, I&apos;m Amirhossein Khalili
+        </h1>
+
+        <p className={styles.heroSubtitle}>
+          A PASSIONATE PRODUCT ENGINEER
+        </p>
+
+        {/* Action Buttons */}
+        <div className={styles.actionButtons}>
+          <a href="#about" className="pill-btn pill-btn-outline">
+            About
+          </a>
+          <a href="#projects" className="pill-btn pill-btn-outline">
+            Work
+          </a>
+          <a href="#footer" className="pill-btn pill-btn-primary">
+            Contact
+          </a>
+        </div>
+
+        {/* Contact Info Strip */}
+        <div className={styles.contactBar}>
+          <a href="mailto:amirhosseinkhalili901@gmail.com" className={styles.contactItem}>
+            <Mail size={16} className={styles.contactIcon} />
+            <span>amirhosseinkhalili901@gmail.com</span>
+          </a>
+
+          <div className={styles.contactDivider} />
+
+          <a href="tel:+989388263077" className={styles.contactItem}>
+            <Phone size={16} className={styles.contactIcon} />
+            <span>+98 9388263077</span>
+          </a>
+
+          <div className={styles.contactDivider} />
+
+          <div className={styles.contactItem}>
+            <MapPin size={16} className={styles.contactIcon} />
+            <span>Karaj, Alborz, Iran</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/MilestonesSection.module.css b/src/components/MilestonesSection.module.css
new file mode 100644
index 0000000..1486312
--- /dev/null
+++ b/src/components/MilestonesSection.module.css
@@ -0,0 +1,118 @@
+.milestonesSection {
+  position: relative;
+  width: 1440px;
+  padding-top: 60px;
+  padding-bottom: 80px;
+}
+
+.cardsList {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.certCard {
+  width: 1320px;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 24px 32px;
+  display: flex;
+  gap: 36px;
+  box-shadow: 0 4px 16px var(--shadow-color);
+  transition: all 0.25s ease;
+  position: relative;
+}
+
+.certCard:hover {
+  border-color: var(--accent-default);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px var(--shadow-color);
+}
+
+.thumbnailContainer {
+  position: relative;
+  width: 200px;
+  height: 128px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  background-color: #f3f4f6;
+}
+
+.certImage {
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.certCard:hover .certImage {
+  transform: scale(1.02);
+}
+
+.certDetails {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.titleRow {
+  margin-bottom: 4px;
+}
+
+.certTitle {
+  font-size: var(--font-size-h3);
+  line-height: var(--line-height-h3);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.issuerRow {
+  margin-bottom: 2px;
+}
+
+.issuerText {
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.dateBadge {
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  font-weight: 700;
+  letter-spacing: var(--letter-spacing-eyebrow);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+
+.description {
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  color: var(--text-secondary);
+  max-width: 900px;
+  margin-bottom: 16px;
+}
+
+.actionRow {
+  margin-top: auto;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.viewCertLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--font-size-body-small);
+  font-weight: 600;
+  color: var(--action-link);
+  transition: gap 0.2s ease;
+}
+
+.viewCertLink:hover {
+  gap: 10px;
+}
diff --git a/src/components/MilestonesSection.tsx b/src/components/MilestonesSection.tsx
new file mode 100644
index 0000000..69a101a
--- /dev/null
+++ b/src/components/MilestonesSection.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { ArrowUpRight } from 'lucide-react';
+import { milestones } from '@/data/milestones';
+import styles from './MilestonesSection.module.css';
+
+export const MilestonesSection: React.FC = () => {
+  return (
+    <section id="milestones" className={styles.milestonesSection}>
+      <div className="content-container">
+        {/* Section Header */}
+        <div className="section-header">
+          <span className="section-eyebrow">AWARDS & ACHIEVEMENTS</span>
+          <div className="section-title-wrap">
+            <h2 className="section-title">Milestones Along the Way</h2>
+            <div className="section-underline" />
+          </div>
+        </div>
+
+        {/* Certificate Cards List */}
+        <div className={styles.cardsList}>
+          {milestones.map((item) => (
+            <div key={item.id} className={styles.certCard}>
+              {/* Thumbnail */}
+              <div className={styles.thumbnailContainer}>
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className={styles.certImage}
+                />
+              </div>
+
+              {/* Content Details */}
+              <div className={styles.certDetails}>
+                <div className={styles.titleRow}>
+                  <h3 className={styles.certTitle}>{item.title}</h3>
+                </div>
+
+                <div className={styles.issuerRow}>
+                  <span className={styles.issuerText}>{item.issuer}</span>
+                </div>
+
+                <div className={styles.dateBadge}>{item.date}</div>
+
+                <p className={styles.description}>{item.description}</p>
+
+                {/* View Certificate Link */}
+                <div className={styles.actionRow}>
+                  <a
+                    href={item.link || '#'}
+                    className={styles.viewCertLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span>View certificate</span>
+                    <ArrowUpRight size={16} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/ProjectsSection.module.css b/src/components/ProjectsSection.module.css
new file mode 100644
index 0000000..3530cf5
--- /dev/null
+++ b/src/components/ProjectsSection.module.css
@@ -0,0 +1,222 @@
+.projectsSection {
+  position: relative;
+  width: 1440px;
+  padding-top: 60px;
+  padding-bottom: 80px;
+}
+
+.headerRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 40px;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.counter {
+  font-size: var(--font-size-body-large);
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.counterActive {
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.counterDivider {
+  margin: 0 4px;
+}
+
+.arrowButtons {
+  display: flex;
+  gap: 12px;
+}
+
+.navButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-icon-button);
+  height: var(--size-icon-button);
+  border-radius: 50%;
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.navButton:hover:not(:disabled) {
+  border-color: var(--accent-default);
+  background: var(--bg-subtle);
+  transform: scale(1.05);
+}
+
+.navButton:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.carouselViewport {
+  width: 1320px;
+  overflow: visible;
+  position: relative;
+}
+
+.carouselTrack {
+  display: flex;
+  gap: 24px;
+  transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
+  will-change: transform;
+}
+
+.card {
+  flex: 0 0 360px;
+  width: 360px;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 16px var(--shadow-color);
+  transition: all 0.25s ease;
+}
+
+.card:hover {
+  border-color: var(--accent-default);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 28px var(--shadow-color);
+}
+
+.mediaContainer {
+  position: relative;
+  width: 100%;
+  height: var(--size-project-media-height);
+  overflow: hidden;
+  background-color: #0c1a3a;
+}
+
+.projectImage {
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.card:hover .projectImage {
+  transform: scale(1.03);
+}
+
+.cardBody {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.cardTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.cardTitle {
+  font-size: var(--font-size-h3);
+  line-height: var(--line-height-h3);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.linkIcon {
+  color: var(--accent-default);
+}
+
+.cardDate {
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  font-weight: 700;
+  letter-spacing: var(--letter-spacing-eyebrow);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+
+.cardDesc {
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.tagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.tagBadge {
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+  background-color: var(--bg-subtle);
+  color: var(--action-link);
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  font-weight: 600;
+  border: 1px solid var(--border-default);
+}
+
+.cardFooter {
+  margin-top: auto;
+}
+
+.caseStudyLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--font-size-body-small);
+  font-weight: 600;
+  color: var(--action-link);
+  transition: gap 0.2s ease;
+}
+
+.caseStudyLink:hover {
+  gap: 12px;
+}
+
+.arrowIcon {
+  font-size: 16px;
+  transition: transform 0.2s ease;
+}
+
+.progressTrackWrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 48px;
+}
+
+.progressTrack {
+  width: 480px;
+  height: 4px;
+  background-color: var(--border-default);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+  position: relative;
+}
+
+.progressBar {
+  height: 100%;
+  background-color: var(--accent-default);
+  border-radius: var(--radius-pill);
+  transition: transform 0.3s ease;
+}
diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
new file mode 100644
index 0000000..8a90d82
--- /dev/null
+++ b/src/components/ProjectsSection.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import Image from 'next/image';
+import { ArrowLeft, ArrowRight, ArrowUpRight } from 'lucide-react';
+import { projects } from '@/data/projects';
+import styles from './ProjectsSection.module.css';
+
+export const ProjectsSection: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const trackRef = useRef<HTMLDivElement>(null);
+
+  const totalCards = projects.length;
+  // Step by 1 card, up to totalCards - 3
+  const maxIndex = Math.max(0, totalCards - 3);
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
+  };
+
+  // Card width (360px) + gap (24px) = 384px
+  const translateX = currentIndex * 384;
+
+  const progressPercent = maxIndex > 0 ? (currentIndex / maxIndex) * 100 : 0;
+
+  return (
+    <section id="projects" className={styles.projectsSection}>
+      <div className="content-container">
+        {/* Section Header with Controls */}
+        <div className={styles.headerRow}>
+          <div className="section-header" style={{ marginBottom: 0 }}>
+            <span className="section-eyebrow">PROJECTS</span>
+            <div className="section-title-wrap">
+              <h2 className="section-title">Products I&apos;ve Brought to Life</h2>
+              <div className="section-underline" />
+            </div>
+          </div>
+
+          {/* Pagination Counter & Navigation Arrows */}
+          <div className={styles.controls}>
+            <span className={styles.counter}>
+              <strong className={styles.counterActive}>{currentIndex + 1}</strong>
+              <span className={styles.counterDivider}> / </span>
+              {totalCards}
+            </span>
+
+            <div className={styles.arrowButtons}>
+              <button
+                onClick={handlePrev}
+                disabled={currentIndex === 0}
+                className={styles.navButton}
+                aria-label="Previous Project"
+              >
+                <ArrowLeft size={20} />
+              </button>
+
+              <button
+                onClick={handleNext}
+                disabled={currentIndex >= maxIndex}
+                className={styles.navButton}
+                aria-label="Next Project"
+              >
+                <ArrowRight size={20} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Carousel Viewport */}
+        <div className={styles.carouselViewport}>
+          <div
+            ref={trackRef}
+            className={styles.carouselTrack}
+            style={{ transform: `translateX(-${translateX}px)` }}
+          >
+            {projects.map((p) => (
+              <div key={p.id} className={styles.card}>
+                {/* Project Image Media */}
+                <div className={styles.mediaContainer}>
+                  <Image
+                    src={p.image}
+                    alt={p.title}
+                    fill
+                    className={styles.projectImage}
+                  />
+                </div>
+
+                {/* Project Details */}
+                <div className={styles.cardBody}>
+                  <div className={styles.cardTitleRow}>
+                    <h3 className={styles.cardTitle}>{p.title}</h3>
+                    <ArrowUpRight size={18} className={styles.linkIcon} />
+                  </div>
+
+                  <div className={styles.cardDate}>{p.date}</div>
+
+                  <p className={styles.cardDesc}>{p.description}</p>
+
+                  {/* Tech Tags */}
+                  <div className={styles.tagList}>
+                    {p.tags.map((tag) => (
+                      <span key={tag} className={styles.tagBadge}>
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+
+                  {/* Case Study Action */}
+                  <div className={styles.cardFooter}>
+                    <a href={p.link || '#'} className={styles.caseStudyLink}>
+                      <span>View case study</span>
+                      <span className={styles.arrowIcon}>→</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Progress Bar Track */}
+        <div className={styles.progressTrackWrapper}>
+          <div className={styles.progressTrack}>
+            <div
+              className={styles.progressBar}
+              style={{
+                width: '45%',
+                transform: `translateX(${progressPercent * 1.2}%)`,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/RiverJourney.module.css b/src/components/RiverJourney.module.css
new file mode 100644
index 0000000..3453b3d
--- /dev/null
+++ b/src/components/RiverJourney.module.css
@@ -0,0 +1,172 @@
+.journeySection {
+  position: relative;
+  width: 1440px;
+  height: 1050px;
+  /* Seamless continuation of scenic artwork */
+}
+
+.introBlock {
+  position: absolute;
+  left: 60px;
+  top: 170px;
+  width: 380px;
+  z-index: 5;
+}
+
+.eyebrow {
+  display: block;
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  letter-spacing: var(--letter-spacing-eyebrow);
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.heading {
+  font-size: var(--font-size-h2);
+  line-height: var(--line-height-h2);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.underlineBar {
+  width: 120px;
+  height: 3px;
+  background-color: var(--accent-default);
+  border-radius: var(--radius-pill);
+  margin-bottom: 24px;
+}
+
+.description {
+  font-size: var(--font-size-body-large);
+  line-height: var(--line-height-body-large);
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+/* Step Typography */
+.stepNumber {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--accent-default);
+  margin-bottom: 4px;
+}
+
+.stepTitle {
+  font-size: var(--font-size-h3);
+  line-height: var(--line-height-h3);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.stepDesc {
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  color: var(--text-secondary);
+}
+
+.islandImage {
+  object-fit: contain;
+  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.08));
+  transition: transform 0.3s ease;
+}
+
+.islandImage:hover {
+  transform: translateY(-4px) scale(1.02);
+}
+
+/* Freely Positioned Milestones */
+
+/* Step 05: Product Engineer */
+.step05Graphic {
+  position: absolute;
+  left: 1030px;
+  top: 100px;
+  width: 180px;
+  height: 240px;
+  z-index: 6;
+}
+
+.step05Text {
+  position: absolute;
+  left: 1220px;
+  top: 150px;
+  width: 190px;
+  z-index: 6;
+}
+
+/* Step 04: Software Engineer */
+.step04Text {
+  position: absolute;
+  left: 650px;
+  top: 230px;
+  width: 200px;
+  z-index: 6;
+}
+
+.step04Graphic {
+  position: absolute;
+  left: 810px;
+  top: 200px;
+  width: 250px;
+  height: 220px;
+  z-index: 6;
+}
+
+/* Step 03: Computer Science */
+.step03Text {
+  position: absolute;
+  left: 590px;
+  top: 425px;
+  width: 200px;
+  z-index: 6;
+}
+
+.step03Graphic {
+  position: absolute;
+  left: 750px;
+  top: 390px;
+  width: 240px;
+  height: 220px;
+  z-index: 6;
+}
+
+/* Step 02: UI/UX Designer */
+.step02Text {
+  position: absolute;
+  left: 490px;
+  top: 570px;
+  width: 180px;
+  z-index: 6;
+}
+
+.step02Graphic {
+  position: absolute;
+  left: 620px;
+  top: 550px;
+  width: 210px;
+  height: 200px;
+  z-index: 6;
+}
+
+/* Step 01: Digital Artist */
+.step01Text {
+  position: absolute;
+  left: 80px;
+  top: 650px;
+  width: 210px;
+  z-index: 6;
+}
+
+.step01Graphic {
+  position: absolute;
+  left: 260px;
+  top: 610px;
+  width: 230px;
+  height: 200px;
+  z-index: 6;
+}
diff --git a/src/components/RiverJourney.tsx b/src/components/RiverJourney.tsx
new file mode 100644
index 0000000..f82ef88
--- /dev/null
+++ b/src/components/RiverJourney.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import styles from './RiverJourney.module.css';
+
+export const RiverJourney: React.FC = () => {
+  return (
+    <section id="about" className={styles.journeySection}>
+      {/* Intro Header & Description on the Left */}
+      <div className={styles.introBlock}>
+        <span className={styles.eyebrow}>ABOUT ME</span>
+        <h2 className={styles.heading}>From Pixel to Product</h2>
+        <div className={styles.underlineBar} />
+        <p className={styles.description}>
+          I began as a digital artist, designing visual stories. Curiosity turned
+          into code, and code into systems that solve real problems. Today, I
+          build products end-to-end using agentic workflows that blend creativity,
+          engineering, and product thinking.
+        </p>
+      </div>
+
+      {/* 5 Freely Positioned Milestones along the River */}
+
+      {/* Step 05: Product Engineer */}
+      <div className={styles.step05Graphic}>
+        <Image
+          src="/assets/step-05-product-engineer.png"
+          alt="Product Engineer Milestone"
+          width={180}
+          height={240}
+          className={styles.islandImage}
+        />
+      </div>
+      <div className={styles.step05Text}>
+        <div className={styles.stepNumber}>05</div>
+        <h3 className={styles.stepTitle}>Product Engineer</h3>
+        <p className={styles.stepDesc}>
+          Merging product strategy with engineering to ship impactful products.
+        </p>
+      </div>
+
+      {/* Step 04: Software Engineer */}
+      <div className={styles.step04Text}>
+        <div className={styles.stepNumber}>04</div>
+        <h3 className={styles.stepTitle}>Software Engineer</h3>
+        <p className={styles.stepDesc}>
+          Engineered scalable applications and delivered real-world solutions.
+        </p>
+      </div>
+      <div className={styles.step04Graphic}>
+        <Image
+          src="/assets/step-04-software-engineer.png"
+          alt="Software Engineer Milestone"
+          width={250}
+          height={220}
+          className={styles.islandImage}
+        />
+      </div>
+
+      {/* Step 03: Computer Science */}
+      <div className={styles.step03Text}>
+        <div className={styles.stepNumber}>03</div>
+        <h3 className={styles.stepTitle}>Computer Science</h3>
+        <p className={styles.stepDesc}>
+          Built strong foundations in algorithms and systems thinking.
+        </p>
+      </div>
+      <div className={styles.step03Graphic}>
+        <Image
+          src="/assets/step-02-computer-science.png"
+          alt="Computer Science Milestone"
+          width={240}
+          height={220}
+          className={styles.islandImage}
+        />
+      </div>
+
+      {/* Step 02: UI/UX Designer */}
+      <div className={styles.step02Text}>
+        <div className={styles.stepNumber}>02</div>
+        <h3 className={styles.stepTitle}>UI/UX Designer</h3>
+        <p className={styles.stepDesc}>
+          Designed Intuitive interfaces and user-centered experiences.
+        </p>
+      </div>
+      <div className={styles.step02Graphic}>
+        <Image
+          src="/assets/step-03-ui-ux-designer.png"
+          alt="UI/UX Designer Milestone"
+          width={210}
+          height={200}
+          className={styles.islandImage}
+        />
+      </div>
+
+      {/* Step 01: Digital Artist */}
+      <div className={styles.step01Text}>
+        <div className={styles.stepNumber}>01</div>
+        <h3 className={styles.stepTitle}>Digital Artist</h3>
+        <p className={styles.stepDesc}>
+          Explored visual design, illustration and storytelling.
+        </p>
+      </div>
+      <div className={styles.step01Graphic}>
+        <Image
+          src="/assets/step-01-digital-artist.png"
+          alt="Digital Artist Milestone"
+          width={230}
+          height={200}
+          className={styles.islandImage}
+        />
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css
new file mode 100644
index 0000000..ecb811d
--- /dev/null
+++ b/src/components/ScenicHeroJourney.module.css
@@ -0,0 +1,24 @@
+.scenicContainer {
+  position: relative;
+  width: 1440px;
+  height: 1730px;
+  overflow: hidden;
+  background-color: var(--bg-page);
+}
+
+.artworkContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1440px;
+  height: 1576px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.artworkImage {
+  object-fit: contain;
+  object-position: top center;
+  width: 1440px;
+  height: 1576px;
+}
diff --git a/src/components/ScenicHeroJourney.tsx b/src/components/ScenicHeroJourney.tsx
new file mode 100644
index 0000000..b2dc4ea
--- /dev/null
+++ b/src/components/ScenicHeroJourney.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { useTheme } from '@/context/ThemeContext';
+import { HeroSection } from './HeroSection';
+import { RiverJourney } from './RiverJourney';
+import styles from './ScenicHeroJourney.module.css';
+
+export const ScenicHeroJourney: React.FC = () => {
+  const { theme } = useTheme();
+
+  return (
+    <div className={styles.scenicContainer}>
+      {/* Seamless Continuous Landscape & River Artwork */}
+      <div className={styles.artworkContainer}>
+        <Image
+          src={
+            theme === 'dark'
+              ? '/assets/landing-to-river-artwork-dark.png'
+              : '/assets/landing-to-river-artwork.png'
+          }
+          alt="Mountain landscape to river journey artwork"
+          width={1440}
+          height={1576}
+          priority
+          className={styles.artworkImage}
+        />
+      </div>
+
+      {/* Hero Section Component */}
+      <HeroSection />
+
+      {/* About Me River Journey Component */}
+      <RiverJourney />
+    </div>
+  );
+};
diff --git a/src/components/SkillsSection.module.css b/src/components/SkillsSection.module.css
new file mode 100644
index 0000000..a747b93
--- /dev/null
+++ b/src/components/SkillsSection.module.css
@@ -0,0 +1,162 @@
+.skillsSection {
+  position: relative;
+  width: 1440px;
+  padding-top: 60px;
+  padding-bottom: 80px;
+}
+
+.mainCard {
+  width: 1320px;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
+  padding: 36px 40px;
+  box-shadow: 0 4px 20px var(--shadow-color);
+  margin-bottom: 32px;
+}
+
+.cardEyebrow {
+  display: block;
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  letter-spacing: var(--letter-spacing-eyebrow);
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--text-muted);
+  margin-bottom: 24px;
+}
+
+.skillsBlock {
+  margin-bottom: 40px;
+}
+
+.skillsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: 28px;
+  column-gap: 40px;
+  margin-bottom: 32px;
+}
+
+.skillItem {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.skillName {
+  font-size: var(--font-size-body-default);
+  line-height: var(--line-height-body-default);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.meterSegments {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+}
+
+.segment {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background-color: var(--border-default);
+  transition: background-color 0.2s ease;
+}
+
+.segmentFilled {
+  background-color: var(--accent-default);
+}
+
+.badgeCloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.badgePill {
+  padding: 6px 16px;
+  border-radius: var(--radius-pill);
+  background-color: var(--bg-subtle);
+  border: 1px solid var(--border-default);
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  color: var(--text-secondary);
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.badgePill:hover {
+  border-color: var(--accent-default);
+  color: var(--text-primary);
+}
+
+.toolsBlock {
+  padding-top: 16px;
+}
+
+.toolsGrid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 24px;
+}
+
+.toolTile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 132px;
+  height: 136px;
+  background-color: var(--bg-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: 16px 8px;
+  transition: all 0.25s cubic-bezier(0.2, 0, 0.2, 1);
+  cursor: default;
+}
+
+.toolTile:hover {
+  border-color: var(--accent-default);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px var(--shadow-color);
+}
+
+.toolDimmed {
+  opacity: 0.35;
+  filter: grayscale(0.8);
+}
+
+.toolIconContainer {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.toolIcon {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
+.toolLabel {
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+  font-weight: 600;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+.filterTabsRow {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.filterButton {
+  min-width: 180px;
+}
diff --git a/src/components/SkillsSection.tsx b/src/components/SkillsSection.tsx
new file mode 100644
index 0000000..abf7c48
--- /dev/null
+++ b/src/components/SkillsSection.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { Code, BarChart2, Wand2 } from 'lucide-react';
+import {
+  skillCategories,
+  keywordBadges,
+  toolsList,
+  filterTabs,
+  FilterTab,
+} from '@/data/skills';
+import styles from './SkillsSection.module.css';
+
+export const SkillsSection: React.FC = () => {
+  const [activeFilter, setActiveFilter] = useState<FilterTab['id']>('software-engineering');
+
+  const filteredTools = toolsList.filter((tool) =>
+    tool.category.includes(activeFilter)
+  );
+
+  const getFilterIcon = (id: FilterTab['id']) => {
+    switch (id) {
+      case 'software-engineering':
+        return <Code size={18} />;
+      case 'product-management':
+        return <BarChart2 size={18} />;
+      case 'design-ux':
+        return <Wand2 size={18} />;
+    }
+  };
+
+  return (
+    <section id="skills" className={styles.skillsSection}>
+      <div className="content-container">
+        {/* Section Header */}
+        <div className="section-header">
+          <span className="section-eyebrow">SKILLS & TOOLS</span>
+          <div className="section-title-wrap">
+            <h2 className="section-title">The Stack Behind the Work...</h2>
+            <div className="section-underline" />
+          </div>
+        </div>
+
+        {/* Main Card Container */}
+        <div className={styles.mainCard}>
+          {/* Section: Skills */}
+          <div className={styles.skillsBlock}>
+            <span className={styles.cardEyebrow}>SKILLS</span>
+
+            {/* 8 Skill Meters Grid */}
+            <div className={styles.skillsGrid}>
+              {skillCategories.map((skill) => (
+                <div key={skill.name} className={styles.skillItem}>
+                  <div className={styles.skillName}>{skill.name}</div>
+                  <div className={styles.meterSegments}>
+                    {[1, 2, 3, 4, 5].map((seg) => (
+                      <div
+                        key={seg}
+                        className={`${styles.segment} ${
+                          seg <= skill.level ? styles.segmentFilled : ''
+                        }`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Keyword Badges */}
+            <div className={styles.badgeCloud}>
+              {keywordBadges.map((badge) => (
+                <span key={badge} className={styles.badgePill}>
+                  {badge}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Section: Tools */}
+          <div className={styles.toolsBlock}>
+            <span className={styles.cardEyebrow}>TOOLS</span>
+
+            {/* 8-Column Grid */}
+            <div className={styles.toolsGrid}>
+              {toolsList.map((tool) => {
+                const isMatching = tool.category.includes(activeFilter);
+                return (
+                  <div
+                    key={tool.id}
+                    className={`${styles.toolTile} ${
+                      !isMatching ? styles.toolDimmed : ''
+                    }`}
+                  >
+                    <div className={styles.toolIconContainer}>
+                      <Image
+                        src={tool.icon}
+                        alt={tool.name}
+                        width={64}
+                        height={64}
+                        className={styles.toolIcon}
+                      />
+                    </div>
+                    <span className={styles.toolLabel}>{tool.name}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Filter Tabs Under Card */}
+        <div className={styles.filterTabsRow}>
+          {filterTabs.map((tab) => {
+            const isActive = activeFilter === tab.id;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveFilter(tab.id)}
+                className={`pill-btn ${
+                  isActive ? 'pill-btn-primary' : 'pill-btn-outline'
+                } ${styles.filterButton}`}
+              >
+                {getFilterIcon(tab.id)}
+                <span>{tab.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
new file mode 100644
index 0000000..9523f0f
--- /dev/null
+++ b/src/context/ThemeContext.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+  theme: 'light',
+  toggleTheme: () => {},
+  setTheme: () => {},
+});
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [theme, setThemeState] = useState<Theme>('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('portfolio-theme') as Theme | null;
+    const initialTheme = savedTheme || 'light';
+    setThemeState(initialTheme);
+    document.documentElement.setAttribute('data-theme', initialTheme);
+    setMounted(true);
+  }, []);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem('portfolio-theme', newTheme);
+    document.documentElement.setAttribute('data-theme', newTheme);
+  };
+
+  const toggleTheme = () => {
+    const nextTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(nextTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/src/data/education.ts b/src/data/education.ts
new file mode 100644
index 0000000..820d068
--- /dev/null
+++ b/src/data/education.ts
@@ -0,0 +1,16 @@
+export interface EducationItem {
+  degree: string;
+  institution: string;
+  date: string;
+  description: string;
+  logo: string;
+}
+
+export const education: EducationItem = {
+  degree: "Bachelor's Degree in Computer Engineering",
+  institution: 'University of Guilan',
+  date: 'JAN 2022 - JUN 2026',
+  logo: '/images/logo-guilan-crest.png',
+  description:
+    "My bachelor's years at the University of Guilan were where I grew from a curious student into someone who could build, teach, lead, and take responsibility for real outcomes. Alongside studying Computer Engineering, I worked on software projects, served as Head of the Computer Engineering Scientific Association, coordinated teaching assistants across several courses, organized technical events, and supported other students in learning and problem-solving. More than any single subject, this period taught me how to think systematically, collaborate with people, communicate ideas clearly, and turn knowledge into something useful for others.",
+};
diff --git a/src/data/experience.ts b/src/data/experience.ts
new file mode 100644
index 0000000..0a2fb5c
--- /dev/null
+++ b/src/data/experience.ts
@@ -0,0 +1,120 @@
+export interface ExperienceItem {
+  id: string;
+  role: string;
+  company: string;
+  date: string;
+  location: string;
+  logo: string;
+  isCurrent?: boolean;
+  summary: string;
+  bullets: string[];
+}
+
+export const experiences: ExperienceItem[] = [
+  {
+    id: 'quera',
+    role: 'Software Engineer',
+    company: 'Quera',
+    date: 'NOV 2024 - PRESENT',
+    location: 'Tehran (Remote)',
+    logo: '/images/logo-quera.png',
+    isCurrent: true,
+    summary:
+      'Contribute to internal engineering tools and educational products while also supporting developers and learners through mentoring and course development. My role combines software engineering, technical education, and problem design across backend development, databases, and algorithms.',
+    bullets: [
+      'Designed and implemented internal tools and services for staff',
+      'Mentored learners and developers in programming and problem-solving',
+      'Improved and designed educational programming courses in backend development, NoSQL, and SQL',
+      'Designed algorithmic and implementation problems for the Python and Django contest at Technology Olympics 2025',
+    ],
+  },
+  {
+    id: 'fiotrix',
+    role: 'Software Engineer',
+    company: 'Fiotrix',
+    date: 'NOV 2025 - MAR 2026',
+    location: 'Karaj, Alborz',
+    logo: '/images/logo-fiotrix.png',
+    isCurrent: false,
+    summary:
+      'Worked across the backend, frontend, and infrastructure of production systems, with a strong focus on performance, maintainability, and reliable deployment. I contributed to both feature development and architectural improvements, including database migration, backend refactoring, and API optimization.',
+    bullets: [
+      'Developed backend services using Python, Django, and DRF',
+      'Built frontend features with React and TypeScript',
+      'Managed services with Docker, Nginx, PgBouncer, and MinIO',
+      'Collaborated using Git and GitLab for version control and CI',
+      'Refactored backend code and proposed a cleaner base architecture',
+      'Designed a data migration pipeline from SQL Server to PostgreSQL',
+      'Reduced API response times by approximately 80% through indexing and resolving N+1 queries',
+    ],
+  },
+  {
+    id: 'baduno',
+    role: 'Backend Developer',
+    company: 'Baduno',
+    date: 'OCT 2025 - NOV 2025',
+    location: 'Tehran, Tehran',
+    logo: '/images/logo-baduno.png',
+    isCurrent: false,
+    summary:
+      'Built and deployed web scraping services with an emphasis on reusable architecture, reliability, and production readiness. My work included reverse engineering external platforms, handling anti-blocking challenges, and publishing API-based scraping services for external users.',
+    bullets: [
+      'Built Python and FastAPI web scraping services published on RapidAPI',
+      'Developed and reverse-engineered a Google Maps scraper',
+      'Designed reusable scraper workflows using the Template Method pattern',
+      'Managed deployment and routing of FastAPI services using Caddy',
+      'Wrote unit tests with pytest and load tests with Locust',
+      'Implemented proxy rotation to reduce IP-blocking issues',
+    ],
+  },
+  {
+    id: 'sharif-ta',
+    role: 'Teaching Assistant',
+    company: 'Sharif University of Technology',
+    date: 'OCT 2025 - JAN 2026',
+    location: 'Tehran, Tehran',
+    logo: '/images/logo-sharif.png',
+    isCurrent: false,
+    summary:
+      'Supported introductory programming courses by helping students build strong foundations in programming concepts, problem-solving, and practical implementation while working alongside course instructors.',
+    bullets: [
+      'Fundamentals of Programming, Dr. Mohammad Nazari (1404-1)',
+      'Fundamentals of Programming, Dr. Zahra Mafi (1404-1)',
+    ],
+  },
+  {
+    id: 'guilan-assoc',
+    role: 'Head of Scientific Association of Computer Engineering',
+    company: 'University of Guilan',
+    date: 'SEP 2024 - JUN 2026',
+    location: 'Rasht, Guilan',
+    logo: '/images/logo-guilan-assoc.png',
+    isCurrent: false,
+    summary:
+      'Led the Computer Engineering Scientific Association and helped organize its academic and community activities. The role involved coordinating teams, planning events, and managing ongoing tasks across both online and in-person initiatives.',
+    bullets: [
+      'Managed online and on-site events',
+      'Coordinated tasks and team workflows using Notion',
+    ],
+  },
+  {
+    id: 'guilan-ta-head',
+    role: 'Head of Teaching Assistants',
+    company: 'University of Guilan',
+    date: 'SEP 2024 - JAN 2026',
+    location: 'Rasht, Guilan',
+    logo: '/images/logo-guilan-ta.png',
+    isCurrent: false,
+    summary:
+      'Coordinated teaching assistant activities across multiple Computer Engineering courses, combining academic support with team organization and course-level responsibilities across programming, databases, systems, and software engineering.',
+    bullets: [
+      'Fundamentals of Programming (1403-1)',
+      'Computer Workshop (1403-1)',
+      'Database Design (1403-1 & 1403-2)',
+      'System Analysis and Design (1403-2)',
+      'OS Fundamentals & Lab (1403-1)',
+      'Software Engineering (1404-1)',
+      'Data Structures & Algorithms (1404-1)',
+    ],
+  },
+];
diff --git a/src/data/milestones.ts b/src/data/milestones.ts
new file mode 100644
index 0000000..fd8d3d2
--- /dev/null
+++ b/src/data/milestones.ts
@@ -0,0 +1,62 @@
+export interface MilestoneItem {
+  id: string;
+  title: string;
+  issuer: string;
+  date: string;
+  description: string;
+  image: string;
+  link?: string;
+}
+
+export const milestones: MilestoneItem[] = [
+  {
+    id: 'hackathon',
+    title: 'Agentic AI Development Hackathon',
+    issuer: 'Startcoach.ir',
+    date: 'AUGUST 2026',
+    description:
+      'This hackathon gave me the opportunity to explore the rapidly evolving field of agentic AI through hands-on problem-solving and experimentation. Working within a limited timeframe encouraged rapid learning, technical decision-making, and creative thinking while deepening my understanding of how AI-driven systems can be designed to solve practical problems.',
+    image: '/images/cert-hackathon.png',
+    link: '#',
+  },
+  {
+    id: 'icpc-2025',
+    title: 'ICPC 2025 Regional Finalist',
+    issuer: 'International Collegiate Programming Contest (ICPC)',
+    date: 'AUGUST 2025',
+    description:
+      'Competing as an ICPC Regional Finalist challenged me to solve complex algorithmic problems under strict time constraints while working closely with my teammates. The experience strengthened my problem-solving, algorithmic thinking, communication, and ability to stay focused when approaching unfamiliar technical challenges.',
+    image: '/images/cert-icpc-2025.png',
+    link: '#',
+  },
+  {
+    id: 'pm-bootcamp',
+    title: 'Product Management Bootcamp',
+    issuer: 'Prodemy.ir',
+    date: 'JANUARY 2026',
+    description:
+      'This bootcamp expanded my perspective beyond engineering and helped me better understand how successful products are shaped around real user needs and business goals. I explored product thinking, discovery, prioritization, planning, and cross-functional collaboration, strengthening my ability to connect technical decisions with the bigger picture of a product.',
+    image: '/images/cert-bootcamp.png',
+    link: '#',
+  },
+  {
+    id: 'icpc-2024',
+    title: 'ICPC 2024 - Online Participant',
+    issuer: 'International Collegiate Programming Contest (ICPC)',
+    date: 'SEPTEMBER 2024',
+    description:
+      'Participating in ICPC gave me valuable exposure to competitive programming and pushed me to approach problems with greater structure, speed, and precision. It helped strengthen my foundations in algorithms and data structures while motivating me to continue developing the skills needed for higher-level programming competitions.',
+    image: '/images/cert-icpc-2024.png',
+    link: '#',
+  },
+  {
+    id: 'django-bootcamp',
+    title: 'Backend development with Django Bootcamp',
+    issuer: 'Quera.org',
+    date: 'NOVEMBER 2024',
+    description:
+      'This bootcamp strengthened my foundations in backend development and helped turn my knowledge of Python into practical web engineering skills. Through Django, I developed a deeper understanding of backend architecture, databases, APIs, authentication, and building maintainable server-side applications—skills that later became a major part of my software engineering work.',
+    image: '/images/cert-django.png',
+    link: '#',
+  },
+];
diff --git a/src/data/projects.ts b/src/data/projects.ts
new file mode 100644
index 0000000..a95889a
--- /dev/null
+++ b/src/data/projects.ts
@@ -0,0 +1,92 @@
+export interface Project {
+  id: string;
+  title: string;
+  link?: string;
+  date: string;
+  description: string;
+  tags: string[];
+  image: string;
+}
+
+export const projects: Project[] = [
+  {
+    id: 'qlockify',
+    title: 'Qlockify',
+    link: '#',
+    date: 'FEB 2026 - PRESENT',
+    description:
+      'Built a production-ready time tracking platform for teams and freelancers to manage workspaces, projects, billable hours, and reports in one place. Users can track their work time, organize it by project, manage access inside each workspace, generate reports for admins and clients, and export insights.',
+    tags: ['Django', 'React', 'Docker', 'UI/UX Design'],
+    image: '/images/project-qlockify.png',
+  },
+  {
+    id: 'guilan-ace',
+    title: 'Guilan ACE',
+    link: '#',
+    date: 'JUL 2025 - PRESENT',
+    description:
+      'Developed the Scientific Association of Computer Engineering website for event management and article publishing, helping members organize activities and users register for events, read blog posts, and share ideas through comments.',
+    tags: ['Django Ninja', 'Next.js', 'Docker'],
+    image: '/images/project-guilan-ace.png',
+  },
+  {
+    id: 'zarinpal',
+    title: 'Zarinpal Analytic Dashboard',
+    link: '#',
+    date: 'AUG 2026',
+    description:
+      "AI-based dashboard for analytics insight on merchant's transactions in their different terminals and suggesting profitable campaigns to hold in special occasions based on their historical transactions and upcoming events in Persian calendar and international events that affect Iranian markets.",
+    tags: ['Go', 'SvelteKit', 'Docker'],
+    image: '/images/project-zarinpal.png',
+  },
+  {
+    id: 'iran-implant',
+    title: 'Iran Implant',
+    link: '#',
+    date: 'NOV 2025 - MAR 2026',
+    description:
+      'Developed the backend of a comprehensive dental clinic and implant center management system for appointment scheduling, inventory tracking, patient records, and billing, enabling clinic staff to manage daily clinic operations seamlessly from a centralized platform.',
+    tags: ['Django', 'Nginx', 'PostgreSQL', 'Docker'],
+    image: '/images/project-iran-implant.png',
+  },
+  {
+    id: 'agentic-workflow-engine',
+    title: 'Agentic Workflow Engine',
+    link: '#',
+    date: 'JAN 2026 - FEB 2026',
+    description:
+      'Engineered an autonomous multi-agent task execution system utilizing advanced LLM reasoning, background task scheduling, and structured tool calling for end-to-end automated code refactoring and project analysis.',
+    tags: ['Python', 'FastAPI', 'Redis', 'Docker'],
+    image: '/images/project-qlockify.png',
+  },
+  {
+    id: 'rapidapi-scraper-suite',
+    title: 'RapidAPI Scraping Suite',
+    link: '#',
+    date: 'OCT 2025 - NOV 2025',
+    description:
+      'Architected resilient web scraping and data extraction microservices deployed on RapidAPI with automated proxy rotation, anti-bot bypass techniques, and high-concurrency async pipelines.',
+    tags: ['FastAPI', 'Caddy', 'Locust', 'PyTest'],
+    image: '/images/project-guilan-ace.png',
+  },
+  {
+    id: 'sharif-contest-platform',
+    title: 'Tech Olympics Problem Engine',
+    link: '#',
+    date: 'DEC 2025 - JAN 2026',
+    description:
+      'Designed algorithmic and implementation problem suites and automated grading sandbox test runners for Python and Django challenges in national programming competitions.',
+    tags: ['Python', 'Django', 'PostgreSQL', 'Docker'],
+    image: '/images/project-zarinpal.png',
+  },
+  {
+    id: 'home-lab-infra',
+    title: 'Private Cloud & Home Lab',
+    link: '#',
+    date: '2024 - PRESENT',
+    description:
+      'Designed and deployed private on-premise infrastructure hosting containerized services, databases, CI/CD runners, reverse proxies, and self-hosted AI workloads with proactive Grafana/Prometheus monitoring.',
+    tags: ['Linux', 'Docker', 'Nginx', 'Grafana'],
+    image: '/images/project-iran-implant.png',
+  },
+];
diff --git a/src/data/skills.ts b/src/data/skills.ts
new file mode 100644
index 0000000..033beb6
--- /dev/null
+++ b/src/data/skills.ts
@@ -0,0 +1,81 @@
+export interface SkillCategory {
+  name: string;
+  level: number; // 1 to 5
+}
+
+export interface ToolItem {
+  id: string;
+  name: string;
+  icon: string;
+  category: ('software-engineering' | 'product-management' | 'design-ux')[];
+}
+
+export const skillCategories: SkillCategory[] = [
+  { name: 'Backend', level: 5 },
+  { name: 'Databases', level: 4 },
+  { name: 'Testing & Quality', level: 3 },
+  { name: 'System Design', level: 3 },
+  { name: 'Frontend', level: 5 },
+  { name: 'DevOps', level: 2 },
+  { name: 'Web Scraping', level: 3 },
+  { name: 'Version Control', level: 4 },
+];
+
+export const keywordBadges: string[] = [
+  'Documentation',
+  'Authentication',
+  'Authorization',
+  'OAuth2',
+  'JWT',
+  'Caching',
+  'Rate Limiting',
+  'Throttling',
+  'WebSockets',
+  'Background Job',
+  'Web Scraping',
+  'Bash Scripting',
+  'Microservices',
+  'Performance Optimization',
+  'Third-Party Integration',
+];
+
+export const toolsList: ToolItem[] = [
+  // Row 1
+  { id: 'vscode', name: 'VS Code', icon: '/images/tools/vscode.png', category: ['software-engineering'] },
+  { id: 'codex', name: 'Codex', icon: '/images/tools/codex.png', category: ['software-engineering', 'product-management'] },
+  { id: 'antigravity', name: 'Antigravity', icon: '/images/tools/antigravity.png', category: ['software-engineering', 'product-management'] },
+  { id: 'git', name: 'Git', icon: '/images/tools/git.png', category: ['software-engineering'] },
+  { id: 'github', name: 'GitHub', icon: '/images/tools/github.png', category: ['software-engineering', 'product-management'] },
+  { id: 'python', name: 'Python', icon: '/images/tools/python.png', category: ['software-engineering'] },
+  { id: 'django', name: 'Django', icon: '/images/tools/django.png', category: ['software-engineering'] },
+  { id: 'fastapi', name: 'FastAPI', icon: '/images/tools/fastapi.png', category: ['software-engineering'] },
+  // Row 2
+  { id: 'celery', name: 'Celery', icon: '/images/tools/celery.png', category: ['software-engineering'] },
+  { id: 'postgresql', name: 'PostgreSQL', icon: '/images/tools/postgresql.png', category: ['software-engineering'] },
+  { id: 'redis', name: 'Redis', icon: '/images/tools/redis.png', category: ['software-engineering'] },
+  { id: 'neo4j', name: 'Neo4j', icon: '/images/tools/neo4j.png', category: ['software-engineering'] },
+  { id: 'mongodb', name: 'MongoDB', icon: '/images/tools/mongodb.png', category: ['software-engineering'] },
+  { id: 'typescript', name: 'TypeScript', icon: '/images/tools/typescript.png', category: ['software-engineering'] },
+  { id: 'react', name: 'React', icon: '/images/tools/react.png', category: ['software-engineering', 'design-ux'] },
+  { id: 'nextjs', name: 'Next.js', icon: '/images/tools/nextjs.png', category: ['software-engineering', 'design-ux'] },
+  // Row 3
+  { id: 'linux', name: 'Linux', icon: '/images/tools/linux.png', category: ['software-engineering'] },
+  { id: 'docker', name: 'Docker', icon: '/images/tools/docker.png', category: ['software-engineering'] },
+  { id: 'nginx', name: 'Nginx', icon: '/images/tools/nginx.png', category: ['software-engineering'] },
+  { id: 'caddy', name: 'Caddy', icon: '/images/tools/caddy.png', category: ['software-engineering'] },
+  { id: 'minio', name: 'MinIO', icon: '/images/tools/minio.png', category: ['software-engineering'] },
+  { id: 'prometheus', name: 'Prometheus', icon: '/images/tools/prometheus.png', category: ['software-engineering'] },
+  { id: 'grafana', name: 'Grafana', icon: '/images/tools/grafana.png', category: ['software-engineering', 'product-management'] },
+  { id: 'kubernetes', name: 'Kubernetes', icon: '/images/tools/kubernetes.png', category: ['software-engineering'] },
+];
+
+export interface FilterTab {
+  id: 'software-engineering' | 'product-management' | 'design-ux';
+  label: string;
+}
+
+export const filterTabs: FilterTab[] = [
+  { id: 'software-engineering', label: 'Software Engineering' },
+  { id: 'product-management', label: 'Product Management' },
+  { id: 'design-ux', label: 'Design & UX' },
+];
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..5b35723
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,150 @@
+@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
+@import './tokens.css';
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  color-scheme: light;
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+body {
+  width: 100%;
+  min-width: 1440px;
+  background-color: var(--bg-page);
+  color: var(--text-primary);
+  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: auto;
+  transition: background-color 0.25s ease, color 0.25s ease;
+}
+
+/* Master 1440px Fixed Canvas */
+.desktop-canvas {
+  width: 1440px;
+  min-width: 1440px;
+  margin: 0 auto;
+  position: relative;
+  background-color: var(--bg-page);
+  overflow: hidden;
+}
+
+/* 1320px Inner Content Container with 60px Gutters */
+.content-container {
+  width: 1320px;
+  margin: 0 auto;
+  position: relative;
+}
+
+/* Common Section Header Component Styles */
+.section-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 40px;
+}
+
+.section-eyebrow {
+  font-size: var(--font-size-label-small);
+  line-height: var(--line-height-label-small);
+  letter-spacing: var(--letter-spacing-eyebrow);
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.section-title-wrap {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.section-title {
+  font-size: var(--font-size-h2);
+  line-height: var(--line-height-h2);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.section-underline {
+  width: 120px;
+  height: 3px;
+  background-color: var(--accent-default);
+  border-radius: var(--radius-pill);
+}
+
+/* Pacifico Display Font Class */
+.font-display {
+  font-family: 'Pacifico', cursive;
+  font-weight: 400;
+}
+
+/* Pill Button */
+.pill-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: var(--size-button-height);
+  padding: 0 24px;
+  border-radius: var(--radius-pill);
+  font-size: var(--font-size-button);
+  line-height: var(--line-height-button);
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.pill-btn-outline {
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+
+.pill-btn-outline:hover {
+  background: rgba(255, 255, 255, 0.7);
+  border-color: var(--accent-default);
+  transform: translateY(-1px);
+}
+
+[data-theme="dark"] .pill-btn-outline {
+  background: rgba(9, 28, 63, 0.6);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .pill-btn-outline:hover {
+  background: rgba(16, 63, 127, 0.8);
+  border-color: var(--accent-default);
+}
+
+.pill-btn-primary {
+  background-color: var(--action-primary-bg);
+  color: var(--action-primary-fg);
+  border-color: transparent;
+}
+
+.pill-btn-primary:hover {
+  background-color: var(--action-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..545a9d6
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,130 @@
+/* Generated from Figma DTCG Design Tokens */
+
+:root {
+  --color-blue-100: #F8FAFF;
+  --color-blue-200: #E6F0FE;
+  --color-blue-300: #82B5FF;
+  --color-blue-400: #3D8AFA;
+  --color-blue-500: #1557A6;
+  --color-blue-600: #103F7F;
+  --color-blue-700: #0B2F5F;
+  --color-blue-800: #091C3F;
+  --color-blue-900: #07132F;
+  --color-blue-950: #010D27;
+  --color-blue-white: #FFFFFF;
+  --color-slate-300: #C3CFE0;
+  --color-slate-400: #A3B1C6;
+  --color-slate-600: #667085;
+  --color-slate-800: #38526E;
+  --color-border-light: #D9E2EF;
+  --color-border-dark: #1E3458;
+  --color-border-strong-light: #A9BEDA;
+  --color-border-strong-dark: #426B9D;
+  --color-black: #000000;
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 40px;
+  --space-8: 48px;
+  --space-9: 64px;
+  --space-10: 80px;
+  --space-11: 96px;
+  --space-12: 120px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+  --stroke-default: 1px;
+  --stroke-strong: 2px;
+  --layout-frame: 1440px;
+  --layout-container: 1320px;
+  --layout-page-gutter: 60px;
+  --layout-grid-gutter: 24px;
+  --layout-grid-column: 88px;
+  --layout-section-gap: 120px;
+  --layout-section-padding: 96px;
+  --layout-text-measure: 720px;
+  --size-icon-sm: 16px;
+  --size-icon-md: 20px;
+  --size-icon-lg: 24px;
+  --size-icon-button: 44px;
+  --size-button-height: 48px;
+  --size-social-button: 56px;
+  --size-avatar: 200px;
+  --size-journey-image: 96px;
+  --size-project-width: 360px;
+  --size-project-media-height: 225px;
+  --size-tool-tile: 72px;
+  --font-size-display-hero: 64px;
+  --font-size-display-footer: 48px;
+  --font-size-h1: 40px;
+  --font-size-h2: 32px;
+  --font-size-h3: 20px;
+  --font-size-body-large: 18px;
+  --font-size-body-default: 16px;
+  --font-size-body-small: 14px;
+  --font-size-label-small: 12px;
+  --font-size-button: 15px;
+  --line-height-display-hero: 72px;
+  --line-height-display-footer: 56px;
+  --line-height-h1: 52px;
+  --line-height-h2: 42px;
+  --line-height-h3: 28px;
+  --line-height-body-large: 30px;
+  --line-height-body-default: 26px;
+  --line-height-body-small: 22px;
+  --line-height-label-small: 18px;
+  --line-height-button: 20px;
+  --letter-spacing-eyebrow: 0.16em;
+
+  /* Semantic Tokens (Light) */
+  --bg-page: #FFFFFF;
+  --bg-surface: #FAFAFA;
+  --bg-raised: #FFFFFF;
+  --bg-subtle: #E6F0FE;
+  --text-primary: #0B2F5F;
+  --text-secondary: #38526E;
+  --text-muted: #667085;
+  --text-on-band: #FFFFFF;
+  --border-default: #D9E2EF;
+  --border-strong: #A9BEDA;
+  --accent-default: #3D8AFA;
+  --action-link: #1557A6;
+  --action-primary-bg: #103F7F;
+  --action-primary-fg: #FFFFFF;
+  --action-primary-hover: #0B3268;
+  --action-primary-pressed: #08284F;
+  --brand-band: #103F7F;
+  --focus-ring: #3D8AFA;
+  --overlay-contact: rgba(255, 255, 255, 0.721569);
+  --shadow-color: rgba(16, 63, 127, 0.078431);
+}
+
+[data-theme="dark"] {
+  /* Semantic Tokens (Dark) */
+  --bg-page: #010D27;
+  --bg-surface: #07132F;
+  --bg-raised: #0C1A3A;
+  --bg-subtle: #091C3F;
+  --text-primary: #F8FAFF;
+  --text-secondary: #C3CFE0;
+  --text-muted: #A3B1C6;
+  --text-on-band: #FFFFFF;
+  --border-default: #1E3458;
+  --border-strong: #426B9D;
+  --accent-default: #82B5FF;
+  --action-link: #82B5FF;
+  --action-primary-bg: #F8FAFF;
+  --action-primary-fg: #010D27;
+  --action-primary-hover: #DCE8F7;
+  --action-primary-pressed: #C3D5EC;
+  --brand-band: #3D8AFA;
+  --focus-ring: #82B5FF;
+  --overlay-contact: rgba(1, 13, 39, 0.721569);
+  --shadow-color: rgba(0, 0, 0, 0.239216);
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c133409
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}