472 lines
24 KiB
HTML
472 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<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"/>
|
||
<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">
|
||
<link rel="stylesheet" href="style.css"/>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- ─── Nav ─────────────────────────────────────────────────── -->
|
||
<nav>
|
||
<a href="#hero" class="nav-logo">havox</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#about">about</a></li>
|
||
<li><a href="#skills">skills</a></li>
|
||
<li><a href="#projects">projects</a></li>
|
||
<li><a href="#contact">contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- ─── Hero ─────────────────────────────────────────────────── -->
|
||
<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 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">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>
|
||
</p>
|
||
<div class="hero-links">
|
||
<a href="#projects" class="btn btn-primary">View projects</a>
|
||
<a href="#contact" class="btn btn-ghost">Contact me</a>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ─── About ─────────────────────────────────────────────────── -->
|
||
<section id="about" class="about-section">
|
||
<div class="reveal">
|
||
<p class="section-label">about</p>
|
||
<h2 class="section-heading">Havox & <em>me</em></h2>
|
||
</div>
|
||
|
||
<div class="about-columns">
|
||
|
||
<!-- Bio blocks -->
|
||
<div class="about-grid reveal" style="transition-delay:0.05s">
|
||
|
||
<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.</p>
|
||
</div>
|
||
|
||
<div class="about-block">
|
||
<span class="about-block-tag tag tag-blue">day job</span>
|
||
<p>Backend engineer at <strong>Sainsbury's</strong> Supply Chain & Logistics. It's good fun.</p>
|
||
</div>
|
||
|
||
<div class="about-block">
|
||
<span class="about-block-tag tag tag-teal">dev</span>
|
||
<p>Fascinated with new languages, frameworks, and shiny tech I probably don’t need. Constantly
|
||
learning just enough to build something slightly cooler next time.</p>
|
||
</div>
|
||
|
||
<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 <s>probably</s> definitely appreciate it.</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Version timeline -->
|
||
<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 v-dot--current"></div>
|
||
<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. Professional.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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 <span class="v-link-arrow">↗</span></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'.
|
||
</div>
|
||
</div>
|
||
</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">Umbra.cyou <span class="v-link-arrow">↗</span></div>
|
||
<div class="v-year">2019 → 2022</div>
|
||
<div class="v-desc">Built from the ground up focusing on a minimal clean design. Stole my code
|
||
VS Code theme for a colour palette.
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="version-item version-item--link" href="archive/v1/index.html">
|
||
<div class="v-dot"></div>
|
||
<div class="v-content">
|
||
<div class="v-title">Havox.org <span class="v-link-arrow">↗</span></div>
|
||
<div class="v-year">2016 → 2019</div>
|
||
<div class="v-desc">Wrote the entire site in one php file. Hosted on a £1/year VPS.
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ─── 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>
|
||
|
||
<div class="skills-grid">
|
||
<div class="skill-card reveal">
|
||
<span class="skill-card-icon">☕</span>
|
||
<h3>Backend</h3>
|
||
<p>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>
|
||
<span class="tag tag-green">Spring Boot</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>Comfortable with React and CSS. I've always enjoyed visualising algorithms interactively - it's way more
|
||
fun than a console output.</p>
|
||
<div class="tag-row">
|
||
<span class="tag tag-teal">React</span>
|
||
<span class="tag tag-green">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 & Vim user. Self-hosted web & media servers. Using industry practices when it comes to
|
||
networks & security.</p>
|
||
<div class="tag-row">
|
||
<span class="tag tag-green">Linux</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 skill-card--wide reveal" style="transition-delay:0.24s">
|
||
<span class="skill-card-icon">🎓</span>
|
||
<h3>Academic Breadth</h3>
|
||
<p>C, C++, x86_64 assembly, Haskell, R & 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>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ─── 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>
|
||
<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.
|
||
</p>
|
||
|
||
<div class="projects-subheading reveal" style="transition-delay:0.12s">
|
||
<span>Featured projects</span>
|
||
</div>
|
||
|
||
<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-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>
|
||
<span class="tag-row">
|
||
<span class="tag tag-yellow">Rust</span>
|
||
<span class="tag tag-teal">React</span>
|
||
<span class="tag tag-peach">TypeScript</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</a>
|
||
<a class="card" href="https://crackthequote.umbra.mom">
|
||
<span class="card-date">13 Apr 2024</span>
|
||
<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>
|
||
<span class="tag-row">
|
||
<span class="tag tag-yellow">Rust</span>
|
||
<span class="tag tag-teal">React</span>
|
||
<span class="tag tag-green">JavaScript</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="projects-subheading reveal" style="transition-delay:0.16s">
|
||
<span>All projects</span>
|
||
</div>
|
||
|
||
<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>
|
||
<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="cpp">C / C++</button>
|
||
</fieldset>
|
||
|
||
<div id="project-grid" class="card-grid reveal" style="transition-delay:0.2s">
|
||
<article class="card project-card card-link" data-tech="python" data-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 our local pub quiz performances.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-red">Python</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="cpp webassembly"
|
||
data-href="projects/thin_ice/thin_ice.html">
|
||
<span class="card-date">14 Nov 2024</span>
|
||
<span class="card-title">Thin Ice</span>
|
||
<span class="card-desc">A small browser tile game inspired by one I played growing up.</span>
|
||
<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>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="zig webassembly" data-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 visualiser. Wanted to revisit one of my first projects but with a super optimised tech-stack & algorithm.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-yellow">Zig</span>
|
||
<span class="tag tag-sky">WebGL</span>
|
||
<span class="tag tag-teal">WebAssembly</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="rust" data-href="projects/flocking/index.html">
|
||
<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. Was fun being able to use DOM controls to affect the simulation.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-yellow">Rust</span>
|
||
<span class="tag tag-peach">Raylib</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript" data-href="https://samstoreymusic.com">
|
||
<span class="card-date">1 Nov 2023</span>
|
||
<span class="card-title">samstoreymusic.com</span>
|
||
<span class="card-desc">A website design and build for a friend working in music. Saving him the hosting fees :)</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-mauve">HTML/CSS</span>
|
||
<span class="tag tag-green">JavaScript</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript react"
|
||
data-href="projects/cellular_automata/index.html">
|
||
<span class="card-date">21 Jul 2023</span>
|
||
<span class="card-title">Game of Life</span>
|
||
<span class="card-desc">After building Conway's Game of Life in p5.js as one of my first projects, I expanded it into a generic automata simulator.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-teal">React</span>
|
||
<span class="tag tag-green">JavaScript</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="cpp webassembly"
|
||
data-href="projects/percolation/index.html">
|
||
<span class="card-date">5 Feb 2022</span>
|
||
<span class="card-title">Percolation</span>
|
||
<span class="card-desc">Watched a brilliant video by <a target="_blank"
|
||
href="https://youtu.be/a-767WnbaCQ?si=f3NM95INeoZqzIi8">Spectral Collective</a> and just had to recreate it.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-blue">C</span>
|
||
<span class="tag tag-peach">RayLib</span>
|
||
<span class="tag tag-teal">WebAssembly</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5"
|
||
data-href="projects/cubic_bezier_curve/index.html">
|
||
<span class="card-date">1 Oct 2021</span>
|
||
<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 <a
|
||
target="_blank" href="https://youtu.be/aVwxzDHniEw?si=mCylw_p-fMSdhyvN">Fraya Holmér</a></span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-green">JavaScript</span>
|
||
<span class="tag tag-red">p5.js</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5"
|
||
data-href="projects/marching_squares.html">
|
||
<span class="card-date">17 Sep 2021</span>
|
||
<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>
|
||
<span class="tag-row">
|
||
<span class="tag tag-green">JavaScript</span>
|
||
<span class="tag tag-red">p5.js</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5" data-href="projects/warping_lines.html">
|
||
<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>
|
||
<span class="tag-row">
|
||
<span class="tag tag-green">JavaScript</span>
|
||
<span class="tag tag-red">p5.js</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5" data-href="projects/fourier_series.html">
|
||
<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>
|
||
<span class="tag-row">
|
||
<span class="tag tag-green">JavaScript</span>
|
||
<span class="tag tag-red">p5.js</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5"
|
||
data-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">A geometric construction demo inspired by <a target="_blank"
|
||
href="https://youtu.be/xdIjYBtnvZU?si=uI66LS_O_eAWqG4e">3Blue1Brown's video</a> on Feynman's lost lecture.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-green">JavaScript</span>
|
||
<span class="tag tag-red">p5.js</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5"
|
||
data-href="projects/pi_approximation.html">
|
||
<span class="card-date">18 Mar 2018</span>
|
||
<span class="card-title">Calculating PI</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>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5"
|
||
data-href="projects/oscillations_in_3d.html">
|
||
<span class="card-date">17 Dec 2017</span>
|
||
<span class="card-title">Oscillations in 3D</span>
|
||
<span class="card-desc">A JavaScript recreation of a Bees and Bombs animation.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-green">JavaScript</span>
|
||
<span class="tag tag-red">p5.js</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
<article class="card project-card card-link" data-tech="javascript p5"
|
||
data-href="projects/maze_generation/index.html">
|
||
<span class="card-date">13 Nov 2017</span>
|
||
<span class="card-title">Maze generator</span>
|
||
<span class="card-desc">Discovered the <a target="_blank"
|
||
href="https://youtu.be/HyK_Q5rrcr4?si=G6g8xDHK0cc_MwhG">Coding Train's channel</a> and learnt coding through following along.</span>
|
||
<span class="tag-row">
|
||
<span class="tag tag-green">JavaScript</span>
|
||
<span class="tag tag-red">p5.js</span>
|
||
</span>
|
||
<span class="card-arrow">→</span>
|
||
</article>
|
||
</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>
|
||
|
||
<!-- ─── Contact ───────────────────────────────────────────────── -->
|
||
<section id="contact">
|
||
<p class="section-label reveal">contact</p>
|
||
<div class="contact-inner reveal" style="transition-delay:0.1s">
|
||
<div>
|
||
<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.
|
||
</p>
|
||
<p>
|
||
For professional enquiries, please contact me on LinkedIn.
|
||
</p>
|
||
</div>
|
||
<div class="contact-links">
|
||
<a href="https://github.com/jayo60013" class="contact-link" target="_blank" rel="noopener">
|
||
<span class="contact-link-icon contact-link-icon--github" aria-hidden="true"></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">
|
||
<span class="contact-link-icon contact-link-icon--linkedin" aria-hidden="true"></span>
|
||
<span class="contact-link-label">LinkedIn</span>
|
||
<span class="contact-link-handle">jaygatward</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Footer ─────────────────────────────────────────────────── -->
|
||
<footer>
|
||
<span>umbra.mom - John Gatward</span>
|
||
<span>
|
||
Source code (self‑hosted): <a href="https://gitea.umbra.mom/jay/havox">repository</a>
|
||
</span>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
|
||
</html>
|