commit 0c933c7161596a42a8991e6fc5d52688ee0775c4
parent 9a57ff455503eb7c283622e1f93340f49f21fa62
Author: Willem Van Zwol <willem@vanzwol.com>
Date: Thu, 21 May 2026 21:57:51 -0700
Nav bar pages finished
created project and contact pages.
the project page in particular still needs work.
Diffstat:
6 files changed, 192 insertions(+), 65 deletions(-)
diff --git a/blog.html b/blog.html
@@ -13,9 +13,9 @@
<!-- LEFT -->
<div class="nav-left">
<a href="./index.html">index</a> ~
- <a href="">blog</a> ~
- <a href="">projects</a> ~
- <a href="">contact</a>
+ <a href="./blog.html">blog</a> ~
+ <a href="./projects.html">projects</a> ~
+ <a href="./contact.html">contact</a>
</div>
<!-- CENTER -->
<div class="nav-center">
@@ -53,7 +53,7 @@
<a class="tile" href="./blogs/on_the_blog.html">
<fieldset>
- <span>website • blog • complexity • ux</span>
+ <span>website ~ blog ~ complexity</span>
<h2>On the blog</h2>
<div>2026.05.21</div>
Post about my thoughts on how the blog should work.<br>
diff --git a/blogs/on_the_blog.html b/blogs/on_the_blog.html
@@ -14,8 +14,8 @@
<div class="nav-left">
<a href="../index.html">index</a> ~
<a href="../blog.html">blog</a> ~
- <a href="">projects</a> ~
- <a href="">contact</a>
+ <a href="../projects.html">projects</a> ~
+ <a href="../contact.html">contact</a>
</div>
<!-- CENTER -->
<div class="nav-center">
diff --git a/blogs/website.html b/blogs/website.html
@@ -14,8 +14,8 @@
<div class="nav-left">
<a href="../index.html">index</a> ~
<a href="../blog.html">blog</a> ~
- <a href="">projects</a> ~
- <a href="">contact</a>
+ <a href="../projects.html">projects</a> ~
+ <a href="../contact.html">contact</a>
</div>
<!-- CENTER -->
<div class="nav-center">
diff --git a/contact.html b/contact.html
@@ -0,0 +1,105 @@
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Portfolio</title>
+ <link rel="icon" type="image/x-icon" href="./favicon.ico">
+ <link rel="stylesheet" type="text/css" href="./styles.css">
+ <script src="script.js"></script>
+</head>
+<body>
+ <nav>
+ <!-- LEFT -->
+ <div class="nav-left">
+ <a href="./index.html">index</a> ~
+ <a href="./blog.html">blog</a> ~
+ <a href="./projects.html">projects</a> ~
+ <a href="./contact.html">contact</a>
+ </div>
+ <!-- CENTER -->
+ <div class="nav-center">
+ </div>
+ <!-- RIGHT -->
+ <div class="nav-right">
+ <a href="./git/website/log.html" title="Self hosted repo of this website">
+ <!-- giticon -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
+ style="width: 0.85em;position: relative;top: 0.06em;fill:var(--text)">
+ <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>
+ </a>
+ <input type="checkbox" id="theme-toggle" class="toggle">
+ <label for="theme-toggle" class="btn"
+ title="Light/Dark mode (JS required)">
+ <!-- sun -->
+ <svg class="sun" viewBox="0 0 24 24" fill=none stroke=currentColor
+ stroke-linecap=round stroke-width="1.8"><circle cx=12 cy=12 r=4.4 />
+ <path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10l2 2M5
+ 19l2-2m10-10l2-2"/></svg>
+ <!-- moon -->
+ <svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 0 1 9
+ 3c0-.3 0-.7.1-1A10 10 0 1 0 23 12.4c-.3 0-.7.1-1 .1z"/></svg>
+ </label>
+ </div>
+ </nav>
+<h1>Contact</h1>
+
+<p>
+ Best way to reach me is email.<br><br>
+ <table>
+ <tr>
+ <td>Email</td>
+ <td>
+ <a href="mailto:willem@vanzwol.com?subject=Your%20hired!&body=Imma%20hire%20you"
+ style="font-family: liberation mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;">
+ willem@vanzwol.com
+ </a>
+ </td>
+ <td>
+ <button onclick="navigator.clipboard.writeText('willem@vanzwol.com')">
+ Copy
+ </button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>Phone</td>
+ <td>
+ <a href="tel:+14252297800"
+ style="font-family: liberation mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;">
+ +1 (425) 229-7800
+ </a>
+ </td>
+ <td>
+ <button onclick="navigator.clipboard.writeText('+14252297800')">
+ Copy
+ </button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>GitHub</td>
+ <td>
+ <a href="https://github.com/WillemDoesIt"
+ style="font-family: liberation mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;">
+ @WillemDoesIt
+ </a>
+ </td>
+ <td>
+ <button onclick="navigator.clipboard.writeText('@WillemDoesIt')">
+ Copy
+ </button>
+ </td>
+ </tr>
+ </table>
+
+</p>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -14,8 +14,8 @@
<div class="nav-left">
<a href="./index.html">index</a> ~
<a href="./blog.html">blog</a> ~
- <a href="">projects</a> ~
- <a href="">contact</a>
+ <a href="./projects.html">projects</a> ~
+ <a href="./contact.html">contact</a>
</div>
<!-- CENTER -->
<div class="nav-center">
@@ -57,7 +57,11 @@
<a href="https://go.dev/" title="Official go-lang website">Go</a>.
</h3>
<p>
- I am a pragmatist, focused on protocol design, cryptography, reproducible
+ I am currently working out of Spokane Washington.<br>
+ I am a pragmatist, obsessed with getting things done, and done well.<br>
+ Also you should totally hire me.<br><br>
+
+ I am focused on protocol design, cryptography, reproducible
infrastructure, and library-first architecture.
<br><br>
Here is my stack and what I am proficient in:
@@ -127,59 +131,5 @@
<div class="callout important">
This is important.
</div>
-
- <fieldset>
- <legend>Form</legend>
- <form>
- <fieldset>
- <legend>Tags</legend>
-
- <input type="checkbox" id="nix">
- <label for="nix">Nix</label>
-
- <input type="checkbox" id="web">
- <label for="web">Web</label>
-
- <input type="checkbox" id="linux">
- <label for="linux">Linux</label>
- </fieldset>
-
- <fieldset>
- <legend>Sort</legend>
-
- <input type="radio" id="newest" name="sort" checked>
- <label for="newest">Newest</label>
-
- <input type="radio" id="oldest" name="sort">
- <label for="oldest">Oldest</label>
- </fieldset>
-
- <button type="reset">
- Reset
- </button>
- <button type="submit">
- Submit
- </button>
- </form>
- </fieldset>
-
- <h1>Projects</h1>
- <p>
- This will contain a
- <abbr title="perhaps tiles, with titles, descriptions, and tags">
- list</abbr>
- of projects I have worked on. <br><br>
-
- For now, simply visit
- <a href="https://github.com/WillemDoesIt">my github</a>.
- Currently as refrenced before, I have a
- <a href="">Self hosted stagit repo</a> specifically a repo for <em>this</em>
- website,
- but I do hope to get all my pojects to have self hosted repos,
- and some nice navigable way to see it all.<br><br>
-
- You can also see in the nav bar,
- I plan to create this as a seperate page for this.
- </p>
</body>
</html>
diff --git a/projects.html b/projects.html
@@ -0,0 +1,72 @@
+<!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="icon" type="image/x-icon" href="./favicon.ico">
+ <link rel="stylesheet" type="text/css" href="./styles.css">
+ <script src="script.js"></script>
+</head>
+<body>
+ <nav>
+ <!-- LEFT -->
+ <div class="nav-left">
+ <a href="./index.html">index</a> ~
+ <a href="./blog.html">blog</a> ~
+ <a href="./projects.html">projects</a> ~
+ <a href="./contact.html">contact</a>
+ </div>
+ <!-- CENTER -->
+ <div class="nav-center">
+ </div>
+ <!-- RIGHT -->
+ <div class="nav-right">
+ <a href="./git/website/log.html" title="Self hosted repo of this website">
+ <!-- giticon -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
+ style="width: 0.85em;position: relative;top: 0.06em;fill:var(--text)">
+ <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>
+ </a>
+ <input type="checkbox" id="theme-toggle" class="toggle">
+ <label for="theme-toggle" class="btn"
+ title="Light/Dark mode (JS required)">
+ <!-- sun -->
+ <svg class="sun" viewBox="0 0 24 24" fill=none stroke=currentColor
+ stroke-linecap=round stroke-width="1.8"><circle cx=12 cy=12 r=4.4 />
+ <path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10l2 2M5
+ 19l2-2m10-10l2-2"/></svg>
+ <!-- moon -->
+ <svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 0 1 9
+ 3c0-.3 0-.7.1-1A10 10 0 1 0 23 12.4c-.3 0-.7.1-1 .1z"/></svg>
+ </label>
+ </div>
+ </nav>
+
+ <h1>Projects</h1>
+ <p>
+ This will contain a
+ <abbr title="perhaps tiles, with titles, descriptions, and tags">
+ list</abbr>
+ of projects I have worked on. <br><br>
+
+ For now, simply visit
+ <a href="https://github.com/WillemDoesIt">my github</a>.
+ Currently as refrenced before, I have a
+ <a href="./git/website/log.html">Self hosted stagit repo</a> specifically a repo for <em>this</em>
+ website,
+ but I do hope to get all my pojects to have self hosted repos,
+ and some nice navigable way to see it all.<br><br>
+
+ You can also see in the nav bar,
+ I plan to create this as a seperate page for this.
+ </p>
+</body>
+</html>
