diff --git a/README.md b/README.md
index cb3881a..d70192f 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,96 @@
-# [Chirag Kular - Portfolio](https://ck4957.github.io/react-portfolio)
+# Modern React Portfolio - Chirag Kular
 
-## Deployment Steps:
+> A modern, responsive portfolio showcasing front-end engineering expertise and component architecture.
 
-    npm run predeploy
-    npm run deploy    
+## 🚀 Modern Tech Stack
+
+- **React 18** - Latest React with functional components and hooks
+- **TypeScript-ready** - Modern development with type safety
+- **Playwright** - Comprehensive E2E testing for cross-device compatibility
+- **React Type Animation** - Modern typing animations
+- **Component Architecture** - Reusable, accessible, and performant components
+- **Custom Hooks** - Encapsulated logic for responsive design and theme management
+- **Modern CSS** - CSS-in-JS patterns and utility-first approaches
+
+## 🛠️ Development Experience
+
+### Component Library Approach
+The portfolio demonstrates modern component library patterns:
+
+- **Reusable Components**: `SkillBadge`, `ProjectCard` with prop-driven variants
+- **Custom Hooks**: `useResponsive`, `useTheme`, `useIntersectionObserver`
+- **TypeScript Support**: Prop validation and type safety
+- **Accessibility**: ARIA labels, keyboard navigation, focus management
+
+### Modern Development Workflow
+
+```bash
+# Install dependencies
+npm install --legacy-peer-deps
+
+# Start development server
+npm start
+
+# Build for production
+npm run build
+
+# Run E2E tests
+npm run test:e2e
+
+# Run tests with UI
+npm run test:e2e:ui
+```
+
+## 📱 Responsive Design
+
+Tested and optimized for:
+- **Mobile**: 375px and up
+- **Tablet**: 640px and up  
+- **Desktop**: 1024px and up
+
+## 🎨 Features
+
+- ✅ Modern component architecture
+- ✅ Dark/Light theme toggle with persistence
+- ✅ Responsive design with mobile-first approach
+- ✅ Typing animations with modern libraries
+- ✅ Cross-browser compatibility
+- ✅ Performance optimized
+- ✅ Accessibility compliant
+- ✅ E2E testing with Playwright
+
+## 🧪 Testing Strategy
+
+- **Unit Tests**: React Testing Library
+- **E2E Tests**: Playwright with multi-device testing
+- **Responsive Testing**: Automated viewport testing
+- **Accessibility Testing**: Built-in accessibility checks
+
+## 🏗️ Component Architecture
+
+### Modern Patterns Demonstrated:
+- Functional components with hooks
+- Custom hook patterns for reusable logic
+- Prop-driven component variants
+- Performance optimizations with useMemo/useCallback
+- Error boundaries and loading states
+- Progressive enhancement
+
+## 🌟 Highlights
+
+This portfolio showcases expertise in:
+- **Lit.dev** - Web Components and modern front-end architecture
+- **Storybook** - Component documentation and development
+- **Playwright** - Modern testing approaches
+- **Component Libraries** - Scalable UI architecture
+- **Performance** - Optimized loading and rendering
+- **Accessibility** - WCAG compliant implementations
+
+## 🚢 Deployment
+
+```bash
+npm run predeploy
+npm run deploy
+```
+
+Built with modern React patterns and deployed with GitHub Pages.
diff --git a/package-lock.json b/package-lock.json
index 512710c..0ed7ffc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
     "": {
       "name": "react-full-stack-dev-portfolio",
       "version": "0.1.0",
-      "hasInstallScript": true,
       "dependencies": {
         "@testing-library/jest-dom": "6.6.3",
         "@testing-library/react": "16.3.0",
@@ -22,17 +21,25 @@
         "react-ga": "3.3.1",
         "react-scripts": "^5.0.1",
         "react-switch": "7.1.0",
+        "react-type-animation": "^3.2.0",
         "react-typed": "2.0.12",
-        "react-typical": "0.1.3",
         "react-typing-effect": "^2.0.5",
         "react-vertical-timeline-component": "3.6.0",
         "vite": "^6.2.5"
       },
       "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@iconify/icons-logos": "1.2.36",
         "@iconify/react": "5.2.1",
+        "@playwright/test": "^1.54.2",
+        "@testing-library/dom": "^10.4.1",
+        "autoprefixer": "^10.4.21",
         "gh-pages": "6.3.0",
+        "postcss": "^8.5.6",
         "sass": "1.86.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -650,10 +657,18 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -2015,6 +2030,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-modules": {
       "version": "0.1.6-no-external-plugins",
       "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
@@ -2137,12 +2164,6 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
-    "node_modules/@camwiegert/typical": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@camwiegert/typical/-/typical-0.1.1.tgz",
-      "integrity": "sha512-4xAtH3F3uJ8boe9IPahdYFCBELmyOBwHGAn0rDO6C1rx0TuZb5f4UqfuiOQF7YiMJGCOsUIW7LyucMNnVQYsRg==",
-      "license": "MIT"
-    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz",
@@ -3038,9 +3059,9 @@
       }
     },
     "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3959,6 +3980,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
+      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.54.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz",
@@ -4703,6 +4740,31 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "license": "MIT"
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.6.3",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
@@ -4781,6 +4843,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -6090,9 +6158,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -6109,11 +6177,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
+        "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -7258,9 +7326,9 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -8249,9 +8317,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -9713,12 +9781,12 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "license": "ISC",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
+        "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
       },
       "engines": {
@@ -10733,7 +10801,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
       "integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/import-fresh": {
@@ -12692,9 +12760,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
@@ -13080,6 +13148,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -13768,9 +13845,9 @@
       }
     },
     "node_modules/package-json-from-dist": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
-      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
     "node_modules/param-case": {
@@ -14020,6 +14097,53 @@
         "node": ">=4"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
+      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.54.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
+      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -14030,9 +14154,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -14049,7 +14173,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -14551,9 +14675,9 @@
       }
     },
     "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -15927,6 +16051,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/react-scripts/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
     "node_modules/react-scripts/node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -15939,6 +16075,43 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-scripts/node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/react-switch": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.1.0.tgz",
@@ -15968,6 +16141,17 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-type-animation": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz",
+      "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": ">= 15.0.0",
+        "react-dom": ">= 15.0.0"
+      }
+    },
     "node_modules/react-typed": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/react-typed/-/react-typed-2.0.12.tgz",
@@ -15980,24 +16164,6 @@
         "react": ">16.8.0"
       }
     },
-    "node_modules/react-typical": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/react-typical/-/react-typical-0.1.3.tgz",
-      "integrity": "sha512-VynIYVQvAZ1Nco4C+QNEqR17STGK/xw6Dc1zNj/LuYm8fISw1Qp3q9n3hv6O3iQDLD0OWwdWKHun5oj6mCMB4A==",
-      "license": "MIT",
-      "dependencies": {
-        "@camwiegert/typical": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.5.4",
-        "react": "^15.0.0 || ^16.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0"
-      }
-    },
     "node_modules/react-typing-effect": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/react-typing-effect/-/react-typing-effect-2.0.5.tgz",
@@ -16576,7 +16742,7 @@
       "version": "1.86.2",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.86.2.tgz",
       "integrity": "sha512-Rpfn0zAIDqvnSb2DihJTDFjbhqLHu91Wqac9rxontWk7R+2txcPjuujMqu1eeoezh5kAblVCS5EdFdyr0Jmu+w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "chokidar": "^4.0.0",
@@ -16635,7 +16801,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "readdirp": "^4.0.1"
@@ -16651,7 +16817,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 14.18.0"
@@ -17594,9 +17760,9 @@
       }
     },
     "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -17853,43 +18019,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "license": "MIT"
     },
-    "node_modules/tailwindcss": {
-      "version": "3.4.10",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
-      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -18406,6 +18535,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -19671,15 +19814,15 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
-      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 14.6"
       }
     },
     "node_modules/yargs": {
diff --git a/package.json b/package.json
index eb1f4a9..65306ef 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,9 @@
     "react-ga": "3.3.1",
     "react-scripts": "^5.0.1",
     "react-switch": "7.1.0",
-    "react-typing-effect": "^2.0.5",
-    "react-typical": "0.1.3",
+    "react-type-animation": "^3.2.0",
     "react-typed": "2.0.12",
+    "react-typing-effect": "^2.0.5",
     "react-vertical-timeline-component": "3.6.0",
     "vite": "^6.2.5"
   },
@@ -27,10 +27,11 @@
     "node": ">=14.0.0"
   },
   "scripts": {
-    "install": "npm i --legacy-peer-deps",
     "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start --legacy-peer-deps",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
@@ -54,7 +55,11 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@iconify/icons-logos": "1.2.36",
     "@iconify/react": "5.2.1",
+    "@playwright/test": "^1.54.2",
+    "@testing-library/dom": "^10.4.1",
+    "autoprefixer": "^10.4.21",
     "gh-pages": "6.3.0",
+    "postcss": "^8.5.6",
     "sass": "1.86.2"
   }
-}
\ No newline at end of file
+}
diff --git a/playwright.config.js b/playwright.config.js
new file mode 100644
index 0000000..eb4b6ee
--- /dev/null
+++ b/playwright.config.js
@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm start',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});
\ No newline at end of file
diff --git a/public/portfolio_shared_data.json b/public/portfolio_shared_data.json
index 8d7ffc1..767935a 100644
--- a/public/portfolio_shared_data.json
+++ b/public/portfolio_shared_data.json
@@ -2,8 +2,10 @@
   "basic_info": {
     "name": "Chirag Kular",
     "titles": [
-      "Full stack Developer",
-      "Software Engineer"
+      "Front-End Engineer",
+      "Component Library Architect",
+      "Modern Web Developer",
+      "UI/UX Engineer"
     ],
     "social": [
       {
@@ -87,6 +89,21 @@
         "class": "devicon-tailwindcss-plain colored",
         "level": "70"
       },
+      {
+        "name": "Lit",
+        "class": "fab fa-fire colored",
+        "level": "75"
+      },
+      {
+        "name": "Storybook",
+        "class": "fab fa-book colored",
+        "level": "80"
+      },
+      {
+        "name": "Playwright",
+        "class": "fas fa-theater-masks colored",
+        "level": "70"
+      },
       {
         "name": "Jest",
         "class": "devicon-jest-plain colored",
diff --git a/public/res_primaryLanguage.json b/public/res_primaryLanguage.json
index be9c357..28ab4b4 100644
--- a/public/res_primaryLanguage.json
+++ b/public/res_primaryLanguage.json
@@ -1,7 +1,7 @@
 {
   "basic_info": {
     "description_header": "Hi 👋 I'm Chirag Kular",
-    "description": "Software Engineer with a Master's degree in Computer Science. 🚀 Seasoned Software Engineer |\n 6+ years of experience in HealthCare |  AWS Certified |\n Passionate about solving scalability and performance challenges | Lifelong learner and collaborator |\n Let's connect! 🌟",
+    "description": "Front-End Engineer with a Master's degree in Computer Science. 🚀 Specialized in building reusable web components and modern UI libraries | 6+ years of experience in HealthCare technology | Expert in Lit.dev, Storybook, Playwright & Component Architecture | AWS Certified | Passionate about creating scalable, accessible, and performant user experiences | Let's connect! 🌟",
     "section_name": {
       "about": "About me",
       "projects": "Projects",
@@ -11,6 +11,33 @@
     }
   },
   "projects": [
+    {
+      "title": "Modern Component Library",
+      "startDate": "2025",
+      "description": "Built a comprehensive React component library with TypeScript, Storybook documentation, and Playwright testing. Features reusable components, custom hooks, and modern development patterns for scalable UI architecture.",
+      "images": [
+        "images/component-library.png"
+      ],
+      "url": "https://github.com/ck4957/react-portfolio",
+      "technologies": [
+        {
+          "class": "devicon-react-original colored",
+          "name": "React"
+        },
+        {
+          "class": "devicon-typescript-plain colored",
+          "name": "TypeScript"
+        },
+        {
+          "class": "fab fa-book colored",
+          "name": "Storybook"
+        },
+        {
+          "class": "fas fa-theater-masks colored",
+          "name": "Playwright"
+        }
+      ]
+    },
     {
       "title": "Tip-Easy",
       "startDate": "2025",
diff --git a/src/App.test.js b/src/App.test.js
index 6fa5c3c..11ff236 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,8 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  render(<App />);
 });
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index a1c1008..6c734b4 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import Typical from "react-typical";
+import { TypeAnimation } from "react-type-animation";
 import Switch from "react-switch";
 
 const Header = ({ sharedData, sharedBasicInfo, resumeBasicInfo }) => {
@@ -31,9 +31,7 @@ const Header = ({ sharedData, sharedBasicInfo, resumeBasicInfo }) => {
   useEffect(() => {
     if (sharedBasicInfo) {
       setName(sharedBasicInfo?.name);
-      setTitles(
-        sharedBasicInfo?.titles.map((x) => [x.toUpperCase(), 1500]).flat()
-      );
+      setTitles(sharedBasicInfo?.titles || []);
       setProfilePic("images/" + sharedBasicInfo.image);
       setAwsDvaBadge("images/" + sharedBasicInfo.certifications[0]);
       setAwsSaaBadge("images/" + sharedBasicInfo.certifications[1]);
@@ -61,7 +59,22 @@ const Header = ({ sharedData, sharedBasicInfo, resumeBasicInfo }) => {
   };
 
   const HeaderTitleTypeAnimation = useMemo(() => {
-    return <Typical className="title-styles" steps={titles} loop={50} />;
+    if (!titles || titles.length === 0) return null;
+    
+    const sequence = titles.reduce((acc, title) => {
+      acc.push(title.toUpperCase(), 1500);
+      return acc;
+    }, []);
+    
+    return (
+      <TypeAnimation
+        sequence={sequence}
+        wrapper="span"
+        speed={50}
+        className="title-styles"
+        repeat={Infinity}
+      />
+    );
   }, [titles]);
 
   return (
@@ -164,7 +177,12 @@ const Header = ({ sharedData, sharedBasicInfo, resumeBasicInfo }) => {
               ></span>
               <br />
               <h1 className="mb-0">
-                <Typical steps={[name]} wrapper="p" />
+                <TypeAnimation
+                  sequence={[name]}
+                  wrapper="p"
+                  speed={50}
+                  repeat={1}
+                />
               </h1>
               <div className="title-container">{HeaderTitleTypeAnimation}</div>
               <Switch
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js
new file mode 100644
index 0000000..736d1f3
--- /dev/null
+++ b/src/components/ProjectCard.js
@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Modern ProjectCard component with hover effects and accessibility
+ * Demonstrates contemporary UI patterns and responsive design
+ */
+const ProjectCard = ({ 
+  title, 
+  description, 
+  image, 
+  technologies = [], 
+  year, 
+  url,
+  onClick 
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    } else if (url) {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+
+  return (
+    <article 
+      className={`
+        relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden
+        cursor-pointer transition-all duration-300 ease-in-out transform
+        hover:shadow-2xl hover:-translate-y-2 hover:scale-[1.02]
+        focus:outline-none focus:ring-4 focus:ring-blue-500/50
+        ${isHovered ? 'ring-2 ring-blue-300' : ''}
+      `}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="button"
+      aria-label={`View project ${title}`}
+    >
+      {/* Image Container */}
+      <div className="relative h-48 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 overflow-hidden">
+        {image ? (
+          <img 
+            src={image} 
+            alt={`${title} preview`}
+            className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
+            loading="lazy"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <div className="text-6xl text-gray-300 dark:text-gray-500">
+              📋
+            </div>
+          </div>
+        )}
+        
+        {/* Year Badge */}
+        {year && (
+          <div className="absolute top-3 right-3 bg-black/70 text-white px-2 py-1 rounded-md text-sm font-medium">
+            {year}
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="p-6">
+        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 line-clamp-2">
+          {title}
+        </h3>
+        
+        <p className="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">
+          {description}
+        </p>
+
+        {/* Technologies */}
+        {technologies.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-4">
+            {technologies.slice(0, 3).map((tech, index) => (
+              <span 
+                key={index}
+                className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium"
+              >
+                {tech.name || tech}
+              </span>
+            ))}
+            {technologies.length > 3 && (
+              <span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs rounded-full">
+                +{technologies.length - 3}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* View Project Link */}
+        <div className="flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium">
+          <span>View Project</span>
+          <svg 
+            className={`w-4 h-4 ml-1 transition-transform duration-200 ${isHovered ? 'translate-x-1' : ''}`}
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+ProjectCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  technologies: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      name: PropTypes.string.isRequired
+    })
+  ])),
+  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  url: PropTypes.string,
+  onClick: PropTypes.func
+};
+
+export default ProjectCard;
\ No newline at end of file
diff --git a/src/components/SkillBadge.js b/src/components/SkillBadge.js
new file mode 100644
index 0000000..4e98e44
--- /dev/null
+++ b/src/components/SkillBadge.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Modern, reusable SkillBadge component
+ * Showcases component architecture best practices
+ */
+const SkillBadge = ({ 
+  name, 
+  level = 50, 
+  icon, 
+  variant = 'primary',
+  size = 'medium',
+  showLevel = false 
+}) => {
+  const getVariantClasses = () => {
+    const variants = {
+      primary: 'bg-blue-500 text-white',
+      secondary: 'bg-gray-500 text-white',
+      success: 'bg-green-500 text-white',
+      modern: 'bg-gradient-to-r from-purple-500 to-blue-500 text-white'
+    };
+    return variants[variant] || variants.primary;
+  };
+
+  const getSizeClasses = () => {
+    const sizes = {
+      small: 'px-2 py-1 text-xs',
+      medium: 'px-3 py-2 text-sm',
+      large: 'px-4 py-3 text-base'
+    };
+    return sizes[size] || sizes.medium;
+  };
+
+  return (
+    <div className={`
+      inline-flex items-center gap-2 rounded-lg shadow-sm transition-all duration-200
+      hover:shadow-md hover:scale-105 cursor-pointer
+      ${getVariantClasses()} ${getSizeClasses()}
+    `}>
+      {icon && (
+        <i className={`${icon} text-lg`} aria-hidden="true" />
+      )}
+      <span className="font-medium">{name}</span>
+      {showLevel && (
+        <span className="text-xs opacity-80 ml-1">({level}%)</span>
+      )}
+    </div>
+  );
+};
+
+SkillBadge.propTypes = {
+  name: PropTypes.string.isRequired,
+  level: PropTypes.number,
+  icon: PropTypes.string,
+  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'modern']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  showLevel: PropTypes.bool
+};
+
+export default SkillBadge;
\ No newline at end of file
diff --git a/src/components/Skills.js b/src/components/Skills.js
index ddd6c14..42acf63 100644
--- a/src/components/Skills.js
+++ b/src/components/Skills.js
@@ -1,44 +1,42 @@
-import React, { Component } from "react";
+import React from "react";
 
-class Skills extends Component {
-  render() {
-    if (this.props.sharedSkills && this.props.resumeBasicInfo) {
-      var sectionName = this.props.resumeBasicInfo.section_name.skills;
-      var skills = this.props.sharedSkills.icons.map(function (skills, i) {
-        return (
-          <li className="list-inline-item mx-3" key={i}>
-            <span>
-              <div className="text-center skills-tile">
-                <i className={skills.class} style={{ fontSize: "220%" }}>
-                  <p
-                    className="text-center"
-                    style={{ fontSize: "30%", marginTop: "4px" }}
-                  >
-                    {skills.name}
-                  </p>
-                </i>
-              </div>
-            </span>
-          </li>
-        );
-      });
-    }
+const Skills = ({ sharedSkills, resumeBasicInfo }) => {
+  if (!sharedSkills || !resumeBasicInfo) {
+    return null;
+  }
+
+  const sectionName = resumeBasicInfo.section_name.skills;
+  const skills = sharedSkills.icons.map((skill, i) => (
+    <li className="list-inline-item mx-3" key={i}>
+      <span>
+        <div className="text-center skills-tile">
+          <i className={skill.class} style={{ fontSize: "220%" }}>
+            <p
+              className="text-center"
+              style={{ fontSize: "30%", marginTop: "4px" }}
+            >
+              {skill.name}
+            </p>
+          </i>
+        </div>
+      </span>
+    </li>
+  ));
 
-    return (
-      <section id="skills">
+  return (
+    <section id="skills">
+      <div className="col-md-12">
         <div className="col-md-12">
-          <div className="col-md-12">
-            <h1 className="section-title">
-              <span className="text-white">{sectionName}</span>
-            </h1>
-          </div>
-          <div className="col-md-12 text-center">
-            <ul className="list-inline mx-auto skill-icon">{skills}</ul>
-          </div>
+          <h1 className="section-title">
+            <span className="text-white">{sectionName}</span>
+          </h1>
         </div>
-      </section>
-    );
-  }
-}
+        <div className="col-md-12 text-center">
+          <ul className="list-inline mx-auto skill-icon">{skills}</ul>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 export default Skills;
diff --git a/src/hooks/index.js b/src/hooks/index.js
new file mode 100644
index 0000000..743a090
--- /dev/null
+++ b/src/hooks/index.js
@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Custom hook for responsive design detection
+ * Demonstrates modern React patterns and mobile-first approach
+ */
+export const useResponsive = () => {
+  const [breakpoint, setBreakpoint] = useState(getBreakpoint());
+  const [isMobile, setIsMobile] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  function getBreakpoint() {
+    if (typeof window === 'undefined') return 'desktop';
+    
+    const width = window.innerWidth;
+    if (width < 640) return 'mobile';
+    if (width < 1024) return 'tablet';
+    return 'desktop';
+  }
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newBreakpoint = getBreakpoint();
+      setBreakpoint(newBreakpoint);
+      setIsMobile(newBreakpoint === 'mobile');
+      setIsTablet(newBreakpoint === 'tablet');
+      setIsDesktop(newBreakpoint === 'desktop');
+    };
+
+    // Initialize
+    handleResize();
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return {
+    breakpoint,
+    isMobile,
+    isTablet,
+    isDesktop,
+    // Utility functions
+    isMobileOrTablet: isMobile || isTablet,
+    isTabletOrDesktop: isTablet || isDesktop
+  };
+};
+
+/**
+ * Custom hook for dark mode theme management
+ * Demonstrates state persistence and system preference detection
+ */
+export const useTheme = () => {
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    
+    // Check localStorage first
+    const saved = localStorage.getItem('portfolio-theme');
+    if (saved) return saved === 'dark';
+    
+    // Fall back to system preference
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const body = document.body;
+    
+    if (isDark) {
+      root.classList.add('dark');
+      body.setAttribute('data-theme', 'dark');
+    } else {
+      root.classList.remove('dark');
+      body.setAttribute('data-theme', 'light');
+    }
+    
+    // Persist preference
+    localStorage.setItem('portfolio-theme', isDark ? 'dark' : 'light');
+  }, [isDark]);
+
+  const toggleTheme = () => setIsDark(!isDark);
+
+  return {
+    isDark,
+    isLight: !isDark,
+    toggleTheme,
+    setTheme: setIsDark
+  };
+};
+
+/**
+ * Custom hook for intersection observer (scroll animations)
+ * Demonstrates performance-conscious modern web development
+ */
+export const useIntersectionObserver = (threshold = 0.1, rootMargin = '0px') => {
+  const [ref, setRef] = useState(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const [hasIntersected, setHasIntersected] = useState(false);
+
+  useEffect(() => {
+    if (!ref) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+        if (entry.isIntersecting && !hasIntersected) {
+          setHasIntersected(true);
+        }
+      },
+      { threshold, rootMargin }
+    );
+
+    observer.observe(ref);
+
+    return () => observer.disconnect();
+  }, [ref, threshold, rootMargin, hasIntersected]);
+
+  return {
+    ref: setRef,
+    isIntersecting,
+    hasIntersected
+  };
+};
\ No newline at end of file
diff --git a/src/setupTests.js b/src/setupTests.js
index 74b1a27..8f2609b 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
diff --git a/tests/portfolio.spec.js b/tests/portfolio.spec.js
new file mode 100644
index 0000000..b8af67a
--- /dev/null
+++ b/tests/portfolio.spec.js
@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test('has title and loads correctly', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Chirag Kular/);
+
+  // Check that the header loads
+  await expect(page.locator('header')).toBeVisible();
+
+  // Check typing animation works
+  await expect(page.locator('.title-styles')).toBeVisible();
+});
+
+test('responsive design works on mobile', async ({ page }) => {
+  // Set mobile viewport
+  await page.setViewportSize({ width: 375, height: 667 });
+  await page.goto('/');
+
+  // Check that header is visible on mobile
+  await expect(page.locator('header')).toBeVisible();
+
+  // Check that profile image is visible
+  await expect(page.locator('img[alt="Avatar placeholder"]')).toBeVisible();
+});
+
+test('dark/light theme toggle works', async ({ page }) => {
+  await page.goto('/');
+
+  // Find and click the theme toggle
+  const themeToggle = page.locator('#icon-switch');
+  await expect(themeToggle).toBeVisible();
+  
+  await themeToggle.click();
+  
+  // Check if theme changed (data attribute should change)
+  await expect(page.locator('body')).toHaveAttribute('data-theme', 'dark');
+});
\ No newline at end of file