// B05 v4 - Two-tab structure: 'Who I Am' (resume, default) + 'Personal Projects' (3 cards). // Header has name + contact (email + LinkedIn). Tabs swap via JS state, no reload. // Card animations preserved from v3. const B05v3_CardGrid = () => { const [tab, setTab] = React.useState('about'); // 'about' = Who I Am (default); 'projects' = Personal Projects const css = ` .b05v3{background:#f4f3ee;color:#1a1a1f;font-family:'Inter',system-ui,sans-serif;min-height:100%;padding:64px 56px 72px;font-size:15px;line-height:1.55} .b05v3 a{color:#1a1a1f;text-decoration:underline;text-decoration-color:#bdbdb5;text-underline-offset:3px} .b05v3 a:hover{text-decoration-color:#1a1a1f} .b05v3 .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:56px;gap:24px} .b05v3 .top .left{display:flex;flex-direction:column;gap:3px;min-width:0} .b05v3 .top .name{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:17px;letter-spacing:-0.005em;color:#1a1a1f} .b05v3 .top .role{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:#7a7a72} .b05v3 .top nav{display:flex;gap:6px;justify-self:center;background:#ebe9df;border:1px solid #ddd9ca;border-radius:99px;padding:3px} .b05v3 .top nav button{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:-0.005em;color:#5a5a52;background:transparent;border:0;padding:6px 14px;border-radius:99px;cursor:pointer;font-weight:500;transition:background .15s,color .15s} .b05v3 .top nav button:hover{color:#1a1a1f} .b05v3 .top nav button.on{background:#1a1a1f;color:#f4f3ee} .b05v3 .top .contact{display:flex;justify-content:flex-end;gap:18px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.01em;flex-wrap:wrap} .b05v3 .top .contact a{text-decoration:none;color:#3a3a40;display:inline-flex;align-items:center;gap:5px;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .15s} .b05v3 .top .contact a:hover{border-bottom-color:#1a1a1f} .b05v3 .top .contact a .ic{width:11px;height:11px;display:inline-block;flex-shrink:0;opacity:.7} .b05v3 h2{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7a7a72;margin:0 0 20px;display:flex;justify-content:space-between;align-items:center} .b05v3 h2 .ct{color:#bdbdb5} .b05v3 .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px} .b05v3 .card{background:#fff;border:1px solid #e0ddd0;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;text-decoration:none;color:inherit;cursor:pointer} .b05v3 .card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(0,0,0,.22)} .b05v3 .card.dead{cursor:default} .b05v3 .card .vis{aspect-ratio:5/3.6;position:relative;overflow:hidden;background:#0e1116} /* pause all card animations by default; resume on hover so only the hovered card runs */ .b05v3 .card .vis *,.b05v3 .card .vis *::before,.b05v3 .card .vis *::after{animation-play-state:paused !important} .b05v3 .card:hover .vis *,.b05v3 .card:hover .vis *::before,.b05v3 .card:hover .vis *::after{animation-play-state:running !important} .b05v3 .card .body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1} .b05v3 .card h3{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.01em;margin:0 0 4px;display:flex;align-items:center;gap:10px} .b05v3 .card h3 .tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#7a7a72;background:#f1efe6;border:1px solid #e0ddd0;padding:2px 7px;border-radius:99px;font-weight:500} .b05v3 .card h3 .tag.live{color:#0a8a4a;background:#eaf7ee;border-color:#cae6d4} .b05v3 .card h3 .tag.dev{color:#a85c10;background:#fbf0e2;border-color:#ecd9bd} .b05v3 .card h3 .tag.private{color:#5a5a52;background:#ececea;border-color:#d8d6cc} .b05v3 .card .meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:#7a7a72;margin-bottom:10px} .b05v3 .card p{font-size:14px;line-height:1.55;color:#3a3a40;margin:0 0 14px;flex:1} .b05v3 .card .arrow{font-family:'JetBrains Mono',monospace;font-size:12px;color:#1a4ac8;letter-spacing:.02em} .b05v3 .card.dead .arrow{color:#7a7a72} .b05v3 .card .built{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9a9a92;letter-spacing:.02em;margin-top:6px} /* ================================================================== */ /* PEGPOINT - title screen → level select → power select → board play */ /* ================================================================== */ .pp3{position:absolute;inset:0;background:#0a0612;display:flex;align-items:center;justify-content:center;padding:6px;font-family:'Silkscreen','JetBrains Mono',monospace} .pp3 .stage{position:relative;width:100%;height:100%;background:#0f380f;border:2px solid #2a4a2a;box-shadow:inset 0 0 0 1px #1a3a1a;overflow:hidden;image-rendering:pixelated} /* GameBoy-tinted screen - DMG palette s0..s3 */ .pp3 .screen{position:absolute;inset:0;background:#9bbc0f;color:#0f380f;font-family:'Silkscreen','JetBrains Mono',monospace} .pp3 .screen.dark{background:#0a0612} /* ── stage 1: title screen (0 - 1.6s) ── */ .pp3 .title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#9bbc0f;color:#0f380f;opacity:0;animation:pp3-title 7.5s linear infinite} @keyframes pp3-title{ 0%{opacity:0}3%{opacity:1}19%{opacity:1}22%{opacity:0}100%{opacity:0} } .pp3 .title .logo{font-size:22px;line-height:.95;letter-spacing:.02em;text-align:center;font-weight:700;color:#0f380f} .pp3 .title .logo .row{display:block} .pp3 .title .sub{font-size:7px;letter-spacing:.18em;margin-top:6px;color:#306230} .pp3 .title .blink{font-size:7px;letter-spacing:.12em;margin-top:14px;color:#0f380f;animation:pp3-blink .6s steps(2) infinite} @keyframes pp3-blink{50%{opacity:0}} .pp3 .title .strip{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:0} .pp3 .title .strip span{width:14px;height:5px;display:inline-block} /* ── stage 2: level select (1.6 - 3.2s) ── */ .pp3 .lsel{position:absolute;inset:0;background:#9bbc0f;padding:8px 8px 6px;color:#0f380f;opacity:0;animation:pp3-lsel 7.5s linear infinite} @keyframes pp3-lsel{ 0%{opacity:0}21%{opacity:0}24%{opacity:1}40%{opacity:1}43%{opacity:0}100%{opacity:0} } .pp3 .lsel .head{font-size:8px;letter-spacing:.18em;color:#0f380f;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center} .pp3 .lsel .head .pill{background:#0f380f;color:#9bbc0f;padding:1px 4px;font-size:6px;letter-spacing:.1em} .pp3 .lsel .ch{font-size:7px;letter-spacing:.16em;color:#306230;margin:2px 0 4px} .pp3 .lsel .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px} .pp3 .lsel .card{background:#8bac0f;border:1px solid #0f380f;padding:3px;display:flex;flex-direction:column;gap:2px;position:relative} .pp3 .lsel .card .mini{height:14px;background:#9bbc0f;border:1px solid #306230;position:relative} .pp3 .lsel .card .mini::before,.pp3 .lsel .card .mini::after{content:"";position:absolute;width:1px;height:1px;background:#0f380f;box-shadow:3px 1px 0 #0f380f,6px 2px 0 #0f380f,9px 1px 0 #0f380f,2px 4px 0 #0f380f,5px 5px 0 #0f380f,8px 4px 0 #0f380f;left:1px;top:1px} .pp3 .lsel .card .nm{font-size:6px;letter-spacing:.1em;color:#0f380f;font-weight:700;line-height:1} .pp3 .lsel .card .stars{font-size:6px;color:#306230;line-height:1} .pp3 .lsel .card.sel{outline:2px solid #0f380f;outline-offset:-1px;background:#9bbc0f;animation:pp3-cursor .25s steps(2) infinite} @keyframes pp3-cursor{50%{outline-color:#306230}} /* ── stage 3: power/character select (3.2 - 4.7s) ── */ .pp3 .psel{position:absolute;inset:0;background:#9bbc0f;padding:8px;color:#0f380f;opacity:0;animation:pp3-psel 7.5s linear infinite} @keyframes pp3-psel{ 0%{opacity:0}42%{opacity:0}45%{opacity:1}59%{opacity:1}62%{opacity:0}100%{opacity:0} } .pp3 .psel .head{font-size:8px;letter-spacing:.18em;margin-bottom:6px;text-align:center;font-weight:700} .pp3 .psel .row{display:flex;gap:8px;align-items:flex-start} .pp3 .psel .roster{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;flex:1} .pp3 .psel .roster .cell{background:#8bac0f;border:1px solid #306230;height:18px;display:flex;align-items:center;justify-content:center;position:relative} .pp3 .psel .roster .cell::after{content:"";width:8px;height:8px;background:#0f380f;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .pp3 .psel .roster .cell.c2::after{clip-path:polygon(50% 10%,100% 100%,0 100%)} .pp3 .psel .roster .cell.c3::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:repeating-linear-gradient(45deg,#0f380f 0 2px,transparent 2px 4px);width:9px;height:9px} .pp3 .psel .roster .cell.c4::after{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:9px;height:9px} .pp3 .psel .roster .cell.c5::after{clip-path:circle(50%);background:#0f380f} .pp3 .psel .roster .cell.c6::after{clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%)} .pp3 .psel .roster .cell.c7::after{width:9px;height:9px;background:none;box-shadow:inset 0 0 0 2px #0f380f;border-radius:50%} .pp3 .psel .roster .cell.c8::after{transform:rotate(45deg);width:6px;height:6px} .pp3 .psel .roster .cell.sel{background:#9bbc0f;outline:2px solid #0f380f;outline-offset:-2px;animation:pp3-cursor .25s steps(2) infinite} .pp3 .psel .detail{width:42%;border:2px solid #0f380f;background:#9bbc0f;padding:4px;display:flex;flex-direction:column;gap:3px} .pp3 .psel .detail .portrait{aspect-ratio:1;background:#8bac0f;border:1px solid #0f380f;display:flex;align-items:center;justify-content:center;position:relative} .pp3 .psel .detail .portrait::after{content:"";width:60%;height:60%;background:#0f380f;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .pp3 .psel .detail .nm{font-size:8px;letter-spacing:.16em;font-weight:700;text-align:center} .pp3 .psel .detail .blurb{font-size:6px;letter-spacing:.04em;color:#306230;line-height:1.3;text-align:center} /* ── stage 4: board play (4.7 - 7.5s) ── */ .pp3 .play{position:absolute;inset:0;background:#9bbc0f;color:#0f380f;opacity:0;animation:pp3-play 7.5s linear infinite} @keyframes pp3-play{ 0%{opacity:0}62%{opacity:0}64%{opacity:1}96%{opacity:1}100%{opacity:0} } .pp3 .play .hud{position:absolute;left:0;right:0;top:0;background:#0f380f;color:#9bbc0f;padding:2px 6px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:.08em;font-weight:700;line-height:1;height:13px;align-items:center} .pp3 .play .field{position:absolute;left:0;right:0;top:13px;bottom:11px;background:#9bbc0f} .pp3 .play .launcher{position:absolute;left:50%;top:4%;width:8px;height:9px;background:#0f380f;clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateX(-50%)} .pp3 .play .peg{position:absolute;background:#0f380f;width:5px;height:5px} .pp3 .play .peg.c{border-radius:50%;background:#306230} .pp3 .play .peg.d{transform:rotate(45deg) translate(-50%,-50%);transform-origin:0 0;background:#0f380f} .pp3 .play .peg.k{background:#0f380f;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:7px;height:7px} .pp3 .play .peg.hit-a{animation:pp3-pegpop .35s ease-out forwards;animation-delay:5.4s} .pp3 .play .peg.hit-b{animation:pp3-pegpop .35s ease-out forwards;animation-delay:5.95s} .pp3 .play .peg.hit-c{animation:pp3-pegpop-k .4s ease-out forwards;animation-delay:6.5s} @keyframes pp3-pegpop{0%{transform:scale(1)}45%{transform:scale(1.7);background:#0f380f;box-shadow:0 0 4px #0f380f}100%{transform:scale(0);opacity:0}} @keyframes pp3-pegpop-k{0%{transform:rotate(0) scale(1)}45%{transform:rotate(180deg) scale(1.8)}100%{transform:rotate(360deg) scale(0);opacity:0}} .pp3 .play .ball{position:absolute;width:5px;height:5px;background:#0f380f;border-radius:50%;left:50%;top:14%;transform:translate(-50%,0);opacity:0;animation:pp3-balldrop 7.5s linear infinite} @keyframes pp3-balldrop{ 0%,64%{opacity:0;left:50%;top:14%} 66%{opacity:1;left:50%;top:14%} 72%{left:50%;top:30%} 73%{left:42%;top:34%} 78%{left:36%;top:48%} 79%{left:42%;top:52%} 82%{left:54%;top:62%} 85%{left:54%;top:68%} 87%{left:50%;top:78%} 89%{left:50%;top:84%} 94%{opacity:1;left:50%;top:88%} 100%{opacity:0;left:50%;top:88%} } .pp3 .play .bucket{position:absolute;left:50%;bottom:1px;width:24px;height:4px;background:#0f380f;transform:translateX(-50%);animation:pp3-bucket 1.6s linear infinite} @keyframes pp3-bucket{0%{left:32%}50%{left:68%}100%{left:32%}} /* score popup */ .pp3 .scorepop{position:absolute;left:50%;top:32%;color:#0f380f;font-size:9px;font-weight:700;letter-spacing:.1em;transform:translateX(-50%);opacity:0;animation:pp3-scorepop 7.5s linear infinite} @keyframes pp3-scorepop{0%,86%{opacity:0;top:38%}88%{opacity:1;top:30%}93%{opacity:1;top:22%}96%{opacity:0;top:18%}100%{opacity:0}} .pp3 .play .scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(15,56,15,.18) 2px,rgba(15,56,15,.18) 3px);pointer-events:none} /* ================================================================== */ /* AGENT HUB '98 - BIOS → splash → desktop → spawn agents → split */ /* ================================================================== */ .ah3{position:absolute;inset:0;background:#000;font-family:'JetBrains Mono','Cascadia Code',monospace;font-size:8px;color:#cccccc;overflow:hidden} /* ── stage 1: BIOS boot (0 - 1.4s) ── */ .ah3 .bios{position:absolute;inset:0;background:#000;color:#cccccc;padding:8px 10px;font-size:8px;line-height:1.35;opacity:1;animation:ah3-bios 8s linear infinite;letter-spacing:.02em} @keyframes ah3-bios{0%{opacity:1}17%{opacity:1}19%{opacity:0}100%{opacity:0}} .ah3 .bios .row{opacity:0;animation:ah3-fadein .2s linear forwards} .ah3 .bios .r1{animation-delay:.1s}.ah3 .bios .r2{animation-delay:.25s}.ah3 .bios .r3{animation-delay:.4s}.ah3 .bios .r4{animation-delay:.55s} .ah3 .bios .r5{animation-delay:.7s}.ah3 .bios .r6{animation-delay:.85s}.ah3 .bios .r7{animation-delay:1.0s}.ah3 .bios .r8{animation-delay:1.15s} @keyframes ah3-fadein{to{opacity:1}} .ah3 .bios .ok{color:#16c60c} .ah3 .bios .dim{color:#767676} .ah3 .bios .hd{color:#fff} /* ── stage 2: ASCII splash (1.4 - 2.7s) ── */ .ah3 .splash{position:absolute;inset:0;background:#000;color:#cccccc;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;animation:ah3-splash 8s linear infinite} @keyframes ah3-splash{0%,17%{opacity:0}19%{opacity:1}33%{opacity:1}35%{opacity:0}100%{opacity:0}} .ah3 .splash pre{margin:0;font-family:'JetBrains Mono',monospace;font-size:6px;line-height:1;letter-spacing:0;color:#16c60c;white-space:pre} .ah3 .splash .bar{width:60%;height:8px;border:1px solid #767676;background:#0c0c0c;position:relative;margin-top:6px} .ah3 .splash .bar::before{content:"";position:absolute;left:0;top:0;bottom:0;background:#16c60c;animation:ah3-bar 1.3s linear infinite} @keyframes ah3-bar{from{width:0}to{width:100%}} .ah3 .splash .pct{font-size:7px;color:#767676;letter-spacing:.1em} /* ── stage 3: Win98 desktop with multiple terminals (2.7 - 8s) ── */ .ah3 .desk{position:absolute;inset:0;background:#008080;opacity:0;animation:ah3-desk 8s linear infinite;display:flex;flex-direction:column} @keyframes ah3-desk{0%,33%{opacity:0}35%{opacity:1}100%{opacity:1}} .ah3 .desk .tabs{background:#c0c0c0;border-bottom:1px solid #808080;display:flex;font-family:'Tahoma','MS Sans Serif',sans-serif;font-size:8px;font-weight:700;height:14px;align-items:flex-end;padding:0 2px;gap:1px;flex-shrink:0} .ah3 .desk .tabs .tab{padding:1px 5px 0;background:#c0c0c0;border:1px solid #808080;border-bottom:none;color:#1a1a1f;line-height:11px;display:flex;align-items:center;gap:3px;height:11px} .ah3 .desk .tabs .tab .ind{width:5px;height:5px;background:#16c60c;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 3px #16c60c} .ah3 .desk .tabs .tab.t2,.ah3 .desk .tabs .tab.t3,.ah3 .desk .tabs .tab.t4{opacity:0} .ah3 .desk .tabs .tab.t2{animation:ah3-tab 8s linear infinite;animation-delay:0s} .ah3 .desk .tabs .tab.t3{animation:ah3-tab 8s linear infinite;animation-delay:0s} .ah3 .desk .tabs .tab.t4{animation:ah3-tab 8s linear infinite;animation-delay:0s} @keyframes ah3-tab{0%,46%{opacity:0}48%{opacity:1}100%{opacity:1}} .ah3 .desk .tabs .t3{animation-delay:0s} .ah3 .desk .tabs .t2{animation-name:ah3-tab2} .ah3 .desk .tabs .t3{animation-name:ah3-tab3} .ah3 .desk .tabs .t4{animation-name:ah3-tab4} @keyframes ah3-tab2{0%,42%{opacity:0}44%{opacity:1}100%{opacity:1}} @keyframes ah3-tab3{0%,50%{opacity:0}52%{opacity:1}100%{opacity:1}} @keyframes ah3-tab4{0%,58%{opacity:0}60%{opacity:1}100%{opacity:1}} .ah3 .desk .tabs .new{margin-left:auto;color:#404040;padding:1px 6px;font-size:8px;line-height:11px} .ah3 .desk .term{flex:1;position:relative;background:#0c0c0c;color:#cccccc;font-family:'JetBrains Mono',monospace;font-size:7px;line-height:1.35;padding:4px 6px;overflow:hidden} .ah3 .desk .term .row{opacity:0} .ah3 .desk .term.full .row.r1{animation:ah3-fadein .15s linear forwards;animation-delay:3.0s} .ah3 .desk .term.full .row.r2{animation:ah3-fadein .15s linear forwards;animation-delay:3.2s} .ah3 .desk .term.full .row.r3{animation:ah3-fadein .15s linear forwards;animation-delay:3.5s} .ah3 .desk .term.full .row.r4{animation:ah3-fadein .15s linear forwards;animation-delay:3.85s} /* split mode: full terminal hides, 4-quad grid appears */ .ah3 .desk .term.full{animation:ah3-termfull 8s linear infinite} @keyframes ah3-termfull{0%,57%{opacity:1}59%{opacity:0}100%{opacity:0}} .ah3 .desk .grid{position:absolute;left:0;right:0;top:14px;bottom:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:#808080;opacity:0;animation:ah3-grid 8s linear infinite} @keyframes ah3-grid{0%,58%{opacity:0}60%{opacity:1}100%{opacity:1}} .ah3 .desk .grid .pane{background:#0c0c0c;color:#cccccc;font-family:'JetBrains Mono',monospace;font-size:6px;line-height:1.35;padding:2px 4px;position:relative;overflow:hidden} .ah3 .desk .grid .pane .label{position:absolute;left:0;right:0;top:0;background:#000080;color:#fff;font-family:'Tahoma',sans-serif;font-size:6px;font-weight:700;padding:1px 4px;letter-spacing:.04em;line-height:1} .ah3 .desk .grid .pane .body{padding-top:9px} .ah3 .desk .grid .pane .ok{color:#16c60c} .ah3 .desk .grid .pane .yel{color:#f9f1a5} .ah3 .desk .grid .pane .blu{color:#3b78ff} .ah3 .desk .grid .pane .mag{color:#b4009e} .ah3 .desk .grid .pane .dim{color:#767676} .ah3 .desk .grid .pane .cur{display:inline-block;width:4px;height:6px;background:#16c60c;animation:ah3-blink 1s steps(2) infinite;vertical-align:-1px} @keyframes ah3-blink{50%{opacity:0}} .ah3 .desk .taskbar{height:14px;background:#c0c0c0;border-top:1px solid #fff;display:flex;align-items:center;padding:1px 2px;gap:2px;font-family:'Tahoma',sans-serif;font-size:7px;color:#1a1a1f;flex-shrink:0;position:absolute;left:0;right:0;bottom:0} .ah3 .desk .taskbar .start{background:#c0c0c0;border:1px solid;border-color:#fff #808080 #808080 #fff;padding:0 5px 0 3px;font-weight:700;display:flex;align-items:center;gap:2px;line-height:10px;height:10px;font-size:7px} .ah3 .desk .taskbar .start::before{content:"";width:7px;height:7px;background:linear-gradient(135deg,#ff0000 0 50%,#00ff00 50% 100%);display:inline-block} .ah3 .desk .taskbar .tray{margin-left:auto;background:#c0c0c0;border:1px solid;border-color:#808080 #fff #fff #808080;padding:0 4px;font-family:'JetBrains Mono',monospace;font-size:7px} /* ================================================================== */ /* AGENTS ONLINE - sk8rboi back online → DM opens → 2 messages */ /* ================================================================== */ .ao3{position:absolute;inset:0;background:#3a6ea5;font-family:'Tahoma','Geneva',sans-serif;font-size:10px;color:#1a1a1f;overflow:hidden} /* buddy list - left side */ .ao3 .bl{position:absolute;left:5%;top:6%;width:42%;bottom:8%;background:#ece9d8;border:2px solid;border-color:#fff #808080 #808080 #fff;display:flex;flex-direction:column;font-size:9px} .ao3 .bl .tb{background:linear-gradient(180deg,#3a6ea5,#003399);color:#fff;padding:1px 4px;font-weight:700;display:flex;align-items:center;gap:3px;font-size:9px;line-height:1.4} .ao3 .bl .tb .runner{width:9px;height:9px;background:#ffd24a;border-radius:50%;flex-shrink:0;position:relative;animation:ao3-run .6s linear infinite} .ao3 .bl .tb .runner::after{content:"";position:absolute;left:2px;top:2px;width:1.5px;height:1.5px;background:#1a1a1a;border-radius:50%;box-shadow:3px 0 0 #1a1a1a} @keyframes ao3-run{50%{transform:translateY(-1px)}} .ao3 .bl .tb .x{margin-left:auto;width:9px;height:8px;background:#d4d0c8;border:1px solid #fff;color:#1a1a1f;text-align:center;line-height:6px;font-size:7px;font-weight:700;font-family:'Tahoma',sans-serif} .ao3 .bl .menu{background:#ece9d8;border-bottom:1px solid #aca899;display:flex;font-size:8px;padding:1px 2px;color:#1a1a1f;gap:6px} .ao3 .bl .panel{flex:1;background:#fff;font-size:8px;overflow:hidden;display:flex;flex-direction:column} .ao3 .bl .grp{padding:2px 5px;background:linear-gradient(180deg,#e8eef7,#cdd9eb);font-weight:700;color:#003366;border-bottom:1px solid #b0c0d4;display:flex;align-items:center;gap:3px;font-size:8px;line-height:1.4} .ao3 .bl .grp::before{content:"▼";font-size:6px} .ao3 .bl .grp .ct{margin-left:auto;font-weight:400;color:#5a6a82} .ao3 .bl .b{display:flex;align-items:center;gap:4px;padding:1px 6px 1px 14px;font-size:8px;border-bottom:1px solid #f5f5f0;line-height:1.4;color:#1a1a1f} .ao3 .bl .b.away{opacity:.55} .ao3 .bl .b .ic{width:9px;height:9px;flex-shrink:0;background:#003399;color:#fff;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:700;border-radius:1px} .ao3 .bl .b .ic.ic2{background:#e87040} .ao3 .bl .b .ic.ic3{background:#1a1a1a} .ao3 .bl .b .ic.ic4{background:#4285f4} .ao3 .bl .b .ic.ic5{background:#f55036} .ao3 .bl .b .nm{flex:1;font-weight:700;color:#1a3a6a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ao3 .bl .b.away .nm{color:#7a7a82;font-weight:400} .ao3 .bl .b .dot{width:5px;height:5px;border-radius:50%;background:#4caf50;flex-shrink:0} .ao3 .bl .b.away .dot{background:#ff9800} /* sk8rboi pulses online when he comes back */ .ao3 .bl .b.skater{animation:ao3-skater 8s linear infinite} @keyframes ao3-skater{ 0%,8%{opacity:.55} 9%{opacity:1;background:#fff7c4} 11%{background:#fff7c4} 13%{background:#fff} 15%,100%{opacity:1} } .ao3 .bl .b.skater .nm{animation:ao3-skater-nm 8s linear infinite} @keyframes ao3-skater-nm{0%,8%{color:#7a7a82;font-weight:400}9%,100%{color:#1a3a6a;font-weight:700}} .ao3 .bl .b.skater .dot{animation:ao3-skater-dot 8s linear infinite} @keyframes ao3-skater-dot{0%,8%{background:#ff9800}9%,100%{background:#4caf50}} .ao3 .bl .b.skater .away-msg{animation:ao3-skater-msg 8s linear infinite} @keyframes ao3-skater-msg{0%,8%{opacity:1;display:inline}9%,100%{opacity:0;display:none}} .ao3 .bl .b .away-msg{font-size:7px;font-style:italic;color:#ff9800;margin-left:2px;font-weight:400} /* "back online" toast */ .ao3 .toast{position:absolute;left:8%;bottom:10%;background:#fffce8;border:2px solid #d4b830;color:#5a4a10;padding:4px 8px;font-size:9px;font-weight:700;font-family:'Comic Sans MS','Marker Felt',cursive;box-shadow:2px 2px 6px rgba(0,0,0,.3);transform:translateY(150%);opacity:0;animation:ao3-toast 8s linear infinite;line-height:1.3;z-index:5} @keyframes ao3-toast{ 0%{transform:translateY(150%);opacity:0} 8%{transform:translateY(150%);opacity:0} 11%{transform:translateY(0);opacity:1} 22%{transform:translateY(0);opacity:1} 25%{transform:translateY(150%);opacity:0} 100%{transform:translateY(150%);opacity:0} } .ao3 .toast .rb{background:linear-gradient(90deg,#ff4040,#ffaa00,#22c55e,#0066ff,#aa00ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:'Comic Sans MS',cursive;font-weight:700} /* DM window - slides in from right */ .ao3 .dm{position:absolute;right:5%;top:14%;width:48%;bottom:14%;background:#ece9d8;border:2px solid;border-color:#fff #808080 #808080 #fff;display:flex;flex-direction:column;font-size:9px;opacity:0;transform:translateX(20%) scale(.92);animation:ao3-dm 8s linear infinite;z-index:4} @keyframes ao3-dm{ 0%,25%{opacity:0;transform:translateX(20%) scale(.92)} 28%{opacity:1;transform:translateX(0) scale(1)} 100%{opacity:1;transform:translateX(0) scale(1)} } .ao3 .dm .tb{background:linear-gradient(180deg,#3a6ea5,#003399);color:#fff;padding:1px 4px;font-weight:700;display:flex;align-items:center;gap:3px;font-size:9px;line-height:1.4} .ao3 .dm .tb .x{margin-left:auto;width:9px;height:8px;background:#d4d0c8;border:1px solid #fff;color:#1a1a1f;text-align:center;line-height:6px;font-size:7px;font-weight:700} .ao3 .dm .menu{background:#ece9d8;border-bottom:1px solid #aca899;font-size:8px;padding:1px 4px;display:flex;gap:6px;color:#1a1a1f} .ao3 .dm .menu .warn{margin-left:auto;color:#cc0000;font-weight:700} .ao3 .dm .body{flex:1;background:#fff;padding:4px 6px;overflow:hidden;font-size:9px;line-height:1.45} .ao3 .dm .body .msg{margin:1px 0;display:flex;gap:3px;align-items:flex-start;opacity:0;animation:ah3-fadein .2s linear forwards} .ao3 .dm .body .m1{animation-delay:2.6s} .ao3 .dm .body .m2{animation-delay:3.6s} .ao3 .dm .body .typing{font-size:8px;color:#888;font-style:italic;margin-top:2px;opacity:0;animation:ao3-typing 8s linear infinite} @keyframes ao3-typing{0%,42%{opacity:0}44%{opacity:1}55%{opacity:1}57%{opacity:0}100%{opacity:0}} .ao3 .dm .body .m3{animation-delay:4.6s} .ao3 .dm .body .msg .nm{font-weight:700;flex-shrink:0} .ao3 .dm .body .msg .nm.s{color:#003399} .ao3 .dm .body .msg .nm.c{color:#e87040} .ao3 .dm .body .msg .tx{color:#1a1a1f} .ao3 .dm .body .msg .tx em{color:#666;font-style:italic} .ao3 .dm .input{background:#ece9d8;border-top:1px solid #aca899;padding:3px 4px;display:flex;flex-direction:column;gap:2px} .ao3 .dm .input .text{background:#fff;border:1px inset #808080;height:12px;padding:1px 3px;font-size:8px;color:#666;font-style:italic;display:flex;align-items:center} .ao3 .dm .input .row{display:flex;justify-content:flex-end;gap:3px} .ao3 .dm .input .row button{background:#ece9d8;border:1px solid;border-color:#fff #808080 #808080 #fff;font-size:8px;padding:0 6px;line-height:11px;color:#1a1a1f;font-family:inherit;font-weight:700} /* ============== RESUME TAB ============== */ .b05v3 .resume{max-width:780px;margin:0 auto;padding-top:8px} .b05v3 .resume .rh{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:34px;line-height:1.15;letter-spacing:-0.025em;color:#1a1a1f;margin:0 0 8px} .b05v3 .resume .rsub{font-size:15px;color:#3a3a40;margin:0 0 4px;line-height:1.55} .b05v3 .resume .rloc{font-family:'JetBrains Mono',monospace;font-size:12px;color:#7a7a72;letter-spacing:.04em;margin:0 0 36px} .b05v3 .resume section{margin-bottom:38px} .b05v3 .resume section > h3{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a7a72;margin:0 0 18px;padding-bottom:8px;border-bottom:1px solid #e0ddd0;font-weight:500} .b05v3 .resume .job{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:14px 0;border-bottom:1px dotted #e0ddd0} .b05v3 .resume .job:last-child{border-bottom:0} .b05v3 .resume .job .when{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:#7a7a72;line-height:1.5;padding-top:3px} .b05v3 .resume .job .what .title{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.01em;color:#1a1a1f;margin:0 0 2px} .b05v3 .resume .job .what .org{font-size:13.5px;color:#5a5a52;margin:0 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .b05v3 .resume .job .what .org .place{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:#9a9a92} .b05v3 .resume .job .what p{font-size:14px;line-height:1.6;color:#3a3a40;margin:0 0 6px} .b05v3 .resume .job .what ul{margin:6px 0 0;padding:0;list-style:none} .b05v3 .resume .job .what ul li{font-size:14px;line-height:1.55;color:#3a3a40;padding:3px 0 3px 16px;position:relative} .b05v3 .resume .job .what ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:1px;background:#bdbdb5} .b05v3 .resume .edu{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:14px 0;border-bottom:1px dotted #e0ddd0} .b05v3 .resume .edu:last-child{border-bottom:0} .b05v3 .resume .edu .when{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:#7a7a72;padding-top:3px} .b05v3 .resume .edu .what .title{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.01em;color:#1a1a1f;margin:0 0 2px} .b05v3 .resume .edu .what .org{font-size:13.5px;color:#5a5a52;margin:0} .b05v3 .resume .edu .what .note{font-size:13px;color:#7a7a72;margin-top:2px;font-style:italic} /* projects tab small intro */ .b05v3 .pintro{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:#7a7a72;margin:-6px 0 22px;line-height:1.6;max-width:640px} `; return (
Andrew Meaux
AI Engineer · Chevron Enterprise AI
meaux247@gmail.com LinkedIn ↗
{tab === 'about' &&

Andrew Meaux

Enterprise AI Engineer with 10+ years at Chevron, spanning offshore operations, digital portfolio ownership, and now agentic AI delivery. Selected for a competitive, company-sponsored Digital Scholar sabbatical to complete a Rice M.S. in Data Science (ML).

Houston, TX

Experience

Jan 2026 - Present
AI Engineer - Enterprise AI
Chevron Houston, TX

Translate endorsed agentic AI strategies into production-oriented architectures, pilots, and solutions. Currently developing for exploration and value chain optimization and representing Chevron as the lead technical partner with Anthropic.

Nov 2024 - Dec 2025
AI Systems Engineer - Enterprise AI
Chevron Houston, TX

Framed priority initiatives for the enterprise using systems thinking, mapping business processes, identifying digital capabilities, and owning POC development across exploration, supply chain, and corporate business cevelopment.

Sep 2023 - Oct 2024
Digital Integration Lead - Offshore Wells
Chevron Houston, TX

Sole business & technology liaison between Offshore Wells, Well Digital Platform, and cross-functional partners. Owned Offshore Wells digital strategy / strategy and capital allocation.

Aug 2022 - Aug 2023
Digital Scholar
Chevron · Rice University Houston, TX

Selected for a competitive, company-sponsored educational sabbatical. Completed a one-year Professional Master of Data Science (Machine Learning) at Rice.

Mar 2019 - Jul 2022
Lead Field Engineer - Offshore Wells
Chevron Deepwater Gulf of Mexico

Onsite lead engineer on deepwater Big Foot platform. Complex operations included but were not limited to dual riser systems and dual ESP upper completions. Managed ~$1M/day spread-rate operations across engineering execution and offshore logistics.

Sep 2017 - Mar 2019
Field Engineer - Offshore Wells
Chevron Deepwater Gulf of Mexico
May 2016 - Sep 2017
Accelerated Drilling Program Engineer - DWEP
Chevron Deepwater Gulf of Mexico
Jun 2015 - May 2016
Drill / Well Site Manager - Offshore East
Chevron Gulf of Mexico Shelf

Education

2022 - 2023
Professional Master's, Data Science (Machine Learning)
Rice University - Houston, TX
Sponsored by Chevron via the Digital Scholar Program. Coursework spanned ML, deep learning for vision & language, ML with graphs, statistical ML, big data management, and data ethics.
2011 - 2015
B.S., Petroleum Engineering
Louisiana State University - Baton Rouge, LA

SELECT COURSEWORK

Rice · 2023
EnGenIR - RAG system for engineering Q&A
GPT-4 + embeddings, query decomposition, evals

End-to-end retrieval pipeline that achieved a 91.6% performance score against baseline LLMs on engineering domain questions.

Rice · 2023
GraMR - graph-based music recommendations
GraphSAGE, Spotify Million Playlist Dataset

Achieved AUC 0.93 on link prediction; implemented playlist generation via embedding similarity and random walks.

Rice · 2023
VIBE - multimodal album artwork → music pipeline
CLIP + LLM + Jukebox

Curated a 140K+ album-cover dataset, trained a genre classifier (56.3% top-1), and generated genre-conditioned lyrics and music.

Publications

2024
Editor & Self-Publisher - Posthumous Poetry Collection
Family Archive Project
Edited and published a curated posthumous collection of my late grandfather's poetry, preserving South Louisiana cultural history. Managed manuscript prep, ISBN/metadata, and print-on-demand.
} {tab === 'projects' && <>

Personal projects · 20263 of 3

A limited showcase of personal works in progress built entirely via agentic AI engineering.

{/* ============ PEGPOINT - only live link ============ */}
Pegpoint screenshot {false && <>
{/* Stage 1: title */}
PEG POINT
DMG-01 ARCADE
▶ PRESS START
{/* Stage 2: level select */}
LEVEL SELECT CH 2
ROUTE READING
CROSSFIRE
★★★
CORRIDOR
★★☆
FUNNEL
★☆☆
{/* Stage 3: power select */}
CHARACTER SELECT
RICOCHET
+1 BOUNCE PER PEG. ZIG-ZAG.
{/* Stage 4: board play */}
SCORE 24180 ×3 BALL 2/10
{/* peg field - 3 will pop in sequence (hit-a/b/c) */}
+5,000
}

Pegpoint live

retro gaming · pixel art · procedural audio

A retro Peggle-inspired puzzle game full of pegs, bumpers, portals, and points, including 99 unique level designs, 25 diverse power-ups, plus a daily seeded puzzle and leaderboard worth fighting for. Built for Vibe Jam '26.

pegpoint.io ↗
built with Claude Design x Claude Code
 {/* ============ AGENT HUB '98 - private, dead link ============ */}
Agent Hub '98 screenshot {false &&
{/* Stage 1: BIOS */}
AgentHub BIOS v0.1.98
Copyright (C) 2026 Andrew Meaux
 
Detecting Agents...
  Claude Code .......... OK
  Codex ................ OK
  OpenCode ............. OK
Memory Test: 1048576K OK
{/* Stage 2: ASCII splash */} 
{`_______ _____ ______ __ _____ 
___ |_____ ____________ /_ ___ / / /_ __ /_ 
__/ /| |/ __ \`/ _ \\ __ \\ __/ __/ /_/ / / / / __ \\
_/ ___ / /_/ / __/ / / / /_ _/ __ / /_/ / /_/ /
/_/ |_\\__, /\\___/_/ /_/\\__/ /_/ /_/\\__,_/_.___/ 
 /____/ '98 `}
Loading workspace…
{/* Stage 3: Desktop with multi-agent */}
wicket (Archivist) builder-1 auditor planner + New Agent
$ claude --append-system-prompt "ARCHIVIST"
Loaded /loop scheduler · interval=15m
┌─ wicket ────────────────────────────┐
│ Reading 14 CLAUDE.md files…▌
wicket (Archivist)
$ indexing wiki…
12 articles · 4 new
→ wrote synthesis.md
builder-1
⚙ Edit src/sim.js
+24 −8 lines
running tests…
auditor
⌬ scan diff#a4f2
3 issues, 0 blocking
→ approved
planner
◆ next 3 tasks
▸ peg-arc redo
▸ daily seed UI
Start 10:24 AM
}

Agent Hub '98 in development

node-pty · sqlite · MCP · electron (planned)

Local-first multiplexer for CLI agents on Windows. Spawn unlimited Claude Code / Codex / OpenCode terminals, route work via templates with role-scoped permissions, and compound knowledge in a wiki the agents author themselves.

agenthub98.com - under construction
built with Claude Code x Codex
{/* ============ AGENTS ONLINE - in development, dead link ============ */}
Agents Online screenshot {false &&
{/* Buddy list */}
Agents Online ×
My AAM People Help
Botties3/4
★xXDarkAngelXx
♥LiLmIsS_tHiNg
◆ sk8rboi2003 · brb getting snacks
Coworkers1/2
▣hackerman99
♬RoCkStAr_88
{/* "Back online" toast */}
sk8rboi2003 is back online ✦
{/* DM window */}
sk8rboi2003 - Instant Message ×
File Edit Insert Warn 0%
sk8rboi2003: yo, miss me??
xXDarkAngelXx: u took 4ever ~rolls eyes~
sk8rboi2003 is typing...
sk8rboi2003: had to refill the snack tray brb again lol
Type a message…
}

Agents Online in development

node · websockets · sqlite · multi-LLM

AIM 4.x parody where every buddy is an LLM. 25 personalities, ambient bot-to-bot DMs, warning levels, sound effects. The future of agents through the lens of 2000s instant messaging.

agentsonline.chat - under construction
built with Claude Code x Codex
}
); };