jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish wording

Browse Source
This commit is contained in:
John Gatward
2026-07-23 12:27:59 +01:00
parent 2674925fc9
commit a8fde951a6
6 changed files with 734 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files
favicon-mockups/index.html
View File
favicon-mockups/option-1-serif-h.svg
View File
favicon-mockups/option-2-terminal-h-cursor.svg
View File
favicon-mockups/option-3-hx-knot.svg
View File
index.html
+58 -38
View File
@@ -3,8 +3,14 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Havox</title> <title>John Gatward | Software Engineer</title>
<meta name="description" content="John Gatward's portfolio" /> <meta
name="description"
content="Portfolio of John Gatward, a software engineer specialising in backend development, interactive visualisations, and self-hosted systems."
/>
<meta name="theme-color" content="#1e1e2e" />
<link rel="icon" href="icons/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link <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" 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"
@@ -14,6 +20,7 @@
</head> </head>
<body> <body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<!-- ─── Nav ─────────────────────────────────────────────────── --> <!-- ─── Nav ─────────────────────────────────────────────────── -->
<nav> <nav>
<a href="#hero" class="nav-logo">havox</a> <a href="#hero" class="nav-logo">havox</a>
@@ -25,6 +32,7 @@
</ul> </ul>
</nav> </nav>
<main id="main-content" tabindex="-1">
<!-- ─── Hero ─────────────────────────────────────────────────── --> <!-- ─── Hero ─────────────────────────────────────────────────── -->
<section id="hero"> <section id="hero">
<p class="hero-eyebrow">// havox.org - v4</p> <p class="hero-eyebrow">// havox.org - v4</p>
@@ -65,8 +73,8 @@
<div class="about-block"> <div class="about-block">
<p> <p>
Havox started in 2017 as a place to dump whatever projects I had Havox started in 2017 as a place to dump whatever projects I had
written. Four redesigns and several dead domains later, it's still written. Four redesigns and several dead domains later, it's
going. Less a portfolio, more a scrapbook. still going. Less a portfolio, more a scrapbook.
</p> </p>
</div> </div>
@@ -90,8 +98,8 @@
<div class="about-block"> <div class="about-block">
<span class="about-block-tag tag tag-yellow">linux</span> <span class="about-block-tag tag tag-yellow">linux</span>
<p> <p>
Long-time Linux user and distro-hopper. Self-hosted server running Long-time Linux user and distro-hopper. Self-hosted server
24/7 for friends and family who didn't ask for it but running 24/7 for friends and family who didn't ask for it but
<s>probably</s> definitely appreciate it. <s>probably</s> definitely appreciate it.
</p> </p>
</div> </div>
@@ -125,8 +133,8 @@
</div> </div>
<div class="v-year">2022 → 2025</div> <div class="v-year">2022 → 2025</div>
<div class="v-desc"> <div class="v-desc">
Borrowed a professional template and tried to make it suit my Borrowed a professional template and tried to make it suit
needs. Wasn't very 'me'. my needs. Wasn't very 'me'.
</div> </div>
</div> </div>
</a> </a>
@@ -189,8 +197,9 @@
</span> </span>
<h3>Backend</h3> <h3>Backend</h3>
<p> <p>
Professional experience designing, building and deploying services. Professional experience designing, building and deploying
Using a modern tech stack in the Supply Chain & Logistics industry. services. Using a modern tech stack in the Supply Chain &
Logistics industry.
</p> </p>
<div class="tag-row"> <div class="tag-row">
<span class="tag tag-blue">Java</span> <span class="tag tag-blue">Java</span>
@@ -211,7 +220,8 @@
<h3>Frontend & Creative</h3> <h3>Frontend & Creative</h3>
<p> <p>
Comfortable with React and CSS. I've always enjoyed visualising Comfortable with React and CSS. I've always enjoyed visualising
algorithms interactively - it's way more fun than a console output. algorithms interactively - it's way more fun than a console
output.
</p> </p>
<div class="tag-row"> <div class="tag-row">
<span class="tag tag-teal">React</span> <span class="tag tag-teal">React</span>
@@ -276,9 +286,9 @@
Things I <em>built</em> Things I <em>built</em>
</h2> </h2>
<p class="section-intro reveal" style="transition-delay: 0.1s"> <p class="section-intro reveal" style="transition-delay: 0.1s">
A timeline of my projects and an overview of my journey as a developer. A timeline of my projects and an overview of my journey as a
Often times getting inspired and trying to recreate something cool I developer. Often inspired by something cool I saw and set out to
saw. recreate.
</p> </p>
<div class="projects-subheading reveal" style="transition-delay: 0.12s"> <div class="projects-subheading reveal" style="transition-delay: 0.12s">
@@ -300,8 +310,8 @@
<span class="card-title">Wordle Solver</span> <span class="card-title">Wordle Solver</span>
<span class="card-desc" <span class="card-desc"
>Built after one too many missed 3-guess games. Now it plays >Built after one too many missed 3-guess games. Now it plays
marginally better than me. Uses information theory to recommend the marginally better than me. Uses information theory to recommend
next best guess.</span the next best guess.</span
> >
<span class="card-source"> <span class="card-source">
Source code: Source code:
@@ -335,8 +345,9 @@
> >
<span class="card-title">Crack the Quote</span> <span class="card-title">Crack the Quote</span>
<span class="card-desc" <span class="card-desc"
>A substitution-cipher puzzle game with a daily challenge. Built for >A substitution-cipher puzzle game with a daily challenge. Built
me and my family to play after getting bored with NYT games.</span for me and my family to play after getting bored with NYT
games.</span
> >
<span class="card-source"> <span class="card-source">
Source code: Source code:
@@ -385,7 +396,9 @@
<button type="button" class="filter-chip" data-filter="p5"> <button type="button" class="filter-chip" data-filter="p5">
p5.js p5.js
</button> </button>
<button type="button" class="filter-chip" data-filter="zig">Zig</button> <button type="button" class="filter-chip" data-filter="zig">
Zig
</button>
<button type="button" class="filter-chip" data-filter="cpp"> <button type="button" class="filter-chip" data-filter="cpp">
C / C++ C / C++
</button> </button>
@@ -402,12 +415,10 @@
data-href="https://pubquiz.umbra.mom" data-href="https://pubquiz.umbra.mom"
> >
<span class="card-date">03 Apr 2025</span> <span class="card-date">03 Apr 2025</span>
<span class="project-status project-status--active"
>Active development</span
>
<span class="card-title">Pub Quiz Dashboard</span> <span class="card-title">Pub Quiz Dashboard</span>
<span class="card-desc" <span class="card-desc"
>A Python dashboard to track our local pub quiz performances.</span >A Python dashboard to track our local pub quiz
performances.</span
> >
<span class="tag-row"> <span class="tag-row">
<span class="tag tag-red">Python</span> <span class="tag tag-red">Python</span>
@@ -427,7 +438,7 @@
<span class="tag-row"> <span class="tag-row">
<span class="tag tag-blue">C++</span> <span class="tag tag-blue">C++</span>
<span class="tag tag-teal">WebAssembly</span> <span class="tag tag-teal">WebAssembly</span>
<span class="tag tag-peach">RayLib</span> <span class="tag tag-peach">Raylib</span>
</span> </span>
</article> </article>
<article <article
@@ -438,8 +449,8 @@
<span class="card-date">20 Mar 2024</span> <span class="card-date">20 Mar 2024</span>
<span class="card-title">Travelling Salesman Problem</span> <span class="card-title">Travelling Salesman Problem</span>
<span class="card-desc" <span class="card-desc"
>A nearest-neighbor + 2-opt visualiser. Wanted to revisit one of my >A nearest-neighbor + 2-opt visualiser. Wanted to revisit one of
first projects but with a super optimised tech-stack & my first projects with an optimised tech stack and
algorithm.</span algorithm.</span
> >
<span class="tag-row"> <span class="tag-row">
@@ -456,7 +467,7 @@
<span class="card-date">31 Jan 2024</span> <span class="card-date">31 Jan 2024</span>
<span class="card-title">Flocking</span> <span class="card-title">Flocking</span>
<span class="card-desc" <span class="card-desc"
>Rewrote the entire project in Rust from GoLang to compile to wasm. >Rewrote the project from Go to Rust, compiling it to WebAssembly.
Was fun being able to use DOM controls to affect the Was fun being able to use DOM controls to affect the
simulation.</span simulation.</span
> >
@@ -511,6 +522,7 @@
>Watched a brilliant video by >Watched a brilliant video by
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/a-767WnbaCQ?si=f3NM95INeoZqzIi8" href="https://youtu.be/a-767WnbaCQ?si=f3NM95INeoZqzIi8"
>Spectral Collective</a >Spectral Collective</a
> >
@@ -518,7 +530,7 @@
> >
<span class="tag-row"> <span class="tag-row">
<span class="tag tag-blue">C</span> <span class="tag tag-blue">C</span>
<span class="tag tag-peach">RayLib</span> <span class="tag tag-peach">Raylib</span>
<span class="tag tag-teal">WebAssembly</span> <span class="tag tag-teal">WebAssembly</span>
</span> </span>
</article> </article>
@@ -531,9 +543,10 @@
<span class="card-title">Drawing Bézier curves</span> <span class="card-title">Drawing Bézier curves</span>
<span class="card-desc" <span class="card-desc"
>An interactive animation for how cubic Bézier curves are >An interactive animation for how cubic Bézier curves are
constructed. Inspirated by this beautiful video by constructed. Inspired by this beautiful video by
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/aVwxzDHniEw?si=mCylw_p-fMSdhyvN" href="https://youtu.be/aVwxzDHniEw?si=mCylw_p-fMSdhyvN"
>Fraya Holmér</a >Fraya Holmér</a
></span ></span
@@ -552,7 +565,7 @@
<span class="card-title">2D Marching Squares</span> <span class="card-title">2D Marching Squares</span>
<span class="card-desc" <span class="card-desc"
>I saw the 3D version of this algorithm in a game dev log and was >I saw the 3D version of this algorithm in a game dev log and was
inspired to create this 2d land/sea map generator thing.</span inspired to create this 2D land-and-sea map generator.</span
> >
<span class="tag-row"> <span class="tag-row">
<span class="tag tag-green">JavaScript</span> <span class="tag tag-green">JavaScript</span>
@@ -567,7 +580,8 @@
<span class="card-date">2 Apr 2020</span> <span class="card-date">2 Apr 2020</span>
<span class="card-title">Müller-Lyer illusion</span> <span class="card-title">Müller-Lyer illusion</span>
<span class="card-desc" <span class="card-desc"
>JavaScript visualisation of the Müller-Lyer optical illusion.</span >JavaScript visualisation of the Müller-Lyer optical
illusion.</span
> >
<span class="tag-row"> <span class="tag-row">
<span class="tag tag-green">JavaScript</span> <span class="tag tag-green">JavaScript</span>
@@ -582,8 +596,8 @@
<span class="card-date">27 Feb 2019</span> <span class="card-date">27 Feb 2019</span>
<span class="card-title">Fourier series</span> <span class="card-title">Fourier series</span>
<span class="card-desc" <span class="card-desc"
>Builds a square wave from sine components to show Fourier series in >Builds a square wave from sine components to show Fourier series
motion.</span in motion.</span
> >
<span class="tag-row"> <span class="tag-row">
<span class="tag tag-green">JavaScript</span> <span class="tag tag-green">JavaScript</span>
@@ -601,6 +615,7 @@
>A geometric construction demo inspired by >A geometric construction demo inspired by
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/xdIjYBtnvZU?si=uI66LS_O_eAWqG4e" href="https://youtu.be/xdIjYBtnvZU?si=uI66LS_O_eAWqG4e"
>3Blue1Brown's video</a >3Blue1Brown's video</a
> >
@@ -617,7 +632,7 @@
data-href="projects/pi_approximation.html" data-href="projects/pi_approximation.html"
> >
<span class="card-date">18 Mar 2018</span> <span class="card-date">18 Mar 2018</span>
<span class="card-title">Calculating PI</span> <span class="card-title">Calculating Pi</span>
<span class="card-desc" <span class="card-desc"
>A Monte Carlo approximation of pi using random sampling.</span >A Monte Carlo approximation of pi using random sampling.</span
> >
@@ -652,6 +667,7 @@
>Discovered the >Discovered the
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/HyK_Q5rrcr4?si=G6g8xDHK0cc_MwhG" href="https://youtu.be/HyK_Q5rrcr4?si=G6g8xDHK0cc_MwhG"
>Coding Train's channel</a >Coding Train's channel</a
> >
@@ -686,10 +702,10 @@
<h2>Let's <em>talk</em></h2> <h2>Let's <em>talk</em></h2>
<p> <p>
I am currently employed and open to the right software engineering I am currently employed and open to the right software engineering
opportunity, particularly backend or full-stack roles with friendly, opportunity, particularly backend or full-stack roles with
close-knit teams. friendly, close-knit teams.
</p> </p>
<p>For professional enquiries, please contact me on LinkedIn.</p> <p>For professional enquiries, connect with me on LinkedIn.</p>
</div> </div>
<div class="contact-links"> <div class="contact-links">
<a <a
@@ -721,13 +737,17 @@
</div> </div>
</div> </div>
</section> </section>
</main>
<!-- ─── Footer ─────────────────────────────────────────────────── --> <!-- ─── Footer ─────────────────────────────────────────────────── -->
<footer> <footer>
<span>umbra.mom - John Gatward</span> <span>umbra.mom - John Gatward</span>
<span> <span>
Source code (self‑hosted): Source code (self‑hosted):
<a href="https://gitea.umbra.mom/jay/havox" target="_blank" <a
href="https://gitea.umbra.mom/jay/havox"
target="_blank"
rel="noopener noreferrer"
>repository</a >repository</a
> >
</span> </span>
style.css
+40
View File
@@ -115,6 +115,31 @@ body::after {
color: var(--crust); color: var(--crust);
} }
:focus-visible {
outline: 2px solid var(--mauve);
outline-offset: 4px;
}
.skip-link {
position: fixed;
top: 0.75rem;
left: 50%;
z-index: 200;
padding: 0.6rem 1rem;
border-radius: 4px;
background: var(--mauve);
color: var(--crust);
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
transform: translate(-50%, -200%);
transition: transform 0.2s;
}
.skip-link:focus {
transform: translate(-50%, 0);
}
/* ─── Scrollbar ────────────────────────────────────────── */ /* ─── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
@@ -1165,3 +1190,18 @@ footer a:hover {
text-align: center; text-align: center;
} }
} }
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}