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

final polish

Browse Source
This commit is contained in:
John Gatward
2026-03-20 18:40:30 +00:00
parent 2646321ad9
commit ed713a931d
3 changed files with 141 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
index.html
View File

@@ -5,6 +5,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Havox — John Gatward</title>
<meta name="description" content="John Gatward's portfolio: software engineering projects spanning backend systems, infrastructure, and creative developer experiments." />
<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"
@@ -29,32 +30,19 @@
<section id="hero">
<p class="hero-eyebrow">// havox.org — v4</p>
<h1 class="hero-name">John <em>Gatward</em></h1>
<p class="hero-subtitle">Software Developer</p>
<p class="hero-subtitle">Software Engineer</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
<span class="hero-by-line"><span class="hero-by">Developer enthusiast</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">
<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" />
</svg>
GitHub
</a>
<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" />
</svg>
LinkedIn
</a>
<a href="#projects" class="btn btn-primary">View projects</a>
<a href="#contact" class="btn btn-ghost">Contact me</a>
</div>
</section>
@@ -108,7 +96,7 @@
<div class="v-content">
<div class="v-title">Havox V4 <span class="v-current-badge">current</span></div>
<div class="v-year">2026 → present</div>
<div class="v-desc">Catppuccin Mocha. Single page. Trying to get a new job this time.</div>
<div class="v-desc">Catppuccin Mocha. Single page. Built to highlight projects and craft.</div>
</div>
</div>
@@ -117,7 +105,7 @@
<div class="v-content">
<div class="v-title">Havox V3 <span class="v-link-arrow">↗</span></div>
<div class="v-year">2022 → 2025</div>
<div class="v-desc">Borrowed a template. Wasn't very 'me'.</div>
<div class="v-desc">Borrowed a professional looking template. Wasn't very 'me'.</div>
</div>
</a>
@@ -139,7 +127,6 @@
quote-of-the-day achieved via webscraping a site daily.</div>
</div>
</a>
</div>
</div>
@@ -172,8 +159,7 @@
<span class="skill-card-icon">🎨</span>
<h3>Frontend & Creative</h3>
<p>Comfortable with react and CSS. I enjoy visualising algorithms interactively — it's more fun than
a
console output.</p>
a console output.</p>
<div class="tag-row">
<span class="tag tag-teal">React</span>
<span class="tag tag-green">TypeScript</span>
@@ -216,7 +202,7 @@
<p class="section-label reveal">projects</p>
<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">
A timeline of all my projects and experiments. Started with p5.js, then the tech-stack mirrored whatever I was interested in at that time.
A timeline of projects focused on technical challenge and what each build taught me.
</p>
<div class="projects-subheading reveal" style="transition-delay:0.12s">
@@ -225,10 +211,10 @@
<div class="card-grid card-grid--featured reveal" style="transition-delay:0.14s">
<a class="card" href="https://wordlesolver.umbra.mom">
<span class="card-date">9 Feb 2025</span>
<span class="card-date">9 Jan 2025</span>
<span class="card-title">Wordle Solver</span>
<span class="card-desc">Built after getting frustrated after one too many missed 3-guess games. Now it
plays marginally better than me.</span>
plays marginally better than me. Uses information theory to recommend the next best guess.</span>
<span class="tag-row">
<span class="tag tag-yellow">Rust</span>
<span class="tag tag-teal">React</span>
@@ -239,8 +225,7 @@
<a class="card" href="#projects">
<span class="card-date">13 Apr 2024</span>
<span class="card-title">Crack the Quote</span>
<span class="card-desc">A fun word puzzle game focused on breaking a simple substitution cipher from a
daily quote.</span>
<span class="card-desc">A substitution-cipher puzzle game with a daily challenge.</span>
<span class="tag-row">
<span class="tag tag-yellow">Rust</span>
<span class="tag tag-teal">React</span>
@@ -257,6 +242,7 @@
<fieldset class="project-filters reveal" style="transition-delay:0.18s" aria-label="Filter projects by tech stack">
<button type="button" class="filter-chip active" data-filter="all">All</button>
<button type="button" class="filter-chip" data-filter="javascript">JavaScript</button>
<button type="button" class="filter-chip" data-filter="python">Python</button>
<button type="button" class="filter-chip" data-filter="rust">Rust</button>
<button type="button" class="filter-chip" data-filter="react">React</button>
<button type="button" class="filter-chip" data-filter="webassembly">WebAssembly</button>
@@ -266,6 +252,15 @@
</fieldset>
<div id="project-grid" class="card-grid reveal" style="transition-delay:0.2s">
<a class="card project-card" data-tech="python" href="https://pubquiz.umbra.mom">
<span class="card-date">03 Apr 2025</span>
<span class="card-title">Pub Quiz Dashboard</span>
<span class="card-desc">A Python dashboard to track quiz performance.</span>
<span class="tag-row">
<span class="tag tag-red">Python</span>
</span>
<span class="card-arrow">→</span>
</a>
<a class="card project-card" data-tech="cpp webassembly" href="projects/thin_ice/thin_ice.html">
<span class="card-date">14 Nov 2024</span>
<span class="card-title">Thin Ice</span>
@@ -280,7 +275,7 @@
<a class="card project-card" data-tech="zig webassembly" href="projects/tsp/index.html">
<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 pathfinding visualiser.</span>
<span class="card-desc">A nearest-neighbor + 2-opt visualiser.</span>
<span class="tag-row">
<span class="tag tag-yellow">Zig</span>
<span class="tag tag-sky">WebGL</span>
@@ -291,7 +286,7 @@
<a class="card project-card" data-tech="rust" href="projects/flocking/index.html">
<span class="card-date">31 Jan 2024</span>
<span class="card-title">Flocking</span>
<span class="card-desc">A simulation to show how complex behaviour emerges from 3 simple rules.</span>
<span class="card-desc">A boids simulation showing emergent behaviour from three simple rules.</span>
<span class="tag-row">
<span class="tag tag-yellow">Rust</span>
<span class="tag tag-peach">Raylib</span>
@@ -321,7 +316,7 @@
<a class="card project-card" data-tech="cpp webassembly" href="projects/percolation/index.html">
<span class="card-date">5 Feb 2022</span>
<span class="card-title">Percolation</span>
<span class="card-desc">A visual demo of percolation through a medium, showing how behavior changes as p increases.</span>
<span class="card-desc">A visual demo of 'water' percolating through a medium, as it disappears.</span>
<span class="tag-row">
<span class="tag tag-blue">C</span>
<span class="tag tag-peach">RayLib</span>
@@ -372,7 +367,7 @@
<a class="card project-card" data-tech="javascript p5" href="projects/ellipse_construction.html">
<span class="card-date">23 Feb 2019</span>
<span class="card-title">Constructing an ellipse</span>
<span class="card-desc">Shows how an ellipse can be constructed from a circle and radial lines, inspired by 3Blue1Brown.</span>
<span class="card-desc">A geometric construction demo inspired by 3Blue1Brown.</span>
<span class="tag-row">
<span class="tag tag-green">JavaScript</span>
<span class="tag tag-red">p5.js</span>
@@ -382,7 +377,7 @@
<a class="card project-card" data-tech="javascript p5" href="projects/pi_approximation.html">
<span class="card-date">18 Mar 2018</span>
<span class="card-title">Calculating PI</span>
<span class="card-desc">Approximates pi using the Monte Carlo method with random points in a square and circle.</span>
<span class="card-desc">A Monte Carlo approximation of pi using random sampling.</span>
<span class="tag-row">
<span class="tag tag-green">JavaScript</span>
<span class="tag tag-red">p5.js</span>
@@ -410,6 +405,10 @@
<span class="card-arrow">→</span>
</a>
</div>
<div class="projects-more-row reveal" style="transition-delay:0.22s">
<button id="projects-see-more" type="button" class="projects-more-btn" aria-expanded="false">See more</button>
</div>
</section>
<div class="divider"></div>
@@ -421,11 +420,11 @@
<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 am currently employed and open to the right software engineering opportunity, particularly
backend or full-stack roles with teams that value thoughtful delivery and technical quality.
</p>
<p>
GitHub has the most complete picture of how I think. LinkedIn if you're formal. Either works.
For professional enquiries, please connect with me on LinkedIn.
</p>
</div>
<div class="contact-links">
@@ -457,8 +456,7 @@
<footer>
<span>umbra.mom — John Gatward</span>
<span>
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> for starting this obsession.
Source code repository is also self-hosted: <a href="https://gitea.umbra.mom/jay/havox">repository</a>
</span>
</footer>