diff --git a/index.html b/index.html
index 9071e5e..2d30f2f 100644
--- a/index.html
+++ b/index.html
@@ -4,76 +4,26 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Miles Wolf Allen | Developer & 3D Artist</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
-
     * { margin: 0; padding: 0; box-sizing: border-box; }
 
     :root {
-      --bg: #0a0a0f;
-      --surface: #12121a;
-      --surface-hover: #1a1a25;
-      --border: #1e1e2e;
-      --text: #e4e4e7;
-      --text-dim: #71717a;
-      --accent: #6366f1;
-      --accent-glow: rgba(99, 102, 241, 0.15);
-      --green: #22c55e;
+      --bg: #05050a;
+      --surface: rgba(15, 15, 25, 0.7);
+      --surface-solid: #0f0f19;
+      --border: rgba(255, 255, 255, 0.06);
+      --border-bright: rgba(255, 255, 255, 0.12);
+      --text: #f0f0f5;
+      --text-dim: #6b6b80;
+      --accent: #7c5cff;
+      --accent-2: #00d4ff;
+      --accent-3: #ff5caa;
+      --green: #00ff88;
       --purple: #a855f7;
-      --cyan: #06b6d4;
-    }
-
-    [data-theme="lite"] {
-      --bg: #faf8f5;
-      --surface: #ffffff;
-      --surface-hover: #f3f0ec;
-      --border: #e8e4df;
-      --text: #1a1a1a;
-      --text-dim: #6b6560;
-      --accent: #7c6aef;
-      --accent-glow: rgba(124, 106, 239, 0.08);
-      --green: #2db87a;
-      --purple: #a06be8;
-      --cyan: #1ab0c4;
-    }
-
-    [data-theme="lite"] .bg-grid {
-      background-image:
-        linear-gradient(rgba(124, 106, 239, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(124, 106, 239, 0.03) 1px, transparent 1px);
-    }
-
-    [data-theme="lite"] .bg-glow { opacity: 0.04; filter: blur(160px); }
-
-    [data-theme="lite"] .hero h1 .gradient {
-      background: linear-gradient(135deg, #7c6aef, #a06be8, #1ab0c4);
-      -webkit-background-clip: text;
-      background-clip: text;
-    }
-
-    [data-theme="lite"] .project-card:hover {
-      box-shadow: 0 8px 32px rgba(124, 106, 239, 0.1);
-    }
-
-    [data-theme="lite"] .btn-primary:hover {
-      box-shadow: 0 0 30px rgba(124, 106, 239, 0.2);
-    }
-
-    [data-theme="lite"] .btn-secondary:hover {
-      border-color: #c8c3be;
-    }
-
-    [data-theme="lite"] .contact-card:hover {
-      box-shadow: 0 4px 20px rgba(124, 106, 239, 0.08);
-    }
-
-    [data-theme="lite"] .skill-tag:hover {
-      background: var(--accent-glow);
-      border-color: var(--accent);
-    }
-
-    [data-theme="lite"] .achievement {
-      background: var(--surface);
+      --glow: rgba(124, 92, 255, 0.4);
+      --glow-2: rgba(0, 212, 255, 0.3);
     }
 
     body {
@@ -82,875 +32,903 @@
       color: var(--text);
       line-height: 1.6;
       overflow-x: hidden;
+      -webkit-font-smoothing: antialiased;
     }
 
-    .bg-grid {
+    /* ANIMATED MESH BACKGROUND */
+    .mesh-bg {
+      position: fixed;
+      inset: 0;
+      z-index: 0;
+      overflow: hidden;
+    }
+    .mesh-bg::before {
+      content: '';
+      position: absolute;
+      width: 150%;
+      height: 150%;
+      top: -25%;
+      left: -25%;
+      background:
+        radial-gradient(ellipse 600px 600px at 20% 20%, rgba(124, 92, 255, 0.12) 0%, transparent 70%),
+        radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 70%),
+        radial-gradient(ellipse 400px 400px at 50% 80%, rgba(255, 92, 170, 0.06) 0%, transparent 70%);
+      animation: meshMove 20s ease-in-out infinite alternate;
+    }
+    @keyframes meshMove {
+      0% { transform: translate(0, 0) scale(1); }
+      33% { transform: translate(30px, -20px) scale(1.02); }
+      66% { transform: translate(-20px, 30px) scale(0.98); }
+      100% { transform: translate(10px, -10px) scale(1.01); }
+    }
+
+    .grid-overlay {
       position: fixed;
       inset: 0;
       background-image:
-        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
-      background-size: 60px 60px;
+        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
+      background-size: 80px 80px;
+      mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
       pointer-events: none;
-      z-index: 0;
-    }
-
-    .bg-glow {
-      position: fixed;
-      width: 600px;
-      height: 600px;
-      border-radius: 50%;
-      filter: blur(120px);
-      opacity: 0.07;
-      pointer-events: none;
-      z-index: 0;
-    }
-
-    .bg-glow-1 { background: var(--accent); top: -200px; left: 10%; }
-    .bg-glow-2 { background: var(--purple); bottom: -200px; right: 10%; }
-
-    .container {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 0 24px;
-      position: relative;
       z-index: 1;
     }
 
+    .noise {
+      position: fixed;
+      inset: 0;
+      opacity: 0.03;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .container {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 0 28px;
+      position: relative;
+      z-index: 2;
+    }
+
+    /* NAV */
     nav {
-      padding: 32px 0;
+      padding: 28px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      position: relative;
+      z-index: 10;
     }
-
     .nav-logo {
-      font-weight: 700;
-      font-size: 1.1rem;
-      color: var(--accent);
+      font-weight: 900;
+      font-size: 1.2rem;
+      color: var(--text);
       text-decoration: none;
-      letter-spacing: -0.02em;
+      letter-spacing: -0.03em;
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
-
-    .nav-links { display: flex; gap: 28px; }
-
+    .nav-logo .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--accent);
+      box-shadow: 0 0 12px var(--glow);
+      animation: dotPulse 3s ease-in-out infinite;
+    }
+    @keyframes dotPulse {
+      0%, 100% { box-shadow: 0 0 12px var(--glow); }
+      50% { box-shadow: 0 0 24px var(--glow), 0 0 48px rgba(124, 92, 255, 0.2); }
+    }
+    .nav-links { display: flex; gap: 8px; align-items: center; }
     .nav-links a {
       color: var(--text-dim);
       text-decoration: none;
-      font-size: 0.875rem;
+      font-size: 0.85rem;
       font-weight: 500;
-      transition: color 0.2s;
-    }
-
-    .nav-links a:hover { color: var(--text); }
-
-    .theme-toggle {
-      background: none;
-      border: 1px solid var(--border);
+      padding: 8px 14px;
       border-radius: 8px;
-      padding: 6px;
-      cursor: pointer;
+      transition: all 0.25s;
+    }
+    .nav-links a:hover {
+      color: var(--text);
+      background: rgba(255, 255, 255, 0.05);
+    }
+    .nav-links .theme-btn {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      border: 1px solid var(--border);
+      background: var(--surface);
+      backdrop-filter: blur(12px);
       color: var(--text-dim);
+      cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: color 0.2s, border-color 0.2s;
+      transition: all 0.25s;
+      margin-left: 8px;
     }
+    .nav-links .theme-btn:hover {
+      border-color: var(--accent);
+      color: var(--text);
+      box-shadow: 0 0 16px rgba(124, 92, 255, 0.15);
+    }
+    .theme-btn svg { width: 16px; height: 16px; }
 
-    .theme-toggle:hover { color: var(--text); border-color: var(--text-dim); }
-
-    .theme-toggle svg { width: 18px; height: 18px; }
-
-    .theme-toggle .icon-moon { display: none; }
-    [data-theme="lite"] .theme-toggle .icon-sun { display: none; }
-    [data-theme="lite"] .theme-toggle .icon-moon { display: block; }
-
+    /* HERO */
     .hero {
-      padding: 80px 0 60px;
+      padding: 100px 0 80px;
+      text-align: center;
     }
-
-    .hero-badge {
+    .hero-chip {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: var(--surface);
+      backdrop-filter: blur(16px);
       border: 1px solid var(--border);
-      padding: 6px 14px;
+      padding: 8px 18px;
       border-radius: 999px;
       font-size: 0.8rem;
+      font-weight: 500;
       color: var(--text-dim);
-      margin-bottom: 28px;
+      margin-bottom: 36px;
     }
-
-    .hero-badge .dot {
+    .hero-chip .live-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: var(--green);
-      animation: pulse 2s ease-in-out infinite;
+      box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
+      animation: livePulse 2s ease-in-out infinite;
     }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.4; }
+    @keyframes livePulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.8); }
     }
 
     .hero h1 {
-      font-size: 3.5rem;
-      font-weight: 800;
-      letter-spacing: -0.04em;
-      line-height: 1.1;
-      margin-bottom: 20px;
+      font-size: clamp(3rem, 8vw, 5.5rem);
+      font-weight: 900;
+      letter-spacing: -0.05em;
+      line-height: 1.05;
+      margin-bottom: 24px;
     }
-
-    .hero h1 .gradient {
-      background: linear-gradient(135deg, var(--accent), var(--purple), var(--cyan));
+    .hero h1 .line { display: block; }
+    .hero h1 .grad {
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradShift 6s ease-in-out infinite;
+    }
+    @keyframes gradShift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
     }
 
-    .hero p {
+    .hero-sub {
       font-size: 1.15rem;
       color: var(--text-dim);
-      max-width: 560px;
+      max-width: 520px;
+      margin: 0 auto 40px;
       line-height: 1.7;
-      margin-bottom: 36px;
     }
 
-    .hero-links { display: flex; gap: 12px; flex-wrap: wrap; }
-
+    .hero-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
     .btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
-      padding: 12px 22px;
-      border-radius: 10px;
-      font-size: 0.875rem;
-      font-weight: 600;
+      padding: 14px 28px;
+      border-radius: 12px;
+      font-size: 0.9rem;
+      font-weight: 700;
       text-decoration: none;
-      transition: all 0.2s;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       cursor: pointer;
       border: none;
+      font-family: inherit;
     }
-
-    .btn-primary {
+    .btn-glow {
       background: var(--accent);
       color: #fff;
+      box-shadow: 0 0 20px rgba(124, 92, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
     }
-
-    .btn-primary:hover {
-      background: #4f46e5;
-      box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
+    .btn-glow:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 0 40px rgba(124, 92, 255, 0.5), 0 8px 32px rgba(0, 0, 0, 0.4);
     }
-
-    .btn-secondary {
+    .btn-glass {
       background: var(--surface);
+      backdrop-filter: blur(12px);
       color: var(--text);
       border: 1px solid var(--border);
     }
-
-    .btn-secondary:hover {
-      background: var(--surface-hover);
-      border-color: #333;
-    }
-
-    section { padding: 40px 0; }
-
-    .section-title {
-      font-size: 1.5rem;
-      font-weight: 700;
-      letter-spacing: -0.03em;
-      margin-bottom: 8px;
-    }
-
-    .section-subtitle {
-      color: var(--text-dim);
-      font-size: 0.9rem;
-      margin-bottom: 32px;
-    }
-
-    .profile-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 32px;
-      display: flex;
-      gap: 28px;
-      align-items: center;
-      margin-bottom: 24px;
-    }
-
-    .profile-avatar {
-      width: 96px;
-      height: 96px;
-      border-radius: 50%;
-      border: 3px solid var(--accent);
-      flex-shrink: 0;
-    }
-
-    .profile-info h2 {
-      font-size: 1.4rem;
-      font-weight: 700;
-      letter-spacing: -0.02em;
-    }
-
-    .profile-info .username {
-      color: var(--text-dim);
-      font-size: 0.9rem;
-      margin-bottom: 8px;
-    }
-
-    .profile-stats {
-      display: flex;
-      gap: 20px;
-      margin-top: 10px;
-    }
-
-    .stat {
-      font-size: 0.85rem;
-      color: var(--text-dim);
-    }
-
-    .stat strong {
-      color: var(--text);
-      font-weight: 600;
-    }
-
-    .skills-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-      gap: 10px;
-    }
-
-    .skill-tag {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      padding: 12px 16px;
-      border-radius: 10px;
-      font-size: 0.82rem;
-      font-weight: 500;
-      text-align: center;
-      transition: all 0.2s;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 6px;
-    }
-
-    .skill-tag:hover {
-      border-color: var(--accent);
-      background: var(--accent-glow);
+    .btn-glass:hover {
+      border-color: var(--border-bright);
+      background: rgba(255, 255, 255, 0.08);
       transform: translateY(-2px);
     }
+    .btn svg { width: 16px; height: 16px; }
 
-    .skill-tag svg {
-      width: 24px;
-      height: 24px;
+    /* STATS BAR */
+    .stats-bar {
+      display: flex;
+      justify-content: center;
+      gap: 48px;
+      padding: 32px 0;
+      margin-bottom: 20px;
     }
-
-    .skills-section { margin-bottom: 16px; }
-
-    .skills-label {
+    .stat-item { text-align: center; }
+    .stat-num {
+      font-size: 2.2rem;
+      font-weight: 900;
+      letter-spacing: -0.03em;
+      background: linear-gradient(135deg, var(--text), var(--accent));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .stat-label {
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-dim);
       text-transform: uppercase;
-      letter-spacing: 0.08em;
+      letter-spacing: 0.1em;
+    }
+
+    /* SECTIONS */
+    .section {
+      padding: 64px 0;
+      position: relative;
+    }
+    .section-divider {
+      width: 60px;
+      height: 3px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-2));
+      border-radius: 3px;
+      margin-bottom: 16px;
+    }
+    .section-header {
+      margin-bottom: 40px;
+    }
+    .section-header h2 {
+      font-size: 2.2rem;
+      font-weight: 900;
+      letter-spacing: -0.04em;
+      margin-bottom: 8px;
+    }
+    .section-header p {
+      color: var(--text-dim);
+      font-size: 1rem;
+    }
+
+    /* PROFILE CARD */
+    .profile-card {
+      background: var(--surface);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 36px;
+      display: flex;
+      gap: 32px;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 20px;
+    }
+    .profile-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
+      opacity: 0.5;
+    }
+    .profile-avatar {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      border: 3px solid var(--accent);
+      box-shadow: 0 0 30px rgba(124, 92, 255, 0.2);
+      flex-shrink: 0;
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+    .profile-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 0 50px rgba(124, 92, 255, 0.35);
+    }
+    .profile-info h2 {
+      font-size: 1.6rem;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+    }
+    .profile-info .handle {
+      color: var(--accent);
+      font-size: 0.9rem;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .profile-info .bio {
+      color: var(--text-dim);
+      font-size: 0.9rem;
       margin-bottom: 12px;
     }
-
-    .projects-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-      gap: 16px;
+    .profile-stats {
+      display: flex;
+      gap: 20px;
+    }
+    .profile-stats .ps {
+      font-size: 0.85rem;
+      color: var(--text-dim);
+    }
+    .profile-stats .ps b {
+      color: var(--text);
+      font-weight: 700;
     }
 
-    .project-card {
+    /* ACHIEVEMENTS */
+    .achievements {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .achievement {
       background: var(--surface);
+      backdrop-filter: blur(12px);
       border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 24px;
-      text-decoration: none;
-      color: var(--text);
+      border-radius: 12px;
+      padding: 12px 18px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.82rem;
+      font-weight: 600;
       transition: all 0.25s;
+    }
+    .achievement:hover {
+      border-color: var(--accent);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 20px rgba(124, 92, 255, 0.1);
+    }
+    .achievement svg { width: 18px; height: 18px; color: var(--accent); }
+
+    /* SKILLS */
+    .skills-label {
+      font-size: 0.7rem;
+      font-weight: 700;
+      color: var(--text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 14px;
+    }
+    .skills-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+      gap: 10px;
+      margin-bottom: 32px;
+    }
+    .skill {
+      background: var(--surface);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 14px;
+      text-align: center;
+      font-size: 0.8rem;
+      font-weight: 600;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      cursor: default;
     }
-
-    .project-card:hover {
+    .skill:hover {
       border-color: var(--accent);
+      background: rgba(124, 92, 255, 0.08);
       transform: translateY(-3px);
-      box-shadow: 0 8px 40px rgba(0,0,0,0.3);
+      box-shadow: 0 8px 30px rgba(124, 92, 255, 0.12);
     }
+    .skill svg { width: 22px; height: 22px; color: var(--accent); }
 
-    .project-card .project-header {
+    /* PROJECTS */
+    .projects-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+      gap: 16px;
+    }
+    .project-card {
+      background: var(--surface);
+      backdrop-filter: blur(16px);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 28px;
+      text-decoration: none;
+      color: var(--text);
+      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      overflow: hidden;
+    }
+    .project-card::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 16px;
+      padding: 1px;
+      background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      opacity: 0;
+      transition: opacity 0.35s;
+      pointer-events: none;
+    }
+    .project-card:hover::after { opacity: 1; }
+    .project-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(124, 92, 255, 0.08);
+    }
+    .project-card .pc-top {
       display: flex;
       justify-content: space-between;
       align-items: start;
-      margin-bottom: 12px;
+      margin-bottom: 14px;
     }
-
-    .project-card .project-icon {
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
-      background: var(--accent-glow);
+    .project-card .pc-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background: rgba(124, 92, 255, 0.1);
+      border: 1px solid rgba(124, 92, 255, 0.2);
       display: flex;
       align-items: center;
       justify-content: center;
     }
-
-    .project-card .project-icon svg {
-      width: 18px;
-      height: 18px;
-      color: var(--accent);
-    }
-
-    .project-card .project-lang {
-      font-size: 0.7rem;
-      font-weight: 600;
+    .project-card .pc-icon svg { width: 20px; height: 20px; color: var(--accent); }
+    .project-card .pc-tag {
+      font-size: 0.65rem;
+      font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.06em;
-      color: var(--text-dim);
-      background: var(--bg);
-      padding: 3px 8px;
+      padding: 4px 10px;
       border-radius: 6px;
+      border: 1px solid;
     }
+    .pc-tag.active { color: var(--green); border-color: rgba(0, 255, 136, 0.3); background: rgba(0, 255, 136, 0.05); }
+    .pc-tag.community { color: var(--accent-2); border-color: rgba(0, 212, 255, 0.3); background: rgba(0, 212, 255, 0.05); }
+    .pc-tag.wip { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.05); }
+    .pc-tag.lang { color: var(--text-dim); border-color: var(--border); background: transparent; }
 
     .project-card h3 {
-      font-size: 1rem;
-      font-weight: 600;
+      font-size: 1.15rem;
+      font-weight: 800;
+      letter-spacing: -0.02em;
       margin-bottom: 8px;
     }
-
     .project-card p {
-      font-size: 0.82rem;
+      font-size: 0.85rem;
       color: var(--text-dim);
       line-height: 1.5;
       flex: 1;
     }
-
-    .project-card .project-meta {
+    .project-card .pc-meta {
       display: flex;
-      gap: 14px;
-      margin-top: 14px;
-      padding-top: 14px;
+      gap: 16px;
+      margin-top: 16px;
+      padding-top: 16px;
       border-top: 1px solid var(--border);
       font-size: 0.75rem;
       color: var(--text-dim);
+      font-weight: 500;
     }
-
-    .project-card .project-meta span {
+    .project-card .pc-meta span {
       display: flex;
       align-items: center;
       gap: 4px;
     }
 
-    .project-card .project-meta svg {
-      width: 13px;
-      height: 13px;
-    }
-
-    .achievements-row {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-
-    .achievement {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 16px 20px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-size: 0.85rem;
-      font-weight: 500;
-    }
-
-    .achievement svg {
-      width: 24px;
-      height: 24px;
-    }
-
+    /* CONTACT */
     .contact-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-      gap: 10px;
-    }
-
-    .contact-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 18px 20px;
-      text-decoration: none;
-      color: var(--text);
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
       gap: 12px;
     }
-
+    .contact-card {
+      background: var(--surface);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 20px 22px;
+      text-decoration: none;
+      color: var(--text);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
     .contact-card:hover {
       border-color: var(--accent);
-      transform: translateY(-2px);
+      transform: translateY(-3px);
+      box-shadow: 0 8px 30px rgba(124, 92, 255, 0.1);
     }
-
-    .contact-card .c-icon {
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
-      background: var(--accent-glow);
+    .contact-card .cc-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background: rgba(124, 92, 255, 0.1);
+      border: 1px solid rgba(124, 92, 255, 0.15);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
     }
-
-    .contact-card .c-icon svg {
-      width: 18px;
-      height: 18px;
-      color: var(--accent);
-    }
-
-    .contact-card .c-label {
-      font-size: 0.7rem;
+    .contact-card .cc-icon svg { width: 18px; height: 18px; color: var(--accent); }
+    .contact-card .cc-label {
+      font-size: 0.68rem;
       color: var(--text-dim);
       text-transform: uppercase;
-      letter-spacing: 0.06em;
+      letter-spacing: 0.08em;
+      font-weight: 600;
     }
-
-    .contact-card .c-value {
-      font-size: 0.85rem;
-      font-weight: 500;
+    .contact-card .cc-value {
+      font-size: 0.9rem;
+      font-weight: 600;
     }
 
+    /* FOOTER */
     footer {
       text-align: center;
-      padding: 48px 0;
+      padding: 60px 0 40px;
       color: var(--text-dim);
       font-size: 0.8rem;
       border-top: 1px solid var(--border);
-      margin-top: 40px;
+      margin-top: 20px;
+    }
+    footer a { color: var(--accent); text-decoration: none; }
+
+    /* REVEAL ANIMATION */
+    .reveal {
+      opacity: 0;
+      transform: translateY(30px);
+      transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
     }
 
-    @media (max-width: 640px) {
-      .hero h1 { font-size: 2.2rem; }
-      .profile-card { flex-direction: column; text-align: center; }
+    /* LITE THEME */
+    [data-theme="lite"] {
+      --bg: #f8f6f3;
+      --surface: rgba(255, 255, 255, 0.8);
+      --surface-solid: #fff;
+      --border: rgba(0, 0, 0, 0.08);
+      --border-bright: rgba(0, 0, 0, 0.15);
+      --text: #111;
+      --text-dim: #777;
+      --accent: #6c47ff;
+      --accent-2: #00b4d8;
+      --accent-3: #e04080;
+      --green: #16a34a;
+      --glow: rgba(108, 71, 255, 0.25);
+    }
+    [data-theme="lite"] .mesh-bg::before {
+      background:
+        radial-gradient(ellipse 600px 600px at 20% 20%, rgba(108, 71, 255, 0.06) 0%, transparent 70%),
+        radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 180, 216, 0.04) 0%, transparent 70%),
+        radial-gradient(ellipse 400px 400px at 50% 80%, rgba(224, 64, 128, 0.03) 0%, transparent 70%);
+    }
+    [data-theme="lite"] .grid-overlay {
+      background-image:
+        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+    }
+    [data-theme="lite"] .noise { opacity: 0.015; }
+
+    @media (max-width: 768px) {
+      .hero h1 { font-size: 2.5rem; }
+      .profile-card { flex-direction: column; text-align: center; padding: 28px; }
       .profile-stats { justify-content: center; }
-      .hero-links { justify-content: center; }
-      .nav-links { display: none; }
+      .hero-actions { justify-content: center; }
+      .stats-bar { gap: 24px; }
+      .stat-num { font-size: 1.6rem; }
+      .projects-grid { grid-template-columns: 1fr; }
+      .nav-links a:not(.theme-btn) { display: none; }
     }
   </style>
 </head>
 <body>
-  <div class="bg-grid"></div>
-  <div class="bg-glow bg-glow-1"></div>
-  <div class="bg-glow bg-glow-2"></div>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
 
   <div class="container">
     <nav>
-      <a href="#" class="nav-logo">miles.dev</a>
+      <a href="#" class="nav-logo">
+        <span class="dot"></span>
+        miles.dev
+      </a>
       <div class="nav-links">
         <a href="#about">About</a>
         <a href="#skills">Skills</a>
         <a href="#projects">Projects</a>
         <a href="#contact">Contact</a>
-        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle lite mode">
-          <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
-          <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
+        <button id="theme-toggle" class="theme-btn" aria-label="Toggle theme">
+          <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+          <svg class="moon-icon" style="display:none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
         </button>
       </div>
     </nav>
 
     <section class="hero">
-      <div class="hero-badge">
-        <span class="dot"></span>
+      <div class="hero-chip">
+        <span class="live-dot"></span>
         Available to collaborate
       </div>
-      <h1>Hi, I'm <span class="gradient">Miles</span></h1>
-      <p>Developer and 3D artist interested in coding, games, and websites. Currently learning backend development with JavaScript.</p>
-      <div class="hero-links">
-        <a href="https://github.com/mileswolfallen2" class="btn btn-primary" target="_blank">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+      <h1>
+        <span class="line">Hi, I'm</span>
+        <span class="line grad">Miles Wolf Allen</span>
+      </h1>
+      <p class="hero-sub">Developer & 3D artist building games, tools, and websites. Currently obsessed with backend JavaScript and web-based emulators.</p>
+      <div class="hero-actions">
+        <a href="https://github.com/mileswolfallen2" class="btn btn-glow" target="_blank">
+          <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
           GitHub
         </a>
-        <a href="https://replit.com/@MilesAllen1" class="btn btn-secondary" target="_blank">Replit</a>
-        <a href="https://codepen.io/mileswolfallen2-the-typescripter" class="btn btn-secondary" target="_blank">CodePen</a>
+        <a href="https://replit.com/@MilesAllen1" class="btn btn-glass" target="_blank">Replit</a>
+        <a href="https://codepen.io/mileswolfallen2-the-typescripter" class="btn btn-glass" target="_blank">CodePen</a>
       </div>
     </section>
 
-    <section id="about">
+    <div class="stats-bar reveal">
+      <div class="stat-item">
+        <div class="stat-num" id="s-repos">--</div>
+        <div class="stat-label">Repos</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-num" id="s-stars">--</div>
+        <div class="stat-label">Stars</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-num" id="s-followers">--</div>
+        <div class="stat-label">Followers</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-num" id="s-following">--</div>
+        <div class="stat-label">Following</div>
+      </div>
+    </div>
+
+    <section id="about" class="section reveal">
+      <div class="section-divider"></div>
       <div class="profile-card">
         <img src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Miles" class="profile-avatar">
         <div class="profile-info">
           <h2>Miles Wolf Allen</h2>
-          <div class="username">@mileswolfallen2</div>
-          <p style="color: var(--text-dim); font-size: 0.85rem;">Working on stuff. Looking to collaborate on games or websites.</p>
+          <div class="handle">@mileswolfallen2</div>
+          <div class="bio">Building cool stuff on the web. Games, tools, and whatever catches my interest.</div>
           <div class="profile-stats">
-            <div class="stat"><strong>142</strong> repos</div>
-            <div class="stat"><strong>91</strong> stars</div>
-            <div class="stat"><strong>12</strong> followers</div>
-            <div class="stat"><strong>36</strong> following</div>
+            <div class="ps"><b id="p-repos">142</b> repos</div>
+            <div class="ps"><b id="p-stars">91</b> stars</div>
+            <div class="ps"><b id="p-followers">12</b> followers</div>
           </div>
         </div>
       </div>
-
-      <div class="achievements-row">
+      <div class="achievements">
         <div class="achievement">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
           Pull Shark x2
         </div>
         <div class="achievement">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
           YOLO
         </div>
         <div class="achievement">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
           Quickdraw
         </div>
       </div>
     </section>
 
-    <section id="skills">
-      <h2 class="section-title">Skills & Tech</h2>
-      <p class="section-subtitle">Technologies I work with and tools I know</p>
-
-      <div class="skills-section">
-        <div class="skills-label">Proficient In</div>
-        <div class="skills-grid">
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
-            JavaScript
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
-            HTML
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>
-            CSS
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
-            Python
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94"/></svg>
-            Git
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
-            Blender
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
-            Unity
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
-            Unreal
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
-            Cloudflare
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
-            Linux
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
-            Netlify
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
-            Replit
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
-            VS Code
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
-            Bash
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M9 9h6v6H9z"/></svg>
-            npm
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
-            GitHub
-          </div>
-        </div>
+    <section id="skills" class="section reveal">
+      <div class="section-divider"></div>
+      <div class="section-header">
+        <h2>Skills & Tech</h2>
+        <p>Technologies, tools, and things I work with</p>
       </div>
 
-      <div class="skills-section">
-        <div class="skills-label">Currently Learning</div>
-        <div class="skills-grid">
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
-            PHP
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
-            .NET
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
-            Nix
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
-            Yarn
-          </div>
-          <div class="skill-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
-            Backend JS
-          </div>
-        </div>
+      <div class="skills-label">Proficient In</div>
+      <div class="skills-grid">
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>JavaScript</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>HTML</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>CSS</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>Python</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94"/></svg>Git</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>Blender</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>Unity</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>Unreal</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>Cloudflare</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>Linux</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Netlify</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>Bash</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>GitHub</div>
+      </div>
+
+      <div class="skills-label">Currently Learning</div>
+      <div class="skills-grid">
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>PHP</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>.NET</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>Nix</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>Yarn</div>
+        <div class="skill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>Backend JS</div>
       </div>
     </section>
 
-    <section id="projects">
-      <h2 class="section-title">Projects</h2>
-      <p class="section-subtitle">Things I've built</p>
+    <section id="projects" class="section reveal">
+      <div class="section-divider"></div>
+      <div class="section-header">
+        <h2>Projects</h2>
+        <p>Things I've built and forked</p>
+      </div>
 
       <div class="projects-grid">
         <a href="projects/omniemu.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="8" cy="12" r="2"/><circle cx="16" cy="12" r="2"/><line x1="12" y1="10" x2="12" y2="14"/></svg>
-            </div>
-            <span class="project-lang" style="border: 1px solid var(--green); color: var(--green); background: transparent;">Active Development</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="8" cy="12" r="2"/><circle cx="16" cy="12" r="2"/></svg></div>
+            <span class="pc-tag active">Active</span>
           </div>
           <h3>OmniEmu 2.0</h3>
           <p>Cross-platform emulator manager and game launcher. Install 20+ emulators, scan ROMs, and launch games from a unified library.</p>
-          <div class="project-meta">
-            <span>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              1
-            </span>
-            <span>MIT License</span>
-            <span>v0.3.2</span>
-          </div>
+          <div class="pc-meta"><span>&#9733; 1</span><span>MIT</span><span>v0.3.2</span></div>
         </a>
 
         <a href="projects/fedl.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-            </div>
-            <span class="project-lang" style="border: 1px solid var(--cyan); color: var(--cyan); background: transparent;">Community Project</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
+            <span class="pc-tag community">Community</span>
           </div>
           <h3>FEDL</h3>
           <p>Geometry Dash demon list site with ranked levels, run submissions, admin moderation, and community features.</p>
-          <div class="project-meta">
-            <span>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              2
-            </span>
-            <span>196 commits</span>
-            <span>Live</span>
-          </div>
+          <div class="pc-meta"><span>&#9733; 2</span><span>196 commits</span><span>Live</span></div>
         </a>
+
         <a href="projects/noto.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
-            </div>
-            <span class="project-lang" style="border: 1px solid var(--green); color: var(--green); background: transparent;">Active Development</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
+            <span class="pc-tag active">Active</span>
           </div>
           <h3>Noto</h3>
-          <p>AI-powered note-taking app built with Flutter and Dart. Features Cortex AI integration, Markdown support, and Pi compatibility.</p>
-          <div class="project-meta">
-            <span>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              1
-            </span>
-            <span>MIT License</span>
-
-          </div>
+          <p>AI-powered note-taking app built with Flutter and Dart. Features Cortex AI integration and Markdown support.</p>
+          <div class="pc-meta"><span>&#9733; 1</span><span>MIT</span></div>
         </a>
+
         <a href="projects/nova.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7h1.27c.34-.6.99-1 1.73-1a2 2 0 110 4c-.74 0-1.39-.4-1.73-1H20a7 7 0 01-7 7v1.27c.6.34 1 .99 1 1.73a2 2 0 11-4 0c0-.74.4-1.39 1-1.73V20a7 7 0 01-7-7H2.73c-.34.6-.99 1-1.73 1a2 2 0 110-4c.74 0 1.39.4 1.73 1H4a7 7 0 017-7V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/></svg>
-            </div>
-            <span class="project-lang">Python</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg></div>
+            <span class="pc-tag lang">Python</span>
           </div>
           <h3>Nova AI</h3>
           <p>Voice/text AI assistant with desktop GUI, web interface, and CLI. Runs locally on Ollama with multiple model support.</p>
-          <div class="project-meta">
-            <span>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              1
-            </span>
-            <span>MIT License</span>
-          </div>
+          <div class="pc-meta"><span>&#9733; 1</span><span>MIT</span></div>
         </a>
 
         <a href="projects/music-app.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-            </div>
-            <span class="project-lang">JavaScript</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div>
+            <span class="pc-tag lang">JavaScript</span>
           </div>
           <h3>Music App</h3>
           <p>Ad-free music player web app inspired by YouTube Music. Stream music without interruptions.</p>
-          <div class="project-meta">
-            <span>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              1
-            </span>
-            <span>Apache-2.0</span>
-          </div>
+          <div class="pc-meta"><span>&#9733; 1</span><span>Apache-2.0</span></div>
         </a>
 
         <a href="projects/rhythm-game.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
-            </div>
-            <span class="project-lang">HTML</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg></div>
+            <span class="pc-tag lang">HTML</span>
           </div>
           <h3>Rhythm Game</h3>
-          <p>Rhythm-based game with song selection, real-time note rendering, and keyboard controls. Includes a level editor.</p>
-          <div class="project-meta">
-            <span>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              1
-            </span>
-            <span>MPL-2.0</span>
-          </div>
+          <p>Rhythm-based game with song selection, real-time note rendering, and keyboard controls.</p>
+          <div class="pc-meta"><span>&#9733; 1</span><span>MPL-2.0</span></div>
         </a>
 
         <a href="projects/geode-mod.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
-            </div>
-            <span class="project-lang" style="border: 1px solid #f59e0b; color: #f59e0b; background: transparent;">WIP</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg></div>
+            <span class="pc-tag wip">WIP</span>
           </div>
           <h3>FEDL Geode Mod</h3>
-          <p>Geometry Dash mod for viewing the ranked demon list, playing roulette, and checking for banned mods in-game.</p>
-          <div class="project-meta">
-            <span>MIT License</span>
-          </div>
+          <p>Geometry Dash mod for viewing the ranked demon list, playing roulette, and checking for banned mods.</p>
+          <div class="pc-meta"><span>MIT</span></div>
         </a>
 
         <a href="projects/decompilations.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
-            </div>
-            <span class="project-lang">HTML</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg></div>
+            <span class="pc-tag lang">HTML</span>
           </div>
           <h3>Decompilations</h3>
-          <p>Showcase of native PC ports, decompilations, and recompilations with animated section switching and progress tracking.</p>
-          <div class="project-meta">
-            <span>MIT License</span>
-          </div>
+          <p>Showcase of native PC ports, decompilations, and recompilations with progress tracking.</p>
+          <div class="pc-meta"><span>MIT</span></div>
         </a>
 
         <a href="projects/issue-tracker.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 14l2 2 4-4"/></svg>
-            </div>
-            <span class="project-lang">HTML</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 14l2 2 4-4"/></svg></div>
+            <span class="pc-tag lang">HTML</span>
           </div>
           <h3>Issue Tracker</h3>
-          <p>Custom issue tracker built from scratch with a Node.js backend and clean HTML/CSS frontend.</p>
-          <div class="project-meta">
-            <span>MIT License</span>
-          </div>
+          <p>Custom issue tracker built from scratch with a Node.js backend.</p>
+          <div class="pc-meta"><span>MIT</span></div>
         </a>
 
         <a href="projects/moon-gaming.html" class="project-card">
-          <div class="project-header">
-            <div class="project-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/><circle cx="17" cy="11" r="1"/><circle cx="15" cy="13" r="1"/></svg>
-            </div>
-            <span class="project-lang">HTML</span>
+          <div class="pc-top">
+            <div class="pc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="12" x2="10" y2="12"/><circle cx="17" cy="11" r="1"/><circle cx="15" cy="13" r="1"/></svg></div>
+            <span class="pc-tag lang">HTML</span>
           </div>
           <h3>Moon Gaming</h3>
-          <p>Game hub showcasing original games with 1,542+ commits. Browse, play, and explore a growing library of browser games.</p>
-          <div class="project-meta">
-            <span>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              1,542
-            </span>
-            <span>MIT License</span>
-          </div>
+          <p>Game hub with 1,542+ commits. Browse, play, and explore a growing library of browser games.</p>
+          <div class="pc-meta"><span>&#9733; 1,542</span><span>MIT</span></div>
         </a>
-
       </div>
     </section>
 
-    <section id="contact">
-      <h2 class="section-title">Get In Touch</h2>
-      <p class="section-subtitle">Let's build something together</p>
+    <section id="contact" class="section reveal">
+      <div class="section-divider"></div>
+      <div class="section-header">
+        <h2>Get In Touch</h2>
+        <p>Let's build something together</p>
+      </div>
 
       <div class="contact-grid">
         <a href="mailto:mileswa1q2@gmail.com" class="contact-card">
-          <div class="c-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-          </div>
-          <div>
-            <div class="c-label">Email</div>
-            <div class="c-value">mileswa1q2@gmail.com</div>
-          </div>
+          <div class="cc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div>
+          <div><div class="cc-label">Email</div><div class="cc-value">mileswa1q2@gmail.com</div></div>
         </a>
         <a href="https://github.com/mileswolfallen2" class="contact-card" target="_blank">
-          <div class="c-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
-          </div>
-          <div>
-            <div class="c-label">GitHub</div>
-            <div class="c-value">mileswolfallen2</div>
-          </div>
+          <div class="cc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg></div>
+          <div><div class="cc-label">GitHub</div><div class="cc-value">mileswolfallen2</div></div>
         </a>
         <a href="https://replit.com/@MilesAllen1" class="contact-card" target="_blank">
-          <div class="c-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/></svg>
-          </div>
-          <div>
-            <div class="c-label">Replit</div>
-            <div class="c-value">@MilesAllen1</div>
-          </div>
+          <div class="cc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="15.5"/></svg></div>
+          <div><div class="cc-label">Replit</div><div class="cc-value">@MilesAllen1</div></div>
         </a>
         <a href="https://codepen.io/mileswolfallen2-the-typescripter" class="contact-card" target="_blank">
-          <div class="c-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="8.5"/><polyline points="22 8.5 12 2 2 8.5"/></svg>
-          </div>
-          <div>
-            <div class="c-label">CodePen</div>
-            <div class="c-value">mileswolfallen2</div>
-          </div>
+          <div class="cc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="8.5"/><polyline points="22 8.5 12 2 2 8.5"/></svg></div>
+          <div><div class="cc-label">CodePen</div><div class="cc-value">mileswolfallen2</div></div>
         </a>
         <a href="https://me.fedl.site" class="contact-card" target="_blank">
-          <div class="c-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
-          </div>
-          <div>
-            <div class="c-label">Website</div>
-            <div class="c-value">me.fedl.site</div>
-          </div>
+          <div class="cc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg></div>
+          <div><div class="cc-label">Website</div><div class="cc-value">me.fedl.site</div></div>
         </a>
       </div>
     </section>
 
     <footer>
-      Built by Miles &middot; 2026
+      Built by Miles &middot; 2026 &middot; Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a>
     </footer>
   </div>
+
   <script>
+    // Theme toggle
     const toggle = document.getElementById('theme-toggle');
     const html = document.documentElement;
     const saved = localStorage.getItem('theme');
@@ -959,7 +937,35 @@
       const next = html.getAttribute('data-theme') === 'lite' ? '' : 'lite';
       if (next) { html.setAttribute('data-theme', next); localStorage.setItem('theme', next); }
       else { html.removeAttribute('data-theme'); localStorage.removeItem('theme'); }
+      document.querySelector('.sun-icon').style.display = next === 'lite' ? 'none' : 'block';
+      document.querySelector('.moon-icon').style.display = next === 'lite' ? 'block' : 'none';
     });
+
+    // Scroll reveal
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+    // GitHub API stats
+    fetch('https://api.github.com/users/mileswolfallen2')
+      .then(r => r.json())
+      .then(u => {
+        document.getElementById('s-repos').textContent = u.public_repos;
+        document.getElementById('s-stars').textContent = '--';
+        document.getElementById('s-followers').textContent = u.followers;
+        document.getElementById('s-following').textContent = u.following;
+        document.getElementById('p-repos').textContent = u.public_repos;
+        document.getElementById('p-followers').textContent = u.followers;
+      });
+
+    fetch('https://api.github.com/users/mileswolfallen2/repos?per_page=100')
+      .then(r => r.json())
+      .then(repos => {
+        const total = repos.reduce((a, r) => a + r.stargazers_count, 0);
+        document.getElementById('s-stars').textContent = total;
+        document.getElementById('p-stars').textContent = total;
+      });
   </script>
 </body>
 </html>
diff --git a/projects/decompilations.html b/projects/decompilations.html
index ef4e2f5..abff477 100644
--- a/projects/decompilations.html
+++ b/projects/decompilations.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -46,7 +49,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">What It Includes</h2>
       <div class="feature-grid">
         <div class="feature-card">
@@ -80,14 +84,16 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">How to Help</h2>
       <div class="desc-text">
         <p>Share projects with others, help with development or bug fixes, keep information up to date, and contribute additional project details.</p>
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">HTML (100%)</span>
@@ -100,5 +106,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/fedl.html b/projects/fedl.html
index e0ef9d2..cebe29f 100644
--- a/projects/fedl.html
+++ b/projects/fedl.html
@@ -7,13 +7,13 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <div class="bg-grid"></div>
-  <div class="bg-glow bg-glow-1"></div>
-  <div class="bg-glow bg-glow-2"></div>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -47,7 +47,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">What It Includes</h2>
       <p class="section-subtitle">Full-featured list site with frontend and backend</p>
 
@@ -111,7 +112,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">HTML (49.8%)</span>
@@ -124,21 +126,29 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Local Setup</h2>
-      <div class="code-block">
+      <code-block>
         <span class="comment"># Make sure Node.js is installed, then:</span><br>
         <span class="cmd">node server/server.js</span><br><br>
         <span class="comment"># Open the site at:</span><br>
         http://127.0.0.1:8090/fedl/<br><br>
         <span class="comment"># Expose on local network:</span><br>
         HOST=0.0.0.0 PORT=8090 <span class="cmd">node server/server.js</span>
-      </div>
+      </code-block>
     </section>
 
     <footer>
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+
+  <script>
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+  </script>
 </body>
 </html>
diff --git a/projects/geode-mod.html b/projects/geode-mod.html
index 0c4dfd4..b1f426c 100644
--- a/projects/geode-mod.html
+++ b/projects/geode-mod.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -43,7 +46,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Features</h2>
       <div class="feature-grid">
         <div class="feature-card">
@@ -77,7 +81,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Settings</h2>
       <div class="desc-text">
         <p>Configure the mod in Geode mod settings:</p>
@@ -98,14 +103,16 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">API Integration</h2>
       <div class="desc-text">
         <p>Connects to the FEDL server API at <code>fedl.site</code> with endpoints for login, signup, user state, and the demon list.</p>
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">C++ (98.2%)</span>
@@ -115,7 +122,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Build</h2>
       <div class="code-block">
         <span class="comment"># Install Geode CLI if you haven't already</span><br>
@@ -130,5 +138,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/issue-tracker.html b/projects/issue-tracker.html
index 4be634d..f4ee974 100644
--- a/projects/issue-tracker.html
+++ b/projects/issue-tracker.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -42,14 +45,16 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">About</h2>
       <div class="desc-text">
         <p>A custom issue tracker built as a learning project. Features a Node.js server backend with a clean HTML/CSS/JavaScript frontend for creating, viewing, and managing issues.</p>
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Features</h2>
       <div class="feature-grid">
         <div class="feature-card">
@@ -83,7 +88,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">HTML (91.1%)</span>
@@ -97,5 +103,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/moon-gaming.html b/projects/moon-gaming.html
index e015b43..f5ea329 100644
--- a/projects/moon-gaming.html
+++ b/projects/moon-gaming.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -42,7 +45,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">About</h2>
       <p class="section-subtitle">A passion project for browser-based gaming</p>
 
@@ -71,7 +75,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
 
       <div class="tech-grid">
@@ -102,7 +107,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Quick Start</h2>
       <div class="code-block">
         <div class="code-header">
@@ -123,5 +129,11 @@
       Back to Home
     </a>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/projects/music-app.html b/projects/music-app.html
index 7b2fd4d..2d498c1 100644
--- a/projects/music-app.html
+++ b/projects/music-app.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -46,7 +49,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Features</h2>
       <div class="feature-grid">
         <div class="feature-card">
@@ -80,7 +84,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Project Files</h2>
       <div class="table-wrapper">
         <table>
@@ -101,7 +106,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">JavaScript (89.7%)</span>
@@ -117,5 +123,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/noto.html b/projects/noto.html
index f9bb543..58d3531 100644
--- a/projects/noto.html
+++ b/projects/noto.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -47,7 +50,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Features</h2>
       <p class="section-subtitle">Your second brain, everywhere</p>
 
@@ -111,7 +115,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">AI Configuration</h2>
       <div class="feature-grid">
         <div class="feature-card">
@@ -133,7 +138,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">Dart (74.4%)</span>
@@ -148,7 +154,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Quick Start</h2>
       <div class="code-block">
         <span class="comment"># Prerequisites: Flutter 3.44+</span><br><br>
@@ -162,5 +169,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2025
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/nova.html b/projects/nova.html
index cf5c9e4..961f199 100644
--- a/projects/nova.html
+++ b/projects/nova.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -51,7 +54,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Entry Points</h2>
       <p class="section-subtitle">Multiple interfaces for different use cases</p>
 
@@ -72,7 +76,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Features</h2>
       <div class="feature-grid">
         <div class="feature-card">
@@ -120,7 +125,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Quick Start</h2>
       <div class="code-block">
         <span class="cmd">pip install -r requirements.txt</span><br>
@@ -129,7 +135,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">Python (100%)</span>
@@ -145,5 +152,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/omniemu.html b/projects/omniemu.html
index 4f6a281..002c9b5 100644
--- a/projects/omniemu.html
+++ b/projects/omniemu.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -48,7 +51,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Features</h2>
       <p class="section-subtitle">Everything you need to manage your game library</p>
 
@@ -112,7 +116,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Supported Emulators</h2>
       <p class="section-subtitle">20+ emulators across Windows, macOS, and Linux</p>
 
@@ -146,7 +151,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">TypeScript (91.4%)</span>
@@ -160,7 +166,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Quick Start</h2>
       <div class="desc-text">
         <p>Download the latest release for your platform, launch OmniEmu, install an emulator from the Library, set your ROMs directory, and start playing.</p>
@@ -180,5 +187,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/rhythm-game.html b/projects/rhythm-game.html
index 61a00bf..b50294a 100644
--- a/projects/rhythm-game.html
+++ b/projects/rhythm-game.html
@@ -7,13 +7,16 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="mesh-bg"></div>
+  <div class="grid-overlay"></div>
+  <div class="noise"></div>
   <div class="bg-grid"></div>
   <div class="bg-glow bg-glow-1"></div>
   <div class="bg-glow bg-glow-2"></div>
 
   <div class="container">
     <nav>
-      <a href="../index.html" class="nav-logo">miles.dev</a>
+      <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a>
       <div class="nav-links">
         <a href="../index.html#about">About</a>
         <a href="../index.html#skills">Skills</a>
@@ -48,7 +51,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Features</h2>
       <div class="feature-grid">
         <div class="feature-card">
@@ -96,7 +100,8 @@
       </div>
     </section>
 
-    <section>
+    <section class="reveal">
+      <div class="section-divider"></div>
       <h2 class="section-title">Tech Stack</h2>
       <div class="tech-stack">
         <span class="tech-badge">HTML (96%)</span>
@@ -112,5 +117,11 @@
       <a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026
     </footer>
   </div>
+<script>
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+</script>
 </body>
 </html>
diff --git a/projects/style.css b/projects/style.css
index 6db8094..aac4a8a 100644
--- a/projects/style.css
+++ b/projects/style.css
@@ -1,17 +1,19 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 :root {
-  --bg: #0a0a0f;
-  --surface: #12121a;
-  --surface-hover: #1a1a25;
-  --border: #1e1e2e;
-  --text: #e4e4e7;
-  --text-dim: #71717a;
-  --accent: #6366f1;
-  --accent-glow: rgba(99, 102, 241, 0.15);
-  --green: #22c55e;
+  --bg: #05050a;
+  --surface: rgba(15, 15, 25, 0.7);
+  --surface-solid: #0f0f19;
+  --border: rgba(255, 255, 255, 0.06);
+  --border-bright: rgba(255, 255, 255, 0.12);
+  --text: #f0f0f5;
+  --text-dim: #6b6b80;
+  --accent: #7c5cff;
+  --accent-2: #00d4ff;
+  --accent-3: #ff5caa;
+  --green: #00ff88;
   --purple: #a855f7;
-  --cyan: #06b6d4;
+  --glow: rgba(124, 92, 255, 0.4);
 }
 
 body {
@@ -20,72 +22,117 @@ body {
   color: var(--text);
   line-height: 1.6;
   overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
-.bg-grid {
+/* ANIMATED MESH BG */
+.mesh-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+}
+.mesh-bg::before {
+  content: '';
+  position: absolute;
+  width: 150%;
+  height: 150%;
+  top: -25%;
+  left: -25%;
+  background:
+    radial-gradient(ellipse 600px 600px at 20% 20%, rgba(124, 92, 255, 0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 70%),
+    radial-gradient(ellipse 400px 400px at 50% 80%, rgba(255, 92, 170, 0.06) 0%, transparent 70%);
+  animation: meshMove 20s ease-in-out infinite alternate;
+}
+@keyframes meshMove {
+  0% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -20px) scale(1.02); }
+  66% { transform: translate(-20px, 30px) scale(0.98); }
+  100% { transform: translate(10px, -10px) scale(1.01); }
+}
+
+.grid-overlay {
   position: fixed;
   inset: 0;
   background-image:
-    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
-  background-size: 60px 60px;
+    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
+  background-size: 80px 80px;
+  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
   pointer-events: none;
-  z-index: 0;
-}
-
-.bg-glow {
-  position: fixed;
-  width: 600px;
-  height: 600px;
-  border-radius: 50%;
-  filter: blur(120px);
-  opacity: 0.07;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.bg-glow-1 { background: var(--accent); top: -200px; left: 10%; }
-.bg-glow-2 { background: var(--purple); bottom: -200px; right: 10%; }
-
-.container {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 0 24px;
-  position: relative;
   z-index: 1;
 }
 
+.noise {
+  position: fixed;
+  inset: 0;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 1;
+}
+
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 28px;
+  position: relative;
+  z-index: 2;
+}
+
+/* NAV */
 nav {
-  padding: 32px 0;
+  padding: 28px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .nav-logo {
-  font-weight: 700;
-  font-size: 1.1rem;
-  color: var(--accent);
+  font-weight: 900;
+  font-size: 1.2rem;
+  color: var(--text);
   text-decoration: none;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.03em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.nav-logo .logo-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 12px var(--glow);
+  animation: dotPulse 3s ease-in-out infinite;
+}
+@keyframes dotPulse {
+  0%, 100% { box-shadow: 0 0 12px var(--glow); }
+  50% { box-shadow: 0 0 24px var(--glow), 0 0 48px rgba(124, 92, 255, 0.2); }
 }
 
-.nav-links { display: flex; gap: 28px; }
-
+.nav-links { display: flex; gap: 8px; align-items: center; }
 .nav-links a {
   color: var(--text-dim);
   text-decoration: none;
-  font-size: 0.875rem;
+  font-size: 0.85rem;
   font-weight: 500;
-  transition: color 0.2s;
+  padding: 8px 14px;
+  border-radius: 8px;
+  transition: all 0.25s;
+}
+.nav-links a:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.05);
 }
 
-.nav-links a:hover { color: var(--text); }
-
+/* PROJECT HERO */
 .project-hero {
-  padding: 60px 0 40px;
+  padding: 80px 0 40px;
 }
 
 .breadcrumb {
@@ -94,25 +141,19 @@ nav {
   gap: 8px;
   font-size: 0.85rem;
   color: var(--text-dim);
-  margin-bottom: 24px;
+  margin-bottom: 28px;
 }
-
 .breadcrumb a {
   color: var(--text-dim);
   text-decoration: none;
   transition: color 0.2s;
 }
-
-.breadcrumb a:hover { color: var(--text); }
-
-.breadcrumb svg {
-  width: 14px;
-  height: 14px;
-}
+.breadcrumb a:hover { color: var(--accent); }
+.breadcrumb svg { width: 14px; height: 14px; }
 
 .project-hero h1 {
-  font-size: 2.5rem;
-  font-weight: 800;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 900;
   letter-spacing: -0.04em;
   line-height: 1.1;
   margin-bottom: 12px;
@@ -123,11 +164,12 @@ nav {
   color: var(--text-dim);
   max-width: 600px;
   margin-bottom: 28px;
+  line-height: 1.7;
 }
 
 .project-meta-bar {
   display: flex;
-  gap: 16px;
+  gap: 10px;
   flex-wrap: wrap;
   align-items: center;
 }
@@ -137,138 +179,170 @@ nav {
   align-items: center;
   gap: 6px;
   background: var(--surface);
+  backdrop-filter: blur(12px);
   border: 1px solid var(--border);
-  padding: 6px 14px;
-  border-radius: 8px;
+  padding: 8px 16px;
+  border-radius: 10px;
   font-size: 0.8rem;
+  font-weight: 500;
   color: var(--text-dim);
   text-decoration: none;
-  transition: all 0.2s;
+  transition: all 0.25s;
 }
-
 .meta-chip:hover {
   border-color: var(--accent);
   color: var(--text);
+  transform: translateY(-1px);
 }
-
-.meta-chip svg {
-  width: 14px;
-  height: 14px;
-}
-
+.meta-chip svg { width: 14px; height: 14px; }
 .meta-chip.primary {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
+  box-shadow: 0 0 20px rgba(124, 92, 255, 0.3);
 }
-
 .meta-chip.primary:hover {
-  background: #4f46e5;
+  background: #6a4ae8;
+  box-shadow: 0 0 30px rgba(124, 92, 255, 0.5);
+  transform: translateY(-1px);
 }
 
-section { padding: 40px 0; }
+section { padding: 48px 0; }
+
+.section-divider {
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  border-radius: 3px;
+  margin-bottom: 16px;
+}
 
 .section-title {
-  font-size: 1.4rem;
-  font-weight: 700;
-  letter-spacing: -0.03em;
+  font-size: 2rem;
+  font-weight: 900;
+  letter-spacing: -0.04em;
   margin-bottom: 8px;
 }
 
 .section-subtitle {
   color: var(--text-dim);
-  font-size: 0.9rem;
-  margin-bottom: 24px;
+  font-size: 0.95rem;
+  margin-bottom: 28px;
+  line-height: 1.6;
 }
 
+/* FEATURE GRID */
 .feature-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 12px;
 }
 
 .feature-card {
   background: var(--surface);
+  backdrop-filter: blur(16px);
   border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 20px;
+  border-radius: 14px;
+  padding: 24px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+.feature-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 14px;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.feature-card:hover::after { opacity: 1; }
+.feature-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(124, 92, 255, 0.06);
 }
 
 .feature-card h3 {
-  font-size: 0.95rem;
-  font-weight: 600;
-  margin-bottom: 6px;
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
-
 .feature-card h3 svg {
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
   color: var(--accent);
   flex-shrink: 0;
 }
-
 .feature-card p {
-  font-size: 0.82rem;
+  font-size: 0.85rem;
   color: var(--text-dim);
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
+/* TECH STACK */
 .tech-stack {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }
-
 .tech-badge {
   background: var(--surface);
+  backdrop-filter: blur(12px);
   border: 1px solid var(--border);
-  padding: 6px 12px;
-  border-radius: 8px;
-  font-size: 0.78rem;
-  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 10px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  transition: all 0.25s;
 }
-
-.table-wrapper {
-  overflow-x: auto;
+.tech-badge:hover {
+  border-color: var(--accent);
+  color: var(--text);
+  transform: translateY(-1px);
 }
 
+/* TABLE */
+.table-wrapper { overflow-x: auto; }
 table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.85rem;
 }
-
 th, td {
   text-align: left;
-  padding: 10px 14px;
+  padding: 12px 16px;
   border-bottom: 1px solid var(--border);
 }
-
 th {
   color: var(--text-dim);
-  font-weight: 600;
-  font-size: 0.75rem;
+  font-weight: 700;
+  font-size: 0.72rem;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
 }
-
 td { color: var(--text); }
-
 .check { color: var(--green); }
 .cross { color: var(--text-dim); opacity: 0.4; }
 
+/* CODE BLOCK */
 .desc-text {
   color: var(--text-dim);
   font-size: 0.9rem;
   line-height: 1.7;
   max-width: 680px;
 }
-
 .desc-text code {
-  background: var(--surface);
+  background: var(--surface-solid);
   border: 1px solid var(--border);
   padding: 2px 6px;
   border-radius: 4px;
@@ -277,29 +351,43 @@ td { color: var(--text); }
 
 code-block {
   background: var(--surface);
+  backdrop-filter: blur(12px);
   border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 16px 20px;
+  border-radius: 12px;
+  padding: 20px 24px;
   font-family: 'SF Mono', 'Fira Code', monospace;
   font-size: 0.82rem;
   color: var(--text-dim);
   overflow-x: auto;
   margin: 12px 0;
 }
-
 code-block .comment { color: #4a5568; }
-code-block .cmd { color: var(--cyan); }
+code-block .cmd { color: var(--accent-2); }
 
+/* FOOTER */
 footer {
   text-align: center;
-  padding: 48px 0;
+  padding: 60px 0 40px;
   color: var(--text-dim);
   font-size: 0.8rem;
   border-top: 1px solid var(--border);
   margin-top: 40px;
 }
+footer a { color: var(--accent); text-decoration: none; }
+
+/* REVEAL */
+.reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
 
 @media (max-width: 640px) {
-  .project-hero h1 { font-size: 1.8rem; }
+  .project-hero h1 { font-size: 2rem; }
   .nav-links { display: none; }
+  .feature-grid { grid-template-columns: 1fr; }
 }