Six rounds of mockups with the owner on 2026-11-12; K v2 picked. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
405 lines
39 KiB
HTML
405 lines
39 KiB
HTML
<!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> 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 & 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 & 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 & 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 & website · ongoing</div>
|
||
<div>Lystrup Genbrugser</div><div class="r">volunteer IT & 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 & 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 & 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> 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 & 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 & 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 & website · ongoing</div>
|
||
<div>Lystrup Genbrugser</div><div class="r">volunteer IT & website · site retired</div></div></div>
|
||
<div class="box" style="margin-top:14px"><h3>Keeping up · 18 certificates · 23 courses & labs</h3>
|
||
<div class="ku2" style="margin-top:10px">
|
||
<div>Ansible & 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 & 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> 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 & 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 & 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 & website · ongoing</div>
|
||
<div>Lystrup Genbrugser</div><div class="r">volunteer IT & website · site retired</div></div></div>
|
||
<div class="box"><h3>Keeping up · 18 certificates</h3><div class="ku2" style="margin-top:10px">
|
||
<div>Ansible & 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 & 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>
|