Update index.html

index.html

@@ -7,7 +7,195 @@
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <style>
-    /* keep your existing theme variables and styles here (unchanged) */
+    :root {
+      --terminal-bg: #0d0f1a;
+      --secondary-bg: #151827;
+      --accent-bg: #1d2233;
+      --border-color: #2c3144;
+
+      --primary-indigo: #6d5dfc;
+      --accent-cyan: #4fd1c5;
+      --accent-violet: #a78bfa;
+
+      --text-primary: #f5f7fa;
+      --text-secondary: #9ca3af;
+      --text-muted: #6b7280;
+
+      --gradient-primary: linear-gradient(135deg, #6d5dfc, #4fd1c5);
+      --gradient-accent: linear-gradient(135deg, #a78bfa, #6d5dfc);
+
+      --glow-indigo: 0 0 20px rgba(109,93,252,0.35);
+      --glow-cyan: 0 0 20px rgba(79,209,197,0.35);
+    }
+
+    body {
+      font-family: 'JetBrains Mono', monospace;
+      background: var(--terminal-bg);
+      color: var(--text-primary);
+      margin: 0;
+      padding: 0;
+      line-height: 1.6;
+    }
+
+    .header {
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      z-index: 1000;
+      background: rgba(13, 15, 26, 0.9);
+      backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .nav-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .terminal-prompt {
+      color: var(--accent-cyan);
+      font-weight: 700;
+    }
+
+    .nav-menu {
+      list-style: none;
+      display: flex;
+      gap: 2rem;
+    }
+
+    .nav-menu a {
+      text-decoration: none;
+      color: var(--text-secondary);
+      transition: color 0.3s ease;
+    }
+    .nav-menu a:hover { color: var(--accent-violet); }
+
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 6rem 2rem;
+      background: var(--terminal-bg);
+      text-align: center;
+    }
+
+    .hero-title {
+      font-size: clamp(2.5rem, 6vw, 5rem);
+      font-weight: 900;
+      margin-bottom: 1rem;
+    }
+
+    .name-highlight {
+      background: var(--gradient-primary);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: var(--glow-indigo);
+    }
+
+    .role-highlight {
+      background: var(--gradient-accent);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: var(--glow-cyan);
+    }
+
+    .hero-subtitle {
+      font-size: 1.2rem;
+      color: var(--text-secondary);
+      margin-bottom: 1.5rem;
+    }
+
+    .hero-description {
+      color: var(--text-muted);
+      max-width: 700px;
+      margin: 0 auto 2.5rem;
+      font-size: 1rem;
+    }
+
+    .cmd-btn {
+      display: inline-block;
+      margin: 0.5rem;
+      padding: 0.8rem 1.6rem;
+      border: 2px solid var(--primary-indigo);
+      color: var(--primary-indigo);
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+    .cmd-btn:hover {
+      background: var(--primary-indigo);
+      color: var(--terminal-bg);
+      box-shadow: var(--glow-indigo);
+    }
+
+    .section {
+      padding: 5rem 2rem;
+      max-width: 1100px;
+      margin: 0 auto;
+    }
+
+    .section-title {
+      font-size: 2.2rem;
+      font-weight: 800;
+      color: var(--accent-cyan);
+      margin-bottom: 1rem;
+      text-align: center;
+      text-shadow: var(--glow-cyan);
+    }
+
+    .section-subtitle {
+      text-align: center;
+      color: var(--text-secondary);
+      margin-bottom: 2.5rem;
+    }
+
+    .skills-grid {
+      display: grid;
+      gap: 2rem;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+
+    .skill-terminal {
+      background: var(--secondary-bg);
+      border: 1px solid var(--border-color);
+      padding: 1.5rem;
+    }
+
+    .skill-title {
+      font-size: 1.2rem;
+      font-weight: 700;
+      color: var(--accent-violet);
+      margin-bottom: 1rem;
+    }
+
+    .skill-list {
+      list-style: none;
+      padding-left: 0;
+      margin: 0;
+    }
+    .skill-list li {
+      color: var(--text-secondary);
+      margin-bottom: 0.5rem;
+    }
+
+    .contact {
+      text-align: center;
+    }
+    .contact a {
+      color: var(--accent-cyan);
+      text-decoration: none;
+    }
+    .footer {
+      padding: 2rem;
+      text-align: center;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      border-top: 1px solid var(--border-color);
+    }
   </style>
 </head>
 <body>