*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#080808;--surface:#0f0f0f;--surface2:#181818;--surface3:#222; --green:#33ff33;--green-dim:#1a8c1a;--green-dark:#0d4d0d; --amber:#ffb000;--amber-dim:#996a00; --cyan:#00ffff;--cyan-dim:#009999; --purple:#cc77ff;--purple-dim:#8844bb; --red:#ff4444;--red-dim:#cc2222; --blue:#4488ff;--gold:#ffd700; --text:#c0c0c0;--dim:#666;--dimmer:#333; --border:#333; --bevel-light:#444;--bevel-dark:#1a1a1a; /* default accent = green */ --accent:#33ff33; --accent-dim:#1a8c1a; --accent-dark:#0d4d0d; --accent-glow:rgba(51,255,51,.3); } /* per-section accent colors */ .section-home{--accent:#33ff33;--accent-dim:#1a8c1a;--accent-dark:#0d4d0d;--accent-glow:rgba(51,255,51,.3)} .section-stats{--accent:#ffd700;--accent-dim:#b8960a;--accent-dark:#6b5900;--accent-glow:rgba(255,215,0,.3)} .section-projects{--accent:#cc77ff;--accent-dim:#8844bb;--accent-dark:#552288;--accent-glow:rgba(204,119,255,.3)} .section-fedl{--accent:#ff4444;--accent-dim:#cc2222;--accent-dark:#881111;--accent-glow:rgba(255,68,68,.3)} .section-skills{--accent:#00ffff;--accent-dim:#009999;--accent-dark:#006666;--accent-glow:rgba(0,255,255,.3)} .section-contact{--accent:#ffb000;--accent-dim:#cc8800;--accent-dark:#885500;--accent-glow:rgba(255,176,0,.3)} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--text); font-family:'VT323','Courier New',monospace; font-size:18px;line-height:1.5; overflow-x:hidden; } ::selection{background:var(--accent);color:var(--bg)} a{color:var(--accent);text-decoration:none} a:hover{text-shadow:0 0 8px var(--accent-glow)} /* CRT */ .crt-overlay{ position:fixed;inset:0;z-index:9998;pointer-events:none; background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%); } .scanlines{ position:fixed;inset:0;z-index:9997;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 3px); } @keyframes flicker{ 0%{opacity:.97}5%{opacity:.95}10%{opacity:.98}15%{opacity:.96} 20%{opacity:.99}50%{opacity:.97}80%{opacity:.98}90%{opacity:.96}100%{opacity:.98} } body{animation:flicker 4s infinite} /* Boot */ #boot-screen{ position:fixed;inset:0;z-index:10000; background:var(--bg);padding:40px; display:flex;flex-direction:column; font-family:'Share Tech Mono','Courier New',monospace; font-size:14px;color:var(--green); overflow:hidden; } #boot-screen.done{display:none} #boot-text{white-space:pre-wrap;line-height:1.6;flex:1;overflow-y:auto} #boot-screen .boot-cursor{display:inline;animation:blink .6s step-end infinite;color:var(--green)} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} .hidden{display:none!important} /* Titlebar */ .titlebar{ display:flex;align-items:center;justify-content:space-between; padding:4px 8px; background:linear-gradient(90deg,var(--green-dark),var(--green-dim),var(--green-dark)); color:var(--bg);font-family:'Press Start 2P',monospace;font-size:8px; border-bottom:2px solid var(--green); position:sticky;top:0;z-index:100; } .titlebar-left{display:flex;align-items:center;gap:8px} .titlebar-icon{font-size:14px} .titlebar-text{letter-spacing:.5px} .titlebar-btns{display:flex;gap:4px} .tb-btn{ width:20px;height:18px; display:flex;align-items:center;justify-content:center; background:var(--surface2);border:1px solid var(--green-dim); color:var(--green);cursor:pointer;font-size:10px; transition:all .1s; } .tb-btn:hover{background:var(--green);color:var(--bg)} /* Navigation */ .nav-bar{ display:flex;align-items:center;gap:0; padding:3px 8px; background:var(--surface);border-bottom:1px solid var(--dimmer); font-family:'VT323',monospace;font-size:16px; position:sticky;top:28px;z-index:99; overflow-x:auto; } .nav-link{ padding:2px 12px;color:var(--dim);cursor:pointer; transition:all .15s;white-space:nowrap; border-bottom:2px solid transparent; } .nav-link:hover{color:var(--green);border-bottom-color:var(--green-dim)} .nav-link.active{color:var(--accent);border-bottom-color:var(--accent)} .menu-clock{margin-left:auto;color:var(--amber);font-family:'Share Tech Mono',monospace;font-size:14px;white-space:nowrap} /* Sections */ .section{ padding:24px 12px 48px; border-bottom:2px solid var(--dimmer); position:relative; transition:border-color .3s; scroll-margin-top:80px; } .section-accent{ position:absolute;top:0;left:0;right:0;height:3px; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); opacity:0; transition:opacity .4s; } .section.active-section .section-accent{opacity:1} .section.active-section{border-bottom-color:var(--accent)} /* Retro Windows */ .retro-window{ border:2px solid var(--dimmer); background:var(--surface); box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark), 4px 4px 0 rgba(0,0,0,.4); max-width:900px;margin:0 auto; transition:border-color .3s,box-shadow .3s; } .active-section .retro-window{ border-color:var(--accent-dim); box-shadow:inset 1px 1px 0 var(--accent-dim),inset -1px -1px 0 var(--accent-dark), 4px 4px 0 rgba(0,0,0,.5),0 0 20px var(--accent-glow); } .rw-titlebar{ display:flex;align-items:center;justify-content:space-between; padding:4px 8px; background:linear-gradient(90deg,var(--accent-dark),var(--accent-dim),var(--accent-dark)); color:var(--bg);font-family:'Press Start 2P',monospace;font-size:7px; transition:background .3s; } .rw-close{ width:18px;height:16px;display:flex;align-items:center;justify-content:center; background:var(--surface2);border:1px solid var(--dimmer); color:var(--text);cursor:pointer;font-size:10px; font-family:'VT323',monospace; transition:all .15s; } .rw-close:hover{background:var(--red);color:#fff;border-color:var(--red)} .rw-body{padding:16px} /* Hero */ .ascii-hero{text-align:center} .ascii-art{ font-family:'Share Tech Mono',monospace; font-size:10px;line-height:1.2; color:var(--accent); text-shadow:0 0 6px var(--accent-glow); margin-bottom:20px;overflow-x:auto; white-space:pre; transition:color .3s,text-shadow .3s; } .hero-info{ text-align:left;max-width:600px;margin:0 auto 20px; font-family:'VT323',monospace;font-size:20px; } .typewriter-line{ opacity:0;transform:translateX(-10px); animation:typeIn .4s ease forwards; margin-bottom:4px;color:var(--accent); } .typewriter-line:nth-child(1){animation-delay:.3s} .typewriter-line:nth-child(2){animation-delay:.6s} .typewriter-line:nth-child(3){animation-delay:.9s} @keyframes typeIn{to{opacity:1;transform:none}} .blink-line{animation:typeIn .4s ease 1.2s forwards;opacity:0;transform:translateX(-10px)} .cursor{animation:blink .6s step-end infinite} .hero-tags{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center; margin:20px 0; } .tag{ padding:4px 10px; font-family:'Press Start 2P',monospace;font-size:7px; color:var(--accent);border:1px solid var(--accent-dim); background:var(--surface2); transition:all .15s; } .tag:hover{box-shadow:0 0 8px var(--accent-glow);text-shadow:0 0 6px var(--accent-glow)} .hero-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px} /* Buttons */ .retro-btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 16px; font-family:'Press Start 2P',monospace;font-size:8px; color:var(--accent);background:var(--surface2); border:2px solid var(--accent-dim); cursor:pointer;transition:all .1s; box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark); } .retro-btn:hover{ background:var(--accent);color:var(--bg); box-shadow:0 0 12px var(--accent-glow); } .retro-btn:active{ box-shadow:inset -1px -1px 0 var(--bevel-light),inset 1px 1px 0 var(--bevel-dark); } .green-btn{border-color:var(--green-dim);color:var(--green)} .green-btn:hover{background:var(--green);color:var(--bg)} /* Stats */ .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .stat-box{ border:1px solid var(--dimmer);padding:14px;text-align:center; background:var(--surface2);transition:all .15s; } .active-section .stat-box:hover{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)} .stat-box-label{ font-family:'Press Start 2P',monospace;font-size:6px; color:var(--dim);margin-bottom:8px;letter-spacing:.5px; } .stat-box-value{ font-family:'Share Tech Mono',monospace;font-size:28px; color:var(--accent);margin-bottom:8px; text-shadow:0 0 8px var(--accent-glow); transition:color .3s,text-shadow .3s; } .stat-box-value.gold{color:var(--gold);text-shadow:0 0 8px rgba(255,215,0,.4)} .stat-box-value.green{color:var(--green);text-shadow:0 0 8px rgba(51,255,51,.4)} .stat-box-value.cyan{color:var(--cyan);text-shadow:0 0 8px rgba(0,255,255,.4)} .stat-box-value.purple{color:var(--purple);text-shadow:0 0 8px rgba(204,119,255,.4)} .stat-box-value.amber{color:var(--amber);text-shadow:0 0 8px rgba(255,176,0,.4)} .stat-bar{height:4px;background:var(--surface3);margin-top:4px;overflow:hidden} .stat-bar-fill{ height:100%;width:0;background:var(--accent); transition:width 1s ease-out,background .3s; box-shadow:0 0 6px var(--accent-glow); } .stat-bar-fill.gold{background:var(--gold);box-shadow:0 0 6px rgba(255,215,0,.4)} .stat-bar-fill.green{background:var(--green)} .stat-bar-fill.cyan{background:var(--cyan);box-shadow:0 0 6px rgba(0,255,255,.4)} .stat-bar-fill.purple{background:var(--purple);box-shadow:0 0 6px rgba(204,119,255,.4)} .stat-bar-fill.amber{background:var(--amber);box-shadow:0 0 6px rgba(255,176,0,.4)} /* Activity */ .activity-log{max-height:300px;overflow-y:auto;font-family:'Share Tech Mono',monospace;font-size:14px} .log-line{ padding:4px 0;border-bottom:1px solid var(--dimmer); display:flex;gap:8px;align-items:baseline; } .log-line.dim{color:var(--dim)} .log-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px} .log-dot.push{background:var(--accent);box-shadow:0 0 4px var(--accent-glow)} .log-dot.create{background:var(--cyan);box-shadow:0 0 4px rgba(0,255,255,.5)} .log-dot.other{background:var(--amber)} .log-repo{color:var(--accent);min-width:120px} .log-msg{color:var(--dim);flex:1} .log-time{color:var(--amber);font-size:12px} /* Projects */ .project-filters{display:flex;gap:4px;margin-bottom:12px} .pf-btn{ padding:4px 12px; font-family:'Press Start 2P',monospace;font-size:7px; color:var(--dim);background:var(--surface2); border:1px solid var(--dimmer);cursor:pointer;transition:all .1s; } .pf-btn:hover,.pf-btn.active{color:var(--accent);border-color:var(--accent);background:var(--surface2)} .projects-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto} .project-row{ display:flex;align-items:center;gap:12px; padding:10px 12px; border:1px solid var(--dimmer);background:var(--surface2); cursor:pointer;transition:all .15s; } .project-row:hover{ border-color:var(--accent); background:rgba(255,255,255,.02); box-shadow:0 0 8px var(--accent-glow); } .project-row .pr-icon{font-size:18px;flex-shrink:0} .project-row .pr-info{flex:1;min-width:0} .project-row .pr-name{ font-family:'Press Start 2P',monospace;font-size:8px; color:var(--accent);margin-bottom:3px; transition:color .3s; } .project-row .pr-desc{ font-size:15px;color:var(--dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .project-row .pr-meta{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end} .project-row .pr-tag{ font-family:'Press Start 2P',monospace;font-size:5px; padding:2px 6px;border:1px solid var(--dimmer);color:var(--dim); } .project-row .pr-tag.stars{color:var(--gold);border-color:var(--amber-dim)} .project-row .pr-tag.lang{color:var(--accent);border-color:var(--accent-dim)} .project-row .pr-tag.fork{color:var(--amber);border-color:var(--amber-dim)} .project-row .pr-link{ font-family:'Press Start 2P',monospace;font-size:7px; color:var(--accent);flex-shrink:0;transition:color .3s; } .project-row:hover .pr-link{text-shadow:0 0 6px var(--accent-glow)} /* FEDL */ .fedl-window{border-color:var(--accent-dim)!important} .fedl-titlebar{background:linear-gradient(90deg,var(--accent-dark),var(--accent-dim),var(--accent-dark))!important} .fedl-body{text-align:center} .fedl-ascii{ font-family:'Share Tech Mono',monospace;font-size:10px; color:var(--accent);text-shadow:0 0 6px var(--accent-glow); margin-bottom:16px;line-height:1.1; white-space:pre;overflow-x:auto; transition:color .3s,text-shadow .3s; } .fedl-desc{ font-family:'VT323',monospace;font-size:20px; color:var(--dim);text-align:left;max-width:500px;margin:0 auto 4px; } .fedl-stats-row{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px; margin:20px 0; } .fedl-stat{ border:1px solid var(--dimmer);padding:16px 8px;text-align:center; background:var(--surface2); } .fedl-stat-val{ font-family:'Share Tech Mono',monospace;font-size:22px; color:var(--accent);text-shadow:0 0 6px var(--accent-glow); margin-bottom:4px; transition:color .3s,text-shadow .3s; } .fedl-stat-lbl{ font-family:'Press Start 2P',monospace;font-size:5px; color:var(--dim);letter-spacing:.5px; } .fedl-timeline{text-align:left;margin:16px 0;padding:12px;border:1px solid var(--dimmer);background:var(--surface2)} .fedl-tl-title{ font-family:'Press Start 2P',monospace;font-size:7px; color:var(--accent);margin-bottom:8px; } .fedl-tl-item{ font-family:'VT323',monospace;font-size:18px; color:var(--dim);padding:3px 0;padding-left:12px; border-left:2px solid var(--dimmer);margin-left:4px; } .fedl-tl-item:last-child{border-left-color:var(--accent)} .tl-date{color:var(--amber);font-family:'Share Tech Mono',monospace;font-size:14px} .fedl-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px} /* Skills */ .skills-list{display:flex;flex-direction:column;gap:6px;margin-bottom:20px} .skill-row{display:flex;align-items:center;gap:12px} .skill-name{ font-family:'Press Start 2P',monospace;font-size:7px; color:var(--dim);width:100px;text-align:right;flex-shrink:0; } .skill-bar{flex:1;height:10px;background:var(--surface3);border:1px solid var(--dimmer);overflow:hidden} .skill-fill{height:100%;width:0;transition:width 1s ease-out,background .3s;position:relative} .skill-fill::after{ content:'';position:absolute;inset:0; background:repeating-linear-gradient(90deg,transparent 0px,transparent 3px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px); } .skill-fill.green{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)} .skill-fill.cyan{background:var(--cyan);box-shadow:0 0 6px rgba(0,255,255,.3)} .skill-fill.amber{background:var(--amber);box-shadow:0 0 6px rgba(255,176,0,.3)} .skill-fill.purple{background:var(--purple);box-shadow:0 0 6px rgba(204,119,255,.3)} .skill-pct{ font-family:'Share Tech Mono',monospace;font-size:14px; color:var(--accent);width:36px;text-align:right; transition:color .3s; } .tools-section{border-top:1px solid var(--dimmer);padding-top:16px} .tools-title{ font-family:'Press Start 2P',monospace;font-size:7px; color:var(--accent);margin-bottom:12px; } .tools-grid{display:flex;flex-wrap:wrap;gap:6px} .tool-chip{ padding:4px 10px; font-family:'Press Start 2P',monospace;font-size:6px; color:var(--dim);border:1px solid var(--dimmer); background:var(--surface2);transition:all .15s;cursor:default; } .tool-chip:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 6px var(--accent-glow);text-shadow:0 0 4px var(--accent-glow)} /* Contact */ .contact-list{display:flex;flex-direction:column;gap:6px} .contact-row{ display:flex;align-items:center;gap:12px; padding:12px;border:1px solid var(--dimmer); background:var(--surface2);transition:all .15s;cursor:pointer; } .contact-row:hover{ border-color:var(--accent); background:rgba(255,255,255,.02); box-shadow:0 0 8px var(--accent-glow); } .contact-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center} .contact-info{flex:1;min-width:0} .contact-label{ font-family:'Press Start 2P',monospace;font-size:6px; color:var(--dim);display:block;margin-bottom:2px; } .contact-val{ font-family:'VT323',monospace;font-size:20px; color:var(--accent);transition:color .3s; } .contact-row:hover .contact-val{text-shadow:0 0 6px var(--accent-glow)} .contact-arrow{ color:var(--dim);font-size:18px;flex-shrink:0; transition:all .15s; } .contact-row:hover .contact-arrow{color:var(--accent);transform:translateX(4px);text-shadow:0 0 6px var(--accent-glow)} /* Statusbar */ .statusbar{ display:flex;align-items:center;justify-content:space-between; padding:3px 8px; background:var(--surface);border-top:2px solid var(--dimmer); font-family:'Press Start 2P',monospace;font-size:6px; color:var(--dim);position:sticky;bottom:0; } .sb-center{color:var(--accent);transition:color .3s} /* Scrollbar */ ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--surface)} ::-webkit-scrollbar-thumb{background:var(--dimmer);border:1px solid var(--surface3)} ::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)} /* Responsive */ @media(max-width:768px){ .stats-grid{grid-template-columns:repeat(2,1fr)} .fedl-stats-row{grid-template-columns:repeat(2,1fr)} .nav-bar{gap:0;overflow-x:auto} .nav-link{font-size:14px;padding:2px 8px} .ascii-art{font-size:7px} .skill-name{width:70px;font-size:6px} .project-row{flex-wrap:wrap} .project-row .pr-meta{width:100%;justify-content:flex-start} .section-title{margin-top:56px} } @media(max-width:480px){ body{font-size:16px} .stats-grid{grid-template-columns:1fr 1fr} .fedl-stats-row{grid-template-columns:1fr 1fr} .hero-tags{gap:4px} .tag{font-size:6px;padding:3px 6px} } /* Glitch */ @keyframes glitch{ 0%{transform:none}20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)}60%{transform:none} 80%{transform:translate(1px,2px)}100%{transform:none} } .glitch{animation:glitch .3s ease}