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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Havox</title>
<meta name="description" content="John Gatward's portfolio" />
<title>John Gatward | Software Engineer</title>
<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
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>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<!-- ─── Nav ─────────────────────────────────────────────────── -->
<nav>
<a href="#hero" class="nav-logo">havox</a>
@@ -25,6 +32,7 @@
</ul>
</nav>
<main id="main-content" tabindex="-1">
<!-- ─── Hero ─────────────────────────────────────────────────── -->
<section id="hero">
<p class="hero-eyebrow">// havox.org - v4</p>
@@ -65,8 +73,8 @@
<div class="about-block">
<p>
Havox started in 2017 as a place to dump whatever projects I had
written. Four redesigns and several dead domains later, it's still
going. Less a portfolio, more a scrapbook.
written. Four redesigns and several dead domains later, it's
still going. Less a portfolio, more a scrapbook.
</p>
</div>
@@ -90,8 +98,8 @@
<div class="about-block">
<span class="about-block-tag tag tag-yellow">linux</span>
<p>
Long-time Linux user and distro-hopper. Self-hosted server running
24/7 for friends and family who didn't ask for it but
Long-time Linux user and distro-hopper. Self-hosted server
running 24/7 for friends and family who didn't ask for it but
<s>probably</s> definitely appreciate it.
</p>
</div>
@@ -125,8 +133,8 @@
</div>
<div class="v-year">2022 → 2025</div>
<div class="v-desc">
Borrowed a professional template and tried to make it suit my
needs. Wasn't very 'me'.
Borrowed a professional template and tried to make it suit
my needs. Wasn't very 'me'.
</div>
</div>
</a>
@@ -189,8 +197,9 @@
</span>
<h3>Backend</h3>
<p>
Professional experience designing, building and deploying services.
Using a modern tech stack in the Supply Chain & Logistics industry.
Professional experience designing, building and deploying
services. Using a modern tech stack in the Supply Chain &
Logistics industry.
</p>
<div class="tag-row">
<span class="tag tag-blue">Java</span>
@@ -211,7 +220,8 @@
<h3>Frontend & Creative</h3>
<p>
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>
<div class="tag-row">
<span class="tag tag-teal">React</span>
@@ -276,9 +286,9 @@
Things I <em>built</em>
</h2>
<p class="section-intro reveal" style="transition-delay: 0.1s">
A timeline of my projects and an overview of my journey as a developer.
Often times getting inspired and trying to recreate something cool I
saw.
A timeline of my projects and an overview of my journey as a
developer. Often inspired by something cool I saw and set out to
recreate.
</p>
<div class="projects-subheading reveal" style="transition-delay: 0.12s">
@@ -300,8 +310,8 @@
<span class="card-title">Wordle Solver</span>
<span class="card-desc"
>Built after one too many missed 3-guess games. Now it plays
marginally better than me. Uses information theory to recommend the
next best guess.</span
marginally better than me. Uses information theory to recommend
the next best guess.</span
>
<span class="card-source">
Source code:
@@ -335,8 +345,9 @@
>
<span class="card-title">Crack the Quote</span>
<span class="card-desc"
>A substitution-cipher puzzle game with a daily challenge. Built for
me and my family to play after getting bored with NYT games.</span
>A substitution-cipher puzzle game with a daily challenge. Built
for me and my family to play after getting bored with NYT
games.</span
>
<span class="card-source">
Source code:
@@ -385,7 +396,9 @@
<button type="button" class="filter-chip" data-filter="p5">
p5.js
</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">
C / C++
</button>
@@ -402,12 +415,10 @@
data-href="https://pubquiz.umbra.mom"
>
<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-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 tag-red">Python</span>
@@ -427,7 +438,7 @@
<span class="tag-row">
<span class="tag tag-blue">C++</span>
<span class="tag tag-teal">WebAssembly</span>
<span class="tag tag-peach">RayLib</span>
<span class="tag tag-peach">Raylib</span>
</span>
</article>
<article
@@ -438,8 +449,8 @@
<span class="card-date">20 Mar 2024</span>
<span class="card-title">Travelling Salesman Problem</span>
<span class="card-desc"
>A nearest-neighbor + 2-opt visualiser. Wanted to revisit one of my
first projects but with a super optimised tech-stack &
>A nearest-neighbor + 2-opt visualiser. Wanted to revisit one of
my first projects with an optimised tech stack and
algorithm.</span
>
<span class="tag-row">
@@ -456,7 +467,7 @@
<span class="card-date">31 Jan 2024</span>
<span class="card-title">Flocking</span>
<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
simulation.</span
>
@@ -511,6 +522,7 @@
>Watched a brilliant video by
<a
target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/a-767WnbaCQ?si=f3NM95INeoZqzIi8"
>Spectral Collective</a
>
@@ -518,7 +530,7 @@
>
<span class="tag-row">
<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>
</article>
@@ -531,9 +543,10 @@
<span class="card-title">Drawing Bézier curves</span>
<span class="card-desc"
>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
target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/aVwxzDHniEw?si=mCylw_p-fMSdhyvN"
>Fraya Holmér</a
></span
@@ -552,7 +565,7 @@
<span class="card-title">2D Marching Squares</span>
<span class="card-desc"
>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 tag-green">JavaScript</span>
@@ -567,7 +580,8 @@
<span class="card-date">2 Apr 2020</span>
<span class="card-title">Müller-Lyer illusion</span>
<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 tag-green">JavaScript</span>
@@ -582,8 +596,8 @@
<span class="card-date">27 Feb 2019</span>
<span class="card-title">Fourier series</span>
<span class="card-desc"
>Builds a square wave from sine components to show Fourier series in
motion.</span
>Builds a square wave from sine components to show Fourier series
in motion.</span
>
<span class="tag-row">
<span class="tag tag-green">JavaScript</span>
@@ -601,6 +615,7 @@
>A geometric construction demo inspired by
<a
target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/xdIjYBtnvZU?si=uI66LS_O_eAWqG4e"
>3Blue1Brown's video</a
>
@@ -617,7 +632,7 @@
data-href="projects/pi_approximation.html"
>
<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"
>A Monte Carlo approximation of pi using random sampling.</span
>
@@ -652,6 +667,7 @@
>Discovered the
<a
target="_blank"
rel="noopener noreferrer"
href="https://youtu.be/HyK_Q5rrcr4?si=G6g8xDHK0cc_MwhG"
>Coding Train's channel</a
>
@@ -686,10 +702,10 @@
<h2>Let's <em>talk</em></h2>
<p>
I am currently employed and open to the right software engineering
opportunity, particularly backend or full-stack roles with friendly,
close-knit teams.
opportunity, particularly backend or full-stack roles with
friendly, close-knit teams.
</p>
<p>For professional enquiries, please contact me on LinkedIn.</p>
<p>For professional enquiries, connect with me on LinkedIn.</p>
</div>
<div class="contact-links">
<a
@@ -721,13 +737,17 @@
</div>
</div>
</section>
</main>
<!-- ─── Footer ─────────────────────────────────────────────────── -->
<footer>
<span>umbra.mom - John Gatward</span>
<span>
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
>
</span>
style.css
+40
View File
@@ -115,6 +115,31 @@ body::after {
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 ────────────────────────────────────────── */
::-webkit-scrollbar {
width: 6px;
@@ -1165,3 +1190,18 @@ footer a:hover {
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;
}
}