update

2026-09-08 11:23:17 +00:00 · 2026-07-29 15:37:44 -05:00
parent f2dc8a1660
commit 12acce05b7
8 changed files with 357 additions and 99 deletions
@@ -9,6 +9,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
 <link rel="icon" type="image/png" href="favicon.png">
+<link rel="stylesheet" href="projects/style.css">
 <style>
  :root{
    --bg:#000;--text:#fff;--muted:#666;--accent:#FF3D9A;--tape:#FFC93C;--red:#FF0000;
@@ -71,6 +72,22 @@
    .btn{text-align:center;}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
+
+  body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;}
+  body.clean::after{display:none!important;}
+  body.clean .cursor-dot,body.clean .cursor-ring{display:none!important;}
+  body.clean *{cursor:auto!important;}
+  body.clean .code{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(48px,15vw,120px);color:var(--text);text-shadow:none!important;animation:none!important;transform:none!important;margin-bottom:12px;}
+  body.clean .msg{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted);transform:none!important;margin-bottom:28px;line-height:1.6;}
+  body.clean .actions{transform:none!important;gap:8px;}
+  body.clean .btn{font-family:'Inter',sans-serif;font-weight:500;font-size:13px;padding:10px 24px;border-radius:8px;text-transform:none;letter-spacing:0;border:1px solid #333045;}
+  body.clean .btn-home{background:var(--text);color:var(--bg);border-color:var(--text);}
+  body.clean .btn-back{background:#22202a;color:var(--text);border-color:#333045;}
+  body.clean .btn:hover{transform:none!important;filter:none!important;opacity:.85;}
+  body.clean .tape{display:none!important;}
+  body.clean footer{font-family:'Inter',sans-serif!important;font-size:12px!important;color:var(--muted)!important;text-transform:none!important;letter-spacing:0!important;position:static!important;}
+  body.clean footer .footer-links a{color:var(--muted)!important;font-size:12px!important;}
+  body.clean footer .footer-links a:hover{color:var(--accent)!important;}
 </style>
 <script type="application/ld+json">
 {
@@ -86,6 +103,7 @@
 <body>
  <div class="cursor-dot" id="cursorDot"></div>
  <div class="cursor-ring" id="cursorRing"></div>
+  <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>

  <div class="tape">PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND *</div>
  <div class="tape">404 * 404 * 404 * 404 * 404 * 404 * 404 * 404 *</div>
@@ -333,6 +333,37 @@ footer .footer-text{font-family:var(--font-mono);font-size:10px;color:var(--mute
  .era-phone .phone-frame{width:180px;height:360px;}
  .era-broadband .speed-meter{width:200px;height:200px;}
 }
+
+body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;}
+body.clean::before,body.clean::after{display:none!important;}
+body.clean nav{background:rgba(34,32,42,0.9);backdrop-filter:blur(8px);border-color:#333045;}
+body.clean .nav-logo{font-size:13px;font-weight:600;font-family:'Inter',sans-serif;}
+body.clean .nav-links a{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);}
+body.clean .nav-links a:hover{color:var(--text);}
+body.clean body{background:var(--bg);color:var(--text);}
+body.clean .scroll-content{padding-top:56px;}
+body.clean .hist-hero{min-height:auto;padding:80px 24px;background:none!important;}
+body.clean .hist-hero h1{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(28px,5vw,42px);color:var(--text);text-shadow:none!important;}
+body.clean .hist-hero .sub{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted);}
+body.clean .era{background:var(--bg)!important;border:1px solid #333045!important;border-radius:12px!important;box-shadow:none!important;padding:32px!important;margin-bottom:16px!important;}
+body.clean .era-header .year{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:var(--accent);}
+body.clean .era-header h2{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(18px,3vw,24px);color:var(--text);text-shadow:none!important;}
+body.clean .era-header p{font-family:'Inter',sans-serif;color:var(--muted);}
+body.clean .era *{animation:none!important;text-shadow:none!important;border-color:#333045!important;background-image:none!important;}
+body.clean .era .globe-wrap,body.clean .era .globe-ring,body.clean .era .network-lines,body.clean .era .net-canvas,body.clean .era .crt-box,body.clean .era .social-lines-canvas,body.clean .era .cloud-canvas,body.clean .era .packet-dot,body.clean .era .packet-trail,body.clean .era .money-rain,body.clean .era .confetti,body.clean .era .scanlines,body.clean .era .www-scan-wrap,body.clean .era .timeline,body.clean .era .phone-breathe{display:none!important;}
+body.clean .era .era-content{grid-template-columns:1fr!important;gap:12px!important;}
+body.clean .era .node-card,body.clean .era .terminal-box,body.clean .era .dns-card,body.clean .era .retro-box,body.clean .era .browser-card,body.clean .era .w2-card,body.clean .era .platform-card,body.clean .era .app-item,body.clean .era .ai-node{background:#22202a!important;border:1px solid #333045!important;border-radius:10px!important;padding:16px!important;box-shadow:none!important;color:var(--text)!important;font-family:'Inter',sans-serif!important;}
+body.clean .era .dns-card .query,body.clean .era .dns-card .result{color:var(--muted)!important;}
+body.clean .era .speed-meter .needle{display:none!important;}
+body.clean .era .money-rain span{display:none!important;}
+body.clean .era .big-date{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:20px!important;text-shadow:none!important;color:var(--text)!important;}
+body.clean .era .boom-text{font-family:'Inter',sans-serif!important;font-size:14px!important;text-shadow:none!important;color:var(--muted)!important;}
+body.clean footer .footer-text{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);}
+body.clean .hist-progress{display:none!important;}
+body.clean .era .tag-blink,body.clean .era .loading-bar-track{display:none!important;}
+body.clean .era .phone-frame{border-color:#333045!important;box-shadow:none!important;}
+body.clean .era .phone-frame .screen{background:var(--bg)!important;}
+body.clean .era .platform-card.spark-card{display:none!important;}
  </style>
 </head>
 <body>
@@ -50,7 +50,7 @@
    --font-body:'Inter', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
-  html{scroll-behavior:smooth;}
+  html{scroll-behavior:smooth;overflow-x:hidden;}
  body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-x:hidden;}
  ::selection{background:var(--accent);color:#000;}
  a{color:inherit;text-decoration:none;}
@@ -229,19 +229,19 @@
  .badge:nth-child(2){transform:rotate(1deg);}
  .badge:nth-child(3){transform:rotate(-1.5deg);}

-  .skill-groups{display:flex;flex-direction:column;gap:40px;}
-  .skill-group-label{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--muted);margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em;}
-  .chip-grid{display:flex;flex-wrap:wrap;gap:10px;margin-left:-1vw;}
-  .chip{
-    font-family:var(--font-mono);font-weight:700;font-size:12px;padding:10px 18px;
-    background:transparent;border:2px solid rgba(255,255,255,0.12);color:var(--text);
-    transition:all .2s;text-transform:uppercase;letter-spacing:.04em;
+  .skill-groups{display:flex;flex-direction:column;gap:36px;}
+  .skill-group-label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em;}
+  .skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;}
+  .skill-card{
+    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
+    padding:16px 8px;border:2px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.02);
+    border-radius:8px;transition:all .25s;text-align:center;
+    color:var(--muted);font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;
  }
-  .chip:nth-child(3n){transform:rotate(-1deg);}
-  .chip:nth-child(3n+1){transform:rotate(0.5deg);}
-  .chip.known:hover{border-color:var(--accent);transform:translateY(-3px) rotate(-2deg);}
-  .chip.learning{color:var(--muted);border-style:dashed;animation:flicker 3.4s ease-in-out infinite;}
-  @keyframes flicker{0%,100%{opacity:.5;}50%{opacity:1;}}
+  .skill-card .si{width:24px;height:24px;transition:opacity .3s;}
+  .skill-card:hover{border-color:var(--accent);background:rgba(255,61,154,0.04);color:var(--text);}
+  .skill-card.learning{opacity:.55;border-style:dashed;}
+  .skill-card.learning:hover{opacity:1;}

  .project-grid{display:flex;flex-direction:column;gap:24px;}
  .proj-card{
@@ -316,25 +316,106 @@



-  body.light{
-    --bg:#f5f5f0;--text:#111;--muted:#888;
+  body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;}
+  body.clean::before,body.clean::after{display:none!important;}
+  body.clean .scattered-nav{
+    display:flex;align-items:center;justify-content:center;gap:24px;
+    height:auto;position:fixed;top:0;left:0;right:0;pointer-events:auto;
+    padding:12px 32px;background:rgba(34,32,42,0.9);backdrop-filter:blur(8px);
+    border-bottom:1px solid #333045;z-index:400;
  }
-  body.light .scattered-nav a{color:#888;}
-  body.light .scattered-nav a:hover{color:#111;border-color:var(--accent);background:rgba(255,61,154,0.1);}
-  body.light .proj-card{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-  body.light .proj-desc{color:#555;}
-  body.light .stat-strip .cell{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-  body.light .about-card{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-  body.light .about-card p{color:#444;}
-  body.light .contact-card{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-  body.light .contact-row span.k{color:#999;}
-  body.light .hl-cell{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-  body.light .hl-label{color:#888;}
-  body.light .chip{border-color:rgba(0,0,0,0.15);}
-  body.light .chip.learning{color:#aaa;}
-  body.light .section-sub{color:#888;}
-  body.light .marquee{background:var(--tape);}
-  body.light .marquee span{color:#000;}
+  body.clean .scattered-nav a{
+    position:static;transform:none!important;
+    font-size:14px;font-weight:500;
+    color:#7b7890;padding:6px 0;border:none;text-transform:none;letter-spacing:0;
+  }
+  body.clean .scattered-nav a:hover{color:#e4e0eb;border:none;background:none;}
+  body.clean .scattered-nav a.active{color:var(--accent);border:none;background:none;}
+  body.clean .sn-logo{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:#e4e0eb;margin-right:auto;gap:6px;padding:0;}
+  body.clean .sn-logo .dot{display:none;}
+  body.clean .hero{margin-top:56px;padding:56px 24px;min-height:auto;}
+  body.clean .hero-giant{
+    transform:none;margin-left:0;text-align:center;
+    font-weight:700;font-size:clamp(30px,4.5vw,48px);letter-spacing:-0.02em;line-height:1.2;
+  }
+  body.clean .hero-giant .line1{transform:none;color:var(--muted);font-weight:500;font-size:clamp(14px,1.5vw,17px);margin-bottom:6px;}
+  body.clean .hero-giant .line2{text-shadow:none;animation:none;color:var(--text);}
+  body.clean .hero-sub{transform:none;margin:14px auto 0;text-align:center;max-width:420px;font-size:14px;color:var(--muted);line-height:1.6;}
+  body.clean .hero-status{display:none;}
+  body.clean .hero-links{justify-content:center;transform:none;margin-top:20px;gap:8px;}
+  body.clean .term-btn{
+    border-radius:10px;transform:none!important;font-weight:500;
+    padding:10px 24px;font-size:13px;letter-spacing:0;text-transform:none;
+  }
+  body.clean .term-btn:nth-child(1){background:var(--accent);border-color:var(--accent);color:#fff;}
+  body.clean .term-btn:nth-child(2){background:var(--accent);border-color:var(--accent);color:#fff;}
+  body.clean .term-btn:nth-child(3){background:transparent;border-color:#333045;color:var(--muted);}
+  body.clean .term-btn:hover{opacity:.85;}
+  body.clean .scroll-cue{display:none;}
+  body.clean section{padding:48px 24px;max-width:600px;margin:0 auto;}
+  body.clean .eyebrow{display:none;}
+  body.clean h2.section-title{text-align:center;transform:none;font-weight:600;font-size:clamp(20px,3vw,26px);text-transform:none;letter-spacing:-0.01em;margin-bottom:6px;color:var(--text);}
+  body.clean .section-sub{text-align:center;font-size:14px;color:var(--muted);max-width:400px;margin:0 auto 24px;font-weight:400;}
+  body.clean .marquee{display:none;}
+  body.clean .stat-strip{gap:8px;margin:0 auto 32px;padding:0;max-width:460px;}
+  body.clean .stat-strip .cell{border-radius:10px;padding:16px 14px;flex:1;min-width:70px;background:#22202a;border:1px solid #333045;transform:none!important;}
+  body.clean .stat-strip .cell:hover{border-color:var(--accent);}
+  body.clean .stat-num{font-weight:600;font-size:clamp(18px,2.5vw,24px);color:var(--text);}
+  body.clean .stat-label{font-size:10px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;}
+  body.clean .about-grid{gap:24px;margin:0;flex-direction:column;align-items:center;}
+  body.clean .avatar-frame{border-radius:50%;padding:0;border:2px solid #333045;transform:none!important;overflow:hidden;}
+  body.clean .avatar-frame img{filter:none;border-radius:50%;width:100px;height:100px;object-fit:cover;}
+  body.clean .avatar-tag{text-align:center;font-size:12px;color:var(--muted);margin-top:4px;font-weight:500;}
+  body.clean .about-card{background:#22202a;border:1px solid #333045;border-radius:12px;transform:none!important;padding:20px 24px;min-width:0;width:100%;}
+  body.clean .about-card .tag-label{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:0.03em;text-transform:uppercase;margin-bottom:8px;}
+  body.clean .about-card p{color:var(--muted);line-height:1.6;font-size:14px;}
+  body.clean .badge-row{gap:6px;justify-content:center;}
+  body.clean .badge{font-size:11px;font-weight:500;padding:4px 12px;border-radius:999px;color:#fff;background:var(--accent);border:none;transform:none!important;}
+  body.clean .badge:nth-child(2){background:#333045;color:var(--text);}
+  body.clean .badge:nth-child(3){background:#2a2836;color:var(--text);}
+  body.clean .skill-group-label{font-size:12px;font-weight:600;color:var(--text);letter-spacing:0;margin-bottom:12px;}
+  body.clean .skill-card{border:1px solid #333045;background:#22202a;border-radius:8px;color:var(--muted);}
+  body.clean .skill-card:hover{border-color:var(--accent);color:var(--text);}
+  body.clean .skill-card.learning{opacity:.5;}
+  body.clean .project-grid{gap:8px;}
+  body.clean .proj-card{background:#22202a;border:1px solid #333045;border-radius:12px;padding:18px 22px;transform:none!important;}
+  body.clean .proj-card::before,body.clean .proj-card::after{display:none!important;}
+  body.clean .proj-card:hover{border-color:var(--accent);}
+  body.clean .proj-tag{font-size:10px;font-weight:600;border-radius:4px;padding:2px 8px;}
+  body.clean .proj-meta{font-size:10px;color:var(--muted);}
+  body.clean .proj-title{font-weight:600;font-size:16px;text-transform:none;color:var(--text);}
+  body.clean .proj-desc{font-size:13px;color:var(--muted);line-height:1.6;}
+  body.clean .highlight-block{margin-bottom:24px;}
+  body.clean .highlight-block h3{font-weight:600;font-size:14px;text-transform:none;color:var(--text);margin-bottom:8px;}
+  body.clean .highlight-row{gap:8px;margin:0;}
+  body.clean .hl-cell{border-radius:10px;padding:14px 12px;background:#22202a;border:1px solid #333045;transform:none!important;flex:1;min-width:70px;}
+  body.clean .hl-cell:hover{border-color:var(--accent);}
+  body.clean .hl-cell::after{display:none!important;}
+  body.clean .hl-num,.hl-num-text{font-weight:600;font-size:20px;color:var(--text);}
+  body.clean .hl-label{font-size:10px;text-transform:none;letter-spacing:0;color:var(--muted);}
+  body.clean .blog-grid{gap:8px;}
+  body.clean .blog-card{background:#22202a;border:1px solid #333045;border-radius:12px;padding:18px 22px;transform:none!important;}
+  body.clean .blog-card:hover{border-color:var(--accent);}
+  body.clean .blog-date{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.03em;}
+  body.clean .blog-title{font-weight:600;font-size:15px;text-transform:none;color:var(--text);}
+  body.clean .blog-excerpt{font-size:13px;color:var(--muted);line-height:1.5;}
+  body.clean .blog-tag{font-size:10px;font-weight:500;border-radius:4px;padding:3px 8px;}
+  body.clean .contact-card{background:#22202a;border:1px solid #333045;border-radius:12px;padding:20px 24px;transform:none!important;max-width:400px;margin:0 auto;}
+  body.clean .contact-card::before{display:none!important;}
+  body.clean .contact-card .tag-label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:12px;}
+  body.clean .contact-row{font-size:13px;padding:8px 0;border-color:#333045;font-weight:500;}
+  body.clean .contact-row span.k{font-size:10px;color:var(--accent);font-weight:600;}
+  body.clean .contact-row:hover{color:var(--accent);}
+  body.clean footer{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);padding:28px 24px;}
+  body.clean .page-links{border-top-color:rgba(255,255,255,0.06)!important;}
+  body.clean .page-links a{font-family:'Inter',sans-serif!important;font-size:12px!important;font-weight:500!important;color:var(--muted)!important;letter-spacing:0!important;text-transform:none!important;}
+  body.clean .about-card a[href="about-me.html"]{font-family:'Inter',sans-serif!important;font-size:13px!important;font-weight:500!important;border-radius:8px!important;text-transform:none!important;letter-spacing:0!important;}
+  body.clean .page-links a:hover{color:var(--accent)!important;}
+  body.clean .dot,.status-dot{display:none;}
+  body.clean .bg-gradient{display:none!important;}
+  body.clean .proj-card:hover .proj-title{animation:none!important;}
+  body.clean .proj-title{text-shadow:none!important;animation:none!important;}
+  body.clean #about > .eyebrow{display:none;}



@@ -417,11 +498,11 @@
    .scroll-cue{display:none;}

    .marquee{
-      margin:10px -5vw 40px;transform:rotate(-1deg) scaleX(1.03);
+      margin:10px 0 40px;transform:rotate(-1deg);
    }

-    .stat-strip{flex-wrap:nowrap;gap:8px;margin:0 -5vw 40px;}
-    .stat-strip .cell{padding:20px 12px;min-width:0;flex:1 1 0;}
+    .stat-strip{flex-wrap:wrap;gap:8px;margin:0 0 40px;}
+    .stat-strip .cell{padding:20px 12px;min-width:0;flex:1 1 120px;}
    .stat-strip .cell:nth-child(n){transform:none;}
    .stat-num{font-size:22px;}
    .stat-label{font-size:7px;}
@@ -434,9 +515,9 @@
    .badge{padding:6px 10px;font-size:7px;}
    .badge:nth-child(n){transform:none;}

-    .chip-grid{margin:0;}
-    .chip{padding:8px 12px;font-size:10px;}
-    .chip:nth-child(n){transform:none;}
+    .skill-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;}
+    .skill-card{padding:12px 6px;font-size:8px;}
+    .skill-card .si{width:20px;height:20px;}

    .project-grid{gap:16px;}
    .proj-card{padding:20px;transform:none!important;}
@@ -580,31 +661,33 @@
  <p class="section-sub reveal">what I actually know how to use</p>
  <div class="skill-groups">
    <div class="reveal">
-      <div class="skill-group-label">// Ready to use</div>
-      <div class="chip-grid">
-        <span class="chip known">JavaScript</span>
-        <span class="chip known">HTML</span>
-        <span class="chip known">CSS</span>
-        <span class="chip known">Python</span>
-        <span class="chip known">Git</span>
-        <span class="chip known">Blender</span>
-        <span class="chip known">Unity</span>
-        <span class="chip known">Unreal</span>
-        <span class="chip known">Cloudflare</span>
-        <span class="chip known">Linux</span>
-        <span class="chip known">Netlify</span>
-        <span class="chip known">Bash</span>
-        <span class="chip known">GitHub</span>
+      <div class="skill-group-label">Ready to use</div>
+      <div class="skill-grid">
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/javascript" alt=""><span>JavaScript</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/nodedotjs" alt=""><span>Backend JS</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/html5" alt=""><span>HTML</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/css3" alt=""><span>CSS</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/python" alt=""><span>Python</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/git" alt=""><span>Git</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/blender" alt=""><span>Blender</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/unity" alt=""><span>Unity</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/unrealengine" alt=""><span>Unreal</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/cloudflare" alt=""><span>Cloudflare</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/linux" alt=""><span>Linux</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/netlify" alt=""><span>Netlify</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/gnubash" alt=""><span>Bash</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/github" alt=""><span>GitHub</span></div>
+        <div class="skill-card"><img class="si" src="https://cdn.simpleicons.org/electron" alt=""><span>Electron</span></div>
+        <div class="skill-card"><svg class="si" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm0 2.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17zm-1.5 4a.75.75 0 0 0-.75.75v1.5a.75.75 0 0 0 1.5 0v-1.5a.75.75 0 0 0-.75-.75zm3 0a.75.75 0 0 0-.75.75v1.5a.75.75 0 0 0 1.5 0v-1.5a.75.75 0 0 0-.75-.75zM8.5 13a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-7z"/></svg><span>Gelectron</span></div>
      </div>
    </div>
    <div class="reveal">
-      <div class="skill-group-label">// Currently unlocking</div>
-      <div class="chip-grid">
-        <span class="chip learning">PHP</span>
-        <span class="chip learning">.NET</span>
-        <span class="chip learning">Nix</span>
-        <span class="chip learning">Yarn</span>
-        <span class="chip learning">Backend JS</span>
+      <div class="skill-group-label">Currently unlocking</div>
+      <div class="skill-grid">
+        <div class="skill-card learning"><img class="si" src="https://cdn.simpleicons.org/php" alt=""><span>PHP</span></div>
+        <div class="skill-card learning"><img class="si" src="https://cdn.simpleicons.org/dotnet" alt=""><span>.NET</span></div>
+        <div class="skill-card learning"><img class="si" src="https://cdn.simpleicons.org/nixos" alt=""><span>Nix</span></div>
+        <div class="skill-card learning"><img class="si" src="https://cdn.simpleicons.org/yarn" alt=""><span>Yarn</span></div>
      </div>
    </div>
  </div>
@@ -784,7 +867,7 @@
 <script>
 gsap.registerPlugin(ScrollTrigger);

-(function(){
+if(!document.body.classList.contains('clean')){(function(){
  var colors=['#fff','#FF3D9A','#FFC93C'];
  var last=0;
  window.addEventListener('mousemove',function(e){
@@ -795,16 +878,16 @@ gsap.registerPlugin(ScrollTrigger);
    document.body.appendChild(s);
    gsap.to(s,{y:'+='+(8+Math.random()*16),opacity:0,scale:0,duration:.6+Math.random()*.4,ease:'power1.out',onComplete:function(){s.remove();}});
  },{passive:true});
-})();
+})();}

-(function(){
+if(!document.body.classList.contains('clean')){(function(){
  var wrap=document.getElementById('signal');var n=10,bars=[];
  for(var i=0;i<n;i++){var b=document.createElement('div');b.className='bar';wrap.appendChild(b);bars.push(b);}
  window.addEventListener('scroll',function(){
    var pct=window.scrollY/(document.body.scrollHeight-window.innerHeight);
    var on=Math.round(pct*n);bars.forEach(function(bar,i){bar.classList.toggle('on',i<on);});
  },{passive:true});
-})();
+})();}

 document.querySelectorAll('[data-count]').forEach(function(el){
  var target=parseInt(el.getAttribute('data-count'),10);var suffix=el.getAttribute('data-suffix')||'';
@@ -839,7 +922,7 @@ function setActive(id){
  mn.forEach(function(a){a.classList.toggle('active',a.getAttribute('href')==='#'+id);});
 }

-(function(){
+if(!document.body.classList.contains('clean')){(function(){
  var navEl=document.querySelector('.scattered-nav');
  if(!navEl)return;
  var links=navEl.querySelectorAll('a:not(.sn-logo)');
@@ -853,18 +936,18 @@ function setActive(id){
      l.style.transform='translate('+jX+'px,'+jY+'px) rotate('+(baseRots[i]+jR)+'deg)';
    });
  },{passive:true});
-})();
+})();}

-(function(){
+if(!document.body.classList.contains('clean')){(function(){
  var grad=document.getElementById('bgGradient');
  window.addEventListener('scroll',function(){
    var pct=window.scrollY/(document.body.scrollHeight-window.innerHeight);
    var hue=pct*30;
    grad.style.filter='hue-rotate('+hue+'deg)';
  },{passive:true});
-})();
+})();}

-(function(){
+if(!document.body.classList.contains('clean')){(function(){
  var titles=document.querySelectorAll('h2.section-title');
  var glitchChars='!@#$%^&*()_+{}|:<>?/~`';
  titles.forEach(function(title){
@@ -879,7 +962,7 @@ function setActive(id){
      }
    },200);
  });
-})();
+})();}

 (function(){
  var cards=document.querySelectorAll('.proj-card');
@@ -893,6 +976,7 @@ function setActive(id){
  }
 })();

+if(!document.body.classList.contains('clean') && window.innerWidth > 640){
  gsap.utils.toArray('.proj-card, .blog-card, .hl-cell').forEach(function(card){
    card.classList.add('parallax-card');
    gsap.to(card,{
@@ -901,6 +985,7 @@ gsap.utils.toArray('.proj-card, .blog-card, .hl-cell').forEach(function(card){
      scrollTrigger:{trigger:card,start:'top bottom',end:'bottom top',scrub:1}
    });
  });
+}

 (function(){
  var logo=document.querySelector('.sn-logo');
@@ -58,6 +58,31 @@ footer .ft{font-family:var(--font-mono);font-size:10px;color:var(--muted);line-h
 .vinyl:nth-child(1){top:-40px;right:-40px;width:280px;height:280px;}
 .vinyl:nth-child(2){bottom:-60px;left:-60px;width:240px;height:240px;animation-duration:12s;}
@keyframes spinVinyl{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
+
+body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;}
+body.clean::before,body.clean::after{display:none!important;}
+body.clean nav{background:rgba(34,32,42,0.9);backdrop-filter:blur(8px);border-color:#333045;}
+body.clean .nav-logo{font-size:13px;font-weight:600;font-family:'Inter',sans-serif;}
+body.clean .nav-links a{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);}
+body.clean .nav-links a:hover{color:var(--text);}
+body.clean .scroll-content{padding-top:56px;}
+body.clean .hero{min-height:auto;padding:80px 24px;}
+body.clean .hero h1{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(28px,5vw,42px);color:var(--text);text-shadow:none;}
+body.clean .hero .sub{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted);}
+body.clean .band{min-height:auto;padding:60px 24px;border-color:#333045;}
+body.clean .band-header .tag{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.04em;color:var(--accent);}
+body.clean .band-header h2{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(20px,3.5vw,30px);color:var(--text);text-transform:none;}
+body.clean .band-header p{font-family:'Inter',sans-serif;color:var(--muted);}
+body.clean .band-card .art{background:var(--bg);border-color:#333045;}
+body.clean .band-card .info h3{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:var(--muted);text-transform:none;}
+body.clean .band-card .info .album{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;color:var(--accent);text-transform:none;}
+body.clean .band-card .info .song{font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);border-color:#333045;font-weight:500;}
+body.clean .section-title{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.03em;color:var(--text);text-transform:none;}
+body.clean .qoute{font-family:'Inter',sans-serif;color:var(--muted);font-weight:600;padding:24px;font-size:clamp(14px,2.5vw,22px);}
+body.clean footer{border-color:#333045;padding:24px;}
+body.clean footer .ft{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);}
+body.clean .vinyl{display:none;}
+body.clean .spotify-wrap iframe{border-radius:8px;}
  </style>
 </head>
 <body>
@@ -113,13 +113,13 @@
    const btn = document.getElementById('themeToggle');
    if (!btn) return;
    const saved = localStorage.getItem('theme');
-    if (saved === 'light') document.body.classList.add('light');
+    if (saved === 'clean') document.body.classList.add('clean');
    function updateIcon(){
-      btn.textContent = document.body.classList.contains('light') ? '\u263E' : '\u2600';
+      btn.textContent = document.body.classList.contains('clean') ? '\u2600' : '\u2728';
    }
    function toggleTheme(){
-      document.body.classList.toggle('light');
-      localStorage.setItem('theme', document.body.classList.contains('light') ? 'light' : 'dark');
+      document.body.classList.toggle('clean');
+      localStorage.setItem('theme', document.body.classList.contains('clean') ? 'clean' : 'dark');
      updateIcon();
    }
    updateIcon();
@@ -13,7 +13,7 @@
  --font-body:'Inter', sans-serif;
 }

-html{scroll-behavior:smooth;}
+html{scroll-behavior:smooth;overflow-x:hidden;}
 body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
@@ -221,22 +221,96 @@ footer a{color:var(--accent);}
 .progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:10001;width:0;transition:width .1s linear;box-shadow:0 0 8px var(--accent);}

 /* THEME TOGGLE */
-body.light{--bg:#f5f5f0;--text:#111;--muted:#888;}
-body.light .nav-links a{color:#888;}
-body.light .project-hero h1{color:#111;}
-body.light .feature-card{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-body.light .feature-card p{color:#555;}
-body.light .stat-item{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-body.light .stat-value{color:#111;}
-body.light .tech-badge{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.15);}
-body.light .desc-text{color:#555;}
-body.light .section-title{color:#111;}
-body.light .section-subtitle{color:#888;}
-body.light .tagline{color:#555;}
-body.light .toast{background:#eee;border-color:#333;color:#333;}
-body.light .toast .title{color:#333;}
-body.light footer{color:#888;border-color:rgba(0,0,0,0.15);}
-body.light .breadcrumb{color:#888;}
+body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;--tape:#22202a;}
+body.clean::before,body.clean::after{display:none!important;background:none!important;}
+body.clean *{cursor:auto!important;}
+body.clean .vignette,body.clean .signal,body.clean .cursor-dot,body.clean .cursor-ring,body.clean .bg-gradient,body.clean .spark{display:none!important;}
+
+/* Nav */
+body.clean .nav-logo{font-size:14px;font-weight:600;color:var(--text);}
+body.clean .nav-links a{color:var(--muted);font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;padding:6px 14px;border-radius:8px;border-color:transparent;}
+body.clean .nav-links a:hover{color:var(--text);border-color:transparent;background:rgba(184,169,255,0.08);}
+body.clean .nav-links a.active{color:var(--accent);border-color:transparent;background:rgba(184,169,255,0.1);}
+
+/* Project hero */
+body.clean .breadcrumb{transform:none;font-size:13px;color:var(--muted);}
+body.clean .project-hero h1{color:var(--text);text-shadow:none!important;transform:none;animation:none;margin-left:0;}
+body.clean .project-hero .tagline{transform:none;color:var(--muted);font-size:15px;}
+body.clean .project-meta-bar{gap:8px;}
+body.clean .meta-chip{transform:none!important;border-radius:8px;font-weight:500;border:1px solid var(--tape);color:var(--muted);padding:8px 14px;background:var(--tape);font-size:13px;}
+body.clean .meta-chip:hover{color:var(--text);border-color:var(--accent);}
+body.clean .meta-chip.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none;}
+body.clean .meta-chip.primary:hover{background:#a694ee;}
+body.clean .stats-bar{transform:none;border:1px solid var(--tape);border-radius:12px;overflow:hidden;background:var(--tape);}
+body.clean .stat-item{transform:none!important;border-color:var(--tape);padding:16px 18px;}
+body.clean .stat-value{font-size:1.4rem;color:var(--text);}
+body.clean .stat-label{font-size:10px;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:500;}
+
+/* Sections */
+body.clean .section-divider{display:none;}
+body.clean .section-title{transform:none;font-weight:600;text-transform:none;color:var(--text);}
+body.clean .section-subtitle{color:var(--muted);font-size:14px;font-weight:400;}
+
+/* Feature cards */
+body.clean .feature-card{background:var(--tape);border-color:var(--tape);border-radius:12px;transform:none!important;}
+body.clean .feature-card::before,body.clean .feature-card::after{display:none!important;}
+body.clean .feature-card p{color:var(--muted);font-size:13px;}
+body.clean .feature-card h3{font-weight:600;font-size:15px;color:var(--text);}
+body.clean .feature-card h3:hover{animation:none!important;}
+body.clean .feature-card:hover{border-color:var(--accent);}
+
+/* Tech badges */
+body.clean .tech-badge{background:var(--tape);border-color:var(--tape);border-radius:999px;transform:none!important;font-weight:500;padding:6px 14px;font-size:12px;color:var(--muted);}
+body.clean .tech-badge:hover{color:var(--text);border-color:var(--accent);}
+
+/* Misc shared */
+body.clean .desc-text{color:var(--muted);}
+body.clean .toast{background:var(--tape);border-color:var(--tape);color:var(--text);border-radius:10px;}
+body.clean .toast .title{color:var(--text);font-weight:600;}
+body.clean footer{color:var(--muted);border-color:var(--tape);transform:none;font-size:12px;font-weight:400;}
+body.clean code-block{border-radius:10px;background:var(--tape);border-color:var(--tape);color:var(--muted);}
+body.clean th{font-weight:600;font-size:11px;letter-spacing:0;color:var(--muted);}
+body.clean td{color:var(--text);}
+body.clean .theme-toggle{border-color:var(--tape);background:var(--tape);color:var(--text);}
+body.clean .theme-toggle:hover{border-color:var(--accent);background:rgba(184,169,255,0.08);}
+body.clean .progress-bar{background:var(--accent);}
+body.clean .container{padding:0 24px;}
+body.clean nav{border-bottom:1px solid var(--tape);}
+body.clean table{border-color:var(--tape);}
+body.clean td,body.clean th{border-color:var(--tape);}
+body.clean .shortcut-modal{background:rgba(24,24,30,0.95);backdrop-filter:blur(8px);}
+body.clean .shortcut-card{background:var(--bg);border:1px solid var(--tape);border-radius:14px;padding:24px;}
+body.clean .shortcut-card h3{color:var(--text);font-weight:600;font-size:16px;}
+body.clean .shortcut-row{color:var(--muted);font-size:13px;border-color:var(--tape);}
+body.clean .shortcut-row kbd{background:var(--bg);border:1px solid var(--tape);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--text);}
+body.clean .shortcut-card .close-hint{color:var(--muted);font-size:11px;}
+body.clean .secret-hint{color:var(--muted)!important;}
+body.clean .mobile-nav{background:rgba(24,24,30,0.95);backdrop-filter:blur(8px);border-top:1px solid var(--tape);}
+body.clean .mobile-nav a{color:var(--muted);}
+body.clean .mobile-nav a.active{color:var(--accent);}
+
+/* Article pages (about-me, uses, colophon, now) */
+body.clean .article-header{padding:80px 0 24px;}
+body.clean .article-eyebrow{color:var(--muted);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;}
+body.clean .article-date{color:var(--muted);font-size:13px;}
+body.clean .article-header h1{color:var(--text);text-shadow:none!important;transform:none;animation:none;font-weight:700;font-size:clamp(28px,4vw,38px);}
+body.clean .article-tagline{color:var(--muted);font-size:15px;}
+body.clean .article-tags{gap:8px;}
+body.clean .article-tag{background:var(--tape);border:1px solid var(--tape);border-radius:6px;padding:4px 10px;font-size:11px;color:var(--muted);font-weight:500;}
+body.clean .article-body{color:var(--text);font-size:15px;line-height:1.7;}
+body.clean .article-body h2{color:var(--text);font-weight:600;font-size:20px;margin-top:32px;}
+body.clean .article-body h3{color:var(--text);font-weight:600;font-size:17px;margin-top:24px;}
+body.clean .article-body p{color:var(--muted);line-height:1.7;}
+body.clean .article-body code{background:var(--tape);border:1px solid var(--tape);border-radius:4px;padding:2px 6px;font-size:13px;color:var(--text);}
+body.clean .article-body blockquote{border-left:3px solid var(--accent);padding:12px 20px;margin:20px 0;background:var(--tape);border-radius:0 8px 8px 0;color:var(--muted);}
+body.clean .article-body ul{list-style:none;padding:0;}
+body.clean .article-body ul li{padding:6px 0 6px 20px;position:relative;color:var(--muted);}
+body.clean .article-body ul li::before{content:'';position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:var(--accent);display:block!important;}
+body.clean .article-body ul li strong{color:var(--text);font-weight:600;}
+body.clean .back-link{color:var(--muted);font-size:13px;font-weight:500;text-decoration:none;}
+body.clean .back-link:hover{color:var(--accent);}
+body.clean .footer-links a{color:var(--muted)!important;}
+body.clean .footer-links a:hover{color:var(--accent)!important;}

 .theme-toggle{
  position:fixed;top:20px;right:20px;z-index:600;
@@ -318,7 +392,7 @@ body.light .breadcrumb{color:#888;}
  .tech-stack{flex-wrap:wrap;gap:6px;margin:0;}
  .tech-badge{padding:6px 12px;font-size:10px;transform:none!important;}

-  .table-wrapper{margin:0 -5vw;width:calc(100% + 10vw);padding:0 5vw;}
+  .table-wrapper{margin:0;width:100%;overflow-x:auto;padding:0;}
  table{font-size:11px;}
  th,td{padding:8px 10px;}
  th{font-size:7px;}
@@ -37,6 +37,22 @@
 .q-footer{text-align:center;padding:40px 5vw;border-top:1px solid rgba(255,255,255,0.04);}
 .q-footer .ft{font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.8;}
 .q-footer a{color:var(--accent);text-decoration:none;}
+
+body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;}
+body.clean::before,body.clean::after{display:none!important;}
+body.clean .q-hero{min-height:auto;padding:80px 24px;}
+body.clean .q-hero h1{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(28px,5vw,42px);color:var(--text);text-shadow:none!important;animation:none;}
+body.clean .q-hero .sub{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted);}
+body.clean .q-grid{max-width:600px;padding:20px 24px 60px;gap:12px;}
+body.clean .q-card{padding:20px;border:1px solid #333045;background:#22202a;border-radius:10px;transform:none!important;}
+body.clean .q-card:nth-child(n){margin-top:0;transform:none!important;}
+body.clean .q-card:hover{border-color:var(--accent);background:#22202a;}
+body.clean .q-card .qt{font-family:'Inter',sans-serif;font-size:14px;color:var(--text);line-height:1.6;}
+body.clean .q-card .qt::before{content:none;}
+body.clean .q-card .att{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;color:var(--muted);margin-top:8px;letter-spacing:0;text-transform:none;}
+body.clean .q-card .att::before{content:'\2014 ';color:var(--accent);}
+body.clean .q-footer{border-color:#333045;padding:24px;}
+body.clean .q-footer .ft{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);}
  </style>
 </head>
 <body>
@@ -89,6 +89,12 @@
        <h3>MacBook Air M4 (2024)</h3>
        <p>16GB RAM, 256GB storage. This thing is fast. The M4 chip handles everything I throw at it — VS Code with 10+ tabs, a dozen terminal windows, Docker containers, multiple browsers with 30+ tabs each, GSAP animations running in dev, and it doesn't break a sweat. Fanless design means it's completely silent. Best laptop I've ever owned.</p>

+        <h3>Google Pixel 8A</h3>
+        <p>Stock Google Android. No bloat, no nonsense. Does what a phone should do and stays out of the way.</p>
+
+        <h3>Steam Deck</h3>
+        <p>My portable testing rig. I use it for game dev testing, tinkering with Linux, and sometimes actual gaming. Surprisingly capable for a handheld.</p>
+
        <h2>Software</h2>
        <h3>VS Code</h3>
        <p>My main editor. Cursor's AI features are nice, but VS Code with the right extensions is unbeatable. I run the GitHub Copilot extension, ESLint, Prettier, and a handful of theme and icon packs. My config is mostly default — I don't spend time tweaking my editor, I spend time writing code.</p>
@@ -103,7 +109,10 @@
        <p>I keep Firefox around for testing and for a few extensions that work better in its ecosystem. The container tabs are great for separating work/personal stuff when I need it. Still respect what Mozilla does, just not my daily driver anymore.</p>

        <h2>Terminal</h2>
-        <p>I use the built-in macOS terminal with zsh. Nothing fancy — just a clean prompt, a few aliases, and git integration. I spent years customizing my terminal setup and eventually realized I was just procrastinating. Now it's minimal and I get work done.</p>
+        <p><strong>Ghostty.</strong> Fast, native-style terminal that looks good out of the box. GPU-accelerated, no config nonsense. I keep my prompt clean with a few aliases and git integration — spent years customizing and realized I was just procrastinating.</p>
+
+        <h2>Linux</h2>
+        <p>I used to run <strong>Debian</strong> with <strong>KDE Plasma</strong>. Solid, boring, got the job done. At some point I tried <strong>Arch</strong> with <strong>Hyprland</strong> — tiling WMs are genuinely fun to use. Not gonna get sassy about it though, I don't care what you use.</p>

        <h2>Other Tools</h2>
        <ul>