diff --git a/package.json b/package.json
index 1cdb00f..a66a44a 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "type-check": "tsc --noEmit",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -14,6 +15,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@devicon/react": "^0.0.3",
     "@headlessui/react": "^2.2.9",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.11",
@@ -29,11 +31,13 @@
     "@react-email/preview": "^0.0.14",
     "@react-email/render": "^2.0.4",
     "@react-email/tailwind": "^2.0.4",
+    "@react-pdf/renderer": "^4.3.2",
     "@tailwindcss/postcss": "^4.1.18",
     "autoprefixer": "10.4.24",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "devicons": "^1.8.0",
     "eslint-plugin-oxlint": "^1.43.0",
     "framer-motion": "^12.33.0",
     "globals": "^17.3.0",
@@ -55,7 +59,8 @@
     "sharp": "^0.34.5",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "use-scramble": "^2.2.15"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a983eb3..a3e24a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@devicon/react':
+        specifier: ^0.0.3
+        version: 0.0.3
       '@headlessui/react':
         specifier: ^2.2.9
         version: 2.2.9(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -53,6 +56,9 @@ importers:
       '@react-email/tailwind':
         specifier: ^2.0.4
         version: 2.0.4(@react-email/body@0.2.1(react@19.2.4))(@react-email/button@0.2.1(react@19.2.4))(@react-email/code-block@0.2.1(react@19.2.4))(@react-email/code-inline@0.0.6(react@19.2.4))(@react-email/container@0.0.16(react@19.2.4))(@react-email/heading@0.0.16(react@19.2.4))(@react-email/hr@0.0.12(react@19.2.4))(@react-email/img@0.0.12(react@19.2.4))(@react-email/link@0.0.13(react@19.2.4))(@react-email/preview@0.0.14(react@19.2.4))(@react-email/text@0.1.6(react@19.2.4))(react@19.2.4)
+      '@react-pdf/renderer':
+        specifier: ^4.3.2
+        version: 4.3.2(react@19.2.4)
       '@tailwindcss/postcss':
         specifier: ^4.1.18
         version: 4.1.18
@@ -68,6 +74,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      devicons:
+        specifier: ^1.8.0
+        version: 1.8.0
       eslint-plugin-oxlint:
         specifier: ^1.43.0
         version: 1.43.0
@@ -134,6 +143,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@4.1.18)
+      use-scramble:
+        specifier: ^2.2.15
+        version: 2.2.15(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.3.3
@@ -254,6 +266,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/runtime@7.28.6':
+    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
@@ -266,6 +282,9 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@devicon/react@0.0.3':
+    resolution: {integrity: sha512-r8Td7z0hyC8Y1PSgZs9NBGDcEosmFjSLWlhbez/8nOR+5HNXFpaFryc7OkKk6F2J+WXEpyxKx81CjXcCW3qO7A==}
+
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
@@ -1424,6 +1443,49 @@ packages:
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
+  '@react-pdf/fns@3.1.2':
+    resolution: {integrity: sha512-qTKGUf0iAMGg2+OsUcp9ffKnKi41RukM/zYIWMDJ4hRVYSr89Q7e3wSDW/Koqx3ea3Uy/z3h2y3wPX6Bdfxk6g==}
+
+  '@react-pdf/font@4.0.4':
+    resolution: {integrity: sha512-8YtgGtL511txIEc9AjiilpZ7yjid8uCd8OGUl6jaL3LIHnrToUupSN4IzsMQpVTCMYiDLFnDNQzpZsOYtRS/Pg==}
+
+  '@react-pdf/image@3.0.4':
+    resolution: {integrity: sha512-z0ogVQE0bKqgXQ5smgzIU857rLV7bMgVdrYsu3UfXDDLSzI7QPvzf6MFTFllX6Dx2rcsF13E01dqKPtJEM799g==}
+
+  '@react-pdf/layout@4.4.2':
+    resolution: {integrity: sha512-gNu2oh8MiGR+NJZYTJ4c4q0nWCESBI6rKFiodVhE7OeVAjtzZzd6l65wsN7HXdWJqOZD3ttD97iE+tf5SOd/Yg==}
+
+  '@react-pdf/pdfkit@4.1.0':
+    resolution: {integrity: sha512-Wm/IOAv0h/U5Ra94c/PltFJGcpTUd/fwVMVeFD6X9tTTPCttIwg0teRG1Lqq617J8K4W7jpL/B0HTH0mjp3QpQ==}
+
+  '@react-pdf/png-js@3.0.0':
+    resolution: {integrity: sha512-eSJnEItZ37WPt6Qv5pncQDxLJRK15eaRwPT+gZoujP548CodenOVp49GST8XJvKMFt9YqIBzGBV/j9AgrOQzVA==}
+
+  '@react-pdf/primitives@4.1.1':
+    resolution: {integrity: sha512-IuhxYls1luJb7NUWy6q5avb1XrNaVj9bTNI40U9qGRuS6n7Hje/8H8Qi99Z9UKFV74bBP3DOf3L1wV2qZVgVrQ==}
+
+  '@react-pdf/reconciler@2.0.0':
+    resolution: {integrity: sha512-7zaPRujpbHSmCpIrZ+b9HSTJHthcVZzX0Wx7RzvQGsGBUbHP4p6s5itXrAIOuQuPvDepoHGNOvf6xUuMVvdoyw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@react-pdf/render@4.3.2':
+    resolution: {integrity: sha512-el5KYM1sH/PKcO4tRCIm8/AIEmhtraaONbwCrBhFdehoGv6JtgnXiMxHGAvZbI5kEg051GbyP+XIU6f6YbOu6Q==}
+
+  '@react-pdf/renderer@4.3.2':
+    resolution: {integrity: sha512-EhPkj35gO9rXIyyx29W3j3axemvVY5RigMmlK4/6Ku0pXB8z9PEE/sz4ZBOShu2uot6V4xiCR3aG+t9IjJJlBQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@react-pdf/stylesheet@6.1.2':
+    resolution: {integrity: sha512-E3ftGRYUQGKiN3JOgtGsLDo0hGekA6dmkmi/MYACytmPTKxQRBSO3126MebmCq+t1rgU9uRlREIEawJ+8nzSbw==}
+
+  '@react-pdf/textkit@6.1.0':
+    resolution: {integrity: sha512-sFlzDC9CDFrJsnL3B/+NHrk9+Advqk7iJZIStiYQDdskbow8GF/AGYrpIk+vWSnh35YxaGbHkqXq53XOxnyrjQ==}
+
+  '@react-pdf/types@2.9.2':
+    resolution: {integrity: sha512-dufvpKId9OajLLbgn9q7VLUmyo1Jf+iyGk2ZHmCL8nIDtL8N1Ejh9TH7+pXXrR0tdie1nmnEb5Bz9U7g4hI4/g==}
+
   '@react-stately/flags@3.1.2':
     resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
 
@@ -1735,6 +1797,9 @@ packages:
   '@zone-eu/mailsplit@5.4.8':
     resolution: {integrity: sha512-eEyACj4JZ7sjzRvy26QhLgKEMWwQbsw1+QZnlLX+/gihcNH07lVPOcnwf5U6UAL7gkc//J3jVd76o/WS+taUiA==}
 
+  abs-svg-path@0.1.1:
+    resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==}
+
   accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -1849,6 +1914,13 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  base64-js@0.0.8:
+    resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
+    engines: {node: '>= 0.4'}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
   base64id@2.0.0:
     resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==}
     engines: {node: ^4.5.0 || >= 5.9}
@@ -1857,6 +1929,9 @@ packages:
     resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
     hasBin: true
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -1867,6 +1942,12 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  brotli@1.3.3:
+    resolution: {integrity: sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==}
+
+  browserify-zlib@0.2.0:
+    resolution: {integrity: sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==}
+
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -1920,6 +2001,10 @@ packages:
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
+  clone@2.1.2:
+    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
+    engines: {node: '>=0.8'}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -1931,6 +2016,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
   commander@13.1.0:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
@@ -1972,6 +2060,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -2040,6 +2131,13 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devicons@1.8.0:
+    resolution: {integrity: sha512-tRS3bNxy9mbDVK0g4/+t5PlwMjjOteuh5LAhjMgimAPUgiKB+wCUCf7+uugufZ1vC9AKMRn5Pljbi210qCbmkQ==}
+    engines: {node: '>=0.10.3'}
+
+  dfa@1.2.0:
+    resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -2068,6 +2166,9 @@ packages:
   electron-to-chromium@1.5.286:
     resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
 
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
@@ -2268,6 +2369,10 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
   exsolve@1.0.8:
     resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
 
@@ -2321,6 +2426,9 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  fontkit@2.0.4:
+    resolution: {integrity: sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==}
+
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
@@ -2461,6 +2569,12 @@ packages:
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
+  hsl-to-hex@1.0.0:
+    resolution: {integrity: sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==}
+
+  hsl-to-rgb-for-reals@1.1.1:
+    resolution: {integrity: sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==}
+
   html-to-text@9.0.5:
     resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
     engines: {node: '>=14'}
@@ -2468,6 +2582,9 @@ packages:
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
+  hyphen@1.14.1:
+    resolution: {integrity: sha512-kvL8xYl5QMTh+LwohVN72ciOxC0OEV79IPdJSTwEXok9y9QHebXGdFgrED4sWfiax/ODx++CAMk3hMy4XPJPOw==}
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -2492,6 +2609,9 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -2500,6 +2620,9 @@ packages:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
 
+  is-arrayish@0.3.4:
+    resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==}
+
   is-async-function@2.1.1:
     resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
     engines: {node: '>= 0.4'}
@@ -2599,6 +2722,9 @@ packages:
     resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
     engines: {node: '>=18'}
 
+  is-url@1.2.4:
+    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
+
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
@@ -2625,6 +2751,9 @@ packages:
     resolution: {integrity: sha512-GPBXyfcZSGujjddPeA+V34bW70ZJT7jzCEbloVasSH4yjiqWqXHX8iZQtZdVbOhc5esSeAIuiSmMutRZQB/olg==}
     engines: {node: 20 || >=22}
 
+  jay-peg@1.1.1:
+    resolution: {integrity: sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==}
+
   jiti@2.4.2:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
@@ -2776,6 +2905,9 @@ packages:
     resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
     engines: {node: '>= 12.0.0'}
 
+  linebreak@1.1.0:
+    resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
+
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
@@ -2825,6 +2957,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  media-engine@1.0.3:
+    resolution: {integrity: sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -2953,6 +3088,9 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  normalize-svg-path@1.1.0:
+    resolution: {integrity: sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==}
+
   nypm@0.6.2:
     resolution: {integrity: sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==}
     engines: {node: ^14.16.0 || >=16.10.0}
@@ -3027,10 +3165,19 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  pako@0.2.9:
+    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
+
+  pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-svg-path@0.1.2:
+    resolution: {integrity: sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==}
+
   parseley@0.12.1:
     resolution: {integrity: sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==}
 
@@ -3115,6 +3262,9 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  queue@6.0.2:
+    resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
+
   react-activity-calendar@3.1.1:
     resolution: {integrity: sha512-YvHNS4anlW3Xy0fxOU2ZTWrJkOt0ALxX8IfgDRg6jr/vgYsbh//4djf2c7CPhYNROh+5oYZzR0EJaPbrFUj2tA==}
     peerDependencies:
@@ -3243,6 +3393,9 @@ packages:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
 
+  restructure@3.0.2:
+    resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
+
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -3254,6 +3407,9 @@ packages:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
 
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
   safe-push-apply@1.0.0:
     resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
     engines: {node: '>= 0.4'}
@@ -3265,6 +3421,9 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  scheduler@0.25.0-rc-603e6108-20241029:
+    resolution: {integrity: sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -3324,6 +3483,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-swizzle@0.2.4:
+    resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -3383,6 +3545,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
   strip-ansi@7.1.2:
     resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
     engines: {node: '>=12'}
@@ -3422,6 +3587,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svg-arc-to-cubic-bezier@3.2.0:
+    resolution: {integrity: sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==}
+
   svix@1.84.1:
     resolution: {integrity: sha512-K8DPPSZaW/XqXiz1kEyzSHYgmGLnhB43nQCMeKjWGCUpLIpAMMM8kx3rVVOSm6Bo6EHyK1RQLPT4R06skM/MlQ==}
 
@@ -3447,6 +3615,9 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
   tinyexec@1.0.2:
     resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
     engines: {node: '>=18'}
@@ -3529,6 +3700,12 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
+  unicode-properties@1.4.1:
+    resolution: {integrity: sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==}
+
+  unicode-trie@2.0.0:
+    resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
+
   unrs-resolver@1.11.1:
     resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
 
@@ -3551,6 +3728,13 @@ packages:
       '@types/react':
         optional: true
 
+  use-scramble@2.2.15:
+    resolution: {integrity: sha512-3+ngTV6OpkY9JT75FM4JYcspmpP7cd/h0/5KqsMU2jcdBD+SAuBMmLqLu0N3/7t8NsfdwJjD3BBeKtT+qZWKew==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -3566,6 +3750,9 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   uuid@10.0.0:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
@@ -3574,6 +3761,10 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vite-compatible-readable-stream@3.6.1:
+    resolution: {integrity: sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==}
+    engines: {node: '>= 6'}
+
   when-exit@2.1.5:
     resolution: {integrity: sha512-VGkKJ564kzt6Ms1dbgPP/yuIoQCrsFAnRbptpC5wOEsDaNsbCB2bnfnaA8i/vRs5tjUSEOtIuvl9/MyVsvQZCg==}
 
@@ -3625,6 +3816,9 @@ packages:
     resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
     engines: {node: '>=18'}
 
+  yoga-layout@3.2.1:
+    resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==}
+
   zod-validation-error@4.0.2:
     resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
     engines: {node: '>=18.0.0'}
@@ -3715,6 +3909,8 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@babel/runtime@7.28.6': {}
+
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -3738,6 +3934,8 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@devicon/react@0.0.3': {}
+
   '@emnapi/core@1.8.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -4712,6 +4910,107 @@ snapshots:
     dependencies:
       react: 19.2.4
 
+  '@react-pdf/fns@3.1.2': {}
+
+  '@react-pdf/font@4.0.4':
+    dependencies:
+      '@react-pdf/pdfkit': 4.1.0
+      '@react-pdf/types': 2.9.2
+      fontkit: 2.0.4
+      is-url: 1.2.4
+
+  '@react-pdf/image@3.0.4':
+    dependencies:
+      '@react-pdf/png-js': 3.0.0
+      jay-peg: 1.1.1
+
+  '@react-pdf/layout@4.4.2':
+    dependencies:
+      '@react-pdf/fns': 3.1.2
+      '@react-pdf/image': 3.0.4
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/stylesheet': 6.1.2
+      '@react-pdf/textkit': 6.1.0
+      '@react-pdf/types': 2.9.2
+      emoji-regex-xs: 1.0.0
+      queue: 6.0.2
+      yoga-layout: 3.2.1
+
+  '@react-pdf/pdfkit@4.1.0':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@react-pdf/png-js': 3.0.0
+      browserify-zlib: 0.2.0
+      crypto-js: 4.2.0
+      fontkit: 2.0.4
+      jay-peg: 1.1.1
+      linebreak: 1.1.0
+      vite-compatible-readable-stream: 3.6.1
+
+  '@react-pdf/png-js@3.0.0':
+    dependencies:
+      browserify-zlib: 0.2.0
+
+  '@react-pdf/primitives@4.1.1': {}
+
+  '@react-pdf/reconciler@2.0.0(react@19.2.4)':
+    dependencies:
+      object-assign: 4.1.1
+      react: 19.2.4
+      scheduler: 0.25.0-rc-603e6108-20241029
+
+  '@react-pdf/render@4.3.2':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@react-pdf/fns': 3.1.2
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/textkit': 6.1.0
+      '@react-pdf/types': 2.9.2
+      abs-svg-path: 0.1.1
+      color-string: 1.9.1
+      normalize-svg-path: 1.1.0
+      parse-svg-path: 0.1.2
+      svg-arc-to-cubic-bezier: 3.2.0
+
+  '@react-pdf/renderer@4.3.2(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@react-pdf/fns': 3.1.2
+      '@react-pdf/font': 4.0.4
+      '@react-pdf/layout': 4.4.2
+      '@react-pdf/pdfkit': 4.1.0
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/reconciler': 2.0.0(react@19.2.4)
+      '@react-pdf/render': 4.3.2
+      '@react-pdf/types': 2.9.2
+      events: 3.3.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      queue: 6.0.2
+      react: 19.2.4
+
+  '@react-pdf/stylesheet@6.1.2':
+    dependencies:
+      '@react-pdf/fns': 3.1.2
+      '@react-pdf/types': 2.9.2
+      color-string: 1.9.1
+      hsl-to-hex: 1.0.0
+      media-engine: 1.0.3
+      postcss-value-parser: 4.2.0
+
+  '@react-pdf/textkit@6.1.0':
+    dependencies:
+      '@react-pdf/fns': 3.1.2
+      bidi-js: 1.0.3
+      hyphen: 1.14.1
+      unicode-properties: 1.4.1
+
+  '@react-pdf/types@2.9.2':
+    dependencies:
+      '@react-pdf/font': 4.0.4
+      '@react-pdf/primitives': 4.1.1
+      '@react-pdf/stylesheet': 6.1.2
+
   '@react-stately/flags@3.1.2':
     dependencies:
       '@swc/helpers': 0.5.18
@@ -5004,6 +5303,8 @@ snapshots:
       libmime: 5.3.7
       libqp: 2.1.1
 
+  abs-svg-path@0.1.1: {}
+
   accepts@1.3.8:
     dependencies:
       mime-types: 2.1.35
@@ -5146,10 +5447,18 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  base64-js@0.0.8: {}
+
+  base64-js@1.5.1: {}
+
   base64id@2.0.0: {}
 
   baseline-browser-mapping@2.9.19: {}
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -5163,6 +5472,14 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  brotli@1.3.3:
+    dependencies:
+      base64-js: 1.5.1
+
+  browserify-zlib@0.2.0:
+    dependencies:
+      pako: 1.0.11
+
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.19
@@ -5219,6 +5536,8 @@ snapshots:
 
   client-only@0.0.1: {}
 
+  clone@2.1.2: {}
+
   clsx@2.1.1: {}
 
   color-convert@2.0.1:
@@ -5227,6 +5546,11 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.4
+
   commander@13.1.0: {}
 
   concat-map@0.0.1: {}
@@ -5269,6 +5593,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-js@4.2.0: {}
+
   csstype@3.2.3: {}
 
   damerau-levenshtein@1.0.8: {}
@@ -5327,6 +5653,10 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
+  devicons@1.8.0: {}
+
+  dfa@1.2.0: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -5361,6 +5691,8 @@ snapshots:
 
   electron-to-chromium@1.5.286: {}
 
+  emoji-regex-xs@1.0.0: {}
+
   emoji-regex@10.6.0: {}
 
   emoji-regex@9.2.2: {}
@@ -5739,6 +6071,8 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  events@3.3.0: {}
+
   exsolve@1.0.8: {}
 
   fast-deep-equal@3.1.3: {}
@@ -5787,6 +6121,18 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  fontkit@2.0.4:
+    dependencies:
+      '@swc/helpers': 0.5.18
+      brotli: 1.3.3
+      clone: 2.1.2
+      dfa: 1.2.0
+      fast-deep-equal: 3.1.3
+      restructure: 3.0.2
+      tiny-inflate: 1.0.3
+      unicode-properties: 1.4.1
+      unicode-trie: 2.0.0
+
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
@@ -5919,6 +6265,12 @@ snapshots:
     dependencies:
       hermes-estree: 0.25.1
 
+  hsl-to-hex@1.0.0:
+    dependencies:
+      hsl-to-rgb-for-reals: 1.1.1
+
+  hsl-to-rgb-for-reals@1.1.1: {}
+
   html-to-text@9.0.5:
     dependencies:
       '@selderee/plugin-htmlparser2': 0.11.0
@@ -5934,6 +6286,8 @@ snapshots:
       domutils: 3.2.2
       entities: 4.5.0
 
+  hyphen@1.14.1: {}
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -5953,6 +6307,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  inherits@2.0.4: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -5965,6 +6321,8 @@ snapshots:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
+  is-arrayish@0.3.4: {}
+
   is-async-function@2.1.1:
     dependencies:
       async-function: 1.0.0
@@ -6066,6 +6424,8 @@ snapshots:
 
   is-unicode-supported@2.1.0: {}
 
+  is-url@1.2.4: {}
+
   is-weakmap@2.0.2: {}
 
   is-weakref@1.1.1:
@@ -6094,6 +6454,10 @@ snapshots:
     dependencies:
       '@isaacs/cliui': 9.0.0
 
+  jay-peg@1.1.1:
+    dependencies:
+      restructure: 3.0.2
+
   jiti@2.4.2: {}
 
   jiti@2.6.1: {}
@@ -6210,6 +6574,11 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.30.2
       lightningcss-win32-x64-msvc: 1.30.2
 
+  linebreak@1.1.0:
+    dependencies:
+      base64-js: 0.0.8
+      unicode-trie: 2.0.0
+
   linkify-it@5.0.0:
     dependencies:
       uc.micro: 2.1.0
@@ -6265,6 +6634,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  media-engine@1.0.3: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -6365,6 +6736,10 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
+  normalize-svg-path@1.1.0:
+    dependencies:
+      svg-arc-to-cubic-bezier: 3.2.0
+
   nypm@0.6.2:
     dependencies:
       citty: 0.1.6
@@ -6467,10 +6842,16 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  pako@0.2.9: {}
+
+  pako@1.0.11: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
+  parse-svg-path@0.1.2: {}
+
   parseley@0.12.1:
     dependencies:
       leac: 0.6.0
@@ -6542,6 +6923,10 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  queue@6.0.2:
+    dependencies:
+      inherits: 2.0.4
+
   react-activity-calendar@3.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@floating-ui/react': 0.27.17(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -6690,6 +7075,8 @@ snapshots:
       onetime: 7.0.0
       signal-exit: 4.1.0
 
+  restructure@3.0.2: {}
+
   reusify@1.1.0: {}
 
   run-parallel@1.2.0:
@@ -6704,6 +7091,8 @@ snapshots:
       has-symbols: 1.1.0
       isarray: 2.0.5
 
+  safe-buffer@5.2.1: {}
+
   safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -6717,6 +7106,8 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  scheduler@0.25.0-rc-603e6108-20241029: {}
+
   scheduler@0.27.0: {}
 
   selderee@0.11.0:
@@ -6816,6 +7207,10 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-swizzle@0.2.4:
+    dependencies:
+      is-arrayish: 0.3.4
+
   sisteransi@1.0.5: {}
 
   socket.io-adapter@2.5.6:
@@ -6920,6 +7315,10 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
   strip-ansi@7.1.2:
     dependencies:
       ansi-regex: 6.2.2
@@ -6947,6 +7346,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svg-arc-to-cubic-bezier@3.2.0: {}
+
   svix@1.84.1:
     dependencies:
       standardwebhooks: 1.0.0
@@ -6966,6 +7367,8 @@ snapshots:
 
   tapable@2.3.0: {}
 
+  tiny-inflate@1.0.3: {}
+
   tinyexec@1.0.2: {}
 
   tinyglobby@0.2.15:
@@ -7065,6 +7468,16 @@ snapshots:
 
   undici-types@7.16.0: {}
 
+  unicode-properties@1.4.1:
+    dependencies:
+      base64-js: 1.5.1
+      unicode-trie: 2.0.0
+
+  unicode-trie@2.0.0:
+    dependencies:
+      pako: 0.2.9
+      tiny-inflate: 1.0.3
+
   unrs-resolver@1.11.1:
     dependencies:
       napi-postinstall: 0.3.4
@@ -7106,6 +7519,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.13
 
+  use-scramble@2.2.15(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   use-sidecar@1.1.3(@types/react@19.2.13)(react@19.2.4):
     dependencies:
       detect-node-es: 1.1.0
@@ -7118,10 +7536,18 @@ snapshots:
     dependencies:
       react: 19.2.4
 
+  util-deprecate@1.0.2: {}
+
   uuid@10.0.0: {}
 
   vary@1.1.2: {}
 
+  vite-compatible-readable-stream@3.6.1:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
   when-exit@2.1.5: {}
 
   which-boxed-primitive@1.1.1:
@@ -7179,6 +7605,8 @@ snapshots:
 
   yoctocolors@2.1.2: {}
 
+  yoga-layout@3.2.1: {}
+
   zod-validation-error@4.0.2(zod@4.3.6):
     dependencies:
       zod: 4.3.6
diff --git a/src/app/_components/GitHubStats.tsx b/src/app/_components/GitHubStats.tsx
index 7139f1f..1b5c62f 100644
--- a/src/app/_components/GitHubStats.tsx
+++ b/src/app/_components/GitHubStats.tsx
@@ -1,26 +1,65 @@
 "use client";
 
 import { GitHubCalendar } from "react-github-calendar";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { motion } from "framer-motion";
+import { FaGithub } from "react-icons/fa";
 
 export default function GitHubStats() {
   return (
-    <Card className="my-4 sm:hidden border-4 bg-gradient-to-br from-black/35 to-black/50 border-accent overflow-x-auto rounded-xl">
-      <CardHeader>
-        <CardTitle className="text-md font-bold text-center">
-          GitHub Contributions
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="py-4 flex justify-center overflow-x-auto">
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+      className="group relative glass-card glass-card-hover overflow-hidden w-full mx-auto"
+      style={{
+        borderLeft: "3px solid var(--color-accent)",
+        background:
+          "linear-gradient(135deg, rgba(22, 100, 102, 0.08) 0%, transparent 60%), rgba(15, 23, 42, 0.5)",
+      }}
+    >
+      {/* Header */}
+      <div className="px-6 pt-6 pb-3 flex items-center gap-3">
+        <span
+          className="flex items-center justify-center w-9 h-9 rounded-lg"
+          style={{ backgroundColor: "rgba(22, 100, 102, 0.15)" }}
+        >
+          <FaGithub className="w-5 h-5 text-accent" />
+        </span>
+        <div>
+          <h3 className="text-white/90 font-semibold text-base">
+            GitHub Contributions
+          </h3>
+          <p className="text-white/40 text-xs">
+            @Coderx85 · {new Date().getFullYear()} activity
+          </p>
+        </div>
+      </div>
+
+      {/* Calendar */}
+      <div className="px-6 pb-6 pt-2 overflow-x-auto mx-auto w-full">
         <GitHubCalendar
+          className="w-full"
           username="Coderx85"
-          blockSize={7}
-          blockMargin={5}
-          fontSize={10}
+          blockSize={11}
+          blockMargin={4}
+          fontSize={11}
           colorScheme="dark"
           year={new Date().getFullYear()}
+          style={{
+            color: "rgba(255, 255, 255, 0.5)",
+          }}
         />
-      </CardContent>
-    </Card>
+      </div>
+
+      {/* Hover glow */}
+      <div
+        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
+        style={{
+          background:
+            "radial-gradient(circle at top left, rgba(22, 100, 102, 0.12), transparent 70%)",
+        }}
+      />
+    </motion.div>
   );
 }
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 5282631..053423e 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,144 +1,217 @@
-"use client"
-import React, { useEffect, useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { FaEnvelope, FaLinkedin, FaLocationArrow, FaPhone } from 'react-icons/fa'
-import { motion } from 'framer-motion'
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { useToast } from '@/components/ui/use-toast'
+"use client";
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  FaEnvelope,
+  FaLinkedin,
+  FaLocationArrow,
+  FaPhone,
+  FaUser,
+  FaBuilding,
+} from "react-icons/fa";
+import { FiSend } from "react-icons/fi";
+import { HiOutlineBriefcase } from "react-icons/hi";
+import { motion } from "framer-motion";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/components/ui/use-toast";
 
 const contactInfo = [
   {
-    title: 'Email',
-    description: 'work.priyanshu085@gmail.com',
-    icon: <FaEnvelope />
+    title: "Email",
+    description: "work.priyanshu085@gmail.com",
+    icon: <FaEnvelope />,
   },
   {
-    title: 'Phone',
-    description: '(+91) 707 191 5785',
-    icon: <FaPhone />
+    title: "Phone",
+    description: "(+91) 707 191 5785",
+    icon: <FaPhone />,
   },
   {
-    title: 'Location',
-    description: 'New Delhi, India',
-    icon: <FaLocationArrow />
+    title: "Location",
+    description: "New Delhi, India",
+    icon: <FaLocationArrow />,
   },
   {
-    title: 'LinkedIn',
-    description: 'coderx85',
-    icon: <FaLinkedin />
-  }
-]
+    title: "LinkedIn",
+    description: "coderx85",
+    icon: <FaLinkedin />,
+  },
+];
 
 const ContactPage = () => {
   useEffect(() => {
-    document.title = 'Contact | Portfolio'
-  }, [])
+    document.title = "Contact | Portfolio";
+  }, []);
 
-  const {toast} = useToast()
+  const { toast } = useToast();
   const [formData, setFormData] = useState({
     name: "",
     email: "",
     company: "",
     phone: "",
     role: "",
-    message: ""
+    message: "",
   });
 
-  const handleSubmit = async (e: any) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const response = await fetch('/api/contact', {
-      method: 'POST',
+    const response = await fetch("/api/contact", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(formData)
+      body: JSON.stringify(formData),
     });
 
     if (response.ok) {
       toast({
-        title: 'Great! Your Email sent successfully',
-        description: 'I will get back to you soon'
+        title: "Great! Your email was sent successfully",
+        description: "I will get back to you soon",
       });
-      console.log('Message sent');
     }
-  }
+  };
 
   return (
     <motion.section
       initial={{ opacity: 0 }}
-      animate={{ 
+      animate={{
         opacity: 1,
-        transition: {delay: 2.4, duration: 0.4, ease: 'easeIn'}
-       }}
-      className='py-8'
+        transition: { delay: 2.4, duration: 0.4, ease: "easeIn" },
+      }}
+      className="py-3 flex xl:flex-row flex-col justify-between"
     >
-      <div className='container mx-auto'>
-        <div className="flex flex-col xl:flex-row gap-[30px]">
-        <div className='xl:h-[54%] order-2 xl:order-none' id='contact'>
-          <form 
-            onSubmit={handleSubmit}
-            className="flex flex-col gap-6 p-10 bg-black rounded-xl"
-          >
-            <h2 className="text-4xl text-accent">
+      {/* Contact Form */}
+      <motion.div
+        initial={{ opacity: 0, x: -30 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ delay: 2.6, duration: 0.5 }}
+        className="px-8 py-8"
+        id="contact"
+      >
+        <form
+          onSubmit={handleSubmit}
+          className="glass-card px-6 py-3 xl:py-6 flex flex-col gap-3"
+        >
+          {/* ── Header ── */}
+          <div className="py-2">
+            <h2 className="text-2xl xl:text-3xl font-bold gradient-text">
               Let&apos;s Work Together
             </h2>
-            <p className="text-white/60">
-              {" "}
-              I&apos;m currently looking for new opportunities, my inbox is always
-              open. Whether you have a question or just want to say hi, I&apos;ll
-              try my best to get back to you!
+            <p className="text-white/75 leading-relaxed text-sm">
+              I&apos;m currently looking for new opportunities. Whether you have
+              a question or just want to say hi, I&apos;ll try my best to get
+              back to you!
             </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <Input
-                type="email"
-                id="email"
-                required
-                placeholder="Email address"
-                onChange={(e) => {
-                  setFormData({ ...formData, email: e.target.value });
-                }}
-              />
-              <Input
-                type="text"
-                id="name"
-                placeholder='Name'
-                required
-                onChange={(e) => {
-                  setFormData({ ...formData, name: e.target.value });
-                }}
-              />
-              <Input
-                type="text"
-                id="company"
-                placeholder='Company'
-                required
-                onChange={(e) => {
-                  setFormData({ ...formData, company: e.target.value });
-                }}
-              />
-              <Input
-                type="text"
-                id="phone"
-                placeholder='Phone'
-                required
-                onChange={(e) => {
-                  setFormData({ ...formData, phone: e.target.value });
-                }}
-              />
+          </div>
+
+          {/* ── Your Details Group ── */}
+          <div className="space-y-2">
+            <p className="text-xs text-white/95 font-semibold">Your Details</p>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {/* Name */}
+              <div className="relative group">
+                <div className="absolute left-4 top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+                  <FaUser className="text-xs text-white/25 group-focus-within:text-accent transition-colors duration-300" />
+                </div>
+                <Input
+                  type="text"
+                  id="name"
+                  placeholder="Full Name"
+                  required
+                  className="glass border-white/10 rounded-xl h-10 pl-10 pr-4 text-sm w-full
+                        placeholder:text-white/95
+                        focus:border-accent/50 focus:shadow-[0_0_15px_rgba(22,100,102,0.1)]
+                        transition-all duration-300"
+                  onChange={(e) => {
+                    setFormData({ ...formData, name: e.target.value });
+                  }}
+                />
+              </div>
+
+              {/* Email */}
+              <div className="relative group">
+                <div className="absolute left-4 top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+                  <FaEnvelope className="text-xs text-white/25 group-focus-within:text-accent transition-colors duration-300" />
+                </div>
+                <Input
+                  type="email"
+                  id="email"
+                  required
+                  placeholder="Email address"
+                  className="glass border-white/10 rounded-xl h-10 pl-10 pr-4 text-sm w-full
+                        placeholder:text-white/95
+                        focus:border-accent/50 focus:shadow-[0_0_15px_rgba(22,100,102,0.1)]
+                        transition-all duration-300"
+                  onChange={(e) => {
+                    setFormData({ ...formData, email: e.target.value });
+                  }}
+                />
+              </div>
 
+              {/* Company */}
+              <div className="relative group">
+                <div className="absolute left-4 top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+                  <FaBuilding className="text-xs text-white/25 group-focus-within:text-accent transition-colors duration-300" />
+                </div>
+                <Input
+                  type="text"
+                  id="company"
+                  placeholder="Company / Organization"
+                  required
+                  className="glass border-white/10 rounded-xl h-10 pl-10 pr-4 text-sm w-full
+                        placeholder:text-white/95
+                        focus:border-accent/50 focus:shadow-[0_0_15px_rgba(22,100,102,0.1)]
+                        transition-all duration-300"
+                  onChange={(e) => {
+                    setFormData({ ...formData, company: e.target.value });
+                  }}
+                />
+              </div>
+
+              {/* Phone */}
+              <div className="relative group">
+                <div className="absolute left-4 top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+                  <FaPhone className="text-xs text-white/25 group-focus-within:text-accent transition-colors duration-300" />
+                </div>
+                <Input
+                  type="text"
+                  id="phone"
+                  placeholder="Phone number"
+                  required
+                  className="glass border-white/10 rounded-xl h-10 pl-10 pr-4 text-sm w-full
+                        placeholder:text-white/95
+                        focus:border-accent/50 focus:shadow-[0_0_15px_rgba(22,100,102,0.1)]
+                        transition-all duration-300"
+                  onChange={(e) => {
+                    setFormData({ ...formData, phone: e.target.value });
+                  }}
+                />
+              </div>
             </div>
-              <Textarea
-                name="message"
-                id="message"
-                className="h-[200px]"
-                placeholder="Let's talk about..."
-                required
-                onChange={(e) => {
-                  setFormData({ ...formData, message: e.target.value });
-                }}
-              />  
+          </div>
+
+          {/* ── Project Details Group ── */}
+          <div className="space-y-2">
+            <p className="text-xs uppercase tracking-[0.15em] text-accent font-semibold">
+              Project Details
+            </p>
+
+            {/* Role Select - full width */}
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+                <HiOutlineBriefcase className="text-sm text-white/25 group-focus-within:text-accent transition-colors duration-300" />
+              </div>
               <Select
                 name="role"
                 required
@@ -146,84 +219,119 @@ const ContactPage = () => {
                   setFormData({ ...formData, role: value });
                 }}
               >
-                <SelectTrigger 
-                  className="w-[180px]"
-                  >
+                <SelectTrigger
+                  className="w-1/3 glass border-white/10 rounded-xl h-10 pl-10 pr-4 text-sm
+                        text-white/95 
+                        focus:border-accent/50 focus:shadow-[0_0_15px_rgba(22,100,102,0.1)]
+                        transition-all duration-300
+                        [&>span]:text-white/95 data-[state=open]:border-accent/50"
+                >
                   <SelectValue placeholder="Select Role" />
                 </SelectTrigger>
-                <SelectContent
-
-                >
+                <SelectContent className="glass border-white/10 rounded-xl backdrop-blur-xl">
                   <SelectGroup>
-                    <SelectLabel>Role</SelectLabel>
-                    <SelectItem value="UI/UX Designer">UI/UX Designer</SelectItem>
-                    <SelectItem value="Software Developer Engineer">Software Developer Engineer</SelectItem>
-                    <SelectItem value="Frontend Developer">Frontend Developer</SelectItem>
-                    <SelectItem value="Backend Developer">Backend Developer</SelectItem>
-                    <SelectItem value="Fullstack Developer">Fullstack Developer</SelectItem>
+                    <SelectItem
+                      value="Software Developer Engineer"
+                      className="focus:bg-accent/10 focus:text-white rounded-lg"
+                    >
+                      Software Developer Engineer
+                    </SelectItem>
+                    <SelectItem
+                      value="Backend Developer"
+                      className="focus:bg-accent/10 focus:text-white rounded-lg"
+                    >
+                      Backend Developer
+                    </SelectItem>
+                    <SelectItem
+                      value="Fullstack Developer"
+                      className="focus:bg-accent/10 focus:text-white rounded-lg"
+                    >
+                      Fullstack Developer
+                    </SelectItem>
                   </SelectGroup>
                 </SelectContent>
               </Select>
-            <Button
-              type="submit" 
-              size={'md'}
-              className="bg-accent hover:bg-primary text-white font-medium"
-            >
-              Send Message
-            </Button>
-          </form>
-        </div>
-          <div className="flex flex-1 items-center xl:justify-end order-1 xl:order-none mb-8 xl:mb-0">
-            {/* <h2 className="text-xl font-bold text-accent my-2">
-              Let&apos;s Work Together
-            </h2> */}
-            {/* <ul className="flex flex-col gap-10">
-              {contactInfo.map((info, index) => {
-              return <li key={index} className="flex items-center gap-6">
-                  <div className='w-[52px] h-[52px] xl:h-[72px] xl:w-[72px] bg-gray-800 text-accent rounded-md flex items-center justify-center'>
-                    <div className='text-[28px]'>
-                      {info.icon}
-                    </div>
-                    <div className='flex-1'>
-                      <p className="text-lg text-accent">{info.title}</p>
-                      <h3 className="text-white">{info.description}</h3>
-                    </div>
-                  </div>
-                </li>
-            })}
-            </ul> */}
-            {/* <div className="socials flex flex-row gap-2">
-              {socialLinks.map((link) => (
-                <Link href={link.url} key={link.name}>
-                <div className="group relative">
-                  <span className="flex items-center justify-center w-16 h-16 border-2 border-white bg-black text-white rounded-none 
-                  group-hover:rounded-full group-hover:bg-white group-hover:text-black transition-all duration-1000 ease-in-out">
-                    {link.icon}
-                  </span>
-                </div>
-                </Link>
-                ))  
-              }
-            </div> */}
-            <ul className='flex flex-col gap-10'>
-              {contactInfo.map((info, index) => {
-                return <li key={index} className='flex items-center gap-6'>
-                    <div className='w-[52px] h-[52px] xl:h-[72px] xl:w-[72px] bg-gray-800 text-accent rounded-md flex items-center justify-center'>
-                      <div className='text-[28px]'>{info.icon}</div>
-                    </div>
-                    <div className='flex-1'>
-                      <p className='text-white/60'>{info.title}</p>
-                      <h3 className='text-lg'>{info.description}</h3>
-                    </div>
-                  </li>
-              })}
-            </ul>
+            </div>
 
+            {/* Message Textarea */}
+            <div className="relative group">
+              <Textarea
+                name="message"
+                id="message"
+                className="glass border-white/10 rounded-xl min-h-[140px] p-3 text-sm
+                      placeholder:text-white/95
+                      focus:border-accent/50 focus:shadow-[0_0_15px_rgba(22,100,102,0.1)]
+                      transition-all duration-300 resize-none"
+                placeholder="Tell me about your project, timeline, and how I can help..."
+                required
+                onChange={(e) => {
+                  setFormData({ ...formData, message: e.target.value });
+                }}
+              />
+              <p className="text-white/20 text-[11px] mt-1 text-right">
+                Be as detailed as possible for a quicker response
+              </p>
+            </div>
           </div>
-        </div>
-      </div>
+
+          {/* ── Submit Button ── */}
+          <Button
+            type="submit"
+            size="lg"
+            className="w-full bg-accent hover:bg-accent-hover text-white font-semibold rounded-xl h-11
+                  hover:shadow-lg hover:shadow-accent/25 
+                  active:scale-[0.98]
+                  transition-all duration-300
+                  flex items-center justify-center gap-3 group"
+          >
+            <span className="text-base">Send Message</span>
+            <FiSend className="text-base group-hover:translate-x-1 group-hover:-translate-y-0.5 transition-transform duration-300" />
+          </Button>
+
+          <p className="text-white/20 text-xs text-center">
+            I typically respond within 24–48 hours
+          </p>
+        </form>
+      </motion.div>
+
+      {/* Contact Info */}
+      <motion.div
+        initial={{ opacity: 0, x: 30 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ delay: 2.8, duration: 0.5 }}
+        className="flex flex-1 items-start xl:justify-end order-1 xl:order-0 pr-8 my-8 xl:mb-0"
+      >
+        <ul className="flex flex-col gap-6 ">
+          {contactInfo.map((info, index) => {
+            return (
+              <motion.li
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 2.9 + index * 0.1, duration: 0.4 }}
+                className="glass-card glass-card-hover p-5 flex items-center gap-5"
+              >
+                <div
+                  className="w-12 h-12 xl:w-14 xl:h-14 rounded-xl bg-accent/10 border border-accent/20 
+                        text-accent flex items-center justify-center shrink-0"
+                >
+                  <div className="text-xl">{info.icon}</div>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-white/40 text-sm font-medium uppercase tracking-wider">
+                    {info.title}
+                  </p>
+                  <h3 className="text-base font-medium text-white/90 truncate">
+                    {info.description}
+                  </h3>
+                </div>
+              </motion.li>
+            );
+          })}
+        </ul>
+      </motion.div>
     </motion.section>
-  )
-}
+  );
+};
 
-export default ContactPage
\ No newline at end of file
+export default ContactPage;
diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx
new file mode 100644
index 0000000..6dedc2b
--- /dev/null
+++ b/src/app/experience/page.tsx
@@ -0,0 +1,11 @@
+import ExperienceSection from "@/components/ExperienceSection";
+
+const Experiencepage = () => {
+  return (
+    <section className="mx-24 my-20">
+      <ExperienceSection mode="full" />
+    </section>
+  );
+};
+
+export default Experiencepage;
diff --git a/src/app/globals.css b/src/app/globals.css
index 8df4b3b..6ae12bc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -14,6 +14,8 @@
   --color-primary-foreground: hsl(var(--primary-foreground));
 
   --color-accent: #166466;
+  --color-accent-hover: #1a8385;
+  --color-accent-glow: rgba(22, 100, 102, 0.4);
   --color-accent-foreground: hsl(var(--accent-foreground));
 
   --radius-lg: var(--radius);
@@ -22,6 +24,10 @@
 
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-float: float 6s ease-in-out infinite;
+  --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
+  --animate-shimmer: shimmer 2s linear infinite;
+  --animate-fade-up: fade-up 0.6s ease-out both;
 
   @keyframes accordion-down {
     from {
@@ -39,19 +45,160 @@
       height: 0;
     }
   }
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+  @keyframes pulse-glow {
+    0%,
+    100% {
+      box-shadow: 0 0 20px rgba(22, 100, 102, 0.2);
+    }
+    50% {
+      box-shadow: 0 0 40px rgba(22, 100, 102, 0.5);
+    }
+  }
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+  @keyframes fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(24px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes gradient-shift {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+  @keyframes orb-float-1 {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    25% {
+      transform: translate(30px, -40px) scale(1.1);
+    }
+    50% {
+      transform: translate(-20px, -80px) scale(0.95);
+    }
+    75% {
+      transform: translate(40px, -30px) scale(1.05);
+    }
+  }
+  @keyframes orb-float-2 {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    25% {
+      transform: translate(-40px, 30px) scale(1.05);
+    }
+    50% {
+      transform: translate(30px, 60px) scale(0.9);
+    }
+    75% {
+      transform: translate(-20px, 40px) scale(1.1);
+    }
+  }
+  @keyframes border-glow {
+    0%,
+    100% {
+      border-color: rgba(22, 100, 102, 0.3);
+    }
+    50% {
+      border-color: rgba(22, 100, 102, 0.8);
+    }
+  }
 }
 
+/* ── Utility Classes ── */
+
 @utility container {
   margin-inline: auto;
   padding-inline: 1rem;
 }
 
 @utility bg-project {
-  background-image: url('/bg.jpg');
+  background-image: url("/bg.jpg");
   background-attachment: fixed;
   background-size: cover;
 }
 
+@utility glass {
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+@utility glass-card {
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@utility glass-card-hover {
+  &:hover {
+    background: rgba(15, 23, 42, 0.7);
+    border-color: rgba(22, 100, 102, 0.4);
+    box-shadow:
+      0 8px 32px rgba(22, 100, 102, 0.15),
+      0 0 0 1px rgba(22, 100, 102, 0.1);
+    transform: translateY(-4px);
+  }
+}
+
+@utility gradient-text {
+  background: linear-gradient(135deg, #166466 0%, #1a8385 40%, #22d3ee 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@utility gradient-border {
+  position: relative;
+}
+
+@utility glow-accent {
+  box-shadow:
+    0 0 20px rgba(22, 100, 102, 0.3),
+    0 0 60px rgba(22, 100, 102, 0.1);
+}
+
+@utility text-shimmer {
+  background: linear-gradient(90deg, #166466, #22d3ee, #166466);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shimmer 3s linear infinite;
+}
+
+/* ── Base Layer ── */
+
 @layer base {
   *,
   ::after,
@@ -64,14 +211,15 @@
   textarea::placeholder {
     color: var(--color-gray-400);
   }
-  button:not(:disabled), [role="button"]:not(:disabled) {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
     cursor: pointer;
   }
 }
 
 @layer base {
   :root {
-    --bg-image: url('/bg.jpg');
+    --bg-image: url("/bg.jpg");
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
@@ -96,19 +244,59 @@
 @layer base {
   * {
     color: #fff;
-    transition-property: all;
-    transition-duration: 300ms;
   }
+
   body {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
     /* background-color: #18181b; bg-zinc-950 */
     color: #fff;
-    background: var(--bg-image) no-repeat center center fixed;
+    background:
+      radial-gradient(
+        ellipse at top left,
+        rgba(30, 30, 35, 0.9),
+        transparent 50%
+      ),
+      radial-gradient(
+        ellipse at bottom right,
+        rgba(25, 25, 30, 0.8),
+        transparent 50%
+      ),
+      radial-gradient(
+        ellipse at center,
+        rgba(20, 20, 25, 0.7),
+        transparent 70%
+      ),
+      linear-gradient(
+        135deg,
+        #0a0a0a 0%,
+        #121214 25%,
+        #0f0f11 50%,
+        #141416 75%,
+        #0a0a0c 100%
+      );
+    background-attachment: fixed;
+    overflow-x: hidden;
   }
+
   h1 {
     font-size: 48px;
     line-height: 1.1;
-    font-weight: 600;
+    font-weight: 700;
+    letter-spacing: -0.02em;
   }
   @media (min-width: 1280px) {
     h1 {
@@ -118,7 +306,8 @@
   h2 {
     font-size: 36px;
     line-height: 1.1;
-    font-weight: 600;
+    font-weight: 700;
+    letter-spacing: -0.01em;
   }
   @media (min-width: 1280px) {
     h2 {
@@ -135,19 +324,136 @@
       font-size: 24px;
     }
   }
+
   .text-outline {
     -webkit-text-stroke: 1px #ffffff;
   }
   .text-outline-hover {
     -webkit-text-stroke: 1px #166466;
   }
-}
 
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: rgba(15, 23, 42, 0.5);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: rgba(22, 100, 102, 0.5);
+    border-radius: 3px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(22, 100, 102, 0.8);
+  }
 
-/* .glassmorphism {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Selection color */
+  ::selection {
+    background: rgba(22, 100, 102, 0.4);
+    color: #fff;
   }
-   */
\ No newline at end of file
+}
+
+/* ── Animated Background Orbs ── */
+
+.orb {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.15;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.orb-1 {
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, #166466, transparent 70%);
+  top: 10%;
+  left: 10%;
+  animation: orb-float-1 20s ease-in-out infinite;
+}
+
+.orb-2 {
+  width: 350px;
+  height: 350px;
+  background: radial-gradient(circle, #22d3ee, transparent 70%);
+  top: 60%;
+  right: 10%;
+  animation: orb-float-2 25s ease-in-out infinite;
+}
+
+.orb-3 {
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, #0f766e, transparent 70%);
+  bottom: 5%;
+  left: 40%;
+  animation: orb-float-1 18s ease-in-out infinite reverse;
+}
+
+/* ── Section Divider ── */
+
+.section-divider {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(22, 100, 102, 0.5),
+    transparent
+  );
+  margin: 2rem 0;
+}
+
+/* ── Gradient Border Top (for navbar, footer) ── */
+
+.gradient-border-top {
+  position: relative;
+}
+.gradient-border-top::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    #166466,
+    #22d3ee,
+    #166466,
+    transparent
+  );
+}
+
+.gradient-border-bottom {
+  position: relative;
+}
+.gradient-border-bottom::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    #166466,
+    #22d3ee,
+    #166466,
+    transparent
+  );
+}
+
+/* ── Focus Styles ── */
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #166466 !important;
+  box-shadow: 0 0 0 3px rgba(22, 100, 102, 0.2);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dd04f6b..4f9bf27 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,12 +20,12 @@ export const metadata: Metadata = {
     template: "%s | Priyanshu",
   },
   description:
-    "Modern, animated portfolio website built with Next.js 14, React 18, and TypeScript. Showcasing projects, skills, and contact info.",
+    "Modern, animated portfolio website built with Next.js, React, and TypeScript. Showcasing projects, skills, and contact info.",
   metadataBase: new URL("https://coderx85.vercel.app"),
   openGraph: {
     title: "Priyanshu | Portfolio",
     description:
-      "Modern, animated portfolio website built with Next.js 14, React 18, and TypeScript.",
+      "Modern, animated portfolio website built with Next.js, React, and TypeScript.",
     url: "https://coderx85.vercel.app",
     siteName: "Priyanshu Portfolio",
     images: [
@@ -43,7 +43,7 @@ export const metadata: Metadata = {
     card: "summary_large_image",
     title: "Priyanshu | Portfolio",
     description:
-      "Modern, animated portfolio website built with Next.js 14, React 18, and TypeScript.",
+      "Modern, animated portfolio website built with Next.js, React, and TypeScript.",
     creator: "@Coderx85",
     images: ["/images/hero.png"],
   },
@@ -90,10 +90,17 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <section className="min-h-screen">
+          {/* Ambient Background Orbs */}
+          <div className="orb orb-1" aria-hidden="true" />
+          <div className="orb orb-2" aria-hidden="true" />
+          <div className="orb orb-3" aria-hidden="true" />
+
+          <section className="min-h-screen flex flex-col">
             <Navbar />
             <StairTransition />
-            <PageTransition>{children}</PageTransition>
+            <PageTransition>
+              <main className="flex-1">{children}</main>
+            </PageTransition>
           </section>
           <Toaster />
         </ThemeProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4162543..aa660e3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,87 +1,273 @@
 "use client";
-import React, { useEffect } from "react";
-import AchievementsSection from "@/components/animation/AchievementSection";
+import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { FiDownload } from "react-icons/fi";
-import Social from "@/components/Social";
-import ProfilePicPage from "@/app/_components/ProfilePic";
+import { Progress } from "@/components/ui/progress";
+import Footer from "@/components/Footer";
+import ServiceSection from "@/components/ServiceSection";
+import ScrambleText from "@/components/animation/ScrambleText";
 import Link from "next/link";
-import { FlipWords } from "@/components/animation/Flipword";
 import { motion } from "framer-motion";
-import GitHubStats from "@/app/_components/GitHubStats";
 import { config } from "@/lib/config";
 import { useRouter } from "next/navigation";
+import { categoryColors, tech } from "@/constants";
+import { convertLevelIntoNumber } from "@/lib/convertLevel";
+import { FiDownload, FiArrowRight } from "react-icons/fi";
+import { Separator } from "@radix-ui/react-select";
+import { FaCode } from "react-icons/fa6";
+import { HiForward } from "react-icons/hi2";
+
 const HeroSection = () => {
-  const { username, description, name } = config;
+  const { description, name } = config;
   const router = useRouter();
+
+  const text = [
+    "Full Stack Developer",
+    "Problem Solver",
+    "Software Engineer",
+    "NodeJS Developer",
+    "Software Architect",
+    "Web Developer",
+    "Pragmatic Engineer",
+    "NextJS Developer",
+    "AI Engineer",
+  ] as const;
+
   useEffect(() => {
     window.document.title = `${name} | Portfolio`;
-  }, []);
+  }, [name]);
 
   return (
-    <motion.section
-      initial={{ opacity: 0 }}
-      animate={{
-        opacity: 1,
-        transition: { delay: 2.4, duration: 0.5, ease: "easeIn" },
-      }}
-      className="bg-project"
-    >
-      <div className="px-20 pt-10 mx-auto h-full">
-        <div className="flex xl:flex-row flex-col items-center sm:px-5 justify-between">
-          {/* Text Section */}
-          <div className="text-center xl:text-left order-2 xl:order-none">
-            <span className="text-lg my-4 xl:text-left text-center text-white/70 uppercase tracking-widest sm:hidden">
-              Full Stack Developer | Software Engineer | Open Source Contributor
+    <>
+      <motion.section
+        initial={{ opacity: 0 }}
+        className="xs:px-7 px-20"
+        animate={{
+          opacity: 1,
+          transition: { delay: 2.4, duration: 0.5, ease: "easeIn" },
+        }}
+      >
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
+          className="mx-auto mt-32 pb-12 text-left order-2 xl:order-0 py-0 h-full min-h-[400px] flex flex-col gap-3"
+        >
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 2.6, duration: 0.5 }}
+          >
+            <span className="inline-flex gap-2 px-4 py-1.5 rounded-full text-xs font-semibold uppercase tracking-[0.2em] border border-gray-100/30 bg-gray-100/5 text-gray-100">
+              <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
+              Available for work
             </span>
-            <h1 className="text-white text-4xl mb-4 sm:text-5xl lg:text-4xl text-extrabold">
-              {"I'm "}
-              <FlipWords
-                words={[`${name}`, `@${username}`]}
-                duration={2000}
-                className="text-2xl/normal sm:text-3xl/normal md:text-4xl/normal lg:text-5xl/normal"
-              />
-            </h1>
-            <p className="max-w-[500px] pt-2 my-4 md:mx-0 mx-auto text-white/80 sm:hidden">
-              {description}
-            </p>
-            <div className="flex flex-col xl:flex-row gap-8 items-center">
-              <Link
-                href="/Resume.pdf"
-                download="Resume/Priyanshu.pdf"
-                target="_blank"
-                aria-label="Downlod Resume"
-              >
-                <Button
-                  variant="outline"
-                  size="lg"
-                  className="uppercase items-center gap-2 text-white border-accent rounded-full hover:bg-accent transition-all duration-300 ease-in-out "
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 2.7, duration: 0.6 }}
+            className="text-white text-4xl xl:text-5xl py-2 font-bold leading-[1.4]"
+          >
+            <p className="py-1 ">{"I'm a "}</p>
+            <ScrambleText
+              text={text}
+              className="text-accent min-h-[50px]"
+              speed={0.4}
+              playOnMount
+              replayOnHover
+              cycleDuration={3000}
+            />
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 2.9, duration: 0.5 }}
+            className="max-w-[520px] md:mx-0 mx-auto text-white/60 text-base leading-relaxed"
+          >
+            {description}
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 3.1, duration: 0.5 }}
+            className="flex w-full mt-5 xl:w-fit gap-4 justify-between items-center pb-32"
+          >
+            <Link
+              href="/Resume.pdf"
+              type="button"
+              download="Resume/Priyanshu.pdf"
+              target="_blank"
+              aria-label="Download Resume"
+              className="uppercase inline-flex px-5 items-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 justify-center border-2 py-3 mx-auto w-full gap-2 text-white border-accent/50 hover:bg-accent hover:border-accent hover:shadow-lg hover:shadow-accent/20 transition-all duration-400 ease-out group"
+            >
+              {/* <Button variant="outline" size="lg"> */}
+              Checkout My CV{" "}
+              <FiDownload className="text-sm text-accent group-hover:text-white transition-colors duration-300" />
+              {/* </Button> */}
+            </Link>
+
+            <Button
+              variant="outline"
+              size="lg"
+              aria-label="Hire Me"
+              onClick={() => router.push("/contact/#contact")}
+              className="uppercase w-full items-center gap-2 text-white bg-accent border-accent rounded-xl hover:bg-accent/80 hover:shadow-lg hover:shadow-accent/25
+                  transition-all duration-400 ease-out group"
+            >
+              Hire Me
+              <FiArrowRight className="text-sm group-hover:translate-x-1 transition-transform duration-300" />
+            </Button>
+          </motion.div>
+        </motion.div>
+
+        <ServiceSection page="half" />
+
+        <motion.section
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: 1,
+            transition: { delay: 2.4, duration: 0.5, ease: "easeIn" },
+          }}
+          className="flex flex-col gap-5 mt-14 mb-36"
+        >
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 2.6, duration: 0.5 }}
+            className="flex flex-col justify-between"
+          >
+            {/* Add a glimpse of my skills set */}
+            <motion.h2
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 2.6, duration: 0.5 }}
+              className="text-2xl flex gap-3 font-bold text-white"
+            >
+              <FaCode className="fill-accent" />
+              Skills
+            </motion.h2>
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 2.6, duration: 0.5 }}
+              className="text-white/60 text-base leading-relaxed"
+            >
+              Here's a glimpse of my skills set
+            </motion.p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 2.6, duration: 0.5 }}
+            className="flex flex-wrap grid-cols-2 gap-6"
+          >
+            {tech.slice(0, 6).map((skill, index) => {
+              const colors = categoryColors[skill.title];
+              return (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{
+                    delay: 0.25 + index * 0.15,
+                    duration: 0.5,
+                  }}
+                  className={`${colors.bg} ${colors.border} rounded-2xl p-5 flex flex-col gap-4`}
                 >
-                  Checkout My CV <FiDownload className="text-sm text-accent" />
-                </Button>
-              </Link>
-              <Button
-                variant="outline"
-                size="lg"
-                aria-label="Hire Me"
-                onClick={() => router.push("/contact/#contact")}
-                className="uppercase items-center gap-2 text-white bg-accent border-accent rounded-full hover:bg-transparent transition-all duration-300 ease-in-out "
-              >
-                Hire Me
-              </Button>
-            </div>
-            <GitHubStats />
-          </div>
-          {/* Image Scetion */}
-          <div className="order-1 xl:order-none mb-8 gap-2 xl:mb-0 items-center">
-            <ProfilePicPage />
-            <Social />
-          </div>
-        </div>
-      </div>
-      {/* Achievememt Section */}
-      <AchievementsSection />
-    </motion.section>
+                  <motion.h4
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{
+                      delay: 0.3 + index * 0.15,
+                      duration: 0.4,
+                    }}
+                    className={`flex items-center gap-2 text-lg font-semibold ${colors.text} tracking-wide`}
+                  >
+                    <skill.icon className={`${colors.fill}`} />
+                    {skill.title}
+                  </motion.h4>
+                  <div className="flex gap-4 flex-wrap md:justify-start justify-center">
+                    {skill.techStack
+                      // Filter out Beginner level tech stack
+                      .filter((techItem) => techItem.level !== "Beginner")
+                      .slice(0, 3)
+                      .map((techItem, techIndex) => (
+                        <motion.div
+                          key={techIndex}
+                          initial={{ opacity: 0, y: 15 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{
+                            delay: 0.35 + index * 0.15 + techIndex * 0.08,
+                            duration: 0.4,
+                          }}
+                          className="w-[80px] transition-colors border-white/10 hover:border-white/30 duration-300 rounded-xl p-3 flex flex-col gap-2 items-center text-center"
+                          style={{ borderColor: `${techItem.color}20` }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.borderColor = `${techItem.color}60`;
+                            e.currentTarget.style.backgroundColor = `${techItem.color}80`;
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.borderColor = `${techItem.color}80`;
+                            e.currentTarget.style.backgroundColor =
+                              "transparent";
+                          }}
+                        >
+                          <span
+                            className="text-3xl"
+                            style={{ color: techItem.color }}
+                          >
+                            <techItem.icon />
+                          </span>
+                          <p className="text-xs font-medium uppercase">
+                            {techItem.title}
+                          </p>
+                          <div className="w-full">
+                            <Progress
+                              value={convertLevelIntoNumber(techItem.level)}
+                              className="bg-white/10 h-1.5 rounded-full"
+                              indicatorStyle={{
+                                backgroundColor: techItem.color,
+                              }}
+                            />
+                          </div>
+                        </motion.div>
+                      ))}
+                    <motion.div
+                      initial={{ opacity: 0, y: 15 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        delay: 0.35 + index * 0.15 + 3 * 0.08,
+                        duration: 0.4,
+                      }}
+                      onClick={() => {
+                        router.push("/resume");
+                      }}
+                      className="w-[80px] transition-colors border-white/10 hover:border-white/30 duration-30 hover:bg-white/10 pointer rounded-xl p-3 flex flex-col gap-2 items-center text-center"
+                    >
+                      <HiForward className="text-3xl" />
+                      <p className="text-xs font-medium uppercase">View All</p>
+                    </motion.div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+          <motion.div className="flex px-5">
+            <Button
+              onClick={() => router.push("/resume")}
+              className="text-white rounded-xl bg-transparent border-white hover:bg-white/10 border-2"
+            >
+              View all skills.
+            </Button>
+          </motion.div>
+        </motion.section>
+      </motion.section>
+      <Footer />
+    </>
   );
 };
 
diff --git a/src/app/resume/_components/printView.tsx b/src/app/resume/_components/printView.tsx
new file mode 100644
index 0000000..dea48d7
--- /dev/null
+++ b/src/app/resume/_components/printView.tsx
@@ -0,0 +1,69 @@
+import { motion } from "framer-motion";
+import { HiArrowDownTray } from "react-icons/hi2";
+import { PdfComponentsType } from "@/types";
+
+export const PrintView = ({
+  isClient,
+  PdfComponents,
+}: {
+  isClient: boolean;
+  PdfComponents: PdfComponentsType;
+}) => (
+  <motion.div
+    key="print"
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    exit={{ opacity: 0, y: -20 }}
+    transition={{ duration: 0.4, ease: "easeInOut" }}
+    className="flex flex-col items-center gap-8 w-full"
+  >
+    {/* Download button */}
+    <div className="flex items-center justify-center">
+      {isClient && PdfComponents ? (
+        <PdfComponents.PDFDownloadLink
+          document={<PdfComponents.ResumePDF />}
+          fileName="Priyanshu_Resume.pdf"
+        >
+          {({ loading }) => (
+            <span className="inline-flex items-center gap-2 px-7 py-3 rounded-xl text-sm font-semibold bg-[#C44536] text-white hover:bg-[#a83a2e] transition-all duration-300 cursor-pointer shadow-lg shadow-[#C44536]/20">
+              <HiArrowDownTray className="w-4 h-4" />
+              {loading ? "Preparing…" : "Download PDF"}
+            </span>
+          )}
+        </PdfComponents.PDFDownloadLink>
+      ) : (
+        <span className="inline-flex items-center gap-2 px-7 py-3 rounded-xl text-sm font-semibold bg-[#C44536]/50 text-white/50 cursor-wait shadow-lg">
+          <HiArrowDownTray className="w-4 h-4" />
+          Loading…
+        </span>
+      )}
+    </div>
+
+    {/* PDF Viewer */}
+    <motion.div
+      initial={{ opacity: 0, scale: 0.97 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.4, delay: 0.15 }}
+      className="w-full max-w-4xl rounded-2xl overflow-hidden border border-white/10 shadow-2xl shadow-black/40"
+      style={{ height: "80vh" }}
+    >
+      {isClient && PdfComponents ? (
+        <PdfComponents.PDFViewer
+          width="100%"
+          height="100%"
+          showToolbar={true}
+          style={{ border: "none" }}
+        >
+          <PdfComponents.ResumePDF />
+        </PdfComponents.PDFViewer>
+      ) : (
+        <div className="flex items-center justify-center h-full bg-white/5">
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-8 h-8 border-2 border-accent/30 border-t-accent rounded-full animate-spin" />
+            <p className="text-white/40 text-sm">Building PDF…</p>
+          </div>
+        </div>
+      )}
+    </motion.div>
+  </motion.div>
+);
diff --git a/src/app/resume/_components/webView.tsx b/src/app/resume/_components/webView.tsx
new file mode 100644
index 0000000..650207f
--- /dev/null
+++ b/src/app/resume/_components/webView.tsx
@@ -0,0 +1,373 @@
+import { categoryColors, tech as techData } from "@/constants/resume";
+import { Progress } from "@/components/ui/progress";
+import { SiAboutdotme } from "react-icons/si";
+import { motion } from "framer-motion";
+import ExperienceSection from "@/components/ExperienceSection";
+import { convertLevelIntoNumber } from "@/lib/convertLevel";
+import { Separator } from "@radix-ui/react-select";
+import { config, SocialLink } from "@/constants";
+import { FaBookOpen, FaUser } from "react-icons/fa6";
+import GitHubStats from "@/app/_components/GitHubStats";
+
+export default function WebView() {
+  return (
+    <motion.div
+      key="web"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      transition={{ duration: 0.4, ease: "easeInOut" }}
+      className="flex flex-col gap-[60px]"
+    >
+      {/* About Me */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.1, duration: 0.5, ease: "easeIn" }}
+        className="py-8 px-8 h-full flex flex-col gap-8"
+      >
+        {/* ── Profile ── */}
+        <div className="flex flex-col lg:flex-row gap-6 w-full justify-between">
+          <div>
+            <motion.h3
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.15, duration: 0.5 }}
+              className="flex items-center gap-3 text-white mb-5"
+            >
+              <FaUser className="text-lg fill-accent" />
+              Profile
+            </motion.h3>
+
+            {/* Profile Highlights */}
+            <motion.ul
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3, duration: 0.5 }}
+              className="flex-1 flex flex-col gap-3 "
+            >
+              {config.profile.map((item, index) => (
+                <motion.li
+                  key={index}
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{
+                    delay: 0.35 + index * 0.1,
+                    duration: 0.4,
+                    ease: "easeInOut",
+                  }}
+                  className="flex items-left gap-3 group"
+                >
+                  <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-accent group-hover:scale-150 transition-transform duration-300 shrink-0" />
+                  <p className="text-white/70 text-sm md:text-base leading-relaxed">
+                    {item}
+                  </p>
+                </motion.li>
+              ))}
+            </motion.ul>
+          </div>
+          {/* Social Links — Glass Sidebar */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+            style={{
+              boxShadow: "0px 0px 20px rgba(255, 255, 255, 0.1)",
+              background:
+                // use grey shade for background
+                "linear-gradient(90deg, rgba(22, 22, 22, 0.4), rgba(22, 22, 22, 0.4), 0.5)",
+            }}
+            className="flex flex-col gap-3 lg:w-[260px] justify-end shrink-0 rounded-xl p-4"
+          >
+            {SocialLink.filter(
+              (l) =>
+                l.name === "Github" ||
+                l.name === "LinkedIn" ||
+                l.name === "Email",
+            ).map((link, index) => (
+              <motion.a
+                key={index}
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.45 + index * 0.08, duration: 0.4 }}
+                className="flex items-left gap-3 px-1 py-2 rounded-lg transition-all duration-300 hover:bg-white/5 group"
+              >
+                <span
+                  className="flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-300 group-hover:scale-110"
+                  style={{
+                    backgroundColor: `${link.color}1a`,
+                    color: link.color,
+                  }}
+                >
+                  <link.icon className="w-4 h-4" />
+                </span>
+                <div className="flex flex-col">
+                  <span className="text-white/80 text-xs font-medium group-hover:text-white transition-colors">
+                    {link.name}
+                  </span>
+                  <span className="text-white/40 text-[11px]">
+                    {link.username}
+                  </span>
+                </div>
+              </motion.a>
+            ))}
+          </motion.div>
+        </div>
+
+        {/* Divider */}
+        <div
+          className="w-full h-px"
+          style={{
+            background:
+              "linear-gradient(90deg, transparent, rgba(22, 100, 102, 0.4), transparent)",
+          }}
+        />
+
+        {/* ── About Me ── */}
+        <div>
+          <motion.h3
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.6, duration: 0.5 }}
+            className="flex items-center gap-3 mb-5"
+          >
+            <FaBookOpen className="text-lg fill-accent" />
+            About me
+          </motion.h3>
+          <div className="flex flex-col gap-4">
+            <motion.p
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.65, duration: 0.4 }}
+              className="text-white/70 text-sm md:text-base leading-relaxed"
+            >
+              Driven by a passion for technology, I&apos;ve been building
+              software from an early age — with web development and the
+              ecosystem around it as my home base from the start. Especially in
+              an era increasingly driven and accelerated by AI, I firmly believe
+              that standing still means falling behind: I never stop learning,
+              exploring, and pushing myself forward.
+            </motion.p>
+            <motion.p
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.7, duration: 0.4 }}
+              className="text-white/70 text-sm md:text-base leading-relaxed"
+            >
+              I don&apos;t just focus on the technical side — I own the full
+              stack, from architecture to delivery. Client experience,
+              usability, and user experience are equally important. As a
+              realistic perfectionist, I have a clear view of what&apos;s
+              feasible and deliver quality work efficiently.
+            </motion.p>
+            <motion.p
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.75, duration: 0.4 }}
+              className="text-white/70 text-sm md:text-base leading-relaxed"
+            >
+              Every project comes with genuine passion and empathy. Understand
+              first, then build — I love diving into a client&apos;s business
+              logic and developing the right solution for it. I thrive in an
+              informal atmosphere with clear goals — where professionalism and a
+              good team dynamic go hand in hand.
+            </motion.p>
+          </div>
+        </div>
+      </motion.div>
+
+      <motion.div>
+        <GitHubStats />
+      </motion.div>
+
+      {/* Expertise */}
+      <div>
+        <motion.h3
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.15, duration: 0.5 }}
+          className="flex gap-4 pb-6"
+        >
+          <span className="text-accent">
+            <SiAboutdotme />
+          </span>
+          Expertise
+        </motion.h3>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+          className="flex flex-col gap-6"
+        >
+          {/* Frameworks (full-width row) */}
+          <motion.div>
+            {techData
+              .filter((t) => t.title === "Frameworks")
+              .map((category, catIndex) => {
+                const colors = categoryColors[category.title];
+                return (
+                  <motion.div
+                    key={catIndex}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{
+                      delay: 0.25 + catIndex * 0.15,
+                      duration: 0.5,
+                    }}
+                    className={`${colors.bg} ${colors.border} rounded-2xl p-5 flex flex-col gap-4`}
+                  >
+                    <motion.h4
+                      initial={{ opacity: 0, x: -10 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{
+                        delay: 0.3 + catIndex * 0.15,
+                        duration: 0.4,
+                      }}
+                      className={`text-lg flex items-center gap-2 font-semibold ${colors.text} tracking-wide`}
+                    >
+                      <category.icon className={`${colors.fill}`} />
+                      {category.title}
+                    </motion.h4>
+                    <div className="flex gap-4 flex-wrap md:justify-start justify-center">
+                      {category.techStack.map((techItem, techIndex) => (
+                        <motion.div
+                          key={techIndex}
+                          initial={{ opacity: 0, y: 15 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{
+                            delay: 0.35 + catIndex * 0.15 + techIndex * 0.08,
+                            duration: 0.4,
+                          }}
+                          className="w-[80px] transition-colors border-white/10 hover:border-white/30 duration-300 rounded-xl p-3 flex flex-col gap-2 items-center text-center"
+                          style={{ borderColor: `${techItem.color}20` }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.borderColor = `${techItem.color}60`;
+                            e.currentTarget.style.backgroundColor = `${techItem.color}80`;
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.borderColor = `${techItem.color}80`;
+                            e.currentTarget.style.backgroundColor =
+                              "transparent";
+                          }}
+                        >
+                          <span
+                            className="text-3xl"
+                            style={{ color: techItem.color }}
+                          >
+                            <techItem.icon />
+                          </span>
+                          <p className="text-xs font-medium uppercase">
+                            {techItem.title}
+                          </p>
+                          <div className="w-full">
+                            <Progress
+                              value={convertLevelIntoNumber(techItem.level)}
+                              className="bg-white/10 h-1.5 rounded-full"
+                              indicatorStyle={{
+                                backgroundColor: techItem.color,
+                              }}
+                            />
+                          </div>
+                        </motion.div>
+                      ))}
+                    </div>
+                  </motion.div>
+                );
+              })}
+          </motion.div>
+
+          {/* Other categories (3-column grid) */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2, duration: 0.5 }}
+            className="grid grid-cols-1 md:grid-cols-3 gap-6"
+          >
+            {techData
+              .filter((category) => category.title !== "Frameworks")
+              .map((category, catIndex) => {
+                const colors = categoryColors[category.title];
+                return (
+                  <motion.div
+                    key={catIndex}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{
+                      delay: 0.25 + catIndex * 0.15,
+                      duration: 0.5,
+                    }}
+                    className={`${colors.bg} ${colors.border} rounded-2xl p-5 flex flex-col gap-4`}
+                  >
+                    <motion.h4
+                      initial={{ opacity: 0, x: -10 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{
+                        delay: 0.3 + catIndex * 0.15,
+                        duration: 0.4,
+                      }}
+                      className={`text-lg flex items-center gap-2 font-semibold ${colors.text} tracking-wide`}
+                    >
+                      <category.icon className={`${colors.fill}`} />
+                      {category.title}
+                    </motion.h4>
+                    <div className="grid md:grid-cols-4 grid-cols-2 whitespace-nowrap self-center md:gap-3">
+                      {category.techStack.map((techItem, techIndex) => (
+                        <motion.div
+                          key={techIndex}
+                          initial={{ opacity: 0, y: 15 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{
+                            delay: 0.35 + catIndex * 0.15 + techIndex * 0.08,
+                            duration: 0.4,
+                          }}
+                          className="w-[80px] transition-colors border-white/10 hover:border-white/30 duration-300 rounded-xl p-3 flex flex-col gap-2 items-center text-center"
+                          style={{ borderColor: `${techItem.color}/20` }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.borderColor = `${techItem.color}/60`;
+                            e.currentTarget.style.backgroundColor = `${techItem.color}50`;
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.borderColor = `${techItem.color}/80`;
+                            e.currentTarget.style.backgroundColor =
+                              "transparent";
+                          }}
+                        >
+                          <span
+                            className="text-3xl"
+                            style={{ color: techItem.color }}
+                          >
+                            <techItem.icon />
+                          </span>
+                          <p className="text-xs font-medium uppercase">
+                            {techItem.title}
+                          </p>
+                          <div className="w-full">
+                            <Progress
+                              value={convertLevelIntoNumber(techItem.level)}
+                              className="bg-white/10 h-1.5 rounded-full"
+                              indicatorStyle={{
+                                backgroundColor: techItem.color,
+                              }}
+                            />
+                          </div>
+                        </motion.div>
+                      ))}
+                    </div>
+                  </motion.div>
+                );
+              })}
+          </motion.div>
+        </motion.div>
+      </div>
+
+      <Separator className="size-0.5 bg-white w-screen" />
+
+      {/* ── Experience section ── */}
+      <ExperienceSection />
+    </motion.div>
+  );
+}
diff --git a/src/app/resume/_components/webmodeToggle.tsx b/src/app/resume/_components/webmodeToggle.tsx
new file mode 100644
index 0000000..17ba392
--- /dev/null
+++ b/src/app/resume/_components/webmodeToggle.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button";
+import { HiOutlineComputerDesktop, HiOutlinePrinter } from "react-icons/hi2";
+
+type TMode = "web" | "print";
+
+export const ModeToggle = ({
+  mode,
+  setMode,
+}: {
+  mode: TMode;
+  setMode: (m: TMode) => void;
+}) => (
+  <div className="flex items-center justify-center mb-12">
+    <div className="inline-flex p-1 bg-white/5 border border-white/10 rounded-2xl">
+      <Button
+        onClick={() => setMode("web")}
+        className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-medium transition-all duration-300 ${
+          mode === "web"
+            ? "bg-white/10 text-white shadow-xl"
+            : "bg-transparent text-white/40 hover:text-white/70 hover:bg-white/5"
+        }`}
+      >
+        <HiOutlineComputerDesktop className="text-lg" />
+        Web View
+      </Button>
+      <Button
+        onClick={() => setMode("print")}
+        className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-medium transition-all duration-300 ${
+          mode === "print"
+            ? "bg-white/10 text-white shadow-xl"
+            : "bg-transparent text-white/40 hover:text-white/70 hover:bg-white/5"
+        }`}
+      >
+        <HiOutlinePrinter className="text-lg" />
+        Print View
+      </Button>
+    </div>
+  </div>
+);
diff --git a/src/app/resume/page.tsx b/src/app/resume/page.tsx
index bd59811..72c4690 100644
--- a/src/app/resume/page.tsx
+++ b/src/app/resume/page.tsx
@@ -1,240 +1,53 @@
 "use client";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
-  aboutData,
-  educationData,
-  experienceData,
-  skillsData,
-} from "@/constants";
-import { motion } from "framer-motion";
-import React, { useEffect } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ModeToggle } from "./_components/webmodeToggle";
+import WebView from "./_components/webView";
+import { PrintView } from "./_components/printView";
+import { PdfComponentsType } from "@/types/resume";
 
 const ResumePage = () => {
+  const [mode, setMode] = useState<"web" | "print">("web");
+  const [isClient, setIsClient] = useState(false);
+  const [PdfComponents, setPdfComponents] = useState<PdfComponentsType>(null);
+
   useEffect(() => {
     document.title = "Resume | Portfolio";
+    setIsClient(true);
+
+    Promise.all([
+      import("@react-pdf/renderer"),
+      import("@/components/resume/ResumePDF"),
+    ]).then(([pdfRenderer, resumePdf]) => {
+      setPdfComponents({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        PDFViewer: pdfRenderer.PDFViewer as any,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        PDFDownloadLink: pdfRenderer.PDFDownloadLink as any,
+        ResumePDF: resumePdf.default,
+      });
+    });
   }, []);
 
   return (
     <motion.div
       initial={{ opacity: 0 }}
-      animate={{
-        opacity: 1,
-        transition: { delay: 2.4, duration: 0.5, ease: "easeIn" },
-      }}
-      className="flex min-h-[80vh] justify-center py-12 xl:py-0 gap-[60px] mt-10"
+      animate={{ opacity: 1 }}
+      transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
+      className="flex flex-col min-h-[80vh] justify-center mx-30 py-12 xl:py-0 gap-10 my-10"
     >
-      <div className="container mx-auto">
-        <Tabs
-          defaultValue="experience"
-          className="flex flex-col md:flex-row gap-[60px]"
-        >
-          <TabsList className="flex flex-col capitalize md:flex-nowrap w-full max-w-[380px] gap-5 mx-auto xl:mx-0">
-            <TabsTrigger value="about">{aboutData.title}</TabsTrigger>
-            <TabsTrigger value="experience">{experienceData.title}</TabsTrigger>
-            <TabsTrigger value="education">{educationData.title}</TabsTrigger>
-            <TabsTrigger value="skills">{skillsData.title}</TabsTrigger>
-          </TabsList>
-
-          <div className="w-full min-h-[70vh]">
-            {/* About Section */}
-            <TabsContent
-              value="about"
-              className="w-full text-center xl:text-left"
-            >
-              <div className="flex flex-col gap-[30px]">
-                <h3 className="font-bold text-outline space-x-1 tracking-[5px] text-transparent text-4xl uppercase border-white border-b-2 pb-2">
-                  {aboutData.title}
-                </h3>
-                <ul className="grid grid-cols-1 xl:grid-cols-2 max-w-[850px] gap-y-4 gap-14 mx-auto xl:mx-0 bg-zinc-800 rounded-xl py-6 px-2">
-                  {/* About Section items */}
-                  {aboutData.info.map((item, index) => {
-                    return (
-                      <li
-                        key={index}
-                        className="items-center flex justify-start gap-6 px-4 py-2"
-                      >
-                        <span className="text-accent/90 font-bold">
-                          {item.fieldName}
-                        </span>
-                        <span className="text-lg">{item.fieldValue}</span>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            </TabsContent>
-
-            {/* Experience Section */}
-            <TabsContent value="experience" className="w-full">
-              <div className="flex flex-col gap-[30px] text-center xl:text-left">
-                <h3 className="font-bold text-outline space-x-1 tracking-[5px] text-transparent text-4xl uppercase border-white border-b-2 pb-2">
-                  {experienceData.title}
-                </h3>
-                <ScrollArea className="h-[480px]">
-                  {/* Experience items */}
-                  <ul className="flex flex-col gap-[30px]">
-                    {experienceData.items.map((item, index) => {
-                      return (
-                        <li
-                          key={index}
-                          className="bg-zinc-800 items-center py-2 px-3 rounded-3xl flex justify-center lg:items-start gap-1"
-                        >
-                          {/* <span className="text-accent">{item.duration}</span>
-                          <h4 className="text-xl max-w-[300px] min-h-[60px] text-center lg:text-left">
-                            {item.title}
-                          </h4>
-                          <div className="flex items-center gap-3">
-                            <span className="w-[6px] h-[6px] rounded-full bg-accent"></span>
-                            <p className="text-white/60">{item.company}</p>
-                          </div> */}
-                          <Accordion
-                            type="single"
-                            collapsible
-                            className="w-full"
-                          >
-                            <AccordionItem value={`item-${index}`}>
-                              <AccordionTrigger className="w-full text-left flex gap-1">
-                                <div className="flex items-center gap-3">
-                                  <p className="text-white/60">
-                                    {item.company}
-                                  </p>
-                                  {"|"}
-                                  <h4 className="text-xl max-w-[300px]">
-                                    {item.title}
-                                  </h4>
-                                </div>
-                              </AccordionTrigger>
-                              <AccordionContent>
-                                <p className="mt-4 text-white/80">
-                                  {item.description}
-                                </p>
-                                <div className="flex items-center gap-3">
-                                  <span className="w-[6px] h-[6px] rounded-full bg-accent"></span>
-                                  <span className="text-accent">
-                                    {item.duration}
-                                  </span>
-                                </div>
-                                {item.linkedin && (
-                                  <a
-                                    href={item.linkedin}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="mt-2 inline-block text-accent underline"
-                                  >
-                                    View Company LinkedIn
-                                  </a>
-                                )}
-                              </AccordionContent>
-                            </AccordionItem>
-                          </Accordion>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </ScrollArea>
-              </div>
-            </TabsContent>
-
-            {/* Education Section */}
-            <TabsContent value="education">
-              <div className="flex flex-col gap-[30px] text-center xl:text-left">
-                <h3 className="font-bold text-outline space-x-1 tracking-[5px] text-transparent text-4xl uppercase border-white border-b-2 pb-2">
-                  {educationData.title}
-                </h3>
-                <p className="max-w-[680px] text-white/60 mx-auto xl:mx-0">
-                  {educationData.description}
-                </p>
-                <ScrollArea className="h-[480px]">
-                  {/* Education items */}
-                  <ul className="grid grid-cols-1 lg:grid-cols-2 gap-[30px]">
-                    {educationData.items.map((item, index) => {
-                      return (
-                        <li
-                          key={index}
-                          className="bg-zinc-800 items-center py-6 px-10 rounded-xl flex flex-col justify-center lg:items-start gap-1"
-                        >
-                          <span className="text-accent">{item.duration}</span>
-                          <h4 className="text-xl max-w-[260px] min-h-[60px] text-center lg:text-left">
-                            {item.title}
-                          </h4>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </ScrollArea>
-              </div>
-            </TabsContent>
+      {/* ── Mode toggle ── */}
+      <ModeToggle mode={mode} setMode={setMode} />
 
-            {/* Skills Section */}
-            <TabsContent value="skills">
-              <div className="flex flex-col gap-[30px] text-center lg:text-left">
-                <div className="flex flex-col gap-[30px] text-center xl:text-left">
-                  <h3 className="font-bold text-outline space-x-1 tracking-[5px] text-transparent text-4xl uppercase border-white border-b-2 pb-2">
-                    {skillsData.title}
-                  </h3>
-                  {/* <p className='max-w-[680px] text-white/60 mx-auto xl:mx-0'>
-                    {skillsData.description}
-                  </p> */}
-                </div>
-                <ul className="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-[30px]">
-                  {skillsData.items.map((item, index) => {
-                    return (
-                      <li key={index}>
-                        <Card className="bg-zinc-800">
-                          <CardHeader>
-                            <CardTitle className="mx-auto text-accent text-left">
-                              {item.section}
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent className="mx-auto w-full">
-                            <ul
-                              className={`grid ${item.techStack.length % 2 ? "grid-cols-3" : "grid-cols-2"} gap-2 md:gap-[30px]`}
-                            >
-                              {item.techStack.map((tech, index) => {
-                                return (
-                                  <li
-                                    key={index}
-                                    className={` items-center justify-between gap-2 mx-auto ${item.techStack.length === 5 && index > 2 ? "col-span-1" : ""}`}
-                                  >
-                                    <TooltipProvider delayDuration={150}>
-                                      <Tooltip>
-                                        <TooltipTrigger className="w-full h-[50px] rounded-xl-row mx-auto flex justify-center items-center group">
-                                          <tech.icon className="text-4xl group-hover:text-accent transition-all duration-300" />
-                                        </TooltipTrigger>
-                                        <TooltipContent className="backdrop-blur-xl">
-                                          <p>{tech.title}</p>
-                                        </TooltipContent>
-                                      </Tooltip>
-                                    </TooltipProvider>
-                                  </li>
-                                );
-                              })}
-                            </ul>
-                          </CardContent>
-                        </Card>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            </TabsContent>
-          </div>
-        </Tabs>
-      </div>
+      {/* ── Active view ── */}
+      <AnimatePresence mode="wait">
+        {mode === "web" ? (
+          <WebView />
+        ) : (
+          <PrintView isClient={isClient} PdfComponents={PdfComponents} />
+        )}
+      </AnimatePresence>
     </motion.div>
   );
 };
diff --git a/src/app/service/page.tsx b/src/app/service/page.tsx
index f20484c..d0d9d99 100644
--- a/src/app/service/page.tsx
+++ b/src/app/service/page.tsx
@@ -1,54 +1,11 @@
-"use client"
-import { BsArrowDownRight } from 'react-icons/bs'
-import { motion } from 'framer-motion'
-import Link from 'next/link'
-import React, { useEffect } from 'react'
-import { services } from '@/constants'
-
-const ServicePage = () => {
-  useEffect(() => {
-    document.title = 'Services | Portfolio'
-  }, [])
+import ServiceSection from "@/components/ServiceSection";
 
+const ServicesPage = () => {
   return (
-    <section className='min-h-[80vh] flex flex-col justify-center py-12 xl:py-0'>
-      <div className='container mx-auto'>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ 
-            opacity: 1,
-            transition: { duration: 0.4, delay: 1, ease: 'easeIn'} 
-          }}
-          className='grid grid-cols-1 md:grid-cols-2 gap-[60px] mb-10'
-        >
-          {services.map((service, index) => {
-            return (
-              <div 
-                key={index}
-                className='flex flex-col gap-6 group justify-center flex-1:'
-              >
-                <div className='w-full justify-between items-center flex'>
-                  <div className='text-5xl font-extrabold text-outline text-transparent group-hover:text-outline-hover transition-all duration-500'>
-                    {service.num}
-                  </div>
-                  <Link 
-                    href={service.title}
-                    className='w-[70px] h-[70px] rounded-full bg-white group-hover:bg-accent transition-all duration-500 flex items-center justify-center text-black hover:-rotate-45 hover:scale-110'
-                  >
-                    <BsArrowDownRight className='text-black fill-black text-3xl'/>
-                  </Link>
-                </div>
-                <h2
-                  className='text-4xl font-bold leading-none text-white group-hover:text-accent transition-all duration-500 ease-in-out'
-                >{service.title}</h2>
-                <p>{service.description}</p>
-                <div className='border-b border-white/80 w-full'></div>
-              </div>
-          )})}
-        </motion.div>
-      </div>
+    <section className="min-h-screen px-20">
+      <ServiceSection page="full" />
     </section>
-  )
-}
+  );
+};
 
-export default ServicePage
\ No newline at end of file
+export default ServicesPage;
diff --git a/src/app/work/_components/ProjectCard.tsx b/src/app/work/_components/ProjectCard.tsx
index 6883310..a12f397 100644
--- a/src/app/work/_components/ProjectCard.tsx
+++ b/src/app/work/_components/ProjectCard.tsx
@@ -2,6 +2,7 @@
 import { useState } from "react";
 import ProjectDetails from "@/app/work/_components/ProjectDetails";
 import { cn } from "@/lib/utils";
+import { FiExternalLink } from "react-icons/fi";
 
 interface ProjectCardProps {
   project: {
@@ -21,11 +22,12 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div>
+    <div className="group">
       <div
         className={cn(
-          "h-52 md:h-72 rounded-xl bg-no-repeat bg-center relative group ",
-          !project.imgUrl && " backdrop-brightness-50 border-xl",
+          "h-52 md:h-72 rounded-2xl bg-no-repeat bg-center relative overflow-hidden cursor-pointer",
+          "border border-white/5 hover:border-accent/30 transition-all duration-500",
+          !project.imgUrl && "backdrop-brightness-50",
         )}
         style={
           project.imgUrl
@@ -35,19 +37,65 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
                 backgroundSize: "cover",
               }
         }
+        onClick={() => setIsOpen(true)}
       >
+        {/* Gradient overlay */}
         <div
-          className="overlay items-center justify-center absolute top-0 left-0 w-full h-full bg-black/55 hidden group-hover:flex group-hover:hover:bg-black/55 transition-all duration-500 hover:cursor-pointer "
-          onClick={() => setIsOpen(true)}
-        ></div>
+          className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent
+            opacity-60 group-hover:opacity-90 transition-opacity duration-500"
+        />
+
+        {/* Hover content */}
+        <div
+          className="absolute inset-0 flex flex-col items-center justify-center gap-3
+            opacity-0 group-hover:opacity-100 transition-all duration-500"
+        >
+          <div
+            className="w-12 h-12 rounded-full border border-accent/50 bg-accent/10 backdrop-blur-sm
+              flex items-center justify-center
+              group-hover:scale-110 transition-transform duration-300"
+          >
+            <FiExternalLink className="text-accent text-lg" />
+          </div>
+          <span className="text-sm font-medium text-white/80 uppercase tracking-wider">
+            View Details
+          </span>
+        </div>
+
+        {/* Tech stack badges */}
+        <div className="absolute top-3 right-3 flex flex-wrap gap-1.5 max-w-[60%] justify-end">
+          {Object.keys(project.techStack)
+            .slice(0, 3)
+            .map((tech) => (
+              <span
+                key={tech}
+                className="px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider
+                  rounded-full bg-black/60 backdrop-blur-sm border border-white/10
+                  text-white/70 opacity-0 group-hover:opacity-100 
+                  transition-all duration-300"
+              >
+                {tech}
+              </span>
+            ))}
+        </div>
       </div>
+
       <ProjectDetails
         project={project}
         isOpen={isOpen}
         closeModal={() => setIsOpen(false)}
       />
-      <div className="text-white rounded-b-xl mt-2 py-2 px-4">
-        <h5 className="text-xl font-semibold mb-2">{project.title}</h5>
+
+      {/* Title area */}
+      <div className="mt-3 px-1">
+        <h5 className="text-lg font-semibold text-white group-hover:text-accent transition-colors duration-300">
+          {project.title}
+        </h5>
+        {project.description && (
+          <p className="text-sm text-white/40 mt-1 line-clamp-2">
+            {project.description}
+          </p>
+        )}
       </div>
     </div>
   );
diff --git a/src/app/work/page.tsx b/src/app/work/page.tsx
index 75d8946..4633de2 100644
--- a/src/app/work/page.tsx
+++ b/src/app/work/page.tsx
@@ -18,26 +18,27 @@ const ProjectSection = () => {
   };
 
   return (
-    <section
-      className="container mt-5
-    "
-    >
-      <h2 className="font-bold text-outline space-x-1 tracking-[5px] text-transparent text-5xl uppercase border-white border-b-2 pb-2 sm:mt-0 mt-10">
-        My Projects
-      </h2>
+    <section className="container mt-5 pb-16">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 1 }}
+      >
+        <h2 className="font-bold gradient-text text-5xl uppercase sm:mt-0 mt-10 mb-2">
+          My Projects
+        </h2>
+        <div className="w-20 h-1 bg-gradient-to-r from-accent to-transparent rounded-full mb-8" />
+      </motion.div>
 
-      <div className="sm:border-0 border-2 rounded-2xl mt-5 p-10">
-        <ul
-          ref={ref}
-          className="w-full rounded-xl grid md:grid-cols-2 gap-8 md:gap-12"
-        >
+      <div className="mt-5">
+        <ul ref={ref} className="w-full grid md:grid-cols-2 gap-8 md:gap-10">
           {ProjectData.sort((a, b) => b.id - a.id).map((project, index) => (
             <motion.li
               key={project.id}
               variants={cardVariants}
               initial="initial"
               animate={isInView ? "animate" : "initial"}
-              transition={{ duration: 1, delay: index * 1.0 }}
+              transition={{ duration: 0.6, delay: index * 0.15 }}
             >
               <ProjectCard key={project.id} project={project} />
             </motion.li>
diff --git a/src/components/ExperienceSection.tsx b/src/components/ExperienceSection.tsx
new file mode 100644
index 0000000..d5ea209
--- /dev/null
+++ b/src/components/ExperienceSection.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { experienceData } from "@/constants";
+import { HiBriefcase, HiCalendarDays } from "react-icons/hi2";
+import Link from "next/link";
+import { calcDuration, formatDate } from "@/lib/dayjs";
+
+// Unique accent color per experience card — curated minimal palette
+const EXP_COLORS = [
+  "#38bdf8", // sky blue
+  "#a78bfa", // soft violet
+  "#4ade80", // sage green
+  "#fbbf24", // warm amber
+] as const;
+
+type TMode = "half" | "full";
+
+const ExperienceSection = ({ mode = "half" }: { mode?: TMode }) => {
+  const sortedItems = [...experienceData.items].sort(
+    (a, b) => b.startDate.getTime() - a.startDate.getTime(),
+  );
+
+  const visibleItems = mode === "half" ? sortedItems.slice(0, 2) : sortedItems;
+  const colorsArray = mode === "half" ? EXP_COLORS.slice(0, 2) : EXP_COLORS;
+
+  return (
+    <div className="h-full flex flex-col gap-7">
+      {/* Section Header */}
+      <div className="flex gap-3 justify-between text-accent">
+        <div>
+          <motion.h3
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="flex gap-3 text-accent text-3xl"
+          >
+            <HiBriefcase className="fill-accent" />
+            Work Experience
+          </motion.h3>
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="text-white"
+          >
+            Where I&apos;ve Worked
+          </motion.h2>
+        </div>
+        <div className="flex  justify-end">
+          <Link
+            href="/work"
+            className="group relative flex items-center justify-between glass-card glass-card-hover p-4 overflow-hidden"
+          >
+            <div className="flex flex-col items-center gap-2 text-accent shrink-0">
+              <div className="flex items-center">
+                <h2 className="text-sm">Explore my projects</h2>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium underline hidden sm:inline opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  View Projects
+                </span>
+                <svg
+                  className="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
+              style={{
+                background:
+                  "radial-gradient(circle at right center, rgba(22, 100, 102, 0.15), transparent 70%)",
+              }}
+            />
+          </Link>
+        </div>
+      </div>
+
+      {/* Timeline */}
+      <div className="relative mt-6">
+        {/* Vertical Line — gradient through card colours */}
+        <div
+          className="absolute left-[7px] top-2 bottom-2 w-[2px]"
+          style={{
+            background: `linear-gradient(to bottom, ${colorsArray.join(", ")}, transparent)`,
+          }}
+        />
+
+        <div className="flex flex-col gap-8">
+          {visibleItems.map((exp, index) => {
+            const color = colorsArray[index % colorsArray.length];
+            const dateRange = `${formatDate(exp.startDate)} – ${exp.isCurrent ? "Present" : formatDate(exp.endDate)}`;
+            const duration = calcDuration(
+              exp.startDate,
+              exp.isCurrent ? new Date() : exp.endDate,
+            );
+
+            return (
+              <motion.div
+                key={exp.id}
+                initial={{ opacity: 0, y: 40 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: "-50px" }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.15,
+                  ease: "easeOut",
+                }}
+                className="relative pl-10"
+              >
+                {/* Timeline Dot */}
+                <div className="absolute left-0 top-5 z-10">
+                  <div
+                    className="w-[14px] h-[14px] rounded-full border-2 transition-all duration-300"
+                    style={{
+                      borderColor: color,
+                      backgroundColor: exp.isCurrent ? color : "#0a0a0a",
+                      boxShadow: exp.isCurrent ? `0 0 12px ${color}99` : "none",
+                    }}
+                  />
+                </div>
+
+                {/* Card */}
+                <div
+                  className="group relative glass-card glass-card-hover px-6 py-5 sm:px-8 sm:py-6 cursor-default overflow-hidden"
+                  style={{
+                    borderLeft: `3px solid ${color}`,
+                    background: `linear-gradient(135deg, ${color}12 0%, transparent 60%), rgba(15, 23, 42, 0.5)`,
+                  }}
+                >
+                  {/* Top Row: Title + Badge + Date */}
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-4">
+                    <h3 className="text-white/90 font-semibold text-lg sm:text-xl">
+                      {exp.title}
+                    </h3>
+                    <div className="flex items-center gap-2.5 shrink-0">
+                      {exp.isCurrent && (
+                        <span
+                          className="px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wider rounded-full animate-pulse"
+                          style={{
+                            border: `1px solid ${color}99`,
+                            backgroundColor: `${color}26`,
+                            color: color,
+                          }}
+                        >
+                          Current
+                        </span>
+                      )}
+                      <span className="text-white/40 text-sm whitespace-nowrap">
+                        {dateRange}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Company + Duration pill */}
+                  <div className="flex items-center gap-3 mt-1">
+                    {exp.linkedin ? (
+                      <Link
+                        href={exp.linkedin}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm font-medium inline-flex items-center gap-1 transition-colors duration-200 hover:brightness-125"
+                        style={{ color }}
+                      >
+                        {exp.company}
+                        <svg
+                          className="w-3 h-3 opacity-60 group-hover:opacity-100 transition-opacity"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-4.5-4.5L21 3m0 0h-5.25M21 3v5.25"
+                          />
+                        </svg>
+                      </Link>
+                    ) : (
+                      <span
+                        className="text-sm font-medium inline-block"
+                        style={{ color }}
+                      >
+                        {exp.company}
+                      </span>
+                    )}
+
+                    {duration && (
+                      <span
+                        className="inline-flex items-center gap-1 px-2 py-0.5 text-[11px] font-medium rounded-md"
+                        style={{
+                          backgroundColor: `${color}0d`,
+                          color: `${color}cc`,
+                          border: `1px solid ${color}1a`,
+                        }}
+                      >
+                        <HiCalendarDays className="w-3 h-3" />
+                        {duration}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Description — Bullet Points */}
+                  <ul className="mt-3 space-y-1.5 list-none">
+                    {exp.description.map((point, i) => (
+                      <li
+                        key={i}
+                        className="flex items-start gap-2 text-white/60 text-sm leading-relaxed"
+                      >
+                        <span
+                          className="mt-1.5 shrink-0 w-1.5 h-1.5 rounded-full"
+                          style={{ backgroundColor: color }}
+                        />
+                        {point}
+                      </li>
+                    ))}
+                  </ul>
+
+                  {/* Hover glow overlay */}
+                  <div
+                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none rounded-xl"
+                    style={{
+                      background: `radial-gradient(circle at top left, ${color}15, transparent 70%)`,
+                    }}
+                  />
+                </div>
+
+                {/* Tech Stack Pills */}
+                {exp.techStack && exp.techStack.length > 0 && (
+                  <div className="flex gap-2 mt-4 flex-wrap">
+                    {exp.techStack.map((tech, i) => (
+                      <motion.span
+                        key={i}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
+                        viewport={{ once: true }}
+                        transition={{
+                          duration: 0.3,
+                          delay: index * 0.15 + i * 0.05,
+                        }}
+                        className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium transition-all duration-300 hover:brightness-125"
+                        style={{
+                          backgroundColor: `${color}1a`,
+                          color: color,
+                          border: `1px solid ${color}33`,
+                        }}
+                      >
+                        <tech.icon className="w-3 h-3" />
+                        {tech.title}
+                      </motion.span>
+                    ))}
+                  </div>
+                )}
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExperienceSection;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..ba49ee3
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,196 @@
+"use client";
+import Link from "next/link";
+import { navLinks, SocialLink } from "@/constants";
+import { INavlinks, ISocialLinks } from "@/types";
+import { config } from "@/lib/config";
+import { FaArrowUp, FaLocationDot, FaEnvelope, FaPhone } from "react-icons/fa6";
+
+const Footer = () => {
+  const { name, description } = config;
+  const year = new Date().getFullYear();
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <footer className="gradient-border-top mt-auto relative">
+      <div className="glass py-12 px-6 md:px-16 lg:px-24">
+        {/* ── Top Section: Brand + CTA ── */}
+        <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 mb-12">
+          <div className="flex flex-col gap-3 max-w-xl">
+            <h3 className="text-3xl md:text-4xl font-bold tracking-tight">
+              <span className="gradient-text">{name}</span>
+              <span className="text-accent animate-pulse">.</span>
+            </h3>
+            <p className="text-white/50 text-sm leading-relaxed">
+              {description}
+            </p>
+          </div>
+
+          {/* CTA / Tagline */}
+          <div className="flex flex-col items-start md:items-end gap-2">
+            <p className="text-white/30 text-xs uppercase tracking-[0.2em] font-medium">
+              Let&apos;s build something great
+            </p>
+            <Link
+              href="/contact"
+              className="group inline-flex items-center gap-2 px-5 py-2.5 rounded-full 
+                border border-accent/40 bg-accent/10 
+                hover:bg-accent/20 hover:border-accent/70
+                transition-all duration-300 text-sm font-medium text-accent hover:text-white"
+            >
+              Get in Touch
+              <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
+                →
+              </span>
+            </Link>
+          </div>
+        </div>
+
+        {/* ── Divider ── */}
+        <div className="w-full h-px bg-linear-to-r from-transparent via-white/10 to-transparent mb-10" />
+
+        {/* ── Middle Section: 3 Columns ── */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mb-12">
+          {/* Column 1: Quick Links */}
+          <div className="flex flex-col gap-4">
+            <h5 className="text-xs uppercase tracking-[0.15em] text-accent font-semibold mb-1">
+              Quick Links
+            </h5>
+            <nav className="flex flex-col gap-2.5">
+              {navLinks.map((link: INavlinks, index: number) => (
+                <Link
+                  key={index}
+                  href={link.href}
+                  className="group flex items-center gap-2 text-white/50 hover:text-white 
+                    transition-all duration-300 text-sm w-fit"
+                >
+                  <span
+                    className="inline-block w-0 group-hover:w-4 overflow-hidden 
+                      transition-all duration-300 text-accent text-xs"
+                  >
+                    →
+                  </span>
+                  {link.title}
+                </Link>
+              ))}
+            </nav>
+          </div>
+
+          {/* Column 2: Get In Touch */}
+          <div className="flex flex-col gap-4">
+            <h5 className="text-xs uppercase tracking-[0.15em] text-accent font-semibold mb-1">
+              Get In Touch
+            </h5>
+            <div className="flex flex-col gap-3">
+              <a
+                href={`mailto:${config.email}`}
+                className="group flex items-center gap-3 text-white/50 hover:text-white 
+                  transition-colors duration-300 text-sm"
+              >
+                <span
+                  className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 
+                  flex items-center justify-center group-hover:border-accent/40 
+                  group-hover:bg-accent/10 transition-all duration-300 shrink-0"
+                >
+                  <FaEnvelope className="text-xs text-white/40 group-hover:text-accent transition-colors duration-300" />
+                </span>
+                {config.email}
+              </a>
+
+              <div className="group flex items-center gap-3 text-white/50 text-sm">
+                <span
+                  className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 
+                  flex items-center justify-center shrink-0"
+                >
+                  <FaPhone className="text-xs text-white/40" />
+                </span>
+                +91 {config.phone}
+              </div>
+
+              <div className="group flex items-center gap-3 text-white/50 text-sm">
+                <span
+                  className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 
+                  flex items-center justify-center shrink-0"
+                >
+                  <FaLocationDot className="text-xs text-white/40" />
+                </span>
+                {config.location}
+              </div>
+            </div>
+          </div>
+
+          {/* Column 3: Social / Follow Me */}
+          <div className="flex flex-col gap-4">
+            <h5 className="text-xs uppercase tracking-[0.15em] text-accent font-semibold mb-1">
+              Follow Me
+            </h5>
+            <div className="flex flex-col gap-2.5">
+              {SocialLink.map((link: ISocialLinks, index: number) => (
+                <Link
+                  key={index}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={link.name}
+                  className="group flex items-center gap-3 text-white/50 hover:text-white 
+                    transition-all duration-300 text-sm w-fit"
+                >
+                  <span
+                    className="w-8 h-8 rounded-lg border border-white/10 bg-white/5
+                      flex items-center justify-center
+                      group-hover:border-accent/40 group-hover:bg-accent/10 
+                      transition-all duration-300 shrink-0"
+                  >
+                    <link.icon className="text-xs text-white/40 group-hover:text-accent transition-colors duration-300" />
+                  </span>
+                  <span className="flex flex-col">
+                    <span className="text-sm leading-tight">{link.name}</span>
+                    <span className="text-[11px] text-white/30 leading-tight">
+                      @{link.username}
+                    </span>
+                  </span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* ── Bottom Divider ── */}
+        <div className="w-full h-px bg-linear-to-r from-transparent via-white/10 to-transparent mb-6" />
+
+        {/* ── Bottom Bar ── */}
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-white/30 text-xs">
+            © {year} <span className="text-white/50">{name}</span>. All rights
+            reserved.
+          </p>
+
+          <p className="text-white/20 text-xs flex items-center gap-1.5">
+            Crafted with
+            <span className="text-red-400 text-sm animate-pulse">♥</span>
+            using Next.js & TypeScript
+          </p>
+        </div>
+      </div>
+
+      {/* ── Back to Top Button ── */}
+      <button
+        onClick={scrollToTop}
+        aria-label="Back to top"
+        className="absolute right-6 md:right-16 lg:right-24 -top-5
+          w-10 h-10 rounded-full 
+          bg-accent/20 border border-accent/40
+          flex items-center justify-center
+          hover:bg-accent/40 hover:border-accent/70 hover:scale-110
+          transition-all duration-300 
+          backdrop-blur-sm group"
+      >
+        <FaArrowUp className="text-xs text-accent group-hover:text-white transition-colors duration-300" />
+      </button>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c0ad0b0..48406df 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,57 +1,131 @@
-"use client"
+"use client";
 import Link from "next/link";
-import React, { useState } from "react";
+import { useState, useEffect } from "react";
 import MenuOverlay from "@/components/menubar/MenuOverlay";
 import { navLinks } from "@/constants";
 import { usePathname } from "next/navigation";
-import { FiCrosshair, FiMenu } from "react-icons/fi";
+import { FiX, FiMenu } from "react-icons/fi";
 import { Button } from "@/components/ui/button";
+import { motion, AnimatePresence } from "framer-motion";
 
 const Navbar = () => {
   const pathname = usePathname();
-  const [navbarOpen, setNavbarOpen] = useState(false)
+  const [navbarOpen, setNavbarOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
   return (
-    <nav className="py-6 text-white bg-black/20 backdrop-blur-xl relativ">
+    <nav
+      className={`py-4 text-white sticky top-0 transition-all duration-500 gradient-border-bottom ${
+        scrolled
+          ? "glass shadow-lg shadow-black/10"
+          : "bg-black/10 backdrop-blur-sm"
+      }`}
+    >
       <div className="container mx-auto flex justify-between items-center">
-      <Link href={'/'} className="text-3xl group font-semibold group-hover:text-accent">
-        Priyanshu <span className="text-accent group-hover:text-white">.</span>
-      </Link>
-      <div className="mobile-menu mt-8 block md:hidden">
-        {!navbarOpen ? (
-        <Button
-          onClick={() => setNavbarOpen(true)}
-          className="flex items-center px-3 py-2 border rounded border-slate-200 text-slate-200 hover:text-white hover:border-white"
+        <Link
+          href={"/"}
+          className="text-2xl xl:text-3xl group font-bold tracking-tight"
         >
-          <FiMenu className="h-5 w-5" />
-        </Button>
-        ) : (
-        <Button
-          onClick={() => setNavbarOpen(false)}
-          className="flex items-center px-3 py-2 border rounded border-slate-200 text-slate-200 hover:text-white hover:border-white"
+          <span className="gradient-text">Priyanshu</span>{" "}
+          <span className="text-accent group-hover:text-white transition-colors duration-300">
+            .
+          </span>
+        </Link>
+
+        {/* Mobile menu button */}
+        <div className="block lg:hidden">
+          <Button
+            onClick={() => setNavbarOpen(!navbarOpen)}
+            variant="ghost"
+            size="sm"
+            className="relative w-10 h-10 rounded-full border border-white/10 hover:border-accent transition-all duration-300"
+            aria-label={navbarOpen ? "Close menu" : "Open menu"}
+          >
+            <AnimatePresence mode="wait">
+              {navbarOpen ? (
+                <motion.div
+                  key="close"
+                  initial={{ rotate: -90, opacity: 0 }}
+                  animate={{ rotate: 0, opacity: 1 }}
+                  exit={{ rotate: 90, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <FiX className="h-5 w-5" />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="menu"
+                  initial={{ rotate: 90, opacity: 0 }}
+                  animate={{ rotate: 0, opacity: 1 }}
+                  exit={{ rotate: -90, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <FiMenu className="h-5 w-5" />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </Button>
+        </div>
+
+        {/* Desktop navigation */}
+        <div
+          className="menu hidden lg:flex text-white uppercase items-center gap-1"
+          id="navbar"
         >
-          <FiCrosshair className="h-5 w-5" />
-        </Button>
-        )}
+          {navLinks.map((link, index) => (
+            <Link
+              href={link.href}
+              key={index}
+              className={`relative px-4 py-2 rounded-full text-sm font-semibold tracking-wider
+                transition-all duration-300 ease-out
+                ${
+                  link.href === pathname
+                    ? "text-accent bg-accent/10"
+                    : "text-white/70 hover:text-white hover:bg-white/5"
+                }`}
+            >
+              {link.title}
+              {link.href === pathname && (
+                <motion.div
+                  layoutId="activeNavIndicator"
+                  className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-accent"
+                  style={{ boxShadow: "0 0 8px rgba(22, 100, 102, 0.8)" }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 30,
+                  }}
+                />
+              )}
+            </Link>
+          ))}
+        </div>
       </div>
-      <div 
-        className="menu hidden lg:flex text-white uppercase items-center gap-8" 
-        id="navbar"
-      >
-        {navLinks.map((link, index) => (
-          <Link 
-          href={link.href} 
-          key={index}
-          className={`${link.href === pathname && 'text-accent border-accent border-b-4'} font-bold hover:text-[#166466] sm:text-xl transition-all`}
+
+      {/* Mobile menu overlay */}
+      <AnimatePresence>
+        {navbarOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ duration: 0.3 }}
+            className="glass mt-2 mx-4 rounded-2xl overflow-hidden lg:hidden"
           >
-          {link.title}
-          </Link>
-        ))}
-      </div>
-      </div>
-      {navbarOpen ? <MenuOverlay setNavbarOpen={setNavbarOpen} /> : null}
+            <MenuOverlay setNavbarOpen={setNavbarOpen} />
+          </motion.div>
+        )}
+      </AnimatePresence>
     </nav>
-  )
-}
+  );
+};
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/src/components/ServiceSection.tsx b/src/components/ServiceSection.tsx
new file mode 100644
index 0000000..4f33f43
--- /dev/null
+++ b/src/components/ServiceSection.tsx
@@ -0,0 +1,121 @@
+"use client";
+import { SiWorkplace } from "react-icons/si";
+import { motion } from "framer-motion";
+import { services } from "@/constants";
+import Link from "next/link";
+import { FaArrowRight } from "react-icons/fa6";
+
+type Props = "full" | "half";
+
+export default function ServiceSection({ page }: { page: Props }) {
+  const servicesArray = page === "half" ? services.slice(0, 6) : services;
+  return (
+    <motion.div
+      className="mx-auto h-full mt-10 flex flex-col gap-7"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
+    >
+      <div className="flex gap-3 justify-between">
+        <div className="flex gap-3 flex-col text-accent">
+          <motion.h3
+            className="flex gap-3 text-accent text-3xl"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
+          >
+            <SiWorkplace className="fill-accent" />
+            Services
+          </motion.h3>
+          <motion.h2
+            className="text-white"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
+          >
+            Whats I Offer
+          </motion.h2>
+        </div>
+        {page === "full" && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
+            className="flex gap-3 items-center"
+          >
+            <Link
+              href="/contact"
+              className="flex items-center gap-2 px-4 py-2 border-b-2 border-white/25 hover:bg-white/15 transition-colors duration-300"
+            >
+              Contact Me
+              <FaArrowRight className="text-sm items-center justify-center" />
+            </Link>
+          </motion.div>
+        )}
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-10 gap-7">
+        {servicesArray.map((service, index) => (
+          <motion.div
+            key={index + service.title}
+            className="group relative flex flex-col gap-3 py-5 px-5 rounded-xl glass-card glass-card-hover overflow-hidden"
+            style={{
+              borderLeft: `3px solid ${service.color}`,
+              background: `linear-gradient(135deg, ${service.color}12 0%, transparent 60%), rgba(15, 23, 42, 0.5)`,
+            }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              delay: 2.4 + index * 0.1,
+              duration: 0.4,
+              ease: "easeOut",
+            }}
+          >
+            <motion.h3 className="flex items-center gap-4 text-white/90 font-semibold">
+              <service.icon
+                className="text-xl"
+                style={{ fill: service.color }}
+              />
+              {service.title}
+            </motion.h3>
+            <p className="text-white/70 text-sm leading-relaxed">
+              {service.description}
+            </p>
+            <div
+              className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none rounded-xl"
+              style={{
+                background: `radial-gradient(circle at top left, ${service.color}15, transparent 70%)`,
+              }}
+            />
+          </motion.div>
+        ))}
+        {page === "half" && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              delay: 2.4 + 5 * 0.1,
+              duration: 0.4,
+              ease: "easeOut",
+            }}
+            className="pl-5 h-full w-fit justify-start flex items-start "
+          >
+            <Link
+              href="/service"
+              className="text-white flex gap-2 px-4 py-2 rounded-xl border-2 border-white hover:border-white/50 hover:bg-white/10 transition-colors duration-300"
+            >
+              View more services
+              <motion.span
+                initial={{ x: 0 }}
+                animate={{ x: 5 }}
+                transition={{ duration: 0.5, ease: "easeOut" }}
+                className="flex items-center"
+              >
+                <FaArrowRight className="text-sm items-center" />
+              </motion.span>
+            </Link>
+          </motion.div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/components/Social.tsx b/src/components/Social.tsx
index d3d5a4e..3c24e1c 100644
--- a/src/components/Social.tsx
+++ b/src/components/Social.tsx
@@ -1,24 +1,25 @@
 import { SocialLink } from "@/constants";
-import { SocialLinksProps } from "@/types";
+import { ISocialLinks } from "@/types";
 import Link from "next/link";
-import React from "react";
 
 const Social = () => {
   return (
-    <div className="flex gap-4 sm:gap-6 justify-center items-center flex-wrap mt-4 sm:mt-8">
-      {SocialLink.map((link: SocialLinksProps, index: number) => (
+    <div className="flex gap-3 sm:gap-4 justify-center items-center flex-wrap mt-4 sm:mt-6">
+      {SocialLink.map((link: ISocialLinks, index: number) => (
         <Link
           key={index}
-          className="flex items-center z-1 gap-2 rounded-full justify-center w-10 h-10 sm:w-12 sm:h-12 border-accent text-base border-2
-            hover:bg-accent hover:text-primary group hover:transition-all duration-500"
+          className="flex items-center z-1 gap-2 rounded-full justify-center w-10 h-10 sm:w-11 sm:h-11
+            border border-accent/40 bg-accent/5 text-base
+            hover:bg-accent hover:border-accent hover:shadow-lg hover:shadow-accent/20
+            hover:scale-110 active:scale-95
+            group transition-all duration-300 ease-out"
           href={link.url}
-          about="Social Link"
           target="_blank"
           aria-label={link.name}
           rel="noopener noreferrer"
-          title={link.url}
+          title={link.name}
         >
-          <span className="text-xl sm:text-2xl group-hover:scale-150">
+          <span className="text-lg sm:text-xl text-white/70 group-hover:text-white transition-colors duration-300">
             <link.icon />
           </span>
         </Link>
diff --git a/src/components/animation/ScrambleText.tsx b/src/components/animation/ScrambleText.tsx
new file mode 100644
index 0000000..0f4caef
--- /dev/null
+++ b/src/components/animation/ScrambleText.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useScramble } from "use-scramble";
+import { motion, MotionProps } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface ScrambleTextProps extends MotionProps {
+  /** The text to be scrambled and displayed. Can be a string or an array of strings to cycle through. */
+  text: readonly string[];
+  /** Optional class name for styling */
+  className?: string;
+  /** Speed of the scramble effect (0-1), default 0.3 */
+  speed?: number;
+  /** Step per tick, default 1 */
+  step?: number;
+  /** Interval in ms between ticks, default 1 */
+  tick?: number;
+  /** Chance of character being replaced (0-1), default 0.5 */
+  chance?: number;
+  /** Whether to overdrive the scramble effect (boolean or number), default false */
+  overdrive?: boolean | number;
+  /** Character set for scrambling, default "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" */
+  scramble?: number;
+  /** Initial delay before starting the scramble effect */
+  delay?: number;
+  /** Whether to play on mount, default true */
+  playOnMount?: boolean;
+  /** Whether to replay on hover, default false */
+  replayOnHover?: boolean;
+  /** Duration to show each text when cycling through an array (ms), default 3000 */
+  cycleDuration?: number;
+}
+
+export const ScrambleText = ({
+  text,
+  className,
+  speed = 0.3,
+  step = 1,
+  tick = 1,
+  chance = 0.5,
+  overdrive = false,
+  scramble,
+  delay = 0,
+  playOnMount = true,
+  replayOnHover = false,
+  cycleDuration = 3000,
+  ...props
+}: ScrambleTextProps) => {
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+  const isArray = Array.isArray(text);
+  const currentText = isArray ? text[currentTextIndex] : text;
+
+  const { ref, replay } = useScramble({
+    text: currentText,
+    speed,
+    step,
+    tick,
+    chance,
+    overdrive,
+    scramble,
+    playOnMount,
+  });
+
+  useEffect(() => {
+    if (!isArray) return;
+
+    const interval = setInterval(() => {
+      setCurrentTextIndex((prev) => (prev + 1) % text.length);
+    }, cycleDuration);
+
+    return () => clearInterval(interval);
+  }, [isArray, text, cycleDuration]);
+
+  return (
+    <motion.span
+      ref={ref}
+      className={cn("inline-block whitespace-pre-wrap font-mono", className)}
+      onHoverStart={() => {
+        if (replayOnHover) {
+          replay();
+        }
+      }}
+      {...props}
+    />
+  );
+};
+
+export default ScrambleText;
diff --git a/src/components/menubar/Navlink.tsx b/src/components/menubar/Navlink.tsx
index 8609017..aa0a20f 100644
--- a/src/components/menubar/Navlink.tsx
+++ b/src/components/menubar/Navlink.tsx
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import React from 'react'
-import { NavlinksProps } from '@/types'
+import Link from "next/link";
+import React from "react";
+import { INavlinks } from "@/types";
 
-interface NavlinkProps extends NavlinksProps {
+interface NavlinkProps extends INavlinks {
   setNavbarOpen?: (open: boolean) => void;
 }
 
@@ -16,12 +16,12 @@ const Navlink = ({ href, title, setNavbarOpen }: NavlinkProps) => {
   return (
     <Link
       href={href}
-      className="block py-2 pl-3 pr-4 text-white hover:text-[#166466] hover:bg-[#166466] sm:text-xl rounded md:p-0 focus:bg-white focus:text-black"
+      className="block py-2 pl-3 pr-4 text-white hover:text-accent hover:bg-accent sm:text-xl rounded md:p-0 focus:bg-white focus:text-black"
       onClick={handleClick}
     >
       {title}
     </Link>
-  )
-}
+  );
+};
 
-export default Navlink
\ No newline at end of file
+export default Navlink;
diff --git a/src/components/resume/ResumePDF.tsx b/src/components/resume/ResumePDF.tsx
new file mode 100644
index 0000000..9d19abf
--- /dev/null
+++ b/src/components/resume/ResumePDF.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import {
+  Document,
+  Page,
+  Text,
+  View,
+  StyleSheet,
+  Link,
+} from "@react-pdf/renderer";
+import { experienceData } from "@/constants";
+import { ProjectData } from "@/constants/project";
+import { tech as techData } from "@/constants/resume";
+import { educationData } from "@/constants/resume";
+import { config } from "@/lib/config";
+import { calcDuration, formatDate } from "@/lib/dayjs";
+import { styles } from "./style";
+
+/* ────────────────────────────────────────────
+   Data slices
+   ──────────────────────────────────────────── */
+
+// Latest 3 work experiences
+const experiences = [...experienceData.items]
+  .sort((a, b) => b.startDate.getTime() - a.startDate.getTime())
+  .slice(0, 3);
+
+// Projects: IDs 8 (Collaro), 7 (Neotion), 6 (Byte), 5 (Droxy)
+const selectedProjectIds = [8, 7, 6, 5];
+const projects = selectedProjectIds
+  .map((id) => ProjectData.find((p) => p.id === id)!)
+  .filter(Boolean);
+
+// Latest education
+const education = educationData.items[0];
+
+// All skills
+const skills = techData;
+
+const SectionHeading = ({ icon, title }: { icon?: string; title: string }) => (
+  <>
+    <View style={styles.sectionHeader}>
+      {icon && <Text style={styles.sectionIcon}>{icon}</Text>}
+      <Text style={styles.sectionTitle}>{title}</Text>
+    </View>
+    <View style={styles.sectionDivider} />
+  </>
+);
+
+/* ────────────────────────────────────────────
+   Main Component
+   ──────────────────────────────────────────── */
+
+const ResumePDF = () => (
+  <Document
+    title={`${config.name} — Resume`}
+    author={config.name}
+    subject="Professional Resume"
+  >
+    <Page size="A4" style={styles.page}>
+      {/* ═══════════════════ HEADER ═══════════════════ */}
+      <View style={styles.header}>
+        <View style={styles.nameRow}>
+          <Text style={styles.name}>{config.name}</Text>
+        </View>
+        <Text style={styles.subtitle}>Full Stack Web Developer</Text>
+        <View style={styles.contactRow}>
+          <Text style={styles.contactItem}>{config.location}</Text>
+          <Text style={styles.contactSep}>|</Text>
+          <Text style={styles.contactItem}>{config.email}</Text>
+          <Text style={styles.contactSep}>|</Text>
+          <Link
+            href="https://www.linkedin.com/in/coderx85/"
+            style={styles.contactLink}
+          >
+            linkedin.com/in/coderx85
+          </Link>
+          <Text style={styles.contactSep}>|</Text>
+          <Link href="https://github.com/coderx85" style={styles.contactLink}>
+            github.com/coderx85
+          </Link>
+        </View>
+      </View>
+
+      {/* ═══════════════════ BODY ═══════════════════ */}
+      <View style={styles.body}>
+        {/* ─────── LEFT COLUMN ─────── */}
+        <View style={styles.leftColumn}>
+          {/* PROFILE */}
+          <SectionHeading title="Profile" />
+          <Text style={styles.profileText}>{config.description}</Text>
+
+          {/* EXPERIENCE */}
+          <SectionHeading title="Experience" />
+          {experiences.map((exp) => {
+            const dateRange = `${formatDate(exp.startDate)} – ${exp.isCurrent ? "Present" : formatDate(exp.endDate)}`;
+            const duration = calcDuration(
+              exp.startDate,
+              exp.isCurrent ? new Date() : exp.endDate,
+            );
+            return (
+              <View key={exp.id} style={styles.expItem} wrap={false}>
+                <View style={styles.expBullet} />
+                <View style={styles.expTitleRow}>
+                  <Text style={styles.expTitle}>{exp.title}</Text>
+                  <Text style={styles.expDateInfo}>
+                    {dateRange} · {duration}
+                  </Text>
+                </View>
+                <Text style={styles.expCompany}>{exp.company}</Text>
+                <View style={{ marginTop: 2 }}>
+                  {exp.description.map((point, i) => (
+                    <Text key={i} style={styles.expDesc}>
+                      • {point}
+                    </Text>
+                  ))}
+                </View>
+                {exp.techStack && exp.techStack.length > 0 && (
+                  <View style={styles.techRow}>
+                    {exp.techStack.map((t, i) => (
+                      <Text key={i} style={styles.techPill}>
+                        {t.title}
+                      </Text>
+                    ))}
+                  </View>
+                )}
+              </View>
+            );
+          })}
+
+          {/* PROJECTS */}
+          <SectionHeading icon="▲" title="Projects" />
+          {projects.map((proj) => (
+            <View key={proj.id} style={styles.projItem} wrap={false}>
+              <View style={styles.projBullet} />
+              <View style={styles.projTitleRow}>
+                <Text style={styles.projTitle}>{proj.title}</Text>
+                <View style={styles.projLinksRow}>
+                  {proj.gitUrl && proj.gitUrl.startsWith("http") && (
+                    <Link href={proj.gitUrl} style={styles.projLink}>
+                      GitHub ↗
+                    </Link>
+                  )}
+                  {proj.previewUrl && (
+                    <Link href={proj.previewUrl} style={styles.projLink}>
+                      Live ↗
+                    </Link>
+                  )}
+                </View>
+              </View>
+              {proj.description ? (
+                <Text style={styles.projDesc}>{proj.description}</Text>
+              ) : null}
+              <View style={styles.techRow}>
+                {Object.keys(proj.techStack).map((tech, i) => (
+                  <Text key={i} style={styles.techPill}>
+                    {tech}
+                  </Text>
+                ))}
+              </View>
+            </View>
+          ))}
+        </View>
+
+        {/* ─────── RIGHT COLUMN (Sidebar) ─────── */}
+        <View style={styles.rightColumn}>
+          {/* PERSONAL DETAILS */}
+          <SectionHeading icon="☆" title="Personal Details" />
+          {[
+            { label: "Name", value: config.name },
+            { label: "Phone", value: config.phone },
+            { label: "Email", value: config.email },
+            {
+              label: "Website",
+              value: "coderx85.vercel.app",
+              href: "https://coderx85.vercel.app",
+            },
+            { label: "Location", value: config.location },
+          ].map((item, i) => (
+            <View key={i} style={styles.detailRow}>
+              <Text style={styles.detailLabel}>{item.label}</Text>
+              {item.href ? (
+                <Link href={item.href} style={styles.detailLink}>
+                  {item.value}
+                </Link>
+              ) : (
+                <Text style={styles.detailValue}>{item.value}</Text>
+              )}
+            </View>
+          ))}
+
+          {/* TECHNICAL SKILLS */}
+          <View style={{ marginTop: 14 }}>
+            <SectionHeading title="Technical Skills" />
+            {skills.map((category, i) => (
+              <View key={i} style={styles.skillRow}>
+                <Text style={styles.skillLabel}>{category.title}</Text>
+                <Text style={styles.skillValue}>
+                  {category.techStack.map((tech) => tech.title).join(", ")}
+                </Text>
+              </View>
+            ))}
+          </View>
+
+          {/* EDUCATION */}
+          <View style={{ marginTop: 14 }}>
+            <SectionHeading title="Education" />
+            <Text style={styles.eduTitle}>{education.title}</Text>
+            <Text style={styles.eduDuration}>{education.duration}</Text>
+            <Text style={styles.eduInstitute}>{education.institute}</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* ═══════════════════ FOOTER ═══════════════════ */}
+      <Text style={styles.footer}>
+        Generated from coderx85.vercel.app ·{" "}
+        {new Date().toLocaleDateString("en-IN", {
+          month: "short",
+          year: "numeric",
+        })}
+      </Text>
+    </Page>
+  </Document>
+);
+
+export default ResumePDF;
diff --git a/src/components/resume/style.ts b/src/components/resume/style.ts
new file mode 100644
index 0000000..9773a48
--- /dev/null
+++ b/src/components/resume/style.ts
@@ -0,0 +1,332 @@
+import { StyleSheet } from "@react-pdf/renderer";
+// import { ACCENT } from "./ResumePDF";
+
+export const C = {
+  accent: "#C44536",
+  accentLight: "#FBEAE8",
+  black: "#1a1a1a",
+  darkGray: "#2d2d2d",
+  medGray: "#555555",
+  lightGray: "#999999",
+  veryLightGray: "#e5e5e5",
+  border: "#dddddd",
+  bg: "#ffffff",
+  pillBg: "#f2f2f2",
+  progressTrack: "#e8e8e8",
+};
+
+export const styles = StyleSheet.create({
+  /* ── Page ── */
+  page: {
+    fontFamily: "Helvetica",
+    fontSize: 8,
+    color: C.black,
+    backgroundColor: C.bg,
+    lineHeight: 1.4,
+  },
+
+  /* ── Two-column body ── */
+  body: {
+    flexDirection: "row",
+    flex: 1,
+  },
+  leftColumn: {
+    width: "62%",
+    paddingTop: 20,
+    paddingLeft: 32,
+    paddingRight: 20,
+    paddingBottom: 30,
+  },
+  rightColumn: {
+    width: "38%",
+    backgroundColor: "#FAFAFA",
+    paddingTop: 20,
+    paddingLeft: 18,
+    paddingRight: 24,
+    paddingBottom: 30,
+    borderLeftWidth: 1,
+    borderLeftColor: C.veryLightGray,
+  },
+
+  /* ── Header (full width, top of page) ── */
+  header: {
+    paddingHorizontal: 32,
+    paddingTop: 28,
+    paddingBottom: 16,
+    borderBottomWidth: 2,
+    borderBottomColor: C.accent,
+  },
+  nameRow: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 12,
+    marginBottom: 8,
+  },
+  name: {
+    fontSize: 20,
+    fontFamily: "Helvetica-Bold",
+    color: C.black,
+    letterSpacing: 0.5,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: C.accent,
+    fontFamily: "Helvetica",
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  contactRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 4,
+    marginTop: 8,
+    alignItems: "center",
+  },
+  contactItem: {
+    fontSize: 6,
+    color: C.medGray,
+  },
+  contactLink: {
+    fontSize: 6,
+    color: C.medGray,
+    textDecoration: "none",
+  },
+  contactSep: {
+    fontSize: 6,
+    paddingHorizontal: 2,
+    color: C.lightGray,
+    marginHorizontal: 3,
+  },
+
+  /* ── Section headings ── */
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    margin: 2,
+  },
+  sectionIcon: {
+    fontSize: 7,
+    color: C.accent,
+  },
+  sectionTitle: {
+    fontSize: 10,
+    fontFamily: "Helvetica-Bold",
+    color: C.accent,
+    textTransform: "uppercase",
+    letterSpacing: 1,
+  },
+  sectionDivider: {
+    height: 1,
+    backgroundColor: C.veryLightGray,
+    marginBottom: 2,
+  },
+
+  /* ── Profile ── */
+  profileText: {
+    fontSize: 9,
+    color: C.darkGray,
+    lineHeight: 1.6,
+    marginBottom: 14,
+  },
+
+  /* ── Experience ── */
+  expItem: {
+    marginBottom: 12,
+    paddingLeft: 12,
+  },
+  expBullet: {
+    position: "absolute",
+    left: 0,
+    top: 3,
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: C.accent,
+  },
+  expTitleRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: 1,
+  },
+  expTitle: {
+    fontSize: 10,
+    fontFamily: "Helvetica-Bold",
+    color: C.black,
+    maxWidth: "60%",
+  },
+  expDateInfo: {
+    fontSize: 8,
+    color: C.lightGray,
+    textAlign: "right",
+  },
+  expCompany: {
+    fontSize: 9,
+    fontFamily: "Helvetica-Oblique",
+    color: C.accent,
+    marginBottom: 3,
+  },
+  expDesc: {
+    fontSize: 8.5,
+    color: C.medGray,
+    lineHeight: 1.55,
+    marginBottom: 4,
+  },
+  techRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 3,
+  },
+  techPill: {
+    fontSize: 7,
+    color: C.medGray,
+    backgroundColor: C.pillBg,
+    borderRadius: 3,
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    borderWidth: 0.5,
+    borderColor: C.border,
+  },
+
+  /* ── Projects ── */
+  projItem: {
+    marginBottom: 10,
+    paddingLeft: 12,
+  },
+  projBullet: {
+    position: "absolute",
+    left: 0,
+    top: 3,
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: C.accent,
+  },
+  projTitleRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: 1,
+  },
+  projTitle: {
+    fontSize: 10,
+    fontFamily: "Helvetica-Bold",
+    color: C.black,
+  },
+  projLinksRow: {
+    flexDirection: "row",
+    gap: 6,
+  },
+  projLink: {
+    fontSize: 7.5,
+    color: C.accent,
+    textDecoration: "none",
+  },
+  projDesc: {
+    fontSize: 8.5,
+    color: C.medGray,
+    lineHeight: 1.5,
+    marginBottom: 3,
+  },
+
+  /* ── Right column: Personal Details ── */
+  detailRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 6,
+    paddingBottom: 5,
+    borderBottomWidth: 0.5,
+    borderBottomColor: C.veryLightGray,
+  },
+  detailLabel: {
+    fontSize: 8.5,
+    color: C.lightGray,
+  },
+  detailValue: {
+    fontSize: 8.5,
+    color: C.darkGray,
+    fontFamily: "Helvetica-Bold",
+    textAlign: "right",
+  },
+  detailLink: {
+    fontSize: 8.5,
+    color: C.accent,
+    fontFamily: "Helvetica-Bold",
+    textDecoration: "none",
+    textAlign: "right",
+  },
+
+  /* ── Right column: Skills with progress bars ── */
+  skillSection: {
+    marginBottom: 10,
+    display: "flex",
+    gap: 2,
+    flexDirection: "row",
+  },
+  skillCategoryName: {
+    fontSize: 9,
+    fontFamily: "Helvetica-Bold",
+    color: C.darkGray,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  skillCategoryIcon: {
+    fontSize: 8,
+    color: C.accent,
+    marginRight: 4,
+  },
+  skillLabel: {
+    fontSize: 8,
+    fontFamily: "Helvetica-Bold",
+    color: C.darkGray,
+    width: 75,
+  },
+  skillValue: {
+    fontSize: 8,
+    color: C.black,
+    flex: 1,
+    lineHeight: 1.5,
+  },
+  skillRow: {
+    flexDirection: "row",
+    gap: 6,
+    alignItems: "flex-start",
+    marginBottom: 5,
+  },
+  skillName: {
+    fontSize: 8,
+    color: C.medGray,
+    width: 62,
+  },
+
+  /* ── Right column: Education ── */
+  eduTitle: {
+    fontSize: 9.5,
+    fontFamily: "Helvetica-Bold",
+    color: C.black,
+    marginBottom: 1,
+  },
+  eduDuration: {
+    fontSize: 8,
+    color: C.lightGray,
+    marginBottom: 2,
+  },
+  eduInstitute: {
+    fontSize: 8.5,
+    fontFamily: "Helvetica-Oblique",
+    color: C.medGray,
+  },
+
+  /* ── Footer ── */
+  footer: {
+    position: "absolute",
+    bottom: 10,
+    left: 32,
+    right: 24,
+    textAlign: "center",
+    fontSize: 7,
+    color: C.lightGray,
+  },
+});
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index a694ed5..9c92db9 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,9 +1,8 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -11,15 +10,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-[48px] rounded-md border-white/10 focus:border-accent font-light bg-primary px-4 py-5 text-base placeholder:text-white/60 outline-hidden",
-          className
+          "flex h-[48px] rounded-md border-white/10 focus:border-accent font-light bg-primary px-4 py-5 text-base placeholder:text-white outline-hidden",
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index c098b87..f13a500 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,28 +1,38 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
+
+interface ProgressProps extends React.ComponentPropsWithoutRef<
+  typeof ProgressPrimitive.Root
+> {
+  indicatorClassName?: string;
+  indicatorStyle?: React.CSSProperties;
+}
 
 const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, indicatorClassName, indicatorStyle, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-gray-600",
-      className
+      className,
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-accent transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      className={cn("h-full w-full flex-1 transition-all", indicatorClassName)}
+      style={{
+        transform: `translateX(-${100 - (value || 0)}%)`,
+        ...indicatorStyle,
+      }}
     />
   </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };
diff --git a/src/constants/config.ts b/src/constants/config.ts
index e754091..1cce012 100644
--- a/src/constants/config.ts
+++ b/src/constants/config.ts
@@ -1,18 +1,15 @@
-// Centralized config constants for user profile
-export interface ConfigData {
-  name: string;
-  description: string;
-  username: string;
-  email: string;
-  phone: string;
-  location: string;
-}
-
-export const configData: ConfigData = {
+export const config = {
   name: "Priyanshu",
-  description: "A passionate web developer skilled in front-end and back-end technologies. With experience in React, Node.js, and DevOps tools.",
+  description:
+    "A passionate web developer skilled in front-end and back-end technologies. With experience in React, Node.js, and DevOps tools.",
+  profile: [
+    "Software engineer with 1+ years of experience, including 10+ personal projects.",
+    "Experience in full stack web development using modern technologies.",
+    "Strong problem-solving skills and ability to work in a team.",
+    "From client to server side development, I own the full stack.",
+  ],
   username: "Coderx85",
   email: "work.priyanshu085@gmail.com",
   phone: "7071915785",
   location: "India",
-};
+} as const;
diff --git a/src/constants/navLinks.ts b/src/constants/navLinks.ts
index f8d1356..ac8b629 100644
--- a/src/constants/navLinks.ts
+++ b/src/constants/navLinks.ts
@@ -1,8 +1,9 @@
-import { NavlinksProps } from '../types'
+import { INavlinks } from "../types";
 
-export const navLinks: NavlinksProps[] = [
+export const navLinks: INavlinks[] = [
   { title: "Home", href: "/" },
   { title: "Resume", href: "/resume" },
+  { title: "Experience", href: "/experience" },
   { title: "Work", href: "/work" },
   { title: "Service", href: "/service" },
   { title: "Contact", href: "/contact" },
diff --git a/src/constants/resume.ts b/src/constants/resume.ts
index 41025c7..8e25b80 100644
--- a/src/constants/resume.ts
+++ b/src/constants/resume.ts
@@ -1,40 +1,83 @@
 import {
+  SiAmazonec2,
   SiAppwrite,
   SiArgo,
   SiCplusplus,
   SiDocker,
-  SiExpress,
   SiFastapi,
+  SiFastify,
   SiGit,
   SiGithub,
-  SiGithubactions,
-  SiGithubpages,
   SiGrafana,
   SiHelm,
   SiKubernetes,
+  SiLanguagetool,
   SiMongodb,
   SiNextdotjs,
   SiPhp,
   SiPostgresql,
   SiPrometheus,
   SiPulumi,
-  SiSqlite,
+  SiServerless,
   SiStreamlit,
-  SiTerraform,
   SiTypescript,
-  SiVercel,
-  SiVite,
+  SiVitest,
 } from "react-icons/si";
 import {
   FaCss3,
+  FaDesktop,
   FaHtml5,
   FaJs,
   FaNodeJs,
   FaPython,
   FaReact,
-  FaVectorSquare,
+  FaTools,
 } from "react-icons/fa";
-import { AbtData, EduProps, ExpProps, SkillProps } from "@/types";
+import {
+  AbtData,
+  EduProps,
+  IExperience,
+  SkillProps,
+  TCategory,
+  TTechStack,
+} from "@/types";
+import {
+  FastifyOriginalIcon,
+  NextjsOriginalIcon,
+  PrometheusOriginalIcon,
+  TypescriptOriginalIcon,
+  TailwindcssOriginalIcon,
+  PostgresqlOriginalIcon,
+  MongodbOriginalIcon,
+  DockerOriginalIcon,
+  KubernetesOriginalIcon,
+  GrafanaOriginalIcon,
+  NodejsOriginalIcon,
+  JavascriptOriginalIcon,
+  BashOriginalIcon,
+  PythonOriginalIcon,
+  AppwriteOriginalIcon,
+  VercelOriginalIcon,
+  NestjsOriginalIcon,
+  ReactOriginalIcon,
+  Html5OriginalIcon,
+  FastapiOriginalIcon,
+  GoOriginalIcon,
+  ExpressOriginalIcon,
+  JenkinsOriginalIcon,
+  WebpackOriginalIcon,
+  ViteOriginalIcon,
+  RabbitmqOriginalIcon,
+  RedisOriginalIcon,
+  AmazonwebservicesOriginalWordmarkIcon,
+  NginxOriginalIcon,
+  ApacheOriginalIcon,
+  UbuntuOriginalIcon,
+  VuejsOriginalIcon,
+  JestPlainIcon,
+  HelmOriginalIcon,
+} from "@devicon/react";
+import { FaAsymmetrik, FaBuilding, FaCloud, FaDatabase } from "react-icons/fa6";
 
 export const educationData: EduProps = {
   title: "education",
@@ -94,7 +137,7 @@ export const aboutData: AbtData = {
   ],
 };
 
-export const experienceData: ExpProps = {
+export const experienceData: IExperience = {
   title: "experience",
   description: "I have worked as a web developer at XYZ company for 2 years.",
   items: [
@@ -102,28 +145,149 @@ export const experienceData: ExpProps = {
       id: 0,
       title: "Full Stack Web Intern",
       company: "Websmiths",
-      duration: "09/2023 - 11/2025",
-      description:
-        "Developed responsive web applications, collaborated with designers, and optimized performance, enhancing user experience.",
+      startDate: new Date("2025-09-01"),
+      endDate: new Date("2025-11-01"),
+      companyUrl: "https://www.websmiths.io/",
+      description: [
+        "Built and deployed full-stack web applications using Next.js and Fastify, serving 500+ daily active users",
+        "Designed and implemented RESTful APIs with PostgreSQL, reducing average query response time by 35%",
+        "Containerized services with Docker and deployed to AWS EC2, achieving 99.9% uptime",
+        "Wrote comprehensive unit and integration tests with Vitest, maintaining 90%+ code coverage",
+      ],
       linkedin: "https://www.linkedin.com/company/websmiths",
+      isCurrent: false,
+      techStack: [
+        {
+          title: "Next.js",
+          icon: SiNextdotjs,
+          level: "Advanced",
+        },
+        {
+          title: "Fastify",
+          icon: SiFastify,
+          level: "Advanced",
+        },
+        {
+          title: "Vitest",
+          icon: SiVitest,
+          level: "Advanced",
+        },
+        {
+          title: "Postgres",
+          icon: SiPostgresql,
+          level: "Advanced",
+        },
+        {
+          title: "Docker",
+          icon: SiDocker,
+          level: "Advanced",
+        },
+        {
+          title: "AWS",
+          icon: SiAmazonec2,
+          level: "Advanced",
+        },
+      ],
     },
     {
       id: 1,
       title: "Frontend Web Intern",
       company: "JarGoan",
-      duration: "05/2024 - 06/2024",
-      description:
-        "Improved platform usability by 20.6%, increased user engagement by 26.53%, and led UI design initiatives.",
+      startDate: new Date("2024-05-01"),
+      endDate: new Date("2024-06-01"),
+      companyUrl: "https://www.jargoan.com/",
+      description: [
+        "Improved platform usability by 20.6% through responsive redesigns and accessibility enhancements",
+        "Increased user engagement by 26.53% by implementing interactive UI components with React",
+        "Led UI design initiatives collaborating with a cross-functional team of designers and developers",
+        "Optimized front-end performance by lazy-loading assets and reducing initial bundle size by 18%",
+      ],
       linkedin: "https://www.linkedin.com/company/Jargoan",
+      techStack: [
+        {
+          title: "React",
+          icon: FaReact,
+          level: "Advanced",
+        },
+        {
+          title: "HTML",
+          icon: FaHtml5,
+          level: "Advanced",
+        },
+        {
+          title: "CSS",
+          icon: FaCss3,
+          level: "Advanced",
+        },
+        {
+          title: "JavaScript",
+          icon: FaJs,
+          level: "Intermediate",
+        },
+      ],
     },
     {
       id: 2,
       title: "AI Intern",
       company: "Tublian",
-      duration: "04/2024 - 06/2024",
-      description:
-        "Enhanced AI proficiency, crafted a chatbot increasing user interaction by 50%, and actively participated in AI sessions.",
+      startDate: new Date("2024-04-01"),
+      endDate: new Date("2024-06-01"),
+      description: [
+        "Developed an AI-powered chatbot using Python and FastAPI, increasing user interaction by 50%",
+        "Built and deployed Streamlit dashboards for real-time model performance monitoring",
+        "Participated in weekly AI research sessions, presenting findings on NLP and prompt engineering",
+        "Integrated third-party LLM APIs to automate content generation workflows for internal tools",
+      ],
       linkedin: "https://www.linkedin.com/company/Tublian",
+      techStack: [
+        {
+          title: "Python",
+          icon: FaPython,
+          level: "Advanced",
+        },
+        {
+          title: "FastAPI",
+          icon: SiFastapi,
+          level: "Intermediate",
+        },
+        {
+          title: "Streamlit",
+          icon: SiStreamlit,
+          level: "Intermediate",
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: "Contributor",
+      company: "Winter of Code Social 2025",
+      startDate: new Date("2025-11-01"),
+      endDate: new Date("2026-01-31"),
+      description: [
+        "Contributed 15+ pull requests to open-source repositories, improving documentation and fixing bugs",
+        "Collaborated with a global team of 50+ developers using Git-based workflows and code reviews",
+        "Refactored legacy TypeScript modules, improving type safety and reducing runtime errors by 25%",
+        "Mentored junior contributors on Git best practices, branching strategies, and CI/CD pipelines",
+      ],
+      linkedin: "https://www.linkedin.com/company/websmiths",
+      isCurrent: false,
+      techStack: [
+        {
+          title: "Git",
+          icon: SiGit,
+          level: "Intermediate",
+        },
+        {
+          title: "GitHub",
+          icon: SiGithub,
+          level: "Intermediate",
+        },
+        {
+          title: "TypeScript",
+          icon: SiTypescript,
+          level: "Intermediate",
+        },
+      ],
     },
   ],
 };
@@ -275,3 +439,313 @@ export const skillsData: SkillProps = {
     },
   ],
 };
+
+// ─── Color scheme for tech category cards ───
+export const categoryColors: Record<
+  TCategory,
+  { text: string; border: string; bg: string; fill: string }
+> = {
+  Frontend: {
+    text: "text-cyan-400",
+    border: "border-cyan-400/30",
+    bg: "bg-cyan-400/5",
+    fill: "fill-cyan-400",
+  },
+  Backend: {
+    text: "text-emerald-400",
+    border: "border-emerald-400/30",
+    bg: "bg-emerald-400/5",
+    fill: "fill-emerald-400",
+  },
+  Languages: {
+    text: "text-amber-400",
+    border: "border-amber-400/30",
+    bg: "bg-amber-400/5",
+    fill: "fill-amber-400",
+  },
+  Database: {
+    text: "text-violet-400",
+    border: "border-violet-400/30",
+    bg: "bg-violet-400/5",
+    fill: "fill-violet-400",
+  },
+  "DevOps & Cloud": {
+    text: "text-sky-400",
+    border: "border-sky-400/30",
+    bg: "bg-sky-400/5",
+    fill: "fill-sky-400",
+  },
+  Monitoring: {
+    text: "text-orange-400",
+    border: "border-orange-400/30",
+    bg: "bg-orange-400/5",
+    fill: "fill-orange-400",
+  },
+  Infrastructure: {
+    text: "text-rose-400",
+    border: "border-rose-400/30",
+    bg: "bg-rose-400/5",
+    fill: "fill-rose-400",
+  },
+  Frameworks: {
+    text: "text-fuchsia-400",
+    border: "border-fuchsia-400/30",
+    bg: "bg-fuchsia-400/5",
+    fill: "fill-fuchsia-400",
+  },
+};
+
+export const tech: readonly TTechStack[] = [
+  {
+    title: "Frontend",
+    icon: FaDesktop,
+    techStack: [
+      {
+        title: "React",
+        icon: ReactOriginalIcon,
+        level: "Advanced",
+        color: "#61DAFB",
+      },
+      {
+        title: "HTML",
+        icon: Html5OriginalIcon,
+        level: "Advanced",
+        color: "#E34F26",
+      },
+      {
+        title: "Taiwind",
+        icon: TailwindcssOriginalIcon,
+        level: "Advanced",
+        color: "#06B6D4",
+      },
+      {
+        title: "Vue JS",
+        icon: VuejsOriginalIcon,
+        level: "Advanced",
+        color: "#4FC08D",
+      },
+    ],
+  },
+  {
+    title: "Backend",
+    icon: SiServerless,
+    techStack: [
+      {
+        title: "Node JS",
+        icon: NodejsOriginalIcon,
+        level: "Advanced",
+        color: "#339933",
+      },
+      {
+        title: "Go",
+        icon: GoOriginalIcon,
+        level: "Beginner",
+        color: "#00ADD8",
+      },
+      {
+        title: "FastAPI",
+        icon: FastapiOriginalIcon,
+        level: "Intermediate",
+        color: "#009688",
+      },
+      {
+        title: "Jest",
+        icon: JestPlainIcon,
+        level: "Advanced",
+        color: "#99425B",
+      },
+    ],
+  },
+  {
+    title: "Languages",
+    icon: SiLanguagetool,
+    techStack: [
+      {
+        title: "Javascript",
+        icon: JavascriptOriginalIcon,
+        level: "Intermediate",
+        color: "#F7DF1E",
+      },
+      {
+        title: "Typescript",
+        icon: TypescriptOriginalIcon,
+        level: "Intermediate",
+        color: "#3178C6",
+      },
+      {
+        title: "Shell",
+        icon: BashOriginalIcon,
+        level: "Intermediate",
+        color: "#4EAA25",
+      },
+      {
+        title: "Python",
+        icon: PythonOriginalIcon,
+        level: "Advanced",
+        color: "#3776AB",
+      },
+    ],
+  },
+  {
+    title: "Database",
+    icon: FaDatabase,
+    techStack: [
+      {
+        title: "PostgreSQL",
+        icon: PostgresqlOriginalIcon,
+        level: "Intermediate",
+        color: "#4169E1",
+      },
+      {
+        title: "MongoDB",
+        icon: MongodbOriginalIcon,
+        level: "Intermediate",
+        color: "#47A248",
+      },
+      {
+        title: "Appwrite",
+        icon: AppwriteOriginalIcon,
+        level: "Intermediate",
+        color: "#FD366E",
+      },
+      {
+        title: "Redis",
+        icon: RedisOriginalIcon,
+        level: "Intermediate",
+        color: "#DC382D",
+      },
+    ],
+  },
+  {
+    title: "DevOps & Cloud",
+    icon: FaCloud,
+    techStack: [
+      {
+        title: "Docker",
+        icon: DockerOriginalIcon,
+        level: "Advanced",
+        color: "#2496ED",
+      },
+      {
+        title: "Kubernetes",
+        icon: KubernetesOriginalIcon,
+        level: "Beginner",
+        color: "#326CE5",
+      },
+      {
+        title: "Jenkins",
+        icon: JenkinsOriginalIcon,
+        level: "Intermediate",
+        color: "#D24939",
+      },
+      {
+        title: "AWS",
+        icon: AmazonwebservicesOriginalWordmarkIcon,
+        level: "Intermediate",
+        color: "#FF9900",
+      },
+    ],
+  },
+  {
+    title: "Infrastructure",
+    icon: FaBuilding,
+    techStack: [
+      {
+        title: "Nginx",
+        icon: NginxOriginalIcon,
+        level: "Advanced",
+        color: "#009639",
+      },
+      {
+        title: "Apache",
+        icon: ApacheOriginalIcon,
+        level: "Intermediate",
+        color: "#D22128",
+      },
+      {
+        title: "Ubuntu",
+        icon: UbuntuOriginalIcon,
+        level: "Intermediate",
+        color: "#E95420",
+      },
+    ],
+  },
+  {
+    title: "Monitoring",
+    icon: FaAsymmetrik,
+    techStack: [
+      {
+        title: "Grafana",
+        icon: GrafanaOriginalIcon,
+        level: "Beginner",
+        color: "#F46800",
+      },
+      {
+        title: "Prometheus",
+        icon: PrometheusOriginalIcon,
+        level: "Beginner",
+        color: "#E6522C",
+      },
+      {
+        title: "Vector",
+        icon: VercelOriginalIcon,
+        level: "Beginner",
+        color: "#FFFFFF",
+      },
+    ],
+  },
+  {
+    title: "Frameworks",
+    icon: FaTools,
+    techStack: [
+      {
+        title: "Fastify",
+        icon: FastifyOriginalIcon,
+        level: "Advanced",
+        color: "#FFFFFF",
+      },
+      {
+        title: "NestJS",
+        icon: NestjsOriginalIcon,
+        level: "Intermediate",
+        color: "#E0234E",
+      },
+      {
+        title: "NextJS",
+        icon: NextjsOriginalIcon,
+        level: "Advanced",
+        color: "#FFFFFF",
+      },
+      {
+        title: "Express",
+        icon: ExpressOriginalIcon,
+        level: "Advanced",
+        color: "#FFFFFF",
+      },
+      {
+        title: "RabbitMQ",
+        icon: RabbitmqOriginalIcon,
+        level: "Advanced",
+        color: "#FF6600",
+      },
+      {
+        title: "Webpack",
+        icon: WebpackOriginalIcon,
+        level: "Advanced",
+        color: "#8DD6F9",
+      },
+      {
+        title: "Vite",
+        icon: ViteOriginalIcon,
+        level: "Advanced",
+        color: "#646CFF",
+      },
+      {
+        title: "Helm",
+        icon: HelmOriginalIcon,
+        level: "Advanced",
+        color: "#263238",
+      },
+    ],
+  },
+];
diff --git a/src/constants/services.ts b/src/constants/services.ts
index be5bfcd..2b51586 100644
--- a/src/constants/services.ts
+++ b/src/constants/services.ts
@@ -1,22 +1,90 @@
-export const services = [
+import { IconType } from "react-icons/lib";
+import {
+  SiApifox,
+  SiCodefactor,
+  SiFramer,
+  SiLangchain,
+  SiLinux,
+  SiTailwindcss,
+} from "react-icons/si";
+import { FaDatabase, FaGears, FaPaypal, FaShield } from "react-icons/fa6";
+
+type TServices = {
+  icon: IconType;
+  title: string;
+  description: string;
+  color: string;
+};
+
+export const services: TServices[] = [
   {
-    num: "01",
-    title: "Full Stack Web Development",
-    description: "Create responsive and user-friendly interfaces, ensuring optimal performance and user experience.",
+    title: "Entreprise Model",
+    icon: FaGears,
+    description:
+      "Build scalable and maintainable enterprise-grade applications with clean architecture and best practices.",
+    color: "#4ade80", // sage green
   },
   {
-    num: "02",
-    title: "Backend Development and Database Management",
-    description: "Develop robust backend systems to support your web applications and services.",
+    title: "Payment gateway",
+    icon: FaPaypal,
+    description:
+      "Integrate payment gateways to enable secure and seamless transactions.",
+    color: "#a78bfa", // soft violet
+  },
+  {
+    title: "Authentication ",
+    icon: FaShield,
+    description:
+      "Integrate authentication services to secure your application.",
+    color: "#fbbf24", // warm amber
+  },
+  {
+    title: "API Integration",
+    icon: SiApifox,
+    description:
+      "Offers API integration services to help businesses and individuals achieve their goals.",
+    color: "#fb7185", // dusty rose
   },
   {
-    num: "03",
     title: "DevOps Implementation",
-    description: "I can help you rank your website on the first page of Google.",
+    icon: SiLinux,
+    description:
+      "I can help you rank your website on the first page of Google.",
+    color: "#2dd4bf", // teal
   },
   {
-    num: "04",
     title: "UI/UX Design",
-    description: "Lead UI design initiatives to enhance platform usability and user satisfaction.",
+    icon: SiTailwindcss,
+    description:
+      "Lead UI design initiatives to enhance platform usability and user satisfaction.",
+    color: "#38bdf8", // sky blue
+  },
+  {
+    title: "Framework-development",
+    icon: SiFramer,
+    description:
+      "Leverage modern frameworks like Next.js, Node.js, Fastify. to build scalable and maintainable applications.",
+    color: "#e879f9", // orchid
+  },
+  {
+    title: "Code Reviewer",
+    icon: SiCodefactor,
+    description:
+      "Detailed code using best code writing pratices, security guidelines, industry standards and also using the AI tools.",
+    color: "#818cf8", // slate indigo
+  },
+  {
+    title: "Database Migration",
+    icon: FaDatabase,
+    description:
+      "Expertly handle data migration across various database systems while maintaining data integrity and minimizing downtime.",
+    color: "#f0abfc", // soft magenta
+  },
+  {
+    title: "LLM Integration",
+    icon: SiLangchain,
+    description:
+      "Integrate LLMs to enhance your application with AI capabilities.",
+    color: "#67e8f9", // cool cyan
   },
 ];
diff --git a/src/constants/socialLinks.ts b/src/constants/socialLinks.ts
index ee9d8a8..4f813e2 100644
--- a/src/constants/socialLinks.ts
+++ b/src/constants/socialLinks.ts
@@ -1,10 +1,41 @@
-import { SocialLinksProps } from '../types'
-import { FaEnvelope, FaLinkedin, FaTwitter, FaGithub, FaReddit } from 'react-icons/fa'
+import { LinkedinOriginalIcon, TwitterOriginalIcon } from "@devicon/react";
+import { ISocialLinks } from "../types";
+import { FaEnvelope, FaGithub, FaReddit } from "react-icons/fa";
 
-export const SocialLink: SocialLinksProps[] = [
-  { name: "Email", icon: FaEnvelope, url: "mailto:work.priyanshu085@gmail.com" },
-  { name: "LinkedIn", icon: FaLinkedin, url: "https://www.linkedin.com/in/coderx85/" },
-  { name: "Twitter", icon: FaTwitter, url: "https://twitter.com/Priyanshux085" },
-  { name: "Github", icon: FaGithub, url: "https://github.com/coderx85" },
-  { name: "Reddit", icon: FaReddit, url: "https://www.reddit.com/user/coderx85" },
+export const SocialLink: ISocialLinks[] = [
+  {
+    name: "Email",
+    icon: FaEnvelope,
+    url: "mailto:work.priyanshu085@gmail.com",
+    username: "work.priyanshu085@gmail.com",
+    color: "#008CBA",
+  },
+  {
+    name: "LinkedIn",
+    icon: LinkedinOriginalIcon,
+    url: "https://www.linkedin.com/in/coderx85/",
+    username: "coderx85",
+    color: "#0A66C2",
+  },
+  {
+    name: "Twitter",
+    icon: TwitterOriginalIcon,
+    url: "https://twitter.com/Priyanshux085",
+    username: "Priyanshux085",
+    color: "#1DA1F2",
+  },
+  {
+    name: "Github",
+    icon: FaGithub,
+    url: "https://github.com/coderx85",
+    username: "coderx85",
+    color: "#171717",
+  },
+  {
+    name: "Reddit",
+    icon: FaReddit,
+    url: "https://www.reddit.com/user/coderx85",
+    username: "coderx85",
+    color: "#FF4500",
+  },
 ];
diff --git a/src/lib/config.ts b/src/lib/config.ts
index d9f16ec..73419f5 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,2 +1,2 @@
-import { configData } from "@/constants/config";
-export const config = configData;
\ No newline at end of file
+import { config as configData } from "@/constants/config";
+export const config = configData;
diff --git a/src/lib/convertLevel.ts b/src/lib/convertLevel.ts
new file mode 100644
index 0000000..bb4cb03
--- /dev/null
+++ b/src/lib/convertLevel.ts
@@ -0,0 +1,14 @@
+import { TTechStackLevel } from "@/types";
+
+export const convertLevelIntoNumber = (lvl: TTechStackLevel) => {
+  switch (lvl) {
+    case "Beginner":
+      return 35;
+    case "Intermediate":
+      return 55;
+    case "Advanced":
+      return 85;
+    default:
+      return 0;
+  }
+};
diff --git a/src/lib/dayjs.ts b/src/lib/dayjs.ts
new file mode 100644
index 0000000..f7a5a3b
--- /dev/null
+++ b/src/lib/dayjs.ts
@@ -0,0 +1,30 @@
+export const MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+] as const;
+
+export const formatDate = (date: Date) =>
+  `${MONTH_NAMES[date.getMonth()]} ${date.getFullYear()}`;
+
+export const calcDuration = (start: Date, end: Date) => {
+  let months =
+    (end.getFullYear() - start.getFullYear()) * 12 +
+    (end.getMonth() - start.getMonth());
+  if (months < 1) months = 1;
+  const years = Math.floor(months / 12);
+  const rem = months % 12;
+  if (years > 0 && rem > 0)
+    return `${years} yr${years > 1 ? "s" : ""} ${rem} mo${rem > 1 ? "s" : ""}`;
+  if (years > 0) return `${years} yr${years > 1 ? "s" : ""}`;
+  return `${rem} mo${rem > 1 ? "s" : ""}`;
+};
diff --git a/src/types/index.ts b/src/types/index.ts
index 5042291..02d2d08 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,4 @@
-import type { IconType } from "react-icons/lib";
+import { DevIconProps } from "./resume";
 
 export interface DataMenuProps {
   title: string;
@@ -6,7 +6,7 @@ export interface DataMenuProps {
   content: React.ReactNode;
 }
 
-export interface NavlinksProps {
+export interface INavlinks {
   href: string;
   title: string;
 }
@@ -34,10 +34,14 @@ export interface AchievementProps {
   prefix?: string;
 }
 
-export interface SocialLinksProps {
-  name: string;
+type TSocialLinksName = "Email" | "LinkedIn" | "Twitter" | "Github" | "Reddit";
+
+export interface ISocialLinks {
+  name: TSocialLinksName;
   url: string;
-  icon: IconType | string;
+  icon: React.FC<DevIconProps>;
+  username: string;
+  color: string;
 }
 
 export * from "./resume";
diff --git a/src/types/resume.ts b/src/types/resume.ts
index a8fbf67..ba66618 100644
--- a/src/types/resume.ts
+++ b/src/types/resume.ts
@@ -17,14 +17,18 @@ export interface AbtData extends DataProps {
   }[];
 }
 
-export interface ExpProps extends DataProps {
+export interface IExperience extends DataProps {
   items: {
     id: number;
     title: string;
     company: string;
-    duration: string;
-    description: string;
+    startDate: Date;
+    endDate: Date;
+    description: string[];
+    techStack?: SkillProps["items"][number]["techStack"];
+    companyUrl?: string;
     linkedin?: string;
+    isCurrent?: boolean;
   }[];
 }
 
@@ -39,6 +43,35 @@ export interface SkillProps extends DataProps {
   }[];
 }
 
+export type TTechStackLevel = "Advanced" | "Intermediate" | "Beginner";
+
+export interface DevIconProps extends React.SVGProps<SVGElement> {
+  size?: string | number;
+}
+
+export type TTech = {
+  title: string;
+  icon: React.FC<DevIconProps>;
+  level: TTechStackLevel;
+  color: string;
+};
+
+export type TCategory =
+  | "Languages"
+  | "Frontend"
+  | "Backend"
+  | "Database"
+  | "DevOps & Cloud"
+  | "Monitoring"
+  | "Infrastructure"
+  | "Frameworks";
+
+export type TTechStack = {
+  title: TCategory;
+  icon: IconType;
+  techStack: readonly TTech[];
+};
+
 export type TProject = {
   id: number;
   title: string;
@@ -50,3 +83,19 @@ export type TProject = {
   challengesFaced: { title: string; solution: string }[];
   lessonsLearned: string[];
 };
+
+export type PdfComponentsType = {
+  PDFViewer: React.ComponentType<{
+    width: string;
+    height: string;
+    showToolbar: boolean;
+    style: React.CSSProperties;
+    children: React.ReactNode;
+  }>;
+  PDFDownloadLink: React.ComponentType<{
+    document: React.ReactElement;
+    fileName: string;
+    children: (props: { loading: boolean }) => React.ReactNode;
+  }>;
+  ResumePDF: React.ComponentType;
+} | null;