Six rounds of mockups with the owner on 2026-11-12; K v2 picked. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
270 lines
30 KiB
HTML
270 lines
30 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: three directions</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<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)}
|
||
a{color:inherit;text-decoration:none}
|
||
.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-of-type{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 h1{font-size:22px;margin:0;font-weight:600}
|
||
.opt-head p{margin:0;color:var(--mute);max-width:640px}
|
||
.note{font:12px/1.5 var(--mono);color:var(--mute);border-left:2px solid var(--acc);padding:2px 0 2px 12px;margin:10px 0 24px;max-width:820px}
|
||
.sh{display:flex;align-items:baseline;gap:12px;margin:40px 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;font:12px var(--mono);color:var(--mute)}
|
||
.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;color:var(--ink)}
|
||
.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)}
|
||
.meta{font:11px var(--mono);color:var(--mute);letter-spacing:.02em}
|
||
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font:11px var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
|
||
.shot{background:#0e0d0c center/cover no-repeat;border-bottom:1px solid var(--line)}
|
||
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .2s var(--e),transform .2s var(--e)}
|
||
.card:hover{border-color:#4a433b}
|
||
.card .txt{padding:16px 18px}
|
||
.card h3{margin:6px 0 4px;font-size:18px;font-weight:600}
|
||
.card p{margin:0 0 12px;color:#c9c2b6;font-size:14px}
|
||
.ft{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
|
||
.ft .open{font:12px var(--mono);color:var(--acc)}
|
||
/* drawn showcase stand-ins */
|
||
.draw{position:relative;background:var(--panel2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
|
||
.draw .tag{position:absolute;top:10px;left:12px;font:10px var(--mono);color:var(--mute)}
|
||
.code{font:11px/1.7 var(--mono);color:#b9b2a6;padding:26px 22px;width:100%}
|
||
.code b{color:var(--acc);font-weight:400}.code u{color:var(--ok);text-decoration:none}
|
||
/* small tiles */
|
||
.mini{display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
|
||
.mini .th{width:56px;height:38px;border-radius:4px;background:#0e0d0c center/cover;flex:none;border:1px solid var(--line)}
|
||
.mini h4{margin:0;font-size:14px;font-weight:500}.mini .meta{font-size:10.5px}
|
||
.mini .mk{margin-left:auto;font-size:10px;padding:1px 6px}
|
||
/* ---------- A ---------- */
|
||
.gA{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
|
||
.gA .big{grid-column:span 6}.gA .mid{grid-column:span 4}.gA .sm{grid-column:span 3}
|
||
.gA .big .shot,.gA .big .draw{height:230px}.gA .mid .shot,.gA .mid .draw{height:170px}
|
||
/* recognition strip */
|
||
.rec{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-top:14px}
|
||
.box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
|
||
.box h3{margin:0 0 12px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
|
||
.led{display:grid;grid-template-columns:52px 1fr auto;gap:4px 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 .res.win{color:var(--acc)}
|
||
.cl{display:grid;grid-template-columns:1fr auto;gap:0 14px;font-size:14px}
|
||
.cl>div{padding:7px 0;border-top:1px solid var(--line)}.cl .c{font:12px var(--mono);color:var(--mute);text-align:right}
|
||
.more{display:inline-block;margin-top:12px;font:12px var(--mono);color:var(--acc)}
|
||
/* ---------- B ---------- */
|
||
.gB{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
|
||
.gB .shot,.gB .draw{height:180px}
|
||
.gBs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
|
||
.cvs{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-top:24px}
|
||
.cvs>div{padding:18px 20px}.cvs>div+div{border-left:1px solid var(--line)}
|
||
.cvs h3{margin:0 0 10px;font:500 11px var(--mono);letter-spacing:.08em;color:var(--mute)}
|
||
.kv{display:grid;grid-template-columns:72px 1fr;gap:6px 14px;font-size:14px}.kv .k{font:11px var(--mono);color:var(--mute);padding-top:2px}
|
||
.kv .acc{color:var(--acc)}
|
||
.lower{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
|
||
.log>div{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
|
||
.log .d{font:11px var(--mono);color:var(--mute);padding-top:3px}.log .k{font:10.5px var(--mono);color:var(--ok);border:1px solid #3d4433;border-radius:4px;padding:0 5px;height:18px;align-self:center}
|
||
.topics{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 2px}
|
||
/* ---------- C ---------- */
|
||
.gC{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:118px;gap:14px}
|
||
.gC .card{display:flex;flex-direction:column}
|
||
.gC .card .shot,.gC .card .draw{flex:1;min-height:0}
|
||
.gC .card .txt{padding:12px 16px}
|
||
.gC .card h3{font-size:16px;margin:2px 0 0}
|
||
.gC .card p{display:none}
|
||
.gC .hero{grid-column:span 4;grid-row:span 4}.gC .hero p{display:block;margin:6px 0 0}
|
||
.gC .hero h3{font-size:22px}
|
||
.gC .tall{grid-column:span 2;grid-row:span 2}
|
||
.gC .wide{grid-column:span 2;grid-row:span 2}
|
||
.gC .mini{grid-column:span 2;align-self:stretch}
|
||
.track{margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:0;border-top:1px solid var(--line)}
|
||
.track .lab{padding:20px 0;font:500 11px var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase;border-bottom:1px solid var(--line)}
|
||
.track .lab span{display:block;font:13px var(--sans);text-transform:none;letter-spacing:0;color:var(--mute);margin-top:6px;max-width:220px}
|
||
.track .row{padding:20px 0;border-bottom:1px solid var(--line)}
|
||
.medals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
|
||
.medal .y{font:12px var(--mono);color:var(--mute)}.medal .t{font-weight:500;margin:4px 0}.medal .r{font:12px var(--mono);color:var(--mute)}
|
||
.medal .r.win{color:var(--acc)}
|
||
.bars{display:grid;grid-template-columns:150px 1fr 70px;gap:8px 14px;align-items:center;font-size:14px}
|
||
.bar{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:#8e877c;border-radius:99px}
|
||
.bars .c{font:11px var(--mono);color:var(--mute)}
|
||
/* learning page */
|
||
.lp{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin-top:14px}
|
||
.lp .top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
|
||
.search{flex:1;max-width:380px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font:13px var(--sans);color:var(--mute)}
|
||
.seg{display:flex;gap:4px}.seg span{font:12px var(--sans);color:var(--mute);padding:4px 9px;border-radius:5px}.seg span.on{background:var(--panel2);color:var(--ink)}
|
||
table{width:100%;border-collapse:collapse;font-size:13.5px}td,th{text-align:left;padding:8px 10px 8px 0;border-top:1px solid var(--line);vertical-align:top}
|
||
th{font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--mute);text-transform:uppercase;border-top:0}
|
||
td.m{font:12px var(--mono);color:var(--mute);white-space:nowrap}
|
||
.pick{display:flex;gap:10px;margin:22px 0 60px}
|
||
.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">
|
||
|
||
<p class="meta" style="margin-top:28px">Mockups · work page · everything uses your real titles, screenshots, CV lines and spreadsheet. The top bar, intro and CV strip are unchanged and left out.</p>
|
||
|
||
<!-- ================= A ================= -->
|
||
<div class="opt-head"><span class="L">A</span><div><h1>One grid, three sizes</h1><p>All 13 projects in one grid. The six are big or medium tiles, and the rest are compact cards. Under it, a single "Record" band: competitions on the left, learning by topic on the right.</p></div></div>
|
||
<div class="note">Risk: this is the closest to the "generic bento" look your DESIGN.md rules out. It's saved by the drawn showcases and the plain tiles, but it's the most template-like of the three.</div>
|
||
|
||
<div class="sh"><h2>Projects</h2><span class="n">13 · 6 picked</span><span class="r">All · Own · School · search</span></div>
|
||
<div class="gA">
|
||
<article class="card big"><div class="shot" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="txt"><div class="meta">01 · Own · personal project</div><h3>Event Tracker for Gacha Games</h3><p>Used to easily figure out which live service games events to prioritize.</p><div class="chips"><span class="chip">scraping</span><span class="chip">webapp</span><span class="chip">javascript</span></div><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="card big"><div class="draw"><span class="tag">drawn showcase · config-editor · hover</span><div class="code"><b>services:</b><br> jellyfin:<br> image: <u>lscr.io/linuxserver/jellyfin</u><br> 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="txt"><div class="meta">02 · Own · personal project</div><h3>Config</h3><p>A repository to store, sync and manage docker-compose based deployment on servers.</p><div class="chips"><span class="chip">ansible</span><span class="chip">configuration management</span></div><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="card mid"><div class="shot" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="txt"><div class="meta">03 · School</div><h3>Bachelor Report</h3><p>Reputation systems in peer-to-peer archival.</p><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
|
||
<article class="card mid"><div class="shot" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="txt"><div class="meta">04 · School</div><h3>Student Dashboard</h3><p>A concept dashboard, built upon conducted user studies.</p><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
|
||
<article class="card mid"><div class="draw"><span class="tag">drawn showcase · rowing-stroke · hover</span><svg width="86%" height="110" 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="txt"><div class="meta">05 · 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="card big" style="grid-column:span 12;display:grid;grid-template-columns:1fr 1fr"><div class="shot" style="background-image:url(/files/vr-classroom.jpg);height:auto;min-height:180px;border-bottom:0;border-right:1px solid var(--line)"></div><div class="txt"><div class="meta">06 · School</div><h3>VR-Classroom</h3><p>A prototype website where you can register yourself, and then create + sign up for classes.</p><div class="chips"><span class="chip">javascript</span><span class="chip">node.js</span></div><div class="ft"><span class="open">Read the full story →</span><span class="mk"><i></i>by hand</span></div></div></article>
|
||
<div class="mini sm"><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="mini sm"><div class="th" style="background-image:url(/files/budget.jpg)"></div><div><h4>Monthly Expenses</h4><div class="meta">Own · javascript</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini sm"><div class="th" style="background-image:url(/files/lol-winrate-discord-bot.jpg)"></div><div><h4>LoL Winrate Bot</h4><div class="meta">Own · node.js</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini sm"><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="mini sm"><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="mini sm"><div class="th" style="background-image:url(/files/tribute-to-bourlaug.jpg)"></div><div><h4>Tribute to Borlaugh</h4><div class="meta">Own · html, css</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini sm"><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>
|
||
|
||
<div class="sh"><h2>Record</h2><span class="n">competitions and learning</span></div>
|
||
<div class="rec">
|
||
<div class="box"><h3>Competitions & recognition</h3>
|
||
<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">top 12%</div>
|
||
<div class="y">2019</div><div>AUHackathon</div><div class="res win">winner · best AUHack</div>
|
||
<div class="y">—</div><div>First Lego League <span class="meta">· four years</span></div><div class="res win">won round 1, twice</div>
|
||
</div>
|
||
</div>
|
||
<div class="box"><h3>Keeping up · 24 courses and labs since Feb 2025</h3>
|
||
<div class="cl">
|
||
<div>Serverless on AWS</div><div class="c">8 · 3 labs</div>
|
||
<div>Ansible & configuration</div><div class="c">5 · 3 labs</div>
|
||
<div>RAG & LLM systems</div><div class="c">5 · 1 lab</div>
|
||
<div>Security <span class="meta">· JWT, ISO 27001, honeypots</span></div><div class="c">3 · 1 lab</div>
|
||
<div>Linux admin, Grafana, WordPress</div><div class="c">3</div>
|
||
</div>
|
||
<a class="more" href="#lp">All courses, searchable →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= B ================= -->
|
||
<div class="opt-head"><span class="L">B</span><div><h1>Picked six, then a tight grid</h1><p>The six get an even 3×2 grid of real cards. Everything else becomes a dense four-across grid of small cards, the same size as today's list rows but tiled. Accomplishments join the "CV in ten seconds" strip. Learning gets its own card next to Writing.</p></div></div>
|
||
<div class="note">The calmest option and closest to today's structure. Accomplishments read as CV facts, which suits four entries. The learning card shows the latest few courses, so it looks alive as you keep going.</div>
|
||
|
||
<div class="cvs">
|
||
<div><h3>LATEST WRITING</h3><div style="font-size:14px">A synthetic work post <span class="meta">03/14</span></div></div>
|
||
<div><h3>CV IN TEN SECONDS</h3>
|
||
<div class="kv"><span class="k">now</span><span>IT-medarbejder, IT Research Tech, Aarhus University (2025–now)</span>
|
||
<span class="k">degree</span><span>Bachelor in Computer Science</span>
|
||
<span class="k">won</span><span><span class="acc">AUHackathon 2019</span>, best AUHack · First Lego League, round 1 twice</span>
|
||
<span class="k">placed</span><span>Google Hash Code 2021, top 12% · DDC 2024, regional</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sh"><h2>Picked</h2><span class="n">6 projects</span><span class="r">hover the drawings</span></div>
|
||
<div class="gB">
|
||
<article class="card"><div class="shot" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="txt"><div class="meta">Own</div><h3>Event Tracker for Gacha Games</h3><p>Which live service game events to prioritize.</p><div class="ft"><span class="open">Read more →</span><span class="mk ai"><i></i>made with AI</span></div></div></article>
|
||
<article class="card"><div class="draw"><span class="tag">config-editor · hover</span><div class="code"><b>services:</b><br> jellyfin: <u>✓</u><br><b>hosts:</b> [ lucwin-01, lucwin-02 ]<br><b>sync:</b> <u>✓ up to date</u></div></div><div class="txt"><div class="meta">Own</div><h3>Config</h3><p>Store, sync and manage docker-compose deployments.</p><div class="ft"><span class="open">Read more →</span><span class="mk ai"><i></i>made with AI</span></div></div></article>
|
||
<article class="card"><div class="shot" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="txt"><div class="meta">School</div><h3>Bachelor Report</h3><p>Reputation systems in peer-to-peer archival.</p><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
|
||
<article class="card"><div class="shot" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="txt"><div class="meta">School</div><h3>Student Dashboard</h3><p>A concept dashboard built on user studies.</p><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
|
||
<article class="card"><div class="draw"><span class="tag">rowing-stroke · hover</span><svg width="86%" 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="txt"><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="card"><div class="shot" style="background-image:url(/files/vr-classroom.jpg)"></div><div class="txt"><div class="meta">School</div><h3>VR-Classroom</h3><p>Register, then create and sign up for classes.</p><div class="ft"><span class="open">Read more →</span><span class="mk"><i></i>by hand</span></div></div></article>
|
||
</div>
|
||
<div class="sh" style="margin-top:28px"><h2 style="font-size:17px">Everything else</h2><span class="n">7</span><span class="r">All · Own · School · search</span></div>
|
||
<div class="gBs">
|
||
<div class="mini"><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="mini"><div class="th" style="background-image:url(/files/budget.jpg)"></div><div><h4>Monthly Expenses</h4><div class="meta">Own · javascript</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini"><div class="th" style="background-image:url(/files/lol-winrate-discord-bot.jpg)"></div><div><h4>LoL Winrate Bot</h4><div class="meta">Own · node.js</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini"><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="mini"><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="mini"><div class="th" style="background-image:url(/files/tribute-to-bourlaug.jpg)"></div><div><h4>Tribute to Borlaugh</h4><div class="meta">Own · html, css</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini"><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>
|
||
|
||
<div class="lower">
|
||
<div class="box"><h3>Writing</h3><div style="font-size:14px;color:var(--mute)">(unchanged)</div></div>
|
||
<div class="box"><h3>Learning · 24 since Feb 2025</h3>
|
||
<div class="log">
|
||
<div><span class="d">Oct 2025</span><span>Active Defense: Honeypots</span><span class="k">lab</span></div>
|
||
<div><span class="d">Sep 2025</span><span>Grafana Concepts and Basic Configuration</span><span></span></div>
|
||
<div><span class="d">Aug 2025</span><span>Vector Space Models and Embeddings in RAGs</span><span></span></div>
|
||
<div><span class="d">Aug 2025</span><span>Learning the Essentials of CentOS 7 Administration</span><span class="meta">6h 43m</span></div>
|
||
</div>
|
||
<div class="topics"><span class="chip">serverless 8</span><span class="chip">ansible 5</span><span class="chip">rag 5</span><span class="chip">security 3</span><span class="chip">linux 1</span></div>
|
||
<a class="more" href="#lp">All 24, searchable →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= C ================= -->
|
||
<div class="opt-head"><span class="L">C</span><div><h1>One hero, uneven grid</h1><p>An editorial grid that varies on purpose. The top pick is large with its drawing. The other five come in two shapes around it. The seven small projects fill the bottom as compact tiles. Below, a "Track record" section with the four accomplishments side by side and learning shown as topic bars.</p></div></div>
|
||
<div class="note">The most character, and the "varied ways of showing information" principle at work, since the bars are a small graph. Downside: it needs a clear #1, and you'd choose the order of the six (I've put Config first because it has a live drawing).</div>
|
||
|
||
<div class="sh"><h2>Projects</h2><span class="n">13</span><span class="r">All · Own · School · search</span></div>
|
||
<div class="gC">
|
||
<article class="card hero"><div class="draw"><span class="tag">drawn showcase · config-editor · hover</span><div class="code" style="font-size:13px"><b>services:</b><br> jellyfin:<br> image: <u>lscr.io/linuxserver/jellyfin</u><br> volumes: [ /srv/media:/data ]<br> immich:<br> image: <u>ghcr.io/immich-app/server</u><br><b>hosts:</b> [ lucwin-01, lucwin-02 ]<br><b>sync:</b> <u>✓ 2 hosts up to date</u></div></div><div class="txt"><div class="meta">01 · 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="card tall"><div class="shot" style="background-image:url(/files/gacha-event-tracker.jpg)"></div><div class="txt"><h3>Gacha Event Tracker</h3><div class="ft" style="margin-top:6px"><span class="meta">Own</span><span class="mk ai"><i></i>AI</span></div></div></article>
|
||
<article class="card tall"><div class="draw"><span class="tag">rowing-stroke</span><svg width="80%" height="70" 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="txt"><h3>Mixed-Reality Rowing</h3><div class="ft" style="margin-top:6px"><span class="meta">Own</span><span class="mk"><i></i>by hand</span></div></div></article>
|
||
<article class="card wide"><div class="shot" style="background-image:url(/files/bachelor-report.jpg)"></div><div class="txt"><h3>Bachelor Report</h3></div></article>
|
||
<article class="card wide"><div class="shot" style="background-image:url(/files/student-dashboard.jpg)"></div><div class="txt"><h3>Student Dashboard</h3></div></article>
|
||
<article class="card wide"><div class="shot" style="background-image:url(/files/vr-classroom.jpg)"></div><div class="txt"><h3>VR-Classroom</h3></div></article>
|
||
<div class="mini"><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="mini"><div class="th" style="background-image:url(/files/budget.jpg)"></div><div><h4>Monthly Expenses</h4><div class="meta">Own · javascript</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini"><div class="th" style="background-image:url(/files/lol-winrate-discord-bot.jpg)"></div><div><h4>LoL Winrate Bot</h4><div class="meta">Own · node.js</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini"><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="mini"><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="mini"><div class="th" style="background-image:url(/files/tribute-to-bourlaug.jpg)"></div><div><h4>Tribute to Borlaugh</h4><div class="meta">Own · html, css</div></div><span class="mk"><i></i></span></div>
|
||
<div class="mini"><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>
|
||
|
||
<div class="track">
|
||
<div class="lab">Competitions<span>Things I entered, and how it went.</span></div>
|
||
<div class="row"><div class="medals">
|
||
<div class="medal"><div class="y">2019</div><div class="t">AUHackathon</div><div class="r win">winner · best AUHack</div></div>
|
||
<div class="medal"><div class="y">four years</div><div class="t">First Lego League</div><div class="r win">won round 1, twice</div></div>
|
||
<div class="medal"><div class="y">2021</div><div class="t">Google Hash Code</div><div class="r">top 12%</div></div>
|
||
<div class="medal"><div class="y">2024</div><div class="t">De Danske Cybermesterskaber</div><div class="r">regional participant</div></div>
|
||
</div></div>
|
||
<div class="lab">Keeping up<span>24 courses and hands-on labs since February 2025. Course time only, not the digging after.</span></div>
|
||
<div class="row"><div class="bars">
|
||
<span>Ansible</span><div class="bar"><i style="width:100%"></i></div><span class="c">5 · ~10h</span>
|
||
<span>Linux admin</span><div class="bar"><i style="width:67%"></i></div><span class="c">1 · 6.7h</span>
|
||
<span>Security</span><div class="bar"><i style="width:50%"></i></div><span class="c">3 · ~5h</span>
|
||
<span>Serverless on AWS</span><div class="bar"><i style="width:40%"></i></div><span class="c">8 · ~4h</span>
|
||
<span>RAG & LLMs</span><div class="bar"><i style="width:18%"></i></div><span class="c">5 · ~2h</span>
|
||
</div><a class="more" href="#lp">All courses, searchable →</a></div>
|
||
</div>
|
||
|
||
<!-- ================= Learning page (shared) ================= -->
|
||
<div class="opt-head" id="lp"><span class="L" style="background:var(--mute)">+</span><div><h1>/work/learning/: the searchable list (any option)</h1><p>Its own quiet page, linked from whichever section you pick. Search plus topic filter, newest first. It's built from a content file you add a line to after each course.</p></div></div>
|
||
<div class="lp">
|
||
<div class="top"><div class="search">Search course, provider, keyword…</div><div class="seg"><span class="on">All 24</span><span>Serverless</span><span>Ansible</span><span>RAG</span><span>Security</span><span>Linux</span><span>Other</span></div></div>
|
||
<table>
|
||
<tr><th>Completed</th><th>Course</th><th>Topic</th><th>Provider</th><th>Type</th><th>Time</th></tr>
|
||
<tr><td class="m">2025-10-08</td><td>Active Defense: Honeypots</td><td class="m">security</td><td class="m">Pluralsight</td><td class="m">lab</td><td class="m">1h 30m</td></tr>
|
||
<tr><td class="m">2025-09-07</td><td>Grafana Concepts and Basic Configuration</td><td class="m">observability</td><td class="m">Pluralsight</td><td class="m">video</td><td class="m">25m</td></tr>
|
||
<tr><td class="m">2025-08-16</td><td>Security Compliance: ISO 27001</td><td class="m">security</td><td class="m">Pluralsight</td><td class="m">video</td><td class="m">56m</td></tr>
|
||
<tr><td class="m">2025-08-08</td><td>Learning the Essentials of CentOS Enterprise Linux 7 Administration</td><td class="m">linux</td><td class="m">Pluralsight</td><td class="m">video · quiz ✓</td><td class="m">6h 43m</td></tr>
|
||
<tr><td class="m">2025-05-29</td><td>JWT Fundamentals</td><td class="m">security</td><td class="m">Pluralsight</td><td class="m">video</td><td class="m">2h 29m</td></tr>
|
||
<tr><td class="m" colspan="6" style="color:var(--mute)">… 19 more</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="pick">
|
||
<button data-choice="a" onclick="pick(this)">A · one grid, three sizes</button>
|
||
<button data-choice="b" onclick="pick(this)">B · picked six + tight grid</button>
|
||
<button data-choice="c" onclick="pick(this)">C · hero + uneven grid</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});else if(window.toggleSelect)toggleSelect(b);}</script>
|
||
</body>
|
||
</html>
|