commit 498c1ec5477a5b860c15f38496ff75d69c2892ee
Author: Willem Van Zwol <willem@vanzwol.com>
Date: Sun, 10 May 2026 15:11:30 -0700
init
Diffstat:
5 files changed, 369 insertions(+), 0 deletions(-)
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,15 @@
+My professional site: serves as a resume, portfolio, blog and whatever else I decide.
+Copyright (C) 2026 Willem Van Zwol
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
diff --git a/icons/external-link.svg b/icons/external-link.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+ <path d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16zM2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/>
+</svg>
diff --git a/icons/git.svg b/icons/git.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path d="M15,5.6,10.4,1A3.4,3.4,0,0,0,5.78.86L7.66,2.74a1.25,1.25,0,0,1,1.67,1.2V4a1.23,1.23,0,0,1-.08.38l2.45,2.4a1.17,1.17,0,0,1,.37-.08A1.3,1.3,0,1,1,10.77,8h0a1.17,1.17,0,0,1,.08-.37L8.6,5.38v5.23a1.28,1.28,0,0,1,.73,1.15,1.3,1.3,0,0,1-2.6,0,1.27,1.27,0,0,1,.67-1.11V5.07A1.27,1.27,0,0,1,6.73,4a1.17,1.17,0,0,1,.08-.37l-1.9-1.9L1,5.6a3.38,3.38,0,0,0,0,4.79H1L5.6,15a3.38,3.38,0,0,0,4.79,0h0L15,10.4a3.38,3.38,0,0,0,0-4.79Z"/>
+</svg>
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Portfolio</title>
+ <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+ <nav>
+ <!-- LEFT HAND SIDE -->
+ <a href="./index.html">index</a> ~
+ <a href="">blog</a> ~
+ <a href="">git</a> ~
+ <a href="">contact</a>
+
+ <!-- RIGHT HAND SIDE -->
+ <a href=""><img src="./icons/git.svg" alt="git" style="width: 1em" /></a>
+ <input type="checkbox" id="theme-toggle" class="toggle">
+ <label for="theme-toggle" class="btn">
+ <!-- sun -->
+ <svg class="sun" viewBox="0 0 24 24">
+ <path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-16h1v3h-1zm0 17h1v3h-1zM4.22 5.64l.71-.71 2.12 2.12-.7.7zm12.73 12.73.7-.7 2.12 2.12-.7.7zM2 11h3v1H2zm17 0h3v1h-3zM4.22 18.36l2.12-2.12.7.7-2.11 2.12zm12.73-12.73 2.12-2.12.7.7-2.11 2.12z"/>
+ </svg>
+ <!-- moon -->
+ <svg class="moon" viewBox="0 0 24 24">
+ <path d="M21 12.79A9 9 0 0 1 11.21 3c0-.34.02-.67.05-1A10 10 0 1 0 22 12c-.33.05-.66.07-1 .07z"/>
+ </svg>
+ </label>
+ </nav>
+
+ <h1>Hello, I am Willem :3</h1>
+ <h3>I build local-first distributed systems in <a href="https://rust-lang.org/">Rust</a> and <a href="https://go.dev/">Go</a>.</h3>
+ <p>
+ I am a pragmatist, focused on protocol design, cryptography, reproducible infrastructure, and library-first architecture.
+ <br><br>
+ Here is my stack and what I am proficient in:
+ <table>
+ <tr> <td>Frontend</td>
+ <td>HTML/CSS/JS</td> </tr>
+
+ <tr> <td>Backend</td>
+ <td>Rust, Golang, C/C++ Python, Java</td> </tr>
+
+ <tr> <td>Data management</td>
+ <td>PostgreSQL, SQLite, Redis, CSV, JSON</td> </tr>
+
+ <tr> <td>Misc</td>
+ <td>NixOS (Linux), Git, Bash, Neovim (DapUI)</td> </tr>
+ </table>
+ </p>
+ <h1>About this site</h1>
+ <p>
+ This webpage for now serves nothing more than the purpose of a template.
+ I may use a proper <abbr title="Static Site generator">SSG</abbr> like
+ <a href="https://www.getzola.org/">Zola</a>.
+
+ That said, I did have a lot of fun just setting this up. Doesn't seem too hard -- I may just commit fully to raw <code>html/css</code>.
+ </p>
+ <hr>
+ <p>
+ I like having this style emulate markdown, so I mma just use this paragraph to demonstrate other rich text displayed nicely with my <code>css</code>. <em>italics</em>, <b>bold</b>, <del>strickthrough</del>
+ <blockquote cite="https://example.com">
+ Hello world
+ <ul>
+ <li>item</li>
+ <li>item</li>
+ </ul>
+ <a class="quote-source"
+ href="https://example.com"
+ aria-label="Source"
+ ></a>
+ </blockquote>
+
+ <div class="callout note">
+ This is a note.
+ </div>
+
+ <div class="callout important">
+ This is important.
+ </div>
+
+ </p>
+ <h1>Projects</h1>
+ <p>
+ This will contain a <abbr title="perhaps tiles, with titles, descriptions, and tags much like an interface to a blog">list</abbr> of projects I have worked on. <br><br>
+
+ For now, simply visit <a href="https://github.com/WillemDoesIt">my github</a>. Which I do hope to distance myself from, I prefer decentrlized--self hosting of repositories. I may use something like or <a href="https://git.zx2c4.com/cgit/about/">cgit</a>, specifically that may be nice because it is static, however that means no cloning.
+ </p>
+
+</body>
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,255 @@
+:root {
+ --bg: #fff;
+ --text: #000;
+ --border: #d0d0d0;
+ --link: #0645ad;
+
+ --transition-fast: 120ms;
+}
+
+/* system default already applies via :root */
+
+/* manual override */
+body:has(#theme-toggle:checked) {
+ --bg: #090909;
+ --text: #eaeaea;
+ --border: #262626;
+ --link: #6aa7ff;
+
+ a[href^="http://"]::after,
+ a[href^="https://"]::after {
+ filter: invert(1);
+ }
+}
+
+a[href^="http"]::after {
+ content: "";
+ display: inline-block;
+
+ width: 0.85em;
+ height: 0.85em;
+ margin-left: 0.15em;
+
+ background: url("./icons/external-link.svg") no-repeat center / contain;
+
+ vertical-align: text-top;
+}
+
+/* Markdown symbols */
+h1::before { content: "# "; }
+h2::before { content: "## "; }
+h3::before { content: "### "; }
+
+h1::before, h2::before, h3::before {
+ color: color-mix(in srgb, currentColor 25%, transparent);
+}
+
+em::before { content: "_"; }
+em::after { content: "_"; }
+b::before { content: "**"; }
+b::after { content: "**"; }
+del::before { content: "~~"; }
+del::after { content: "~~"; }
+
+em::before, em::after,
+b::before, b::after,
+del::before, del::after {
+ color: color-mix(in srgb, currentColor 40%, transparent);
+}
+
+hr {
+ border: none;
+ border-top: 1px solid var(--border);
+}
+
+a {
+ color: var(--link);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+
+abbr[title] {
+ text-decoration: underline dotted;
+ text-decoration-thickness: 2px;
+ text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+ cursor: help;
+}
+
+code {
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ background: var(--bg-secondary);
+ padding: 0.2em;
+ border: 1px solid var(--border);
+ font-size: 0.9em;
+}
+
+table {
+ width: fit;
+ border-collapse: collapse;
+}
+
+th,
+td {
+ padding: 0.3em 0.8em;
+ border: 1px solid var(--border);
+ text-align: left;
+}
+
+th {
+ background: var(--bg-secondary);
+}
+
+blockquote {
+ position: relative;
+
+ margin: 1em 0.4em;
+ padding: 0.15em 0.8em;
+
+ border-left: 0.3em solid var(--border);
+}
+
+.quote-source {
+ position: absolute;
+ top: 0.4rem;
+ right: 0.5rem;
+
+ opacity: 0.45;
+ text-decoration: none;
+
+ transition: opacity var(--transition-fast);
+}
+
+.quote-source:hover {
+ opacity: 1;
+}
+
+ul,
+ol {
+ padding-left: 1.5em;
+ margin: 0;
+}
+
+li::marker {
+ color: color-mix(in srgb, var(--text) 50%, transparent);
+}
+
+.callout {
+ position: relative;
+
+ margin: 1em 0.4em;
+ padding: 1em 0.8em;
+
+ background: var(--callout-bg);
+ border: 1px solid var(--callout-accent);
+}
+
+.callout::before {
+ content: var(--callout-label);
+ position: absolute;
+ top: -0.6em;
+ left: 0.6em;
+
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.75em;
+
+ padding: 0 0.4em;
+
+ background: var(--bg);
+ color: var(--callout-accent);
+ border: 1px solid var(--callout-accent);
+}
+
+.callout.note {
+ --callout-label: "![NOTE]";
+ --callout-accent: #3b82f6;
+ --callout-bg: color-mix(in srgb, var(--callout-accent) 10%, transparent);
+}
+
+.callout.important {
+ --callout-label: "![IMPORTANT]";
+ --callout-accent: #facc15;
+ --callout-bg: color-mix(in srgb, var(--callout-accent) 10%, transparent);
+}
+
+body {
+ background: var(--bg);
+ color: var(--text);
+ font-family: "FreeSans", "Liberation Sans", Arial, sans-serif;
+ font-size: 12pt;
+ line-height: 1.5;
+ margin: 1rem auto 0;
+ width: clamp(30rem, 50%, 50rem);
+ padding: 2.5rem;
+ border: 1px solid var(--border);
+
+ transition:
+ background var(--transition-fast),
+ color var(--transition-fast),
+ border-color var(--transition-fast);
+}
+
+a {
+ color: var(--link);
+ text-decoration: none;
+}
+
+nav {
+ font-family: "Nimbus Mono L", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ margin: 0;
+
+ display: flex;
+ align-items: center;
+ gap: 1ch;
+ flex-wrap: wrap;
+}
+
+/* toggle */
+.toggle {
+ display: none;
+}
+
+.btn {
+ width: 1em;
+ height: 1em;
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ vertical-align: -0.15em;
+
+ margin-left: auto;
+}
+
+.btn svg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
+}
+
+/* default = system light assumed */
+.sun {
+ fill: currentColor;
+ opacity: 1;
+}
+
+.moon {
+ fill: currentColor;
+ opacity: 0;
+ transform: rotate(90deg) scale(0.75);
+}
+
+/* toggle flips theme */
+body:has(#theme-toggle:checked) .sun {
+ opacity: 0;
+ transform: rotate(-90deg) scale(0.75);
+}
+
+body:has(#theme-toggle:checked) .moon {
+ opacity: 1;
+ transform: rotate(0deg) scale(1);
+}
