MAKE IT MORE MODERN TECH INSPIRED

components/game.js

@@ -7,47 +7,81 @@ class SnakeGame extends HTMLElement {
           width: 400px;
           height: 400px;
           margin: 0 auto;
-          background-color: #f0fdf4;
-          border: 2px solid #059669;
+          background-color: rgba(15, 23, 42, 0.8);
+          border: 2px solid rgba(99, 102, 241, 0.5);
+          border-radius: 0.75rem;
+          box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
           position: relative;
           overflow: hidden;
         }
+        .game-container::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-image: 
+              linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
+              linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
+          background-size: 20px 20px;
+        }
+position: relative;
+          overflow: hidden;
+        }
         .snake-body {
           position: absolute;
           width: 20px;
           height: 20px;
-          background-color: #10b981;
+          background: linear-gradient(135deg, #6366f1, #8b5cf6);
           border-radius: 4px;
+          box-shadow: 0 0 5px rgba(139, 92, 246, 0.7);
+          z-index: 2;
         }
         .food {
           position: absolute;
-          width: 20px;
-          height: 20px;
-          background-color: #ef4444;
+          width: 16px;
+          height: 16px;
+          background: linear-gradient(135deg, #f43f5e, #f97316);
           border-radius: 50%;
+          box-shadow: 0 0 10px rgba(244, 63, 94, 0.7);
+          z-index: 2;
+          animation: pulse 1s infinite alternate;
         }
-        .controls {
+        @keyframes pulse {
+          from { transform: scale(1); }
+          to { transform: scale(1.2); }
+        }
+.controls {
           display: flex;
           justify-content: center;
           gap: 1rem;
           margin-top: 1rem;
         }
         button {
-          padding: 0.5rem 1rem;
-          background-color: #10b981;
+          padding: 0.5rem 1.5rem;
+          background: linear-gradient(90deg, #6366f1, #8b5cf6);
           color: white;
           border: none;
           border-radius: 0.5rem;
           cursor: pointer;
+          font-weight: 600;
+          transition: all 0.3s;
+          box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2);
+        }
+        button:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 12px rgba(99, 102, 241, 0.3);
         }
         .score {
           text-align: center;
           margin-top: 1rem;
           font-size: 1.2rem;
-          color: #059669;
+          background: linear-gradient(90deg, #6366f1, #8b5cf6);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
           font-weight: bold;
+          letter-spacing: 0.05em;
         }
-      </style>
+</style>
       <div class="game-container" id="game-board"></div>
       <div class="score">Score: <span id="score">0</span></div>
       <div class="controls">

components/navbar.js

@@ -4,10 +4,11 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background: rgba(255, 255, 255, 0.8);
-          backdrop-filter: blur(10px);
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-          position: fixed;
+          background: rgba(0, 0, 0, 0.7);
+          backdrop-filter: blur(16px);
+          box-shadow: 0 4px 30px rgba(99, 102, 241, 0.3);
+          border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+position: fixed;
           width: 100%;
           top: 0;
           z-index: 50;
@@ -23,24 +24,35 @@ class CustomNavbar extends HTMLElement {
         .logo {
           font-weight: 700;
           font-size: 1.5rem;
-          color: #6366f1;
+          background: linear-gradient(90deg, #6366f1, #8b5cf6);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
           text-decoration: none;
+          letter-spacing: 0.05em;
         }
-        .nav-links {
+.nav-links {
           display: flex;
           gap: 1.5rem;
           align-items: center;
         }
         .nav-link {
-          color: #4b5563;
+          color: #e5e7eb;
           font-weight: 500;
-          transition: color 0.3s;
+          transition: all 0.3s;
           text-decoration: none;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
         }
         .nav-link:hover {
-          color: #6366f1;
+          color: white;
+          background: rgba(99, 102, 241, 0.2);
         }
-        .mobile-menu-btn {
+        .active-link {
+          background: linear-gradient(90deg, #6366f1, #8b5cf6);
+          color: white;
+        }
+.mobile-menu-btn {
           display: none;
           background: none;
           border: none;

index.html

@@ -4,8 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Trisha | Designer & Developer</title>
-    <link rel="stylesheet" href="style.css">
+    <title>Rajeev Mishra | AI/ML Engineer</title>
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script>
@@ -13,15 +13,15 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: '#10b981',
-                        secondary: '#059669',
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
                     }
                 }
             }
         }
-</script>
+    </script>
 </head>
-<body class="bg-gray-50 text-gray-800 font-sans antialiased">
+<body class="bg-gray-900 text-gray-100 font-sans antialiased">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

style.css

@@ -12,11 +12,19 @@ html {
 }
 /* Custom gradient text */
 .text-gradient {
-    background: linear-gradient(to right, #10b981, #059669);
+    background: linear-gradient(90deg, #6366f1, #8b5cf6);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+
+/* Glassmorphism effect */
+.glass-card {
+    background: rgba(30, 41, 59, 0.7);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    box-shadow: 0 8px 32px 0 rgba(99, 102, 241, 0.2);
+}
 /* Animation for section entries */
 @keyframes fadeInUp {
     from {
@@ -43,12 +51,34 @@ html {
     background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
-    background: #10b981;
+    background: linear-gradient(90deg, #6366f1, #8b5cf6);
     border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #059669;
+    background: #8b5cf6;
+}
+
+/* Glowing hover effect */
+.hover-glow:hover {
+    box-shadow: 0 0 15px rgba(139, 92, 246, 0.7);
+    transition: box-shadow 0.3s ease;
+}
+
+/* Tech grid pattern */
+.tech-bg::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
+    background-size: 30px 30px;
+    opacity: 0.3;
+    z-index: -1;
 }
 /* Hero section */
 .hero-image {