Files
Lucas WintherandClaude Opus 5.5 1041c8e5b8 docs(specs): 009 work page, CV first, with its plan and mockup rounds
Six rounds of mockups with the owner on 2026-11-12; K v2 picked.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 10:03:26 +01:00

405 lines
39 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Work page: full-page directions</title>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{--bg:#131210;--panel:#1b1916;--panel2:#221f1b;--line:#2b2824;--ink:#ede7dd;--mute:#8e877c;--acc:#ea7444;--ok:#a8b48f;
--sans:'Geist',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;--e:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans)}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.opt-head{border-top:1px dashed #3a352f;margin-top:80px;padding:28px 0 8px;display:flex;gap:18px;align-items:baseline}
.opt-head.first{margin-top:24px;border-top:0}
.opt-head .L{font:600 13px var(--mono);color:var(--bg);background:var(--acc);border-radius:4px;padding:2px 8px}
.opt-head .L.g{background:var(--mute)}
.opt-head h1{font-size:22px;margin:0;font-weight:600}.opt-head p{margin:4px 0 0;color:var(--mute);max-width:720px}
.note{font:12px/1.55 var(--mono);color:var(--mute);border-left:2px solid var(--acc);padding:2px 0 2px 12px;margin:12px 0 22px;max-width:860px}
.sh{display:flex;align-items:baseline;gap:12px;margin:34px 0 16px}
.sh h2{font-size:22px;margin:0;font-weight:600}.sh .n{font:12px var(--mono);color:var(--mute)}
.sh .r{margin-left:auto;display:flex;gap:10px;align-items:center;font:12px var(--mono);color:var(--mute)}
.seg{display:flex;gap:2px}.seg span{font:12.5px var(--sans);color:var(--mute);padding:4px 9px;border-radius:5px}.seg span.on{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.search{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font:13px var(--sans);color:var(--mute);min-width:240px}
.search b{color:var(--ink);font-weight:400}
.meta{font:11px var(--mono);color:var(--mute);letter-spacing:.02em}
.ph{border-bottom:1px dotted var(--mute);cursor:help}
.mk{display:inline-flex;align-items:center;gap:6px;font:11px var(--mono);border:1px solid var(--line);border-radius:99px;padding:2px 8px;white-space:nowrap}
.mk i{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;display:inline-block}
.mk.ai{color:var(--acc);border-color:#6b3a26}.mk.ai i{background:var(--acc);border-color:var(--acc)}
.mk.un i{border-style:dashed}
.chip{font:11px var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
/* tiles */
.t{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-height:0;transition:border-color .2s var(--e)}
.t:hover{border-color:#4a433b}
.t .vis{flex:1;min-height:0;background:#0e0d0c center top/cover no-repeat;border-bottom:1px solid var(--line);position:relative}
.t .tx{padding:12px 16px 14px}
.t h3{margin:3px 0 2px;font-size:17px;font-weight:600;line-height:1.25}
.t p{margin:4px 0 0;color:#c9c2b6;font-size:13.5px;line-height:1.45}
.t .ft{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.t .open{font:12px var(--mono);color:var(--acc)}
.t.L h3{font-size:22px}
.tag{position:absolute;top:10px;left:12px;font:10px var(--mono);color:var(--mute)}
.draw{background:var(--panel2)!important;display:flex;align-items:center;justify-content:center}
.code{font:12px/1.7 var(--mono);color:#b9b2a6;padding:30px 24px;width:100%}.code b{color:var(--acc);font-weight:400}.code u{color:var(--ok);text-decoration:none}
/* small tile: same footprint as today's list row */
.s{flex-direction:row;align-items:center;gap:12px;padding:0 12px}
.s .th{width:60px;height:40px;border-radius:4px;background:#0e0d0c center/cover;flex:none;border:1px solid var(--line)}
.s h4{margin:0;font-size:14px;font-weight:500;line-height:1.3}
.s .mk{margin-left:auto;padding:1px 6px}
/* other-work tiles */
.ow .vis{background:repeating-linear-gradient(135deg,#1d1b18 0 10px,#1a1815 10px 20px)!important;display:flex;align-items:center;justify-content:center}
.site{font:500 15px var(--mono);color:var(--ink);border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:8px 14px}
.site small{display:block;font:10px var(--mono);color:var(--mute);margin-top:2px}
.badge{font:10px var(--mono);color:var(--ok);border:1px solid #3d4433;border-radius:4px;padding:0 5px}
.badge.gone{color:var(--mute);border-color:var(--line)}
/* ---------- D : woven pattern ---------- */
.gD{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:62px;gap:12px}
/* ---------- E : dense auto-pack ---------- */
.gE{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:62px;gap:12px;grid-auto-flow:row dense}
.gE .L{grid-column:span 7;grid-row:span 6}
.gE .M{grid-column:span 5;grid-row:span 5}
.gE .T{grid-column:span 4;grid-row:span 6}
.gE .W{grid-column:span 5;grid-row:span 4}
.gE .ow{grid-column:span 3;grid-row:span 3}
.gE .s{grid-column:span 3;grid-row:span 1}
/* ---------- record ---------- */
.rec{display:grid;grid-template-columns:1fr 1.25fr;gap:14px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.box h3{margin:0 0 4px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.box .sum{font-size:14px;color:#c9c2b6;margin:0 0 12px}
.box .sum b{color:var(--ink);font-weight:500}
.led{display:grid;grid-template-columns:44px 1fr auto;gap:0 14px;font-size:14px}
.led>div{padding:8px 0;border-top:1px solid var(--line)}
.led .y{font:12px var(--mono);color:var(--mute)}.led .res{font:12px var(--mono);color:var(--mute);text-align:right}
.led .hi{color:var(--acc)}
.ku{display:grid;grid-template-columns:1fr auto auto auto;gap:0 18px;font-size:14px;align-items:center}
.ku>div{padding:9px 0;border-top:1px solid var(--line)}
.ku .h{font:500 10px var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase;border-top:0;padding-top:0}
.ku .c{font:12px var(--mono);color:var(--mute);text-align:right;white-space:nowrap}
.cert{display:inline-flex;align-items:center;gap:5px;font:12px var(--mono);color:var(--ink);white-space:nowrap}
.cert svg{flex:none}
.ku .c.cer{color:var(--ink)}
.more{display:inline-block;margin-top:14px;font:12px var(--mono);color:var(--acc)}
/* search results */
.res-wrap{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.rgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
.rh{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin:0 0 8px}
.rl>div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.rl .m{font:11.5px var(--mono);color:var(--mute);white-space:nowrap}
mark{background:none;color:var(--acc)}
/* other work in history */
.hist{display:grid;grid-template-columns:90px 1fr auto;gap:0 16px;font-size:14px}
.hist>div{padding:10px 0;border-top:1px solid var(--line)}.hist .k{font:11px var(--mono);color:var(--mute);padding-top:12px}
.pick{display:flex;gap:10px;margin:26px 0 70px}
.pick button{font:13px var(--mono);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px 14px;cursor:pointer}
.pick button.selected,.pick button:hover{border-color:var(--acc);color:var(--acc)}
body{padding-bottom:80px}
.tabs{position:sticky;top:0;z-index:50;background:#0c0b0a;border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center;padding:10px 32px}
.tabs .lbl{font:11px var(--mono);color:var(--mute);margin-right:10px}
.tabs button{font:12.5px var(--mono);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer}
.tabs button.on{border-color:var(--acc);color:var(--acc)}
.tabs .desc{margin-left:14px;font:12px var(--sans);color:var(--mute)}
.page{display:none}.page.on{display:block}
/* site chrome */
.top{display:flex;align-items:center;gap:22px;height:56px;border-bottom:1px solid var(--line);padding:0 32px;font-size:13.5px}
.top .gate{font:12px var(--mono);border:1px solid var(--line);border-radius:5px;padding:3px 8px;color:var(--mute)}
.top .nm{font-weight:600}.top .nm span{color:var(--mute);font-weight:400}
.top nav{display:flex;gap:18px;color:var(--mute)}
.top .pref{margin-left:auto;display:flex;align-items:center;gap:8px;font:12px var(--mono);color:var(--mute)}
.top .pref .sw{display:flex;border:1px solid var(--line);border-radius:6px;padding:2px}
.top .pref .sw span{padding:3px 8px;border-radius:4px}.top .pref .sw span.on{background:var(--ink);color:var(--bg)}
.foot{border-top:1px solid var(--line);margin-top:70px;padding:22px 32px;font:12px var(--mono);color:var(--mute);display:flex;gap:22px}
/* muted screenshots */
.mut{filter:saturate(.5) brightness(.82) contrast(1.02);transition:filter .3s var(--e)}
a:hover .mut,.hov:hover .mut{filter:none}
a{color:inherit;text-decoration:none}
.lab{font:500 10.5px var(--mono);letter-spacing:.09em;color:var(--mute);text-transform:uppercase}
.acc{color:var(--acc)}
.seal{display:inline-block;vertical-align:-2px}
/* common bits */
.kv{display:grid;grid-template-columns:78px 1fr;gap:9px 16px;font-size:15px}
.kv .k{font:11.5px var(--mono);color:var(--mute);padding-top:3px}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{font:12px var(--mono);border:1px solid var(--line);border-radius:5px;padding:4px 10px;color:var(--ink)}
.btn.p{border-color:#6b3a26;color:var(--acc)}
.hl{display:grid;grid-template-columns:1fr auto;gap:0 14px;font-size:14px}
.hl>div{padding:9px 0;border-top:1px solid var(--line)}
.hl .r{font:12px var(--mono);color:var(--mute);text-align:right;white-space:nowrap}
.hl .r.acc{color:var(--acc)}
.big{font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1}
/* project cards */
.pc{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .2s var(--e)}
.pc:hover{border-color:#4a433b}
.pc .vis{background:#0e0d0c center top/cover no-repeat;border-bottom:1px solid var(--line);position:relative}
.pc .tx{padding:14px 18px 16px}
.pc h3{margin:6px 0 3px;font-size:18px;font-weight:600}
.pc p{margin:0;color:#c3bcb0;font-size:13.5px}
.pc .row1{display:flex;justify-content:space-between;align-items:center}
.num{font:11px var(--mono);color:var(--acc)}
.dr{background:var(--panel2)!important;display:flex;align-items:center;justify-content:center}
/* quiet "also made" */
.also{display:grid;gap:0 28px}
.also a{display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;color:#b9b2a6}
.also a:hover{color:var(--ink)}
.also .m{font:11px var(--mono);color:var(--mute)}
.also .mk{padding:0 5px;font-size:10px;border-color:transparent}
.ai-note{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:14px}
/* ===== K ===== */
.k-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:28px;overflow:hidden}
.k-hero .cv{padding:30px 34px}
.k-hero .side{border-left:1px solid var(--line);padding:26px 28px;background:#181614;display:flex;flex-direction:column;gap:22px}
.k-hero h1{font-size:34px;line-height:1.1;margin:10px 0 6px;font-weight:600;letter-spacing:-.015em}
.k-hero .tg{color:var(--mute);margin:0 0 24px;font-size:16px}
.k-stats{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.k-stats .s{font:12px var(--mono);color:var(--mute)}
.k6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.k6 .vis{height:190px}
.lowr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ku2{display:grid;grid-template-columns:1fr auto auto auto;gap:0 18px;font-size:14px}
.ku2>div{padding:8px 0;border-top:1px solid var(--line)}
.ku2 .c{font:12px var(--mono);color:var(--mute);text-align:right;white-space:nowrap}
.ku2 .h{font:500 10px var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase;border-top:0}
/* ===== L ===== */
.l-wrap{display:grid;grid-template-columns:330px 1fr;gap:44px;max-width:1240px;margin:0 auto;padding:0 32px}
.l-side{position:sticky;top:64px;align-self:start;padding-top:30px}
.l-side h1{font-size:28px;margin:8px 0 4px;font-weight:600;line-height:1.1}
.l-side .tg{color:var(--mute);margin:0 0 20px;font-size:14.5px}
.l-side .kv{grid-template-columns:62px 1fr;font-size:14px;gap:8px 12px}
.l-side .blk{border-top:1px solid var(--line);padding:16px 0}
.l-main{padding-top:30px}
.l-lead{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.l-lead .vis{height:240px}
.l-four{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.l-four .vis{height:120px}.l-four h3{font-size:15px}.l-four p{display:none}
/* ===== M ===== */
.m-intro{margin-top:30px;display:flex;align-items:baseline;gap:18px}
.m-intro h1{margin:0;font-size:26px;font-weight:600}.m-intro span{color:var(--mute)}
.m-band{display:grid;grid-template-columns:1.4fr 1fr 1fr;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:18px}
.m-band>div{padding:22px 24px}.m-band>div+div{border-left:1px solid var(--line)}
.m-band .kv{font-size:14px;grid-template-columns:62px 1fr}
.m-feat{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.m-feat .lead .vis{height:330px}
.m-feat .stack{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.m-feat .stack .pc{flex-direction:row}.m-feat .stack .vis{width:46%;border-bottom:0;border-right:1px solid var(--line)}
.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.m-row .pc{flex-direction:row}.m-row .vis{width:120px;flex:none;border-bottom:0;border-right:1px solid var(--line)}
.m-row h3{font-size:15px}.m-row .tx{padding:12px 14px}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute"><defs><symbol id="seal" viewBox="0 0 16 16"><circle cx="8" cy="6.5" r="4.6" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M5.2 10.2 4.4 15l3.6-1.8 3.6 1.8-.8-4.8" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></symbol>
<symbol id="cfg" viewBox="0 0 300 150"><text x="18" y="34" font-family="Geist Mono,monospace" font-size="12" fill="#ea7444">services:</text><text x="18" y="54" font-family="Geist Mono,monospace" font-size="12" fill="#b9b2a6"> jellyfin: image: linuxserver/jellyfin</text><text x="18" y="74" font-family="Geist Mono,monospace" font-size="12" fill="#ea7444">hosts:<tspan fill="#b9b2a6"> [ lucwin-01, lucwin-02 ]</tspan></text><text x="18" y="94" font-family="Geist Mono,monospace" font-size="12" fill="#ea7444">sync:<tspan fill="#a8b48f"> ✓ 2 hosts up to date</tspan></text></symbol>
<symbol id="row" viewBox="0 0 300 110"><path d="M0 90 C40 90 50 20 90 20 S140 90 180 90 S230 25 260 25 S290 80 300 85" fill="none" stroke="#ea7444" stroke-width="2"/><path d="M0 95 C45 95 55 35 95 35 S145 95 185 95 S235 40 265 40" fill="none" stroke="#8e877c" stroke-width="1.5" stroke-dasharray="4 4"/></symbol></defs></svg>
<div class="tabs"><span class="lbl">Round 5 · full pages</span>
<button data-p="k" class="on">K · CV hero</button><button data-p="l">L · CV sidebar</button><button data-p="m">M · at-a-glance band</button>
<span class="desc" id="desc"></span>
</div>
<!-- =========================================================== K -->
<section class="page on" id="k" data-desc="The CV is a big card at the top; highlights and certificates sit inside it on the right. Then the six, then a quiet list.">
<div class="top"><span class="gate">← gate</span><span class="nm">Lucas Winther <span>/ work</span></span><nav><span>Projects</span><span>Record</span><span>Writing</span><span>History</span></nav><span class="pref">projects made: <span class="sw"><span class="on">any way</span><span>not fully by AI</span><span>by hand only</span></span></span></div>
<div class="wrap">
<div class="k-hero">
<div class="cv">
<div class="lab"><span class="acc">●</span>&nbsp; CV in ten seconds</div>
<h1>Lucas Winther</h1>
<p class="tg">Computer Scientist with passion for development.</p>
<div class="kv">
<span class="k">now</span><span>IT-medarbejder, IT Research Tech, Aarhus University <span class="meta">2025–now</span></span>
<span class="k">before</span><span>Intern, ScienceAtHome <span class="meta">2019</span><br>Student helper, Local Configuration Management, TERMA Group <span class="meta">2016–2018</span></span>
<span class="k">degree</span><span>Bachelor in Computer Science</span>
<span class="k">contact</span><span style="text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px">lucas@lucaswinther.info</span>
</div>
<div class="btns" style="margin-top:22px"><span class="btn">full history ↓</span><span class="btn">GitHub</span><span class="btn">LinkedIn</span></div>
</div>
<div class="side">
<div><div class="lab" style="margin-bottom:6px">Highlights</div>
<div class="hl">
<div class="acc">AUHackathon 2019</div><div class="r acc">winner</div>
<div>First Lego League</div><div class="r acc">won round 1, twice</div>
<div>Google Hash Code 2021</div><div class="r acc">top 12%</div>
</div><a class="meta" style="display:block;margin-top:8px">+ 3 more in the record ↓</a></div>
<div><div class="lab" style="margin-bottom:10px">Keeping up</div>
<div class="k-stats"><span class="big acc"><svg class="seal" width="22" height="22"><use href="#seal"/></svg> 18</span><span>certificates <span class="s">· 23 courses &amp; labs · ~27 h since Feb 2025</span></span></div>
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:12px"><span class="chip">Ansible 5</span><span class="chip">Serverless/AWS 5</span><span class="chip">RAG &amp; LLMs 4</span><span class="chip">Security 2</span><span class="chip">Linux 1</span></div>
<a class="meta" style="display:block;margin-top:10px">all courses ↓</a></div>
</div>
</div>
<div class="sh" style="margin-top:46px"><h2>Projects I'm proudest of</h2><span class="n">6</span><span class="r ai-note">marked by how much AI went into them · <span class="mk ai"><i></i>AI</span><span class="mk"><i></i>by hand</span></span></div>
<div class="k6">
<a class="pc"><div class="vis dr"><svg width="92%" height="150"><use href="#cfg"/></svg></div><div class="tx"><div class="row1"><span class="num">01 <span class="meta">· own</span></span><span class="mk ai"><i></i>made with AI</span></div><h3>Config</h3><p>Store, sync and manage docker-compose deployments on servers.</p></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="tx"><div class="row1"><span class="num">02 <span class="meta">· own</span></span><span class="mk ai"><i></i>made with AI</span></div><h3>Event Tracker for Gacha Games</h3><p>Which live service game events to prioritize.</p></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="tx"><div class="row1"><span class="num">03 <span class="meta">· school · thesis</span></span><span class="mk"><i></i>by hand</span></div><h3>Bachelor Report</h3><p>Reputation systems in peer-to-peer archival.</p></div></a>
<a class="pc"><div class="vis dr"><svg width="80%" height="110"><use href="#row"/></svg></div><div class="tx"><div class="row1"><span class="num">04 <span class="meta">· own</span></span><span class="mk"><i></i>by hand</span></div><h3>Mixed-Reality Rowing Game</h3><p>Two people, an Arduino and two real oars.</p></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="tx"><div class="row1"><span class="num">05 <span class="meta">· school</span></span><span class="mk"><i></i>by hand</span></div><h3>Student Dashboard</h3><p>A concept dashboard built upon user studies.</p></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/vr-classroom.jpg)"></div><div class="tx"><div class="row1"><span class="num">06 <span class="meta">· school</span></span><span class="mk"><i></i>by hand</span></div><h3>VR-Classroom</h3><p>Register, then create and sign up for classes.</p></div></a>
</div>
<div style="display:grid;grid-template-columns:180px 1fr;gap:20px;margin-top:26px">
<div><div class="lab">Also made</div><p class="meta" style="margin:6px 0 0;line-height:1.6">7 smaller and older projects · search</p></div>
<div class="also" style="grid-template-columns:repeat(3,1fr)">
<a>Chessswap <span class="m">react</span></a><a>Monthly Expenses Tracker <span class="m">js</span></a><a>LoL Winrate Discord Bot <span class="m">node</span></a>
<a>Censor Simulator <span class="m">unity · VR</span></a><a>BreakoutPython <span class="m">python</span></a><a>Tribute to Norman Borlaugh <span class="m">html</span></a>
<a>Portfolio (2021) <span class="m">react</span></a>
</div>
</div>
<div class="sh" style="margin-top:60px"><h2>Record</h2><span class="n">the full version of the highlights</span></div>
<div class="lowr">
<div class="box"><h3>Recognition &amp; volunteering</h3>
<div class="hl" style="margin-top:10px">
<div class="acc">AUHackathon 2019</div><div class="r acc">winner · best AUHack</div>
<div>First Lego League <span class="meta">· four years</span></div><div class="r acc">won round 1, two years running</div>
<div>Google Hash Code 2021</div><div class="r acc">top 12%</div>
<div>De Danske Cybermesterskaber 2024</div><div class="r">regional participant</div>
<div>Art Bubble <span class="meta">· art-bubble.dk ↗</span></div><div class="r">volunteer IT &amp; website · ongoing</div>
<div>Lystrup Genbrugser</div><div class="r">volunteer IT &amp; website · site retired</div>
</div></div>
<div class="box"><h3>Keeping up · 18 certificates</h3>
<div class="ku2" style="margin-top:10px">
<div class="h">topic</div><div class="h" style="text-align:right">done</div><div class="h" style="text-align:right">cert.</div><div class="h" style="text-align:right">time</div>
<div>Ansible &amp; configuration</div><div class="c">2 courses · 3 labs</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 5</div><div class="c">9.4h</div>
<div>Linux administration</div><div class="c">1 course</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 1</div><div class="c">6.7h</div>
<div>Security</div><div class="c">2 courses · 1 lab</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 2</div><div class="c">4.9h</div>
<div>Serverless on AWS</div><div class="c">5 courses · 3 labs</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 5</div><div class="c">3.9h</div>
<div>RAG &amp; LLM systems</div><div class="c">4 courses · 1 lab</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 4</div><div class="c">1.8h</div>
<div>Observability</div><div class="c">1 course</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 1</div><div class="c">0.4h</div>
</div><a class="more">All courses and certificates, searchable →</a></div>
</div>
<div class="lowr" style="margin-top:14px">
<div class="box"><h3>Writing · 1 post</h3><div style="font-size:14px">A synthetic work post <span class="meta">· 14 Mar 2025</span></div></div>
<div class="box"><h3>Where I've worked</h3><div class="kv" style="font-size:14px;margin-top:10px"><span class="k">now</span><span>IT Research Tech, Aarhus University (2025–now)</span><span class="k">before</span><span>Intern, ScienceAtHome (2019)<br>Student helper, TERMA Group (2016–2018)</span><span class="k">degree</span><span>Bachelor in Computer Science</span></div></div>
</div>
</div>
<div class="foot"><span>← back to the gate</span><span>/simple</span><span>GitHub</span><span>LinkedIn</span><span>lucas@lucaswinther.info</span></div>
</section>
<!-- =========================================================== L -->
<section class="page" id="l" data-desc="The CV, highlights and certificates live in a left column that stays put while you scroll the projects. Like a CV with a portfolio attached.">
<div class="top"><span class="gate">← gate</span><span class="nm">Lucas Winther <span>/ work</span></span><nav><span>Projects</span><span>Record</span><span>Writing</span></nav><span class="pref">projects made: <span class="sw"><span class="on">any way</span><span>not fully by AI</span><span>by hand only</span></span></span></div>
<div class="l-wrap">
<aside class="l-side">
<div class="lab"><span class="acc">●</span>&nbsp; CV in ten seconds</div>
<h1>Lucas Winther</h1><p class="tg">Computer Scientist with passion for development.</p>
<div class="kv"><span class="k">now</span><span>IT-medarbejder, IT Research Tech, Aarhus University <span class="meta">2025–</span></span><span class="k">before</span><span>Intern, ScienceAtHome <span class="meta">2019</span><br>Student helper, TERMA Group <span class="meta">2016–18</span></span><span class="k">degree</span><span>BSc Computer Science</span></div>
<div class="btns" style="margin:16px 0 4px"><span class="btn">GitHub</span><span class="btn">LinkedIn</span><span class="btn">Email</span></div>
<div class="blk" style="margin-top:14px"><div class="lab" style="margin-bottom:4px">Highlights</div>
<div class="hl"><div class="acc">AUHackathon 2019</div><div class="r acc">winner</div><div>First Lego League</div><div class="r acc">round 1 ×2</div><div>Hash Code 2021</div><div class="r acc">top 12%</div></div></div>
<div class="blk"><div class="lab" style="margin-bottom:8px">Keeping up</div>
<div><span class="big acc" style="font-size:26px"><svg class="seal" width="20" height="20"><use href="#seal"/></svg> 18</span> certificates</div>
<div class="meta" style="margin-top:6px">23 courses &amp; labs · ~27 h · since Feb 2025<br>Ansible · AWS serverless · RAG · security · Linux</div></div>
</aside>
<main class="l-main">
<div class="sh" style="margin-top:0"><h2>Projects I'm proudest of</h2><span class="n">6</span><span class="r ai-note"><span class="mk ai"><i></i>AI</span><span class="mk"><i></i>by hand</span></span></div>
<div class="l-lead">
<a class="pc"><div class="vis dr"><svg width="92%" height="160"><use href="#cfg"/></svg></div><div class="tx"><div class="row1"><span class="num">01 <span class="meta">· own</span></span><span class="mk ai"><i></i>made with AI</span></div><h3>Config</h3><p>Store, sync and manage docker-compose deployments on servers.</p></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="tx"><div class="row1"><span class="num">02 <span class="meta">· own</span></span><span class="mk ai"><i></i>made with AI</span></div><h3>Event Tracker for Gacha Games</h3><p>Which live service game events to prioritize.</p></div></a>
</div>
<div class="l-four">
<a class="pc"><div class="vis mut" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="tx"><div class="row1"><span class="num">03</span><span class="mk"><i></i></span></div><h3>Bachelor Report</h3></div></a>
<a class="pc"><div class="vis dr"><svg width="80%" height="70"><use href="#row"/></svg></div><div class="tx"><div class="row1"><span class="num">04</span><span class="mk"><i></i></span></div><h3>Mixed-Reality Rowing</h3></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="tx"><div class="row1"><span class="num">05</span><span class="mk"><i></i></span></div><h3>Student Dashboard</h3></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/vr-classroom.jpg)"></div><div class="tx"><div class="row1"><span class="num">06</span><span class="mk"><i></i></span></div><h3>VR-Classroom</h3></div></a>
</div>
<div style="margin-top:26px"><div class="lab" style="margin-bottom:6px">Also made · 7</div>
<div class="also" style="grid-template-columns:repeat(2,1fr)">
<a>Chessswap <span class="m">react</span></a><a>Censor Simulator <span class="m">unity · VR</span></a>
<a>Monthly Expenses Tracker <span class="m">js</span></a><a>BreakoutPython <span class="m">python</span></a>
<a>LoL Winrate Discord Bot <span class="m">node</span></a><a>Tribute to Norman Borlaugh <span class="m">html</span></a>
<a>Portfolio (2021) <span class="m">react</span></a>
</div></div>
<div class="sh" style="margin-top:56px"><h2>Record</h2></div>
<div class="box"><h3>Recognition &amp; volunteering</h3><div class="hl" style="margin-top:10px">
<div class="acc">AUHackathon 2019</div><div class="r acc">winner · best AUHack</div>
<div>First Lego League <span class="meta">· four years</span></div><div class="r acc">won round 1, two years running</div>
<div>Google Hash Code 2021</div><div class="r acc">top 12%</div>
<div>De Danske Cybermesterskaber 2024</div><div class="r">regional participant</div>
<div>Art Bubble <span class="meta">· art-bubble.dk ↗</span></div><div class="r">volunteer IT &amp; website · ongoing</div>
<div>Lystrup Genbrugser</div><div class="r">volunteer IT &amp; website · site retired</div></div></div>
<div class="box" style="margin-top:14px"><h3>Keeping up · 18 certificates · 23 courses &amp; labs</h3>
<div class="ku2" style="margin-top:10px">
<div>Ansible &amp; configuration</div><div class="c">2 courses · 3 labs</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 5</div><div class="c">9.4h</div>
<div>Linux administration</div><div class="c">1 course</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 1</div><div class="c">6.7h</div>
<div>Security</div><div class="c">2 courses · 1 lab</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 2</div><div class="c">4.9h</div>
<div>Serverless on AWS</div><div class="c">5 courses · 3 labs</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 5</div><div class="c">3.9h</div>
<div>RAG &amp; LLM systems</div><div class="c">4 courses · 1 lab</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 4</div><div class="c">1.8h</div>
</div><a class="more">All courses and certificates, searchable →</a></div>
<div class="box" style="margin-top:14px"><h3>Writing · 1 post</h3><div style="font-size:14px">A synthetic work post <span class="meta">· 14 Mar 2025</span></div></div>
</main>
</div>
<div class="foot"><span>← back to the gate</span><span>/simple</span><span>GitHub</span><span>LinkedIn</span><span>lucas@lucaswinther.info</span></div>
</section>
<!-- =========================================================== M -->
<section class="page" id="m" data-desc="A three-part band across the top (CV · highlights · keeping up), then one lead project, then the other five, then a quiet list.">
<div class="top"><span class="gate">← gate</span><span class="nm">Lucas Winther <span>/ work</span></span><nav><span>Projects</span><span>Record</span><span>Writing</span><span>History</span></nav><span class="pref">projects made: <span class="sw"><span class="on">any way</span><span>not fully by AI</span><span>by hand only</span></span></span></div>
<div class="wrap">
<div class="m-intro"><h1>Lucas Winther</h1><span>Computer Scientist with passion for development.</span></div>
<div class="m-band">
<div><div class="lab" style="margin-bottom:12px"><span class="acc">●</span>&nbsp; CV in ten seconds</div>
<div class="kv"><span class="k">now</span><span>IT-medarbejder, IT Research Tech, Aarhus University <span class="meta">2025–now</span></span><span class="k">before</span><span>Intern, ScienceAtHome <span class="meta">2019</span> · Student helper, TERMA Group <span class="meta">2016–2018</span></span><span class="k">degree</span><span>Bachelor in Computer Science</span></div>
<div class="btns" style="margin-top:16px"><span class="btn">GitHub</span><span class="btn">LinkedIn</span><span class="btn">Email</span></div></div>
<div><div class="lab" style="margin-bottom:6px">Highlights</div>
<div class="hl"><div class="acc">AUHackathon 2019</div><div class="r acc">winner</div><div>First Lego League</div><div class="r acc">round 1 ×2</div><div>Google Hash Code 2021</div><div class="r acc">top 12%</div></div>
<a class="meta" style="display:block;margin-top:8px">+ 3 more ↓</a></div>
<div><div class="lab" style="margin-bottom:10px">Keeping up</div>
<div><span class="big acc"><svg class="seal" width="22" height="22"><use href="#seal"/></svg> 18</span> <span>certificates</span></div>
<div class="meta" style="margin:8px 0 10px">23 courses &amp; labs · ~27 h since Feb 2025</div>
<div style="display:flex;gap:6px;flex-wrap:wrap"><span class="chip">Ansible</span><span class="chip">AWS serverless</span><span class="chip">RAG</span><span class="chip">Security</span><span class="chip">Linux</span></div></div>
</div>
<div class="sh" style="margin-top:46px"><h2>Projects I'm proudest of</h2><span class="n">6</span><span class="r ai-note">marked by how much AI went into them · <span class="mk ai"><i></i>AI</span><span class="mk"><i></i>by hand</span></span></div>
<div class="m-feat">
<a class="pc lead"><div class="vis dr"><svg width="92%" height="200"><use href="#cfg"/></svg></div><div class="tx"><div class="row1"><span class="num">01 <span class="meta">· own · personal project</span></span><span class="mk ai"><i></i>made with AI</span></div><h3 style="font-size:24px">Config</h3><p>A repository to store, sync and manage docker-compose based deployment on servers.</p></div></a>
<div class="stack">
<a class="pc"><div class="vis mut" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="tx"><div class="row1"><span class="num">02</span><span class="mk ai"><i></i>AI</span></div><h3>Event Tracker for Gacha Games</h3><p>Which live service game events to prioritize.</p></div></a>
<a class="pc"><div class="vis dr"><svg width="86%" height="90"><use href="#row"/></svg></div><div class="tx"><div class="row1"><span class="num">03</span><span class="mk"><i></i>by hand</span></div><h3>Mixed-Reality Rowing Game</h3><p>Two people, an Arduino and two real oars.</p></div></a>
</div>
</div>
<div class="m-row">
<a class="pc"><div class="vis mut" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="tx"><div class="row1"><span class="num">04</span><span class="mk"><i></i></span></div><h3>Bachelor Report</h3><p class="meta">school · thesis</p></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="tx"><div class="row1"><span class="num">05</span><span class="mk"><i></i></span></div><h3>Student Dashboard</h3><p class="meta">school</p></div></a>
<a class="pc"><div class="vis mut" style="background-image:url(/files/vr-classroom.jpg)"></div><div class="tx"><div class="row1"><span class="num">06</span><span class="mk"><i></i></span></div><h3>VR-Classroom</h3><p class="meta">school</p></div></a>
</div>
<div style="margin-top:22px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:baseline;font-size:13.5px;color:#a39c90">
<span class="lab" style="margin-right:4px">Also made</span>
<a>Chessswap</a><a>Monthly Expenses Tracker</a><a>LoL Winrate Discord Bot</a><a>Censor Simulator</a><a>BreakoutPython</a><a>Tribute to Norman Borlaugh</a><a>Portfolio (2021)</a>
<span class="meta">· all projects, searchable →</span>
</div>
<div class="sh" style="margin-top:60px"><h2>Record</h2><span class="n">the full version</span></div>
<div class="lowr">
<div class="box"><h3>Recognition &amp; volunteering</h3><div class="hl" style="margin-top:10px">
<div class="acc">AUHackathon 2019</div><div class="r acc">winner · best AUHack</div>
<div>First Lego League <span class="meta">· four years</span></div><div class="r acc">won round 1, two years running</div>
<div>Google Hash Code 2021</div><div class="r acc">top 12%</div>
<div>De Danske Cybermesterskaber 2024</div><div class="r">regional participant</div>
<div>Art Bubble <span class="meta">· art-bubble.dk ↗</span></div><div class="r">volunteer IT &amp; website · ongoing</div>
<div>Lystrup Genbrugser</div><div class="r">volunteer IT &amp; website · site retired</div></div></div>
<div class="box"><h3>Keeping up · 18 certificates</h3><div class="ku2" style="margin-top:10px">
<div>Ansible &amp; configuration</div><div class="c">2 courses · 3 labs</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 5</div><div class="c">9.4h</div>
<div>Linux administration</div><div class="c">1 course</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 1</div><div class="c">6.7h</div>
<div>Security</div><div class="c">2 courses · 1 lab</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 2</div><div class="c">4.9h</div>
<div>Serverless on AWS</div><div class="c">5 courses · 3 labs</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 5</div><div class="c">3.9h</div>
<div>RAG &amp; LLM systems</div><div class="c">4 courses · 1 lab</div><div class="c" style="color:var(--ink)"><svg class="seal" width="12" height="12"><use href="#seal"/></svg> 4</div><div class="c">1.8h</div>
</div><a class="more">All courses and certificates, searchable →</a></div>
</div>
<div class="lowr" style="margin-top:14px">
<div class="box"><h3>Writing · 1 post</h3><div style="font-size:14px">A synthetic work post <span class="meta">· 14 Mar 2025</span></div></div>
<div class="box"><h3>Where I've worked</h3><div class="kv" style="font-size:14px;margin-top:10px"><span class="k">now</span><span>IT Research Tech, Aarhus University (2025–now)</span><span class="k">before</span><span>Intern, ScienceAtHome (2019)<br>Student helper, TERMA Group (2016–2018)</span></div></div>
</div>
</div>
<div class="foot"><span>← back to the gate</span><span>/simple</span><span>GitHub</span><span>LinkedIn</span><span>lucas@lucaswinther.info</span></div>
</section>
<script>
(function(){var d=document.getElementById('desc');function show(id){document.querySelectorAll('.page').forEach(function(p){p.classList.toggle('on',p.id===id)});document.querySelectorAll('.tabs button').forEach(function(b){b.classList.toggle('on',b.dataset.p===id)});d.textContent=document.getElementById(id).dataset.desc;window.scrollTo(0,0);if(window.brainstorm&&brainstorm.send)brainstorm.send({type:'click',choice:id,text:'viewed '+id});}
document.querySelectorAll('.tabs button').forEach(function(b){b.onclick=function(){show(b.dataset.p)}});show((location.hash||'#k').slice(1));})();
</script>
</body>
</html>