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

211 lines
25 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: round 2</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)}
</style>
</head>
<body>
<div class="wrap">
<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></defs></svg>
<p class="meta" style="margin-top:28px">Round 2 · uneven grids with the small projects woven in · other work as its own kind of tile · certificates up front · search that also finds certificates. Dotted underline = a fact I don't have yet.</p>
<!-- ================= D ================= -->
<div class="opt-head first"><span class="L">D</span><div><h1>Woven grid</h1><p>Each big tile has a column of small tiles beside or under it, so the small projects fill gaps between the big ones instead of collecting at the bottom. Sizes vary on purpose: one large, some tall, some wide.</p></div></div>
<div class="note">How it scales: the page repeats a fixed rhythm of slots (large + 2 small, tall + medium + small stack, …). New picked projects take the next big slot; everything else fills small slots in date order. You control which ones are big, not where they land.</div>
<div class="sh"><h2>Projects</h2><span class="n">15 · 6 picked</span><span class="r"><span class="seg"><span class="on">All</span><span>Own</span><span>School</span><span>For others</span></span><span class="search">Search projects &amp; certificates</span></span></div>
<div class="gD">
<article class="t L" style="grid-column:1/8;grid-row:1/7"><div class="vis draw"><span class="tag">drawn showcase · config-editor · hover</span><div class="code"><b>services:</b><br>&nbsp;&nbsp;jellyfin:<br>&nbsp;&nbsp;&nbsp;&nbsp;image: <u>lscr.io/linuxserver/jellyfin</u><br>&nbsp;&nbsp;&nbsp;&nbsp;volumes: [ /srv/media:/data ]<br><b>hosts:</b> [ lucwin-01, lucwin-02 ]<br><b>sync:</b> <u>✓ 2 hosts up to date</u></div></div><div class="tx"><div class="meta">Own · personal project</div><h3>Config</h3><p>A repository to store, sync and manage docker-compose based deployment on servers.</p><div class="ft"><span class="open">Read the full story →</span><span class="mk ai"><i></i>made with AI</span></div></div></article>
<article class="t M" style="grid-column:8/13;grid-row:1/5"><div class="vis" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="tx"><div class="meta">Own</div><h3>Event Tracker for Gacha Games</h3><div class="ft"><span class="open">Read more →</span><span class="mk ai"><i></i>made with AI</span></div></div></article>
<div class="t s" style="grid-column:8/13;grid-row:5/6"><div class="th" style="background-image:url(/files/chess-swap.jpg)"></div><div><h4>Chessswap</h4><div class="meta">Own · react</div></div><span class="mk"><i></i></span></div>
<div class="t s" style="grid-column:8/13;grid-row:6/7"><div class="th" style="background-image:url(/files/budget.jpg)"></div><div><h4>Monthly Expenses Tracker</h4><div class="meta">Own · javascript</div></div><span class="mk"><i></i></span></div>
<article class="t T" style="grid-column:1/5;grid-row:7/13"><div class="vis draw"><span class="tag">rowing-stroke · hover</span><svg width="84%" height="120" 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"/></svg></div><div class="tx"><div class="meta">Own</div><h3>Mixed-Reality Rowing Game</h3><p>Two people, an Arduino and two real oars.</p><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
<article class="t M" style="grid-column:5/9;grid-row:7/11"><div class="vis" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="tx"><div class="meta">School · thesis</div><h3>Bachelor Report</h3><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
<article class="t ow" style="grid-column:9/13;grid-row:7/10"><div class="vis"><div class="site">art-bubble.dk<small>IT &amp; website</small></div></div><div class="tx" style="padding-top:10px"><div class="meta">For others · <span class="ph" title="placeholder">years?</span></div><h3>Art Bubble</h3><div class="ft" style="margin-top:4px"><span class="badge">ongoing</span><span class="mk un"><i></i>not recorded</span></div></div></article>
<div class="t s ow" style="grid-column:9/13;grid-row:10/11"><div class="th" style="background:repeating-linear-gradient(135deg,#1d1b18 0 6px,#1a1815 6px 12px)"></div><div><h4>Lystrup Genbrugser</h4><div class="meta">For others · site retired</div></div><span class="mk un"><i></i></span></div>
<div class="t s" style="grid-column:5/9;grid-row:11/12"><div class="th" style="background-image:url(/files/lol-winrate-discord-bot.jpg)"></div><div><h4>LoL Winrate Discord Bot</h4><div class="meta">Own · node.js</div></div><span class="mk"><i></i></span></div>
<div class="t s" style="grid-column:9/13;grid-row:11/12"><div class="th" style="background-image:url(/files/censor-simulator.jpg)"></div><div><h4>Censor Simulator</h4><div class="meta">School · unity, VR</div></div><span class="mk"><i></i></span></div>
<div class="t s" style="grid-column:5/9;grid-row:12/13"><div class="th" style="background-image:url(/files/breakout-python.jpg)"></div><div><h4>BreakoutPython</h4><div class="meta">School · python</div></div><span class="mk"><i></i></span></div>
<div class="t s" style="grid-column:9/13;grid-row:12/13"><div class="th" style="background-image:url(/files/tribute-to-bourlaug.jpg)"></div><div><h4>Tribute to Norman Borlaugh</h4><div class="meta">Own · html, css</div></div><span class="mk"><i></i></span></div>
<article class="t W" style="grid-column:1/7;grid-row:13/18"><div class="vis" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="tx"><div class="meta">School</div><h3>Student Dashboard</h3><p>A concept student dashboard web-app, built upon conducted user studies.</p></div></article>
<article class="t W" style="grid-column:7/13;grid-row:13/17"><div class="vis" style="background-image:url(/files/vr-classroom.jpg)"></div><div class="tx"><div class="meta">School</div><h3>VR-Classroom</h3></div></article>
<div class="t s" style="grid-column:7/13;grid-row:17/18"><div class="th" style="background-image:url(/files/portfolio.jpg)"></div><div><h4>Portfolio (2021)</h4><div class="meta">Own · react</div></div><span class="mk"><i></i></span></div>
</div>
<!-- ================= E ================= -->
<div class="opt-head"><span class="L">E</span><div><h1>Packed by size</h1><p>Every project has a size (large, tall, wide, medium, small) and the grid packs them tightly in your order, letting small tiles slip into whatever gaps the big ones leave. Less hand-tuned than D, more organic, and it never needs re-laying out when you add things.</p></div></div>
<div class="note">Trade-off: D's rhythm is predictable and tidy; E is more uneven and "found", but exactly where a small tile lands depends on what's around it. Same tiles, same order, as D.</div>
<div class="sh"><h2>Projects</h2><span class="n">15 · 6 picked</span><span class="r"><span class="seg"><span class="on">All</span><span>Own</span><span>School</span><span>For others</span></span><span class="search">Search projects &amp; certificates</span></span></div>
<div class="gE">
<article class="t L"><div class="vis draw"><span class="tag">config-editor · hover</span><div class="code"><b>services:</b><br>&nbsp;&nbsp;jellyfin: <u>✓</u><br><b>hosts:</b> [ lucwin-01, lucwin-02 ]<br><b>sync:</b> <u>✓ 2 hosts up to date</u></div></div><div class="tx"><div class="meta">Own</div><h3>Config</h3><p>Store, sync and manage docker-compose based deployment on servers.</p><div class="ft"><span class="open">Read the full story →</span><span class="mk ai"><i></i>made with AI</span></div></div></article>
<article class="t M"><div class="vis" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="tx"><div class="meta">Own</div><h3>Event Tracker for Gacha Games</h3><div class="ft"><span class="open">Read more →</span><span class="mk ai"><i></i>made with AI</span></div></div></article>
<article class="t W"><div class="vis" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="tx"><div class="meta">School · thesis</div><h3>Bachelor Report</h3></div></article>
<article class="t T"><div class="vis draw"><span class="tag">rowing-stroke</span><svg width="80%" height="100" 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"/></svg></div><div class="tx"><div class="meta">Own</div><h3>Mixed-Reality Rowing Game</h3><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
<article class="t M"><div class="vis" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="tx"><div class="meta">School</div><h3>Student Dashboard</h3></div></article>
<article class="t ow"><div class="vis"><div class="site">art-bubble.dk<small>IT &amp; website</small></div></div><div class="tx" style="padding-top:10px"><div class="meta">For others</div><h3>Art Bubble</h3></div></article>
<article class="t W"><div class="vis" style="background-image:url(/files/vr-classroom.jpg)"></div><div class="tx"><div class="meta">School</div><h3>VR-Classroom</h3></div></article>
<div class="t s ow"><div class="th" style="background:repeating-linear-gradient(135deg,#1d1b18 0 6px,#1a1815 6px 12px)"></div><div><h4>Lystrup Genbrugser</h4><div class="meta">For others · site retired</div></div><span class="mk un"><i></i></span></div>
<div class="t s"><div class="th" style="background-image:url(/files/chess-swap.jpg)"></div><div><h4>Chessswap</h4><div class="meta">Own · react</div></div><span class="mk"><i></i></span></div>
<div class="t s"><div class="th" style="background-image:url(/files/budget.jpg)"></div><div><h4>Monthly Expenses Tracker</h4><div class="meta">Own · javascript</div></div><span class="mk"><i></i></span></div>
<div class="t s"><div class="th" style="background-image:url(/files/lol-winrate-discord-bot.jpg)"></div><div><h4>LoL Winrate Discord Bot</h4><div class="meta">Own · node.js</div></div><span class="mk"><i></i></span></div>
<div class="t s"><div class="th" style="background-image:url(/files/censor-simulator.jpg)"></div><div><h4>Censor Simulator</h4><div class="meta">School · unity, VR</div></div><span class="mk"><i></i></span></div>
<div class="t s"><div class="th" style="background-image:url(/files/breakout-python.jpg)"></div><div><h4>BreakoutPython</h4><div class="meta">School · python</div></div><span class="mk"><i></i></span></div>
<div class="t s"><div class="th" style="background-image:url(/files/tribute-to-bourlaug.jpg)"></div><div><h4>Tribute to Norman Borlaugh</h4><div class="meta">Own · html, css</div></div><span class="mk"><i></i></span></div>
<div class="t s"><div class="th" style="background-image:url(/files/portfolio.jpg)"></div><div><h4>Portfolio (2021)</h4><div class="meta">Own · react</div></div><span class="mk"><i></i></span></div>
</div>
<!-- ================= Record ================= -->
<div class="opt-head"><span class="L g">+</span><div><h1>Record: competitions and keeping up (either grid)</h1><p>Certificates are now the headline number and get their own column, marked with a small seal. Orange = what you flag as most impressive; the list just grows downward.</p></div></div>
<div class="rec">
<div class="box"><h3>Competitions &amp; recognition</h3><p class="sum">4 entries · <span style="color:var(--acc)">orange</span> = flagged as a highlight</p>
<div class="led">
<div class="y">2024</div><div>De Danske Cybermesterskaber</div><div class="res">regional participant</div>
<div class="y">2021</div><div>Google Hash Code</div><div class="res hi">top 12%</div>
<div class="y">2019</div><div class="hi">AUHackathon</div><div class="res hi">winner · best AUHack</div>
<div class="y"><span class="ph" title="placeholder">yrs?</span></div><div>First Lego League <span class="meta">· four years</span></div><div class="res hi">won round 1, two years running</div>
</div>
</div>
<div class="box"><h3>Keeping up</h3><p class="sum"><span class="cert" style="font:500 14px var(--sans)"><svg width="15" height="15" style="color:var(--acc)"><use href="#seal"/></svg><b>18 certificates</b></span> from 23 courses and hands-on labs · <b>~27 hours</b> of course time since Feb 2025</p>
<div class="ku">
<div class="h">topic</div><div class="h" style="text-align:right">done</div><div class="h" style="text-align:right">certificates</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 cer"><span class="cert"><svg width="13" height="13"><use href="#seal"/></svg>5</span></div><div class="c">9.4h</div>
<div>Linux administration</div><div class="c">1 course</div><div class="c cer"><span class="cert"><svg width="13" height="13"><use href="#seal"/></svg>1</span></div><div class="c">6.7h</div>
<div>Security <span class="meta">· JWT, ISO 27001, honeypots</span></div><div class="c">2 courses · 1 lab</div><div class="c cer"><span class="cert"><svg width="13" height="13"><use href="#seal"/></svg>2</span></div><div class="c">4.9h</div>
<div>Serverless on AWS</div><div class="c">5 courses · 3 labs</div><div class="c cer"><span class="cert"><svg width="13" height="13"><use href="#seal"/></svg>5</span></div><div class="c">3.9h</div>
<div>RAG &amp; LLM systems</div><div class="c">4 courses · 1 lab</div><div class="c cer"><span class="cert"><svg width="13" height="13"><use href="#seal"/></svg>4</span></div><div class="c">1.8h</div>
<div>Observability <span class="meta">· Grafana</span></div><div class="c">1 course</div><div class="c cer"><span class="cert"><svg width="13" height="13"><use href="#seal"/></svg>1</span></div><div class="c">0.4h</div>
</div>
<a class="more">All courses and certificates, searchable →</a>
</div>
</div>
<!-- ================= Search ================= -->
<div class="opt-head"><span class="L g">+</span><div><h1>Searching the work page finds certificates too</h1><p>The same search box over the grid. Projects that match stay in the grid (others dim); matching certificates appear in a strip right under the search, linking to /work/learning/.</p></div></div>
<div class="sh" style="margin-top:10px"><h2>Projects</h2><span class="n">1 project · 5 certificates match</span><span class="r"><span class="search"><b>ansible</b></span></span></div>
<div class="res-wrap">
<div class="rgrid">
<div><p class="rh">Projects</p><div class="rl"><div><span><b>Config</b> · stores, syncs and manages docker-compose deployments <span class="chip"><mark>ansible</mark></span></span><span class="mk ai"><i></i>AI</span></div></div></div>
<div><p class="rh">Certificates &amp; labs</p><div class="rl">
<div><span><span class="cert"><svg width="13" height="13" style="color:var(--acc)"><use href="#seal"/></svg></span> <mark>Ansible</mark> Fundamentals</span><span class="m">Pluralsight · Apr 2025 · 3.7h</span></div>
<div><span><span class="cert"><svg width="13" height="13" style="color:var(--acc)"><use href="#seal"/></svg></span> Troubleshoot <mark>Ansible</mark> Connectivity <span class="meta">lab</span></span><span class="m">Mar 2025 · 1.2h</span></div>
<div><span><span class="cert"><svg width="13" height="13" style="color:var(--acc)"><use href="#seal"/></svg></span> Build a Production Ready <mark>Ansible</mark> Playbook <span class="meta">lab</span></span><span class="m">Mar 2025 · 1h</span></div>
<div><span class="meta">+ 2 more →</span><span></span></div>
</div></div>
</div>
</div>
<!-- ================= Other work in history ================= -->
<div class="opt-head"><span class="L g">+</span><div><h1>Other work also in "Where I've worked"</h1><p>Besides the tile, the work history gets an "on the side" line, so the CV reads complete. Retired sites keep their line, just not the link (or link an archived copy).</p></div></div>
<div class="box" style="max-width:640px"><h3>Where I've worked</h3>
<div class="hist">
<div class="k">now</div><div>IT-medarbejder, IT Research Tech, Aarhus University (2025–now)</div><div></div>
<div class="k">on the side</div><div>IT and website, <u style="text-decoration-color:var(--acc)">Art Bubble</u> (<span class="ph" title="placeholder">years?</span>)</div><div class="badge" style="align-self:center">ongoing</div>
<div class="k"></div><div>IT and website, Lystrup Genbrugser (<span class="ph" title="placeholder">years?</span>)</div><div class="badge gone" style="align-self:center">site retired</div>
<div class="k">before</div><div>Intern, ScienceAtHome (2019)</div><div></div>
</div>
</div>
<div class="pick">
<button data-choice="d" onclick="pick(this)">D · woven grid</button>
<button data-choice="e" onclick="pick(this)">E · packed by size</button>
</div>
</div>
<script>function pick(b){document.querySelectorAll('.pick button').forEach(x=>x.classList.remove('selected'));b.classList.add('selected');if(window.brainstorm&&brainstorm.send)brainstorm.send({type:'click',choice:b.dataset.choice,text:b.textContent});}</script>
</body>
</html>