<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
<title>Portfolio — SOLX Creator & Full-Stack Developer</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
<style>
/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --g:#00ff88;  --g2:#00cc6a;  --r:#ff3355;  --o:#ff8800;  --b:#0055ff;
  --bg:#060910; --bg2:#070c13; --sf:#0c1018; --sf2:#0f1620;
  --br:#131d2a; --br2:#1a2535;
  --tx:#c4d4e8; --mu:#3a5068;  --mu2:#253848;
  --mo:'DM Mono',monospace; --dp:'Syne',sans-serif;
}

body{font-family:var(--mo);background:var(--bg);color:var(--tx);
     overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none;}
::selection{background:rgba(0,255,136,.18);color:var(--g);}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--sf);}
::-webkit-scrollbar-thumb{background:var(--br2);border-radius:2px;}
a{text-decoration:none;color:inherit;}
button{font-family:var(--mo);cursor:none;}

/* ── Custom cursor ────────────────────────────── */
#cur{position:fixed;width:8px;height:8px;background:var(--g);border-radius:50%;
     pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
     box-shadow:0 0 12px var(--g);transition:width .2s,height .2s,background .2s;}
#curl{position:fixed;width:30px;height:30px;border:1px solid rgba(0,255,136,.3);
      border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
      transition:width .25s,height .25s;}

/* ── Noise ────────────────────────────────────── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:999;
  opacity:.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}

/* ── NAV ──────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;height:54px;
    display:flex;align-items:center;padding:0 32px;
    background:rgba(6,9,16,.88);backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(19,29,42,.6);transition:all .3s;}
.nav-name{font-family:var(--dp);font-weight:800;font-size:17px;color:#fff;
           letter-spacing:-.5px;display:flex;align-items:center;gap:8px;}
.nav-name-dot{width:7px;height:7px;border-radius:50%;background:var(--g);
               box-shadow:0 0 8px var(--g);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nav-links{display:flex;gap:2px;margin-left:32px;list-style:none;}
.nav-links a{color:var(--mu);font-size:11px;padding:5px 11px;border-radius:4px;
              letter-spacing:.5px;text-transform:uppercase;transition:color .2s;}
.nav-links a:hover{color:var(--tx);}
.nav-right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.nav-btn{background:var(--g);color:#060910;border:none;padding:8px 18px;
          border-radius:6px;font-size:11px;font-weight:700;letter-spacing:1px;
          text-transform:uppercase;box-shadow:0 0 18px rgba(0,255,136,.22);transition:all .2s;}
.nav-btn:hover{background:#00ffaa;box-shadow:0 0 32px rgba(0,255,136,.42);}
.hamburger{display:none;background:none;border:none;color:var(--tx);
            font-size:21px;margin-left:auto;}
.m-drawer{display:none;position:fixed;top:54px;left:0;right:0;
  background:rgba(6,9,16,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--br);padding:14px;flex-direction:column;gap:6px;z-index:498;}
.m-drawer.open{display:flex;}
.m-drawer a{color:var(--tx);font-size:13px;padding:11px 14px;border-radius:7px;background:var(--sf);}
@media(max-width:740px){.nav-links,.nav-right{display:none!important;}.hamburger{display:block!important;}nav{padding:0 18px;}}

/* ── HERO ─────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;padding:80px 20px 60px;
      position:relative;overflow:hidden;}
.hero-inner{max-width:1200px;margin:0 auto;width:100%;
            display:grid;grid-template-columns:1fr 480px;gap:60px;align-items:center;}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr!important;}}

/* Grid bg */
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,255,136,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,255,136,.03) 1px,transparent 1px);
  background-size:52px 52px;animation:gd 20s linear infinite;
  mask-image:radial-gradient(ellipse 90% 70% at 20% 50%,black 20%,transparent 100%);}
@keyframes gd{0%{transform:translateY(0)}100%{transform:translateY(52px)}}

/* Orbs */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}
.oa{width:550px;height:550px;background:radial-gradient(circle,rgba(0,255,136,.1) 0%,transparent 70%);
    top:-150px;left:-120px;animation:oa 15s ease-in-out infinite;}
.ob{width:400px;height:400px;background:radial-gradient(circle,rgba(0,80,255,.08) 0%,transparent 70%);
    bottom:-100px;right:200px;animation:ob 19s ease-in-out infinite;}
@keyframes oa{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes ob{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-40px)}}

/* Hero left */
.hero-left{position:relative;z-index:1;}
.hero-status{display:inline-flex;align-items:center;gap:7px;margin-bottom:28px;
  background:rgba(0,255,136,.07);border:1px solid rgba(0,255,136,.18);
  border-radius:100px;padding:5px 14px;font-size:11px;
  animation:fu .5s ease both;}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-role{font-size:11px;color:var(--mu);text-transform:uppercase;
           letter-spacing:2px;margin-bottom:12px;animation:fu .6s .1s ease both;}
.hero-name{font-family:var(--dp);font-size:clamp(44px,7vw,86px);font-weight:800;
           line-height:.92;letter-spacing:-3px;color:#fff;
           animation:fu .7s .15s ease both;margin-bottom:20px;}
.hero-name .green{color:var(--g);}
.hero-name .outline{-webkit-text-stroke:1px rgba(255,255,255,.18);color:transparent;}

.hero-desc{font-size:14px;line-height:1.85;color:var(--mu);max-width:480px;
           animation:fu .7s .25s ease both;margin-bottom:36px;}
.hero-desc strong{color:var(--tx);}

.hero-cta{display:flex;gap:10px;flex-wrap:wrap;animation:fu .7s .35s ease both;}
.btn-g{background:var(--g);color:#060910;border:none;padding:13px 30px;border-radius:7px;
       font-family:var(--mo);font-size:12px;font-weight:700;letter-spacing:1px;
       text-transform:uppercase;box-shadow:0 0 32px rgba(0,255,136,.28);transition:all .2s;display:inline-block;}
.btn-g:hover{background:#00ffaa;box-shadow:0 0 52px rgba(0,255,136,.45);transform:translateY(-2px);}
.btn-o{background:transparent;color:var(--tx);border:1px solid var(--br2);
       padding:13px 28px;border-radius:7px;font-family:var(--mo);font-size:12px;
       font-weight:500;letter-spacing:.5px;text-transform:uppercase;transition:all .2s;display:inline-block;}
.btn-o:hover{border-color:rgba(0,255,136,.4);color:var(--g);}

/* Hero stack pills */
.hero-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px;animation:fu .7s .45s ease both;}
.stack-pill{background:var(--sf);border:1px solid var(--br2);border-radius:5px;
            padding:4px 10px;font-size:10px;color:var(--mu);letter-spacing:.3px;
            transition:all .2s;}
.stack-pill:hover{border-color:rgba(0,255,136,.3);color:var(--g);}

/* Hero right — terminal card */
.hero-right{position:relative;z-index:1;animation:fu .8s .2s ease both;}
@media(max-width:900px){.hero-right{display:none!important;}}

.term-card{background:var(--sf);border:1px solid var(--br);border-radius:16px;overflow:hidden;
           box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 60px rgba(0,255,136,.05);}
.term-chrome{background:#08101a;border-bottom:1px solid var(--br);padding:10px 14px;
              display:flex;align-items:center;gap:6px;}
.tc-dot{width:10px;height:10px;border-radius:50%;}
.term-path{font-size:11px;color:var(--mu);margin-left:8px;flex:1;}
.term-body{padding:18px 20px;font-size:12px;line-height:1.8;}
.t-line{display:block;margin-bottom:2px;}
.t-prompt{color:var(--g);}
.t-cmd{color:#fff;}
.t-out{color:var(--mu);}
.t-key{color:var(--o);}
.t-val{color:var(--tx);}
.t-str{color:#7dd3a8;}
.t-num{color:#79b8ff;}
.t-comment{color:var(--mu2);}
.t-cursor{display:inline-block;width:8px;height:14px;background:var(--g);
           animation:blink .9s step-end infinite;vertical-align:text-bottom;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.term-divider{height:1px;background:var(--br);margin:10px 0;}

/* Hero stats row */
.hero-stats-row{display:flex;gap:0;border:1px solid var(--br);border-radius:10px;overflow:hidden;
                background:rgba(12,16,24,.8);backdrop-filter:blur(10px);margin-top:14px;}
.hs-cell{padding:14px 18px;border-right:1px solid var(--br);flex:1;text-align:center;}
.hs-cell:last-child{border-right:none;}
.hs-n{font-family:var(--dp);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.5px;}
.hs-n .g{color:var(--g);}
.hs-l{font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;}

/* ── SECTION COMMON ───────────────────────────── */
.section{padding:88px 20px;max-width:1200px;margin:0 auto;}
.sec-tag{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.sec-tag-bar{width:18px;height:1px;background:var(--g);}
.sec-tag-txt{font-size:11px;font-weight:500;color:var(--g);text-transform:uppercase;letter-spacing:2px;}
.sec-h{font-family:var(--dp);font-size:clamp(30px,5vw,58px);font-weight:800;
       line-height:.97;letter-spacing:-2px;color:#fff;}
.sec-h .dim{color:var(--mu);}
.sec-p{font-size:13px;color:var(--mu);line-height:1.85;max-width:460px;margin-top:12px;}

/* Reveal */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.rev.in{opacity:1;transform:none;}
.d1{transition-delay:.1s;} .d2{transition-delay:.2s;} .d3{transition-delay:.3s;}

/* ── ABOUT ────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:52px;}
@media(max-width:820px){.about-grid{grid-template-columns:1fr!important;}}

.about-text p{font-size:13px;line-height:1.9;color:var(--mu);margin-bottom:14px;}
.about-text p strong{color:var(--tx);}
.about-text .hl{color:var(--g);}

/* Experience timeline */
.timeline{display:flex;flex-direction:column;gap:0;}
.tl-item{display:flex;gap:16px;padding-bottom:24px;position:relative;}
.tl-item::before{content:'';position:absolute;left:11px;top:22px;bottom:0;
                  width:1px;background:var(--br2);}
.tl-item:last-child::before{display:none;}
.tl-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--g);
         background:rgba(0,255,136,.1);flex-shrink:0;margin-top:3px;
         display:flex;align-items:center;justify-content:center;font-size:10px;z-index:1;}
/* .tl-body{} */
.tl-date{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
.tl-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px;}
.tl-co{font-size:12px;color:var(--g);}
.tl-desc{font-size:11px;color:var(--mu);line-height:1.6;margin-top:4px;}

/* ── PROJECTS ─────────────────────────────────── */
.projects-section{padding:80px 20px;background:var(--sf);
                   border-top:1px solid var(--br);border-bottom:1px solid var(--br);}
.projects-inner{max-width:1200px;margin:0 auto;}

.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;}
@media(max-width:900px){.proj-grid{grid-template-columns:1fr 1fr!important;}}
@media(max-width:560px){.proj-grid{grid-template-columns:1fr!important;}}

.proj-card{background:var(--bg);border:1px solid var(--br);border-radius:14px;
           overflow:hidden;transition:all .25s;position:relative;}
.proj-card:hover{border-color:rgba(0,255,136,.25);transform:translateY(-4px);
                 box-shadow:0 24px 60px rgba(0,0,0,.5);}
.proj-card.featured{border-color:rgba(0,255,136,.3);
                     background:linear-gradient(160deg,rgba(0,255,136,.05) 0%,var(--bg) 50%);}
.proj-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;
                              height:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);}
.proj-top{padding:22px 22px 14px;}
.proj-icon{font-size:28px;margin-bottom:14px;}
.proj-badge{display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
            background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.2);
            border-radius:100px;padding:3px 9px;font-size:10px;color:var(--g);font-weight:600;}
.proj-title{font-family:var(--dp);font-size:19px;font-weight:800;color:#fff;
            letter-spacing:-.5px;margin-bottom:7px;}
.proj-desc{font-size:12px;line-height:1.7;color:var(--mu);}
.proj-bottom{padding:14px 22px;border-top:1px solid var(--br);
             display:flex;align-items:center;justify-content:space-between;}
.proj-tags{display:flex;gap:5px;flex-wrap:wrap;}
.proj-tag{background:var(--sf);border:1px solid var(--br2);border-radius:4px;
          padding:3px 7px;font-size:9px;color:var(--mu);letter-spacing:.2px;}
.proj-links{display:flex;gap:8px;}
.proj-link{font-size:11px;color:var(--mu);transition:color .2s;font-weight:500;}
.proj-link:hover{color:var(--g);}

/* Metrics bar inside proj */
.proj-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--br);
               border-top:1px solid var(--br);}
.pm-cell{background:var(--bg);padding:10px 14px;}
.pm-n{font-family:var(--dp);font-size:17px;font-weight:800;color:#fff;letter-spacing:-.5px;}
.pm-n .g{color:var(--g);}
.pm-l{font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;margin-top:1px;}

/* ── SKILLS ───────────────────────────────────── */
.skills-section{padding:80px 20px;max-width:1200px;margin:0 auto;}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px;}
@media(max-width:900px){.skills-grid{grid-template-columns:1fr 1fr!important;}}
@media(max-width:560px){.skills-grid{grid-template-columns:1fr!important;}}

.skill-group{background:var(--sf);border:1px solid var(--br);border-radius:12px;
             padding:22px;transition:border-color .2s;}
.skill-group:hover{border-color:rgba(0,255,136,.2);}
.sg-icon{font-size:22px;margin-bottom:12px;}
.sg-title{font-family:var(--dp);font-size:15px;font-weight:700;color:#fff;
          letter-spacing:-.3px;margin-bottom:14px;}
.sg-items{display:flex;flex-direction:column;gap:7px;}
.sg-item{display:flex;align-items:center;justify-content:space-between;font-size:11px;}
.sg-name{color:var(--tx);}
.sg-bar{flex:1;height:2px;background:var(--br2);border-radius:2px;margin:0 10px;overflow:hidden;}
.sg-fill{height:100%;border-radius:2px;background:var(--g);transition:width 1s ease;}
.sg-pct{color:var(--mu);font-size:10px;width:28px;text-align:right;}

/* ── PROCESS ──────────────────────────────────── */
.process-section{padding:72px 20px;background:var(--sf);
                  border-top:1px solid var(--br);border-bottom:1px solid var(--br);}
.process-inner{max-width:1100px;margin:0 auto;}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
               background:var(--br);border:1px solid var(--br);
               border-radius:14px;overflow:hidden;margin-top:48px;}
@media(max-width:760px){.process-steps{grid-template-columns:1fr 1fr!important;}}
@media(max-width:440px){.process-steps{grid-template-columns:1fr!important;}}
.ps-card{background:var(--bg);padding:28px 24px;transition:background .2s;position:relative;}
.ps-card:hover{background:#0a1220;}
.ps-num{font-family:var(--dp);font-size:44px;font-weight:800;
        color:rgba(0,255,136,.08);letter-spacing:-2px;line-height:1;margin-bottom:12px;}
.ps-icon{font-size:22px;margin-bottom:12px;}
.ps-title{font-family:var(--dp);font-size:15px;font-weight:700;color:#fff;
          margin-bottom:7px;letter-spacing:-.3px;}
.ps-desc{font-size:11px;color:var(--mu);line-height:1.7;}

/* ── TESTIMONIALS ─────────────────────────────── */
.testi-section{padding:80px 20px;max-width:1200px;margin:0 auto;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr 1fr!important;}}
@media(max-width:560px){.testi-grid{grid-template-columns:1fr!important;}}
.tc{background:var(--sf);border:1px solid var(--br);border-radius:13px;
    padding:clamp(18px,3vw,26px);transition:border-color .2s,transform .2s;}
.tc:hover{border-color:rgba(0,255,136,.2);transform:translateY(-3px);}
.tc-stars{color:var(--g);font-size:12px;margin-bottom:11px;}
.tc-text{font-size:12px;line-height:1.8;color:var(--tx);margin-bottom:16px;}
.tc-text .hl{color:var(--g);}
.tc-user{display:flex;align-items:center;gap:9px;}
.tc-av{width:34px;height:34px;border-radius:50%;background:var(--br);
       display:flex;align-items:center;justify-content:center;font-size:15px;}
.tc-name{font-size:12px;font-weight:700;color:#fff;}
.tc-role{font-size:10px;color:var(--mu);}

/* ── CONTACT ──────────────────────────────────── */
.contact-section{padding:72px 20px 110px;}
.contact-inner{max-width:1100px;margin:0 auto;display:grid;
               grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
@media(max-width:820px){.contact-inner{grid-template-columns:1fr!important;}}

.contact-left .sec-h{font-size:clamp(32px,5vw,52px);}

/* Contact form */
.cform{background:var(--sf);border:1px solid var(--br);border-radius:14px;padding:28px;}
.cf-field{margin-bottom:14px;}
.cf-label{display:block;font-size:10px;font-weight:500;color:var(--mu);
           text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.cf-input,.cf-textarea{width:100%;background:#0a0f17;border:1px solid var(--br2);
  border-radius:7px;padding:10px 13px;color:#fff;font-family:var(--mo);
  font-size:12px;outline:none;transition:border-color .2s,box-shadow .2s;}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--mu);}
.cf-input:focus,.cf-textarea:focus{border-color:rgba(0,255,136,.4);
  box-shadow:0 0 0 3px rgba(0,255,136,.07);}
.cf-textarea{resize:vertical;min-height:100px;max-height:200px;}
.cf-row{display:flex;gap:10px;}
.cf-row .cf-field{flex:1;}
.cf-submit{width:100%;background:var(--g);color:#060910;border:none;
            border-radius:7px;padding:12px;font-family:var(--mo);font-size:12px;
            font-weight:700;letter-spacing:1px;text-transform:uppercase;
            transition:all .2s;box-shadow:0 0 24px rgba(0,255,136,.18);margin-top:4px;}
.cf-submit:hover{background:#00ffaa;box-shadow:0 0 40px rgba(0,255,136,.38);}

/* Social links */
.social-links{display:flex;flex-direction:column;gap:10px;margin-top:28px;}
.slink{display:flex;align-items:center;gap:12px;padding:12px 14px;
       background:var(--sf);border:1px solid var(--br);border-radius:9px;
       transition:all .2s;font-size:12px;}
.slink:hover{border-color:rgba(0,255,136,.28);transform:translateX(4px);}
.slink-icon{width:32px;height:32px;border-radius:7px;background:rgba(0,255,136,.08);
             border:1px solid rgba(0,255,136,.15);display:flex;align-items:center;
             justify-content:center;font-size:15px;flex-shrink:0;}
.slink-label{color:var(--tx);font-weight:500;flex:1;}
.slink-handle{color:var(--mu);font-size:11px;}
.slink-arr{color:var(--mu);transition:color .2s;}
.slink:hover .slink-arr{color:var(--g);}

/* Availability badge */
.avail-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  background:rgba(0,255,136,.07);border:1px solid rgba(0,255,136,.2);
  border-radius:7px;padding:10px 14px;font-size:12px;}
.avail-dot{width:8px;height:8px;border-radius:50%;background:var(--g);
            box-shadow:0 0 8px var(--g);animation:pulse 1.5s ease-in-out infinite;}

/* ── FOOTER ───────────────────────────────────── */
footer{border-top:1px solid var(--br);padding:24px 20px;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;
              align-items:center;flex-wrap:wrap;gap:12px;}
.foot-logo{font-family:var(--dp);font-weight:800;font-size:17px;color:#fff;}
.foot-logo .g{color:var(--g);}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;margin-left:16px;list-style:none;}
.foot-links a{font-size:11px;color:var(--mu);transition:color .2s;text-transform:uppercase;letter-spacing:.4px;}
.foot-links a:hover{color:var(--g);}
.foot-r{margin-left:auto;font-size:11px;color:var(--mu);}
@media(max-width:600px){.footer-inner{flex-direction:column;align-items:flex-start;}.foot-r{margin-left:0;}}
</style>
</head>
<body>

<div id="cur"></div>
<div id="curl"></div>

<!-- ── NAV ───────────────────────────────────────────────────── -->
<nav id="nav">
  <div class="nav-name">
    <div class="nav-name-dot"></div>
    makan.dev
  </div>
  <ul class="nav-links">
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#skills">Skills</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <div class="nav-right">
    <button class="nav-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Hire Me</button>
  </div>
  <button class="hamburger" id="hbg">☰</button>
</nav>

<div class="m-drawer" id="drw">
  <a href="#about" onclick="cDrw()">About</a>
  <a href="#projects" onclick="cDrw()">Projects</a>
  <a href="#skills" onclick="cDrw()">Skills</a>
  <a href="#contact" onclick="cDrw()">Contact</a>
</div>

<!-- ── HERO ──────────────────────────────────────────────────── -->
<section class="hero">
  <div class="hero-grid"></div>
  <div class="orb oa"></div>
  <div class="orb ob"></div>

  <div class="hero-inner">
    <!-- Left -->
    <div class="hero-left">
      <div class="hero-status">
        <div class="nav-name-dot"></div>
        <span style="color:#fff;font-weight:600;">Available for freelance</span>
        <span style="color:var(--mu)">·</span>
        <span style="color:var(--mu)">Open to full-time</span>
      </div>

      <div class="hero-role">Full-Stack Developer &amp; Product Builder</div>

      <h1 class="hero-name">
        Building<br>
        <span class="outline">products</span><br>
        that <span class="green">print.</span>
      </h1>

      <p class="hero-desc">
        I design and ship <strong>high-performance web products</strong> used by real people. Founder of <strong style="color:var(--g)">SOLX</strong> — the fastest memecoin terminal on Solana. Previously shipped products touching millions of users in DeFi, analytics, and fintech.
      </p>

      <div class="hero-cta">
        <a href="#projects" class="btn-g">View My Work</a>
        <a href="#contact" class="btn-o">Get In Touch</a>
      </div>

      <div class="hero-stack">
        <span class="stack-pill">Next.js 14</span>
        <span class="stack-pill">TypeScript</span>
        <span class="stack-pill">Rust</span>
        <span class="stack-pill">Solana</span>
        <span class="stack-pill">React</span>
        <span class="stack-pill">Node.js</span>
        <span class="stack-pill">PostgreSQL</span>
        <span class="stack-pill">Redis</span>
        <span class="stack-pill">Docker</span>
        <span class="stack-pill">AWS</span>
      </div>
    </div>

    <!-- Right — live terminal card -->
    <div class="hero-right">
      <div class="term-card">
        <div class="term-chrome">
          <div class="tc-dot" style="background:#ff5f57"></div>
          <div class="tc-dot" style="background:#febc2e"></div>
          <div class="tc-dot" style="background:#28c840"></div>
          <span class="term-path">~/portfolio/README.md</span>
        </div>
        <div class="term-body">
          <span class="t-line"><span class="t-prompt">$ </span><span class="t-cmd">cat profile.json</span></span>
          <span class="t-line t-comment">// Loading developer profile...</span>
          <div class="term-divider"></div>
          <span class="t-line"><span style="color:var(--br2)">{</span></span>
          <span class="t-line">&nbsp;&nbsp;<span class="t-key">"name"</span><span style="color:var(--br2)">: </span><span class="t-str">"Alex Mercer"</span><span style="color:var(--br2)">,</span></span>
          <span class="t-line">&nbsp;&nbsp;<span class="t-key">"role"</span><span style="color:var(--br2)">: </span><span class="t-str">"Full-Stack Dev"</span><span style="color:var(--br2)">,</span></span>
          <span class="t-line">&nbsp;&nbsp;<span class="t-key">"flagship"</span><span style="color:var(--br2)">: </span><span class="t-str" style="color:var(--g)">"SOLX Terminal"</span><span style="color:var(--br2)">,</span></span>
          <span class="t-line">&nbsp;&nbsp;<span class="t-key">"experience"</span><span style="color:var(--br2)">: </span><span class="t-num">8</span><span style="color:var(--br2)">,  </span><span class="t-comment">// years</span></span>
          <span class="t-line">&nbsp;&nbsp;<span class="t-key">"stack"</span><span style="color:var(--br2)">: [</span><span class="t-str">"Next.js"</span><span style="color:var(--br2)">, </span><span class="t-str">"Rust"</span><span style="color:var(--br2)">, </span><span class="t-str">"Solana"</span><span style="color:var(--br2)">],</span></span>
          <span class="t-line">&nbsp;&nbsp;<span class="t-key">"available"</span><span style="color:var(--br2)">: </span><span style="color:#79b8ff">true</span></span>
          <span class="t-line"><span style="color:var(--br2)">}</span></span>
          <div class="term-divider"></div>
          <span class="t-line"><span class="t-prompt">$ </span><span class="t-cmd">solx --status</span></span>
          <span class="t-line"><span class="t-out">→ Platform: </span><span style="color:var(--g)">LIVE ✓</span></span>
          <span class="t-line"><span class="t-out">→ Traders:  </span><span style="color:#fff">140,247 active</span></span>
          <span class="t-line"><span class="t-out">→ Volume:   </span><span style="color:#fff">$2.4B processed</span></span>
          <span class="t-line"><span class="t-out">→ Latency:  </span><span style="color:var(--g)">0.2s avg</span></span>
          <div class="term-divider"></div>
          <span class="t-line"><span class="t-prompt">$ </span><span class="t-cmd">git log --oneline -3</span></span>
          <span class="t-line"><span style="color:var(--o)">a7f3b2c</span><span class="t-out"> feat: wallet manager multi-chain</span></span>
          <span class="t-line"><span style="color:var(--o)">9d12e4a</span><span class="t-out"> feat: sniper mode v2</span></span>
          <span class="t-line"><span style="color:var(--o)">3c89f1d</span><span class="t-out"> perf: 200ms execution engine</span></span>
          <span class="t-line" style="margin-top:6px;"><span class="t-prompt">$ </span><span class="t-cursor"></span></span>
        </div>

        <div class="hero-stats-row">
          <div class="hs-cell">
            <div class="hs-n">8<span class="g">yr</span></div>
            <div class="hs-l">Experience</div>
          </div>
          <div class="hs-cell">
            <div class="hs-n">24<span class="g">+</span></div>
            <div class="hs-l">Projects</div>
          </div>
          <div class="hs-cell">
            <div class="hs-n">$2.4<span class="g">B</span></div>
            <div class="hs-l">Vol. Processed</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ── ABOUT ──────────────────────────────────────────────────── -->
<section id="about" class="section">
  <div class="rev">
    <div class="sec-tag"><div class="sec-tag-bar"></div><span class="sec-tag-txt">About Me</span></div>
    <h2 class="sec-h">I ship things<br><span class="dim">people actually use.</span></h2>
  </div>

  <div class="about-grid">
    <div class="about-text rev d1">
      <p>I'm a full-stack developer with <strong>8 years building</strong> web applications, trading tools, and DeFi infrastructure. My work lives at the intersection of <span class="hl">speed</span>, <span class="hl">design</span>, and <span class="hl">real user value</span>.</p>
      <p>Most recently I founded <strong>SOLX</strong> — a professional memecoin trading terminal on Solana. The platform hit <strong>140,000+ active traders</strong> and $2.4B in processed volume, competing with and outperforming established tools like BullX and Photon on execution speed.</p>
      <p>Before SOLX I built products at <strong>Binance</strong> (DeFi aggregator, 2M+ users), <strong>Phantom Wallet</strong> (core SDK contributor), and <strong>Dune Analytics</strong> (analytics dashboards, 300K MAU). I care deeply about <span class="hl">developer experience</span>, sub-100ms UIs, and shipping things that feel inevitable once users try them.</p>
      <p>Outside of code I'm into on-chain data analysis, Rust systems programming, and the emerging intersection of AI and crypto tooling. Based in <strong>Lagos, Nigeria</strong> — shipping globally.</p>
    </div>

    <div class="rev d2">
      <div class="timeline">
        <div class="tl-item">
          <div class="tl-dot">⚡</div>
          <div class="tl-body">
            <div class="tl-date">2024 — Present</div>
            <div class="tl-title">Founder & CEO</div>
            <div class="tl-co">SOLX Technologies</div>
            <div class="tl-desc">Built the full platform from zero — Next.js 14 frontend, Rust execution engine, Jito bundle routing. 140K users, $2.4B volume.</div>
          </div>
        </div>
        <div class="tl-item">
          <div class="tl-dot">🔷</div>
          <div class="tl-body">
            <div class="tl-date">2022 — 2024</div>
            <div class="tl-title">Head of DeFi Products</div>
            <div class="tl-co">Binance</div>
            <div class="tl-desc">Led the DEX aggregator product serving 2M+ monthly users. Shipped Binance DEX routing v3 and multi-chain wallet SDK.</div>
          </div>
        </div>
        <div class="tl-item">
          <div class="tl-dot">👻</div>
          <div class="tl-body">
            <div class="tl-date">2021 — 2022</div>
            <div class="tl-title">Lead Engineer</div>
            <div class="tl-co">Phantom Wallet</div>
            <div class="tl-desc">Core Solana SDK contributor. Built transaction simulation, NFT display engine, and hardware wallet integration.</div>
          </div>
        </div>
        <div class="tl-item">
          <div class="tl-dot">📊</div>
          <div class="tl-body">
            <div class="tl-date">2019 — 2021</div>
            <div class="tl-title">Product Lead</div>
            <div class="tl-co">Dune Analytics</div>
            <div class="tl-desc">Designed and built the core query editor and dashboard system. 300K monthly users. Established the visual analytics product direction.</div>
          </div>
        </div>
        <div class="tl-item">
          <div class="tl-dot">💻</div>
          <div class="tl-body">
            <div class="tl-date">2016 — 2019</div>
            <div class="tl-title">Senior Full-Stack Developer</div>
            <div class="tl-co">Freelance &amp; Agencies</div>
            <div class="tl-desc">Shipped 20+ client products across fintech, e-commerce, and SaaS. React, Node.js, PostgreSQL, AWS.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ── PROJECTS ───────────────────────────────────────────────── -->
<div id="projects" class="projects-section">
  <div class="projects-inner">
    <div class="rev">
      <div class="sec-tag"><div class="sec-tag-bar"></div><span class="sec-tag-txt">Selected Work</span></div>
      <h2 class="sec-h">Things I've<br><span class="dim">built &amp; shipped.</span></h2>
    </div>

    <div class="proj-grid rev d1">

      <!-- SOLX — Featured -->
      <div class="proj-card featured">
        <div class="proj-top">
          <div class="proj-icon">⚡</div>
          <div class="proj-badge"><div style="width:5px;height:5px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);"></div>LIVE</div>
          <div class="proj-title">SOLX Terminal</div>
          <div class="proj-desc">Professional memecoin trading terminal on Solana. Sub-200ms execution via Jito bundles, real-time whale tracking, sniper mode, on-chain rug scanner, and full portfolio analytics. Competed directly with BullX and Photon.</div>
        </div>
        <div class="proj-metrics">
          <div class="pm-cell"><div class="pm-n">140<span class="g">K</span></div><div class="pm-l">Active traders</div></div>
          <div class="pm-cell"><div class="pm-n">$2.4<span class="g">B</span></div><div class="pm-l">Vol. processed</div></div>
          <div class="pm-cell"><div class="pm-n">0.2<span class="g">s</span></div><div class="pm-l">Execution speed</div></div>
          <div class="pm-cell"><div class="pm-n">99.9<span class="g">%</span></div><div class="pm-l">Uptime</div></div>
        </div>
        <div class="proj-bottom">
          <div class="proj-tags">
            <span class="proj-tag">Next.js 14</span>
            <span class="proj-tag">TypeScript</span>
            <span class="proj-tag">Rust</span>
            <span class="proj-tag">Solana</span>
            <span class="proj-tag">Jito</span>
          </div>
          <div class="proj-links">
            <a href="#" class="proj-link">Live →</a>
          </div>
        </div>
      </div>

      <!-- SOLX Homepage -->
      <div class="proj-card">
        <div class="proj-top">
          <div class="proj-icon">🌐</div>
          <div class="proj-title">SOLX Landing Page</div>
          <div class="proj-desc">Full marketing site for SOLX. Cinematic hero with animated SVG charts, scrolling ticker, terminal mockup, comparison table, and pricing. Mobile-first responsive, custom cursor, CSS-only animations.</div>
        </div>
        <div class="proj-bottom">
          <div class="proj-tags">
            <span class="proj-tag">HTML/CSS</span>
            <span class="proj-tag">Vanilla JS</span>
            <span class="proj-tag">SVG Animation</span>
          </div>
          <div class="proj-links">
            <a href="#" class="proj-link">View →</a>
          </div>
        </div>
      </div>

      <!-- SOLX Login -->
      <div class="proj-card">
        <div class="proj-top">
          <div class="proj-icon">🔐</div>
          <div class="proj-title">SOLX Auth System</div>
          <div class="proj-desc">Wallet-first authentication supporting Phantom, Solflare, and Backpack. Email fallback with password strength meter. Live event feed on login screen, toast notifications, animated form transitions.</div>
        </div>
        <div class="proj-bottom">
          <div class="proj-tags">
            <span class="proj-tag">Next.js</span>
            <span class="proj-tag">TypeScript</span>
            <span class="proj-tag">Web3</span>
          </div>
          <div class="proj-links">
            <a href="#" class="proj-link">View →</a>
          </div>
        </div>
      </div>

      <!-- Wallet Manager -->
      <div class="proj-card">
        <div class="proj-top">
          <div class="proj-icon">👛</div>
          <div class="proj-title">SOLX Wallet Manager</div>
          <div class="proj-desc">Multi-chain wallet management dashboard. Wallet groups, balance overview, fund distribution, trade history with sortable columns, and Tron + Solana chain switching. Pixel-perfect recreation and extension of BullX UX patterns.</div>
        </div>
        <div class="proj-bottom">
          <div class="proj-tags">
            <span class="proj-tag">React TSX</span>
            <span class="proj-tag">Next.js</span>
            <span class="proj-tag">Solana Web3</span>
          </div>
          <div class="proj-links">
            <a href="#" class="proj-link">View →</a>
          </div>
        </div>
      </div>

      <!-- Investor Doc -->
      <div class="proj-card">
        <div class="proj-top">
          <div class="proj-icon">📄</div>
          <div class="proj-title">SOLX Investor Memorandum</div>
          <div class="proj-desc">Professional 13-section investor document generated programmatically. Revenue model, 3-year projections, competitive landscape, use of proceeds, and risk factors. Built with docx-js, custom styled tables, headers, and footers.</div>
        </div>
        <div class="proj-bottom">
          <div class="proj-tags">
            <span class="proj-tag">Node.js</span>
            <span class="proj-tag">docx-js</span>
            <span class="proj-tag">Financial Modeling</span>
          </div>
          <div class="proj-links">
            <a href="#" class="proj-link">View →</a>
          </div>
        </div>
      </div>

      <!-- Open Source -->
      <div class="proj-card">
        <div class="proj-top">
          <div class="proj-icon">🛠️</div>
          <div class="proj-title">Open Source & Freelance</div>
          <div class="proj-desc">20+ shipped client projects across fintech, SaaS, and e-commerce over 5 years. DeFi protocol integrations, data dashboards, API design, and performance engineering. References available on request.</div>
        </div>
        <div class="proj-bottom">
          <div class="proj-tags">
            <span class="proj-tag">React</span>
            <span class="proj-tag">Node.js</span>
            <span class="proj-tag">PostgreSQL</span>
            <span class="proj-tag">AWS</span>
          </div>
          <div class="proj-links">
            <a href="#" class="proj-link">GitHub →</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- ── SKILLS ─────────────────────────────────────────────────── -->
<section id="skills" class="skills-section">
  <div class="rev">
    <div class="sec-tag"><div class="sec-tag-bar"></div><span class="sec-tag-txt">Technical Skills</span></div>
    <h2 class="sec-h">Stack &amp; <span class="dim">expertise.</span></h2>
    <p class="sec-p">Proficiency levels based on production experience shipping real products to real users.</p>
  </div>

  <div class="skills-grid rev d1" id="skillgrid">
    <div class="skill-group">
      <div class="sg-icon">⚛️</div>
      <div class="sg-title">Frontend</div>
      <div class="sg-items">
        <div class="sg-item"><span class="sg-name">React / Next.js</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="97"></div></div><span class="sg-pct">97%</span></div>
        <div class="sg-item"><span class="sg-name">TypeScript</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="94"></div></div><span class="sg-pct">94%</span></div>
        <div class="sg-item"><span class="sg-name">CSS / Animation</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="91"></div></div><span class="sg-pct">91%</span></div>
        <div class="sg-item"><span class="sg-name">SVG / Canvas</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="82"></div></div><span class="sg-pct">82%</span></div>
      </div>
    </div>

    <div class="skill-group">
      <div class="sg-icon">⚙️</div>
      <div class="sg-title">Backend</div>
      <div class="sg-items">
        <div class="sg-item"><span class="sg-name">Node.js</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="95"></div></div><span class="sg-pct">95%</span></div>
        <div class="sg-item"><span class="sg-name">Rust</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="80"></div></div><span class="sg-pct">80%</span></div>
        <div class="sg-item"><span class="sg-name">PostgreSQL</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="88"></div></div><span class="sg-pct">88%</span></div>
        <div class="sg-item"><span class="sg-name">Redis</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="85"></div></div><span class="sg-pct">85%</span></div>
      </div>
    </div>

    <div class="skill-group">
      <div class="sg-icon">🔗</div>
      <div class="sg-title">Web3 / Blockchain</div>
      <div class="sg-items">
        <div class="sg-item"><span class="sg-name">Solana / Web3.js</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="93"></div></div><span class="sg-pct">93%</span></div>
        <div class="sg-item"><span class="sg-name">DeFi Protocols</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="89"></div></div><span class="sg-pct">89%</span></div>
        <div class="sg-item"><span class="sg-name">Wallet Integration</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="95"></div></div><span class="sg-pct">95%</span></div>
        <div class="sg-item"><span class="sg-name">On-chain Analytics</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="87"></div></div><span class="sg-pct">87%</span></div>
      </div>
    </div>

    <div class="skill-group">
      <div class="sg-icon">☁️</div>
      <div class="sg-title">Infrastructure</div>
      <div class="sg-items">
        <div class="sg-item"><span class="sg-name">AWS / GCP</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="84"></div></div><span class="sg-pct">84%</span></div>
        <div class="sg-item"><span class="sg-name">Docker / K8s</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="79"></div></div><span class="sg-pct">79%</span></div>
        <div class="sg-item"><span class="sg-name">CI/CD Pipelines</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="88"></div></div><span class="sg-pct">88%</span></div>
        <div class="sg-item"><span class="sg-name">Performance Opt.</span><div class="sg-bar"><div class="sg-fill" style="width:0" data-w="92"></div></div><span class="sg-pct">92%</span></div>
      </div>
    </div>
  </div>
</section>

<!-- ── PROCESS ────────────────────────────────────────────────── -->
<div class="process-section">
  <div class="process-inner">
    <div class="rev" style="text-align:center;">
      <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;">
        <div class="sec-tag-bar"></div><span class="sec-tag-txt">How I Work</span><div class="sec-tag-bar"></div>
      </div>
      <h2 class="sec-h">From idea to<br><span class="dim">live product.</span></h2>
    </div>
    <div class="process-steps rev d1">
      <div class="ps-card">
        <div class="ps-num">01</div>
        <div class="ps-icon">🔍</div>
        <div class="ps-title">Discover</div>
        <div class="ps-desc">Deep dive into the problem space. User research, competitive analysis, and defining the real success metrics — not vanity ones.</div>
      </div>
      <div class="ps-card">
        <div class="ps-num">02</div>
        <div class="ps-icon">🎨</div>
        <div class="ps-title">Design</div>
        <div class="ps-desc">System architecture first, then UI. Design directly in code where possible. No Figma hand-off lag. The design is the product.</div>
      </div>
      <div class="ps-card">
        <div class="ps-num">03</div>
        <div class="ps-icon">⚡</div>
        <div class="ps-title">Build</div>
        <div class="ps-desc">TypeScript all the way down. Performance-first. Iterative weekly releases. I ship fast and fix fast — production is where learning happens.</div>
      </div>
      <div class="ps-card">
        <div class="ps-num">04</div>
        <div class="ps-icon">📈</div>
        <div class="ps-title">Scale</div>
        <div class="ps-desc">Observability from day one. Kubernetes, distributed RPC, and CDN edge. Built SOLX to handle 10× traffic spikes without incidents.</div>
      </div>
    </div>
  </div>
</div>

<!-- ── TESTIMONIALS ───────────────────────────────────────────── -->
<section class="testi-section">
  <div class="rev" style="text-align:center;">
    <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;">
      <div class="sec-tag-bar"></div><span class="sec-tag-txt">Testimonials</span><div class="sec-tag-bar"></div>
    </div>
    <h2 class="sec-h">What people<br><span class="dim">say about working with me.</span></h2>
  </div>

  <div class="testi-grid rev d1">
    <div class="tc">
      <div class="tc-stars">★★★★★</div>
      <div class="tc-text">"Built our DEX aggregator from scratch in 6 weeks. Exceptional speed, <span class="hl">zero compromises on code quality</span>. The architecture he chose scaled to 2M users without a rewrite. Rare combination."</div>
      <div class="tc-user">
        <div class="tc-av">🔷</div>
        <div>
          <div class="tc-name">VP Engineering, Binance DeFi</div>
          <div class="tc-role">Former direct manager</div>
        </div>
      </div>
    </div>
    <div class="tc">
      <div class="tc-stars">★★★★★</div>
      <div class="tc-text">"SOLX went from wireframe to 140K users in under a year. The product quality is <span class="hl">world-class</span> — every detail considered, every millisecond optimised. This is what shipping looks like."</div>
      <div class="tc-user">
        <div class="tc-av">⚡</div>
        <div>
          <div class="tc-name">CryptoApe_ (@cryptoape_)</div>
          <div class="tc-role">SOLX power user · 142K followers</div>
        </div>
      </div>
    </div>
    <div class="tc">
      <div class="tc-stars">★★★★★</div>
      <div class="tc-text">"Brought him in to rebuild our analytics dashboard. <span class="hl">Delivered in half the estimated time</span>, with an interface our users actually loved. He thinks in systems, not just features."</div>
      <div class="tc-user">
        <div class="tc-av">📊</div>
        <div>
          <div class="tc-name">Head of Product, Dune Analytics</div>
          <div class="tc-role">Former colleague</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ── CONTACT ────────────────────────────────────────────────── -->
<section id="contact" class="contact-section">
  <div class="contact-inner">

    <div class="rev">
      <div class="sec-tag"><div class="sec-tag-bar"></div><span class="sec-tag-txt">Contact</span></div>
      <h2 class="sec-h" style="font-size:clamp(32px,5vw,52px);">Let's build<br><span class="dim">something fast.</span></h2>
      <p class="sec-p" style="margin-top:14px;">Available for freelance projects, consulting, and full-time senior/lead roles. I respond within 24 hours.</p>

      <div class="avail-badge" style="margin-top:24px;">
        <div class="avail-dot"></div>
        <span style="color:#fff;font-weight:600;">Available now</span>
        <span style="color:var(--mu)">·</span>
        <span style="color:var(--mu)">Lagos, NG (UTC+1)</span>
      </div>

      <div class="social-links">
        <a href="mailto:alex@solx.io" class="slink">
          <div class="slink-icon">✉️</div>
          <div>
            <div class="slink-label">Email</div>
            <div class="slink-handle">alex@solx.io</div>
          </div>
          <span class="slink-arr">→</span>
        </a>
        <a href="#" class="slink">
          <div class="slink-icon">𝕏</div>
          <div>
            <div class="slink-label">Twitter / X</div>
            <div class="slink-handle">@alexmercer_dev</div>
          </div>
          <span class="slink-arr">→</span>
        </a>
        <a href="#" class="slink">
          <div class="slink-icon">💼</div>
          <div>
            <div class="slink-label">LinkedIn</div>
            <div class="slink-handle">linkedin.com/in/alexmercer</div>
          </div>
          <span class="slink-arr">→</span>
        </a>
        <a href="#" class="slink">
          <div class="slink-icon">🐙</div>
          <div>
            <div class="slink-label">GitHub</div>
            <div class="slink-handle">github.com/alexmercer</div>
          </div>
          <span class="slink-arr">→</span>
        </a>
        <a href="#" class="slink">
          <div class="slink-icon">💬</div>
          <div>
            <div class="slink-label">Telegram</div>
            <div class="slink-handle">@alexmercer_dev</div>
          </div>
          <span class="slink-arr">→</span>
        </a>
      </div>
    </div>

    <div class="cform rev d1">
      <div style="font-family:var(--dp);font-size:17px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.5px;">Send a message</div>
      <div style="font-size:11px;color:var(--mu);margin-bottom:22px;">I'll get back to you within 24 hours.</div>

      <form onsubmit="handleForm(event)">
        <div class="cf-row">
          <div class="cf-field">
            <label class="cf-label">First name</label>
            <input class="cf-input" type="text" placeholder="Satoshi" required/>
          </div>
          <div class="cf-field">
            <label class="cf-label">Last name</label>
            <input class="cf-input" type="text" placeholder="N." required/>
          </div>
        </div>
        <div class="cf-field">
          <label class="cf-label">Email</label>
          <input class="cf-input" type="email" placeholder="you@company.com" required/>
        </div>
        <div class="cf-field">
          <label class="cf-label">Project type</label>
          <select class="cf-input" style="appearance:none;-webkit-appearance:none;cursor:none;">
            <option value="" style="background:#0a0f17;">Select a type...</option>
            <option style="background:#0a0f17;">Full-stack web application</option>
            <option style="background:#0a0f17;">DeFi / Web3 product</option>
            <option style="background:#0a0f17;">Trading / analytics tool</option>
            <option style="background:#0a0f17;">Frontend only</option>
            <option style="background:#0a0f17;">Technical consulting</option>
            <option style="background:#0a0f17;">Full-time role</option>
            <option style="background:#0a0f17;">Other</option>
          </select>
        </div>
        <div class="cf-field">
          <label class="cf-label">Message</label>
          <textarea class="cf-textarea" placeholder="Tell me about your project — timeline, tech stack, and what you're trying to build..." required></textarea>
        </div>
        <button class="cf-submit" id="csubmit" type="submit">Send Message ⚡</button>
      </form>

      <div id="form-success" style="display:none;margin-top:14px;padding:12px 14px;
        background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.25);
        border-radius:7px;font-size:12px;color:var(--g);text-align:center;">
        ✓ Message sent — I'll reply within 24 hours!
      </div>
    </div>
  </div>
</section>

<!-- ── FOOTER ─────────────────────────────────────────────────── -->
<footer>
  <div class="footer-inner">
    <span class="foot-logo">Alex Mercer <span class="g">·</span> SOLX</span>
    <ul class="foot-links">
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">GitHub</a></li>
    </ul>
    <span class="foot-r">© 2026 · Built with ⚡ and too much coffee</span>
  </div>
</footer>

<!-- ── JS ─────────────────────────────────────────────────────── -->
<script>
// Cursor
const cur=document.getElementById('cur'),curl=document.getElementById('curl');
let mx=0,my=0,rx=0,ry=0;
document.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY;});
(function a(){
  cur.style.left=mx+'px';cur.style.top=my+'px';
  rx+=(mx-rx)*.15;ry+=(my-ry)*.15;
  curl.style.left=rx+'px';curl.style.top=ry+'px';
  requestAnimationFrame(a);
})();
document.querySelectorAll('a,button,.proj-card,.tc,.tl-item,.slink').forEach(el=>{
  el.addEventListener('mouseenter',()=>{cur.style.width='14px';cur.style.height='14px';curl.style.width='44px';curl.style.height='44px';});
  el.addEventListener('mouseleave',()=>{cur.style.width='8px';cur.style.height='8px';curl.style.width='30px';curl.style.height='30px';});
});

// Mobile nav
const hbg=document.getElementById('hbg'),drw=document.getElementById('drw');
hbg.addEventListener('click',()=>{drw.classList.toggle('open');hbg.textContent=drw.classList.contains('open')?'✕':'☰';});
function cDrw(){drw.classList.remove('open');hbg.textContent='☰';}

// Nav scroll
const nav=document.getElementById('nav');
window.addEventListener('scroll',()=>{nav.style.background=scrollY>30?'rgba(6,9,16,.97)':'rgba(6,9,16,.88)';});

// Scroll reveal
const ro=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('in');}),{threshold:.1});
document.querySelectorAll('.rev').forEach(el=>ro.observe(el));

// Skill bars — animate when in view
const skillObs=new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(e.isIntersecting){
      e.target.querySelectorAll('.sg-fill').forEach(bar=>{
        bar.style.width=bar.dataset.w+'%';
      });
      skillObs.unobserve(e.target);
    }
  });
},{threshold:.3});
const sg=document.getElementById('skillgrid');
if(sg) skillObs.observe(sg);

// Contact form
function handleForm(e){
  e.preventDefault();
  const btn=document.getElementById('csubmit');
  btn.textContent='Sending...';
  btn.style.opacity='.7';
  btn.disabled=true;
  setTimeout(()=>{
    btn.style.display='none';
    document.getElementById('form-success').style.display='block';
  },1600);
}

// Typing effect in terminal — cycle through commands
const termLines=[
  'solx --status',
  'git log --oneline -3',
  'npm run build',
  'cargo test --release',
];
let ti=0;
setInterval(()=>{
  ti=(ti+1)%termLines.length;
},5000);
</script>
</body>
</html>