up until what i know

2026-03-13 15:01:15 +00:00
parent 0d7904a8de
commit 08bbe09fb7
2 changed files with 488 additions and 691 deletions
--- a/index.html
+++ b/index.html
@@ -1,17 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Havox — John Gatward</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link
        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&display=swap"
-      rel="stylesheet"
-    />
+        rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
 </head>
+
 <body>
+
    <!-- ─── Nav ─────────────────────────────────────────────────── -->
    <nav>
        <a href="#hero" class="nav-logo">havox</a>
@@ -26,52 +28,31 @@

    <!-- ─── Hero ─────────────────────────────────────────────────── -->
    <section id="hero">
-      <p class="hero-eyebrow">// havox — v4</p>
+        <p class="hero-eyebrow">// havox.org — v4</p>
        <h1 class="hero-name">John <em>Gatward</em></h1>
-      <p class="hero-subtitle">Software Engineer</p>
+        <p class="hero-subtitle">Software Developer</p>
        <p class="hero-desc">
-        <span class="hero-by-line">
-          <span class="hero-by">Backend engineer</span>
-          <span class="hero-by-role">by trade</span>
-        </span>
-
-        <span class="hero-by-line">
-          <span class="hero-by">Full-stack developer</span>
-          <span class="hero-by-role">by curiosity</span>
-        </span>
-        <span class="hero-by-line">
-          <span class="hero-by">Unofficial family cloud engineer</span>
-          <span class="hero-by-role">by necessity</span>
-        </span>
-        <span class="hero-by-footer">
-          I like building useful things and figuring how they work.
-        </span>
+            <span class="hero-by-line"><span class="hero-by">Backend engineer</span><span class="hero-by-role">by
+                    trade</span></span>
+            <span class="hero-by-line"><span class="hero-by">Full-stack developer</span><span class="hero-by-role">by
+                    curiosity</span></span>
+            <span class="hero-by-line"><span class="hero-by">Unofficial family cloud engineer</span><span
+                    class="hero-by-role">by necessity</span></span>
+            <span class="hero-by-footer">I like building useful things and understanding how they work.</span>
        </p>
        <div class="hero-links">
            <a href="#projects" class="btn btn-primary">see my work</a>
-        <a
-          href="https://github.com/jayo60013"
-          class="btn btn-ghost"
-          target="_blank"
-          rel="noopener"
-        >
+            <a href="https://github.com/jayo60013" class="btn btn-ghost" target="_blank" rel="noopener">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                    <path
-              d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
-            />
+                        d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
                </svg>
                GitHub
            </a>
-        <a
-          href="https://www.linkedin.com/in/jaygatward"
-          class="btn btn-ghost"
-          target="_blank"
-          rel="noopener"
-        >
+            <a href="https://www.linkedin.com/in/jaygatward" class="btn btn-ghost" target="_blank" rel="noopener">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                    <path
-              d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
-            />
+                        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                </svg>
                LinkedIn
            </a>
@@ -87,113 +68,84 @@
            <h2 class="section-heading">Havox & <em>me</em></h2>
        </div>

+        <div class="about-columns">
+
            <!-- Bio blocks -->
-      <div class="about-grid">
-        <div class="about-block reveal" style="transition-delay: 0.05s">
+            <div class="about-grid reveal" style="transition-delay:0.05s">
+
+                <div class="about-block">
                    <span class="about-block-tag tag tag-blue">day job</span>
-          <p>
-            CS graduate from the University of Nottingham (2022), now working as
-            a backend engineer at <strong>Sainsbury's</strong> Supply Chain
-            &amp; Logistics — building microservices with Spring Boot on AWS,
-            designing REST APIs, connecting services with Kafka, and storing
-            data in MongoDB.
-          </p>
+                    <p>Backend engineer at <strong>Sainsbury's</strong> Supply Chain &amp; Logistics. Microservices,
+                        Spring Boot, Kafka, MongoDB, AWS. It's good fun.</p>
                </div>

-        <div class="about-block reveal" style="transition-delay: 0.1s">
-          <span class="about-block-tag tag tag-green">home infra</span>
-          <p>
-            I run a home server that hosts media and projects for friends and
-            family. I enjoy building things that feel solid and useful — from
-            small games like
-            <em>Crack the Quote</em> to websites and services running on my own
-            hardware.
-          </p>
-        </div>
-
-        <div class="about-block reveal" style="transition-delay: 0.15s">
+                <div class="about-block">
                    <span class="about-block-tag tag tag-teal">linux</span>
-          <p>
-            Long-time Linux user. Used to distro-hop obsessively and be deep in
-            the ricing community — these days it's Hyprland on Void Linux and a
-            growing collection of scripts that make the day job easier.
-          </p>
+                    <p>Long-time Linux user and recovering distro-hopper. Currently: Hyprland on Void. Home server
+                        running 24/7 for friends and family who didn't ask for it but appreciate it.</p>
                </div>

-        <div class="about-block reveal" style="transition-delay: 0.2s">
+                <div class="about-block">
                    <span class="about-block-tag tag tag-yellow">teaching</span>
-          <p>
-            I tutored during school and university — CS, maths, English.
-            Teaching stuck with me. Explaining things clearly is a skill, and
-            it's why I also write tutorials here.
-          </p>
+                    <p>Tutored CS, maths and English through school and uni. Still think the best way to understand
+                        something is to explain it — which is why this site has tutorials.</p>
                </div>

-        <div
-          class="about-block about-block--wide reveal"
-          style="transition-delay: 0.25s"
-        >
+                <div class="about-block">
                    <span class="about-block-tag tag tag-mauve">havox</span>
-          <p>
-            Havox started as a place to document whatever I found cool —
-            tutorials, visualisations, experiments. It's been running in some
-            form since 2017, gone through four major redesigns, and outlasted
-            several domains. It represents my entire journey through technology,
-            and it's still going.
-          </p>
+                    <p>Started in 2017 as a place to dump whatever I found interesting. Four redesigns and several dead
+                        domains later, it's still going. Less a portfolio, more a paper trail.</p>
                </div>
+
            </div>

            <!-- Version timeline -->
-      <div class="reveal" style="transition-delay: 0.3s">
-        <p class="section-label" style="margin-top: 3.5rem">version history</p>
+            <div class="reveal" style="transition-delay:0.15s">
+                <p class="section-label">version history</p>
                <div class="version-timeline">
+
                    <div class="version-item">
-            <div class="v-dot"></div>
+                        <div class="v-dot v-dot--current"></div>
                        <div class="v-content">
-              <div class="v-title">Havox V4 — this one</div>
+                            <div class="v-title">Havox V4 <span class="v-current-badge">current</span></div>
                            <div class="v-year">2025 → present</div>
-              <div class="v-desc">
-                Catppuccin Mocha. Single page. Trying to get a new job this
-                time.
+                            <div class="v-desc">Catppuccin Mocha. Single page. Trying to get a new job this time.</div>
                        </div>
                    </div>
-          </div>
-          <div class="version-item">
+
+                    <a class="version-item version-item--link" href="archive/v3/index.html">
                        <div class="v-dot"></div>
                        <div class="v-content">
-              <div class="v-title">Havox V3</div>
+                            <div class="v-title">Havox V3 <span class="v-link-arrow">↗</span></div>
                            <div class="v-year">2023 → 2025</div>
-              <div class="v-desc">
-                Borrowed a template. Nord theme. Took SCSS seriously. Considered
-                mobile widths.
+                            <div class="v-desc">Borrowed a template. Wasn't very 'me'.</div>
                        </div>
-            </div>
-          </div>
-          <div class="version-item">
+                    </a>
+
+                    <a class="version-item version-item--link" href="archive/v2/index.html">
                        <div class="v-dot"></div>
                        <div class="v-content">
-              <div class="v-title">Havox V2</div>
+                            <div class="v-title">Havox V2 <span class="v-link-arrow">↗</span></div>
                            <div class="v-year">2019 → 2022</div>
-              <div class="v-desc">
-                First SCSS project. First site on own hardware — a Debian box
-                running nginx. Nord theme.
+                            <div class="v-desc">Complete redesign using SCSS & Nord theme.</div>
                        </div>
-            </div>
-          </div>
-          <div class="version-item">
+                    </a>
+
+                    <a class="version-item version-item--link" href="archive/v1/index.php">
                        <div class="v-dot"></div>
                        <div class="v-content">
-              <div class="v-title">Havox.org</div>
+                            <div class="v-title">Havox.org <span class="v-link-arrow">↗</span></div>
                            <div class="v-year">2017 → 2019</div>
-              <div class="v-desc">
-                Entire site in one PHP file 🤣. Had a Python quote-of-the-day
-                via cronjob though. <s>Counts.</s>
-              </div>
-            </div>
+                            <div class="v-desc">Entire site in one PHP file 🤣. Had a daily <s>trump</s>
+                                quote-of-the-day achieved via webscraping a site daily.</div>
+                        </div>
+                    </a>
+
                </div>
            </div>
+
        </div>
+
    </section>

    <div class="divider"></div>
@@ -201,66 +153,58 @@
    <!-- ─── Skills ─────────────────────────────────────────────────── -->
    <section id="skills">
        <p class="section-label reveal">skills</p>
-      <h2 class="section-heading reveal" style="transition-delay: 0.05s">
-        What I <em>know</em>
-      </h2>
+        <h2 class="section-heading reveal" style="transition-delay:0.05s">What I <em>know</em></h2>

        <div class="skills-grid">
            <div class="skill-card reveal">
                <span class="skill-card-icon">☕</span>
                <h3>Backend</h3>
-          <p>
-            Professional Java experience building RESTful APIs with Spring Boot.
-            Testing with JUnit & Mockito. Data persistence with MySQL, H2, JDBC.
-          </p>
+                <p>Professional Java experience building microservices &amp; RESTful APIs with Spring Boot. TDD with
+                    JUnit & Mockito.</p>
                <div class="tag-row">
                    <span class="tag tag-blue">Java</span>
                    <span class="tag tag-green">Spring Boot</span>
-            <span class="tag tag-peach">REST</span>
-            <span class="tag tag-teal">JUnit</span>
-            <span class="tag tag-sky">MySQL</span>
+                    <span class="tag tag-teal">AWS</span>
+                    <span class="tag tag-peach">Kafka</span>
+                    <span class="tag tag-sky">MongoDB</span>
                </div>
            </div>
            <div class="skill-card reveal" style="transition-delay:0.08s">
                <span class="skill-card-icon">🌐</span>
                <h3>Frontend & Creative</h3>
-          <p>
-            JavaScript, p5.js, HTML/CSS/Scss. I enjoy visualising algorithms
-            interactively — it's more fun than a console output.
-          </p>
+                <p>Comfortable with react and CSS. I enjoy visualising algorithms interactively — it's more fun than
+                    a
+                    console output.</p>
                <div class="tag-row">
-            <span class="tag tag-yellow">JavaScript</span>
-            <span class="tag tag-peach">p5.js</span>
-            <span class="tag tag-mauve">Scss</span>
+                    <span class="tag tag-yellow">React.js</span>
+                    <span class="tag tag-peach">TypeScript</span>
                    <span class="tag tag-blue">HTML/CSS</span>
                </div>
            </div>
            <div class="skill-card reveal" style="transition-delay:0.16s">
                <span class="skill-card-icon">🖥</span>
                <h3>Systems & Infra</h3>
-          <p>
-            Long-term Linux user. Self-hosted web & media servers. Comfortable
-            with networking, security practices, and the command line.
-          </p>
+                <p>Long-term Linux user. Self-hosted web & media servers. Comfortable with networking, security
+                    practices, and the command line.</p>
                <div class="tag-row">
                    <span class="tag tag-green">Linux</span>
-            <span class="tag tag-teal">nginx</span>
-            <span class="tag tag-sky">Networking</span>
-            <span class="tag tag-peach">Self-hosting</span>
+                    <span class="tag tag-teal">Docker</span>
+                    <span class="tag tag-blue">Self-Hosting</span>
+                    <span class="tag tag-peach">Wireguard</span>
                </div>
            </div>
-        <div class="skill-card reveal" style="transition-delay: 0.24s">
+            <div class="skill-card skill-card--wide reveal" style="transition-delay:0.24s">
                <span class="skill-card-icon">🎓</span>
                <h3>Academic Breadth</h3>
-          <p>
-            C, C++, Haskell from uni. Coursework across Android dev, distributed
-            systems, graphics, cryptography, malware analysis.
-          </p>
+                <p>C, C++, x86_64 assembly, Haskell, R &amp; MatLab from uni. Modules in Advanced networking,
+                    algorithms, compilers,
+                    graphics, cryptography, malware analysis & many more.</p>
                <div class="tag-row">
                    <span class="tag tag-blue">C / C++</span>
                    <span class="tag tag-mauve">Haskell</span>
                    <span class="tag tag-yellow">Algorithms</span>
                    <span class="tag tag-teal">Security</span>
+                    <span class="tag tag-peach">Low Level OS</span>
                </div>
            </div>
        </div>
@@ -271,52 +215,39 @@
    <!-- ─── Tutorials ─────────────────────────────────────────────── -->
    <section id="tutorials">
        <p class="section-label reveal">tutorials</p>
-      <h2 class="section-heading reveal" style="transition-delay: 0.05s">
-        Things I <em>wrote down</em>
-      </h2>
+        <h2 class="section-heading reveal" style="transition-delay:0.05s">Things I <em>wrote down</em></h2>
        <p class="section-intro reveal" style="transition-delay:0.1s">
-        Best way to learn is to teach. When I find something interesting I write
-        a short tutorial — mainly to consolidate my own understanding, but if it
-        helps someone else that's a win.
+            Best way to learn is to teach. When I find something interesting I write a short tutorial — mainly to
+            consolidate my own understanding, but if it helps someone else that's a win.
        </p>

        <div class="card-grid reveal" style="transition-delay:0.15s">
            <a class="card" href="tutorials/summed_area/summed-area.html">
                <span class="card-date">3 Jan 2021</span>
                <span class="card-title">Summed-area tables</span>
-          <span class="card-desc"
-            >Integral images — what they are, how they work, and why they're
-            surprisingly useful for image processing.</span
-          >
+                <span class="card-desc">Integral images — what they are, how they work, and why they're surprisingly
+                    useful for image processing.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="terrainGen/index.html">
                <span class="card-date">3 Feb 2019</span>
-          <span class="card-title"
-            >Midpoint displacement terrain generation</span
-          >
-          <span class="card-desc"
-            >Generating random, natural-looking 2D terrains using the midpoint
-            displacement algorithm.</span
-          >
+                <span class="card-title">Midpoint displacement terrain generation</span>
+                <span class="card-desc">Generating random, natural-looking 2D terrains using the midpoint displacement
+                    algorithm.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="TSP_files/index.php">
                <span class="card-date">22 Sep 2018</span>
                <span class="card-title">Travelling salesperson</span>
-          <span class="card-desc"
-            >Different implementations of the TSP problem — a classic that never
-            gets old.</span
-          >
+                <span class="card-desc">Different implementations of the TSP problem — a classic that never gets
+                    old.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="jarvisMarsh/index.php">
                <span class="card-date">14 Feb 2018</span>
                <span class="card-title">Convex hull generator</span>
-          <span class="card-desc"
-            >Wrapping algorithms — visualising how to find the convex hull of a
-            point set.</span
-          >
+                <span class="card-desc">Wrapping algorithms — visualising how to find the convex hull of a point
+                    set.</span>
                <span class="card-arrow">→</span>
            </a>
        </div>
@@ -327,22 +258,11 @@
    <!-- ─── Projects ──────────────────────────────────────────────── -->
    <section id="projects">
        <p class="section-label reveal">projects</p>
-      <h2 class="section-heading reveal" style="transition-delay: 0.05s">
-        Things I <em>built</em>
-      </h2>
+        <h2 class="section-heading reveal" style="transition-delay:0.05s">Things I <em>built</em></h2>
        <p class="section-intro reveal" style="transition-delay:0.1s">
-        Mostly p5.js — visualising algorithms in ways that look more interesting
-        than they have any right to. Most use
-        <code
-          style="
-            background: var(--surface0);
-            color: var(--peach);
-            padding: 1px 5px;
-            border-radius: 3px;
-            font-size: 0.8em;
-          "
-          >mouseClicked()</code
-        >
+            Mostly p5.js — visualising algorithms in ways that look more interesting than they have any right to. Most
+            use <code
+                style="background:var(--surface0);color:var(--peach);padding:1px 5px;border-radius:3px;font-size:0.8em">mouseClicked()</code>
            so desktop only, sorry mobile.
        </p>

@@ -350,88 +270,64 @@
            <a class="card" href="projects/drawing_curves/index.html">
                <span class="card-date">1 Oct 2021</span>
                <span class="card-title">Drawing Bézier curves</span>
-          <span class="card-desc"
-            >Interactive animated diagram for quadratic and cubic Bézier curves.
-            Click to place points.</span
-          >
+                <span class="card-desc">Interactive animated diagram for quadratic and cubic Bézier curves. Click to
+                    place points.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/marching_squares.html">
                <span class="card-date">23 Sep 2021</span>
                <span class="card-title">2D Marching squares</span>
-          <span class="card-desc"
-            >Marching squares in action — click a tile to edit the
-            terrain.</span
-          >
+                <span class="card-desc">Marching squares in action — click a tile to edit the terrain.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/sorting_vis.html">
                <span class="card-date">11 Apr 2020</span>
                <span class="card-title">Bubble sort visualiser</span>
-          <span class="card-desc"
-            >Bars sorted by height, one frame per loop. Classic.</span
-          >
+                <span class="card-desc">Bars sorted by height, one frame per loop. Classic.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/warp_lines.html">
                <span class="card-date">2 Apr 2020</span>
                <span class="card-title">Müller-Lyer illusion</span>
-          <span class="card-desc"
-            >A visualisation of the Müller-Lyer optical illusion rendered in
-            JS.</span
-          >
+                <span class="card-desc">A visualisation of the Müller-Lyer optical illusion rendered in JS.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/fourier_series.html">
                <span class="card-date">27 Feb 2019</span>
                <span class="card-title">Fourier series</span>
-          <span class="card-desc"
-            >Building a square wave from nothing but sine waves.
-            Mesmerising.</span
-          >
+                <span class="card-desc">Building a square wave from nothing but sine waves. Mesmerising.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/ellipse_const.html">
                <span class="card-date">23 Feb 2019</span>
                <span class="card-title">Constructing an ellipse</span>
-          <span class="card-desc"
-            >How an ellipse can be constructed with a circle and radial lines —
-            inspired by 3Blue1Brown.</span
-          >
+                <span class="card-desc">How an ellipse can be constructed with a circle and radial lines — inspired by
+                    3Blue1Brown.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/gameoflife.php">
                <span class="card-date">2 May 2018</span>
                <span class="card-title">Game of Life</span>
-          <span class="card-desc"
-            >A JS implementation of Conway's classic. Still fascinating.</span
-          >
+                <span class="card-desc">A JS implementation of Conway's classic. Still fascinating.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/piApprox.php">
                <span class="card-date">18 Mar 2018</span>
                <span class="card-title">Calculating PI</span>
-          <span class="card-desc"
-            >Monte Carlo method — ratio of randomly placed dots in a square vs
-            circle.</span
-          >
+                <span class="card-desc">Monte Carlo method — ratio of randomly placed dots in a square vs circle.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/oscil.php">
                <span class="card-date">17 Dec 2017</span>
                <span class="card-title">Oscillations in 3D</span>
-          <span class="card-desc"
-            >JS implementation of a Bees and Bombs gif. One of my oldest.</span
-          >
+                <span class="card-desc">JS implementation of a Bees and Bombs gif. One of my oldest.</span>
                <span class="card-arrow">→</span>
            </a>
            <a class="card" href="projects/mazeGen.php">
                <span class="card-date">13 Nov 2017</span>
                <span class="card-title">Maze generator</span>
-          <span class="card-desc"
-            >A maze generator in JS. The first project that made me think "oh, I
-            like this".</span
-          >
+                <span class="card-desc">A maze generator in JS. The first project that made me think "oh, I like
+                    this".</span>
                <span class="card-arrow">→</span>
            </a>
        </div>
@@ -446,53 +342,29 @@
            <div>
                <h2>Let's <em>talk</em></h2>
                <p>
-            I'm currently employed but open to the right opportunity — backend
-            or full-stack, somewhere that ships interesting things with people
-            who care about their craft.
+                    I'm currently employed but open to the right opportunity — backend or full-stack, somewhere that
+                    ships interesting things with people who care about their craft.
                </p>
                <p>
-            GitHub has the most complete picture of how I think. LinkedIn if
-            you're formal. Either works.
+                    GitHub has the most complete picture of how I think. LinkedIn if you're formal. Either works.
                </p>
            </div>
            <div class="contact-links">
-          <a
-            href="https://github.com/jayo60013"
-            class="contact-link"
-            target="_blank"
-            rel="noopener"
-          >
+                <a href="https://github.com/jayo60013" class="contact-link" target="_blank" rel="noopener">
                    <span class="contact-link-icon">
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path
-                  d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
-                />
+                                d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
                        </svg>
                    </span>
                    <span class="contact-link-label">GitHub</span>
                    <span class="contact-link-handle">jayo60013</span>
                </a>
-          <a
-            href="https://www.linkedin.com/in/jaygatward"
-            class="contact-link"
-            target="_blank"
-            rel="noopener"
-          >
+                <a href="https://www.linkedin.com/in/jaygatward" class="contact-link" target="_blank" rel="noopener">
                    <span class="contact-link-icon">
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path
-                  d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
-                />
+                                d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                        </svg>
                    </span>
                    <span class="contact-link-label">LinkedIn</span>
@@ -506,22 +378,14 @@
    <footer>
        <span>havox.org — John Gatward</span>
        <span>
-        Built with too much coffee &
-        <a href="https://catppuccin.com" target="_blank" rel="noopener"
-          >Catppuccin Mocha</a
-        >. Shoutout to
-        <a
-          href="https://www.youtube.com/user/shiffman"
-          target="_blank"
-          rel="noopener"
-          >Daniel Shiffman</a
-        >
-        & the
-        <a href="https://p5js.org" target="_blank" rel="noopener">p5.js team</a
-        >.
+            Built with too much coffee & <a href="https://catppuccin.com" target="_blank" rel="noopener">Catppuccin
+                Mocha</a>.
+            Shoutout to <a href="https://www.youtube.com/user/shiffman" target="_blank" rel="noopener">Daniel
+                Shiffman</a> & the <a href="https://p5js.org" target="_blank" rel="noopener">p5.js team</a>.
        </span>
    </footer>

    <script src="script.js"></script>
 </body>
+
 </html>
--- a/style.css
+++ b/style.css
@@ -28,53 +28,31 @@
  --rosewater:#f5e0dc;
 }

-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

-html {
-  scroll-behavior: smooth;
-}
+html { scroll-behavior: smooth; }

 body {
  background: var(--base);
  color: var(--text);
-  font-family: "JetBrains Mono", monospace;
+  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
 }

-::selection {
-  background: var(--mauve);
-  color: var(--crust);
-}
+::selection { background: var(--mauve); color: var(--crust); }

 /* ─── Scrollbar ────────────────────────────────────────── */
-::-webkit-scrollbar {
-  width: 6px;
-}
-::-webkit-scrollbar-track {
-  background: var(--mantle);
-}
-::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--mauve);
-}
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--mantle); }
+::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--mauve); }

 /* ─── Nav ──────────────────────────────────────────────── */
 nav {
  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
@@ -87,7 +65,7 @@ nav {
 }

 .nav-logo {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  color: var(--mauve);
  text-decoration: none;
@@ -111,11 +89,9 @@ nav {
 }

 .nav-links a::after {
-  content: "";
+  content: '';
  position: absolute;
-  bottom: -3px;
-  left: 0;
-  right: 0;
+  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--mauve);
  transform: scaleX(0);
@@ -123,12 +99,8 @@ nav {
  transition: transform 0.2s;
 }

-.nav-links a:hover {
-  color: var(--text);
-}
-.nav-links a:hover::after {
-  transform: scaleX(1);
-}
+.nav-links a:hover { color: var(--text); }
+.nav-links a:hover::after { transform: scaleX(1); }

 /* ─── Sections ─────────────────────────────────────────── */
 section {
@@ -157,7 +129,7 @@ section.full-width {
 }

 .section-label::after {
-  content: "";
+  content: '';
  display: block;
  height: 1px;
  width: 3rem;
@@ -186,7 +158,7 @@ section.full-width {
 }

 .hero-name {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 600;
  line-height: 1;
@@ -202,7 +174,7 @@ section.full-width {
 }

 .hero-subtitle {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--subtext1);
@@ -234,7 +206,7 @@ section.full-width {
 }

 .hero-by-role {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--mauve);
@@ -242,7 +214,7 @@ section.full-width {
 }

 .hero-by-role::before {
-  content: "— ";
+  content: '— ';
  opacity: 0.4;
 }

@@ -268,7 +240,7 @@ section.full-width {
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
-  font-family: "JetBrains Mono", monospace;
+  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-decoration: none;
@@ -281,25 +253,18 @@ section.full-width {
  background: var(--mauve);
  color: var(--crust);
 }
-.btn-primary:hover {
-  background: var(--lavender);
-  transform: translateY(-2px);
-}
+.btn-primary:hover { background: var(--lavender); transform: translateY(-2px); }

 .btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--surface1);
 }
-.btn-ghost:hover {
-  border-color: var(--mauve);
-  color: var(--mauve);
-  transform: translateY(-2px);
-}
+.btn-ghost:hover { border-color: var(--mauve); color: var(--mauve); transform: translateY(-2px); }

 /* Decorative grid bg */
 #hero::before {
-  content: "";
+  content: '';
  position: absolute;
  inset: 0;
  background-image:
@@ -317,58 +282,53 @@ section.full-width {
  padding-bottom: 5rem;
 }

-.about-grid {
+.about-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
-  gap: 1px;
-  background: var(--surface0);
+  gap: 2rem;
+  margin-top: 2.5rem;
+  align-items: start;
+}
+
+.about-grid {
+  display: flex;
+  flex-direction: column;
  border: 1px solid var(--surface0);
  border-radius: 8px;
  overflow: hidden;
-  margin-top: 2.5rem;
 }

 .about-block {
  background: var(--mantle);
-  padding: 1.75rem 2rem;
-  position: relative;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--surface0);
  transition: background 0.2s;
+  display: flex;
+  align-items: baseline;
+  gap: 1.25rem;
 }

-.about-block:hover {
-  background: var(--surface0);
-}
-
-.about-block--wide {
-  grid-column: 1 / -1;
-  border-top: 1px solid var(--surface0);
-}
+.about-block:last-child { border-bottom: none; }
+.about-block:hover { background: var(--surface0); }

 .about-block-tag {
-  display: inline-block;
-  margin-bottom: 0.85rem;
+  flex-shrink: 0;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
+  width: 5rem;
+  text-align: center;
 }

 .about-block p {
  color: var(--subtext0);
  font-size: 0.85rem;
-  line-height: 1.85;
+  line-height: 1.75;
 }

-.about-block p strong {
-  color: var(--text);
-  font-weight: 700;
-}
-.about-block p em {
-  color: var(--mauve);
-  font-style: italic;
-}
-.about-block p s {
-  color: var(--overlay1);
-}
+.about-block p strong { color: var(--text); font-weight: 700; }
+.about-block p em     { color: var(--mauve); font-style: italic; }
+.about-block p s      { color: var(--overlay1); }

 .version-timeline {
  display: flex;
@@ -378,7 +338,7 @@ section.full-width {
 }

 .version-timeline::before {
-  content: "";
+  content: '';
  position: absolute;
  left: 0.65rem;
  top: 0.5rem;
@@ -402,9 +362,7 @@ section.full-width {
  border: 2px solid var(--surface1);
  flex-shrink: 0;
  margin-top: 0.15rem;
-  transition:
-    border-color 0.2s,
-    background 0.2s;
+  transition: border-color 0.2s, background 0.2s;
  position: relative;
  z-index: 1;
 }
@@ -434,23 +392,66 @@ section.full-width {
  line-height: 1.6;
 }

+.version-item--link {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.version-item--link:hover .v-dot {
+  border-color: var(--mauve);
+  background: var(--mauve);
+}
+
+.version-item--link:hover .v-title {
+  color: var(--mauve);
+}
+
+.v-link-arrow {
+  font-size: 0.7rem;
+  color: var(--overlay1);
+  margin-left: 0.3rem;
+  transition: color 0.2s, transform 0.2s;
+  display: inline-block;
+}
+
+.version-item--link:hover .v-link-arrow {
+  color: var(--mauve);
+  transform: translate(2px, -2px);
+}
+
+.v-dot--current {
+  border-color: var(--mauve);
+  background: var(--mauve);
+}
+
+.v-current-badge {
+  font-size: 0.6rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba(203,166,247,0.15);
+  color: var(--mauve);
+  padding: 0.1rem 0.45rem;
+  border-radius: 3px;
+  margin-left: 0.4rem;
+  vertical-align: middle;
+  font-weight: 700;
+}
+
 /* ─── Skills ───────────────────────────────────────────── */
 #skills h2 {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3rem;
 }

-#skills h2 em {
-  font-style: italic;
-  color: var(--mauve);
-}
+#skills h2 em { font-style: italic; color: var(--mauve); }

 .skills-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--surface0);
  border: 1px solid var(--surface0);
@@ -458,15 +459,17 @@ section.full-width {
  overflow: hidden;
 }

+.skill-card--wide {
+  grid-column: 1 / -1;
+}
+
 .skill-card {
  background: var(--mantle);
  padding: 2rem;
  transition: background 0.2s;
 }

-.skill-card:hover {
-  background: var(--surface0);
-}
+.skill-card:hover { background: var(--surface0); }

 .skill-card-icon {
  font-size: 1.5rem;
@@ -505,48 +508,24 @@ section.full-width {
  font-weight: 700;
 }

-.tag-blue {
-  background: rgba(137, 180, 250, 0.12);
-  color: var(--blue);
-}
-.tag-green {
-  background: rgba(166, 227, 161, 0.12);
-  color: var(--green);
-}
-.tag-peach {
-  background: rgba(250, 179, 135, 0.12);
-  color: var(--peach);
-}
-.tag-teal {
-  background: rgba(148, 226, 213, 0.12);
-  color: var(--teal);
-}
-.tag-mauve {
-  background: rgba(203, 166, 247, 0.12);
-  color: var(--mauve);
-}
-.tag-yellow {
-  background: rgba(249, 226, 175, 0.12);
-  color: var(--yellow);
-}
-.tag-sky {
-  background: rgba(137, 220, 235, 0.12);
-  color: var(--sky);
-}
+.tag-blue   { background: rgba(137,180,250,0.12); color: var(--blue); }
+.tag-green  { background: rgba(166,227,161,0.12); color: var(--green); }
+.tag-peach  { background: rgba(250,179,135,0.12); color: var(--peach); }
+.tag-teal   { background: rgba(148,226,213,0.12); color: var(--teal); }
+.tag-mauve  { background: rgba(203,166,247,0.12); color: var(--mauve); }
+.tag-yellow { background: rgba(249,226,175,0.12); color: var(--yellow); }
+.tag-sky    { background: rgba(137,220,235,0.12); color: var(--sky); }

 /* ─── Tutorials / Projects shared ─────────────────────── */
 .section-heading {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
 }

-.section-heading em {
-  font-style: italic;
-  color: var(--mauve);
-}
+.section-heading em { font-style: italic; color: var(--mauve); }

 .section-intro {
  color: var(--subtext0);
@@ -581,10 +560,9 @@ section.full-width {
 }

 .card::before {
-  content: "";
+  content: '';
  position: absolute;
-  top: 0;
-  left: 0;
+  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--mauve);
@@ -593,12 +571,8 @@ section.full-width {
  transition: transform 0.25s;
 }

-.card:hover {
-  background: var(--surface0);
-}
-.card:hover::before {
-  transform: scaleY(1);
-}
+.card:hover { background: var(--surface0); }
+.card:hover::before { transform: scaleY(1); }

 .card-date {
  font-size: 0.68rem;
@@ -613,9 +587,7 @@ section.full-width {
  transition: color 0.2s;
 }

-.card:hover .card-title {
-  color: var(--mauve);
-}
+.card:hover .card-title { color: var(--mauve); }

 .card-desc {
  font-size: 0.8rem;
@@ -627,17 +599,12 @@ section.full-width {
 .card-arrow {
  font-size: 0.8rem;
  color: var(--overlay0);
-  transition:
-    color 0.2s,
-    transform 0.2s;
+  transition: color 0.2s, transform 0.2s;
  align-self: flex-end;
  margin-top: 0.5rem;
 }

-.card:hover .card-arrow {
-  color: var(--mauve);
-  transform: translateX(3px);
-}
+.card:hover .card-arrow { color: var(--mauve); transform: translateX(3px); }

 /* ─── Contact ──────────────────────────────────────────── */
 #contact {
@@ -657,17 +624,14 @@ section.full-width {
 }

 .contact-inner h2 {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
 }

-.contact-inner h2 em {
-  font-style: italic;
-  color: var(--mauve);
-}
+.contact-inner h2 em { font-style: italic; color: var(--mauve); }

 .contact-inner p {
  color: var(--subtext0);
@@ -728,32 +692,19 @@ footer {
  color: var(--overlay0);
 }

-footer a {
-  color: var(--overlay1);
-  text-decoration: none;
-}
-footer a:hover {
-  color: var(--mauve);
-}
+footer a { color: var(--overlay1); text-decoration: none; }
+footer a:hover { color: var(--mauve); }

 /* ─── Animations ───────────────────────────────────────── */
@keyframes fadeUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
 }

 .reveal {
  opacity: 0;
  transform: translateY(24px);
-  transition:
-    opacity 0.6s ease,
-    transform 0.6s ease;
+  transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .reveal.visible {
@@ -771,32 +722,14 @@ footer a:hover {

 /* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
-  nav {
-    padding: 0 1.5rem;
-  }
-  .nav-links {
-    gap: 1.2rem;
-  }
-  section {
-    padding: 6rem 1.5rem 4rem;
-  }
-  .about-grid {
-    grid-template-columns: 1fr;
-  }
-  .about-block--wide {
-    grid-column: 1;
-  }
-  .contact-inner {
-    grid-template-columns: 1fr;
-    gap: 2rem;
-    padding: 2rem;
-  }
-  .hero-name {
-    font-size: clamp(2.8rem, 12vw, 5rem);
-  }
-  footer {
-    flex-direction: column;
-    gap: 0.5rem;
-    text-align: center;
-  }
+  nav { padding: 0 1.5rem; }
+  .nav-links { gap: 1.2rem; }
+  section { padding: 6rem 1.5rem 4rem; }
+  .about-columns { grid-template-columns: 1fr; }
+  .about-block-tag { width: 4rem; }
+  .skills-grid { grid-template-columns: 1fr; }
+  .skill-card--wide { grid-column: 1; }
+  .contact-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
+  .hero-name { font-size: clamp(2.8rem, 12vw, 5rem); }
+  footer { flex-direction: column; gap: 0.5rem; text-align: center; }
 }