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

Enhance projects

Browse Source
This commit is contained in:
John Gatward
2026-03-19 16:08:39 +00:00
parent 3cb8d5a14e
commit 2646321ad9
3 changed files with 274 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
index.html
View File

@@ -20,7 +20,6 @@
<ul class="nav-links">
<li><a href="#about">about</a></li>
<li><a href="#skills">skills</a></li>
<li><a href="#tutorials">tutorials</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
@@ -176,8 +175,8 @@
a
console output.</p>
<div class="tag-row">
<span class="tag tag-yellow">React.js</span>
<span class="tag tag-peach">TypeScript</span>
<span class="tag tag-teal">React</span>
<span class="tag tag-green">TypeScript</span>
<span class="tag tag-blue">HTML/CSS</span>
</div>
</div>
@@ -217,137 +216,197 @@
<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">
Recent projects & things I found interesting. I have gone to painstaking lengths to not edit my older
projects... we all start somewhere.
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.
</p>
<div class="card-grid reveal" style="transition-delay:0.15s">
<a class="card" 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 tile game created inspired by a childhood game.</span>
<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 getting frustrated after one too many missed 3-guess games. Now it
plays marginally better than me.</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="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* Pathfinding algorithm, backend in zig, rendered with WebGL.</span>
<span class="card-arrow">→</span>
</a>
<a class="card" href="projects/flocking/index.html">
<span class="card-date">31 Jan 2024</span>
<span class="card-title">Flocking</span>
<span class="card-desc">A flocking simulator, inspired by The Coding Train's video.</span>
<span class="card-arrow">→</span>
</a>
<a class="card" 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 previously implementing game of life in p5.js, I implemented a generic
simulator, for more obsquere automata.</span>
<span class="card-arrow">→</span>
</a>
<a class="card" href="projects/percolation/index.html">
<span class="card-date">5 Feb 2022</span>
<span class="card-title">Percolation</span>
<span class="card-desc">A small demonstration to show liquid percolating through a medium as more cracks
appear - and at what p value this happens.</span>
<span class="card-arrow">→</span>
</a>
<a class="card" 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">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">17 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-arrow">→</span>
</a>
<a class="card" 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">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-arrow">→</span>
</a>
<a class="card" 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">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/pi_approximation.html">
<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-arrow">→</span>
</a>
<a class="card" 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">JS implementation of a Bees and Bombs gif.</span>
<span class="card-arrow">→</span>
</a>
<a class="card" 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">A maze generator in p5.js. Using DFS & recursive backtracking.</span>
<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="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>
</section>
<div class="divider"></div>
<div class="projects-subheading reveal" style="transition-delay:0.16s">
<span>All projects</span>
</div>
<!-- ─── 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>
<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.
</p>
<p class="section-intro reveal" style="transition-delay:0.1s">
Had to really try my best to not touch anything here. Every tutorial here is exacty how it was when I wrote
it in sixth form.
</p>
<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="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 class="card-grid reveal" style="transition-delay:0.15s">
<a class="card" href="tutorials/summed_area/index.html">
<span class="card-date">3 Jan 2021</span>
<span class="card-title">Summed-area tables</span>
<span class="card-desc">Counting cells in a summed-area table, investigating how they work and why
they're efficient.</span>
<div id="project-grid" class="card-grid reveal" style="transition-delay:0.2s">
<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>
<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>
</a>
<a class="card" href="tutorials/midpoint_displacement/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>
<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="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>
</a>
<a class="card" href="tutorials/convex_hull/index.html">
<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>
<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="tag-row">
<span class="tag tag-yellow">Rust</span>
<span class="tag tag-peach">Raylib</span>
</span>
<span class="card-arrow">→</span>
</a>
<a class="card" href="tutorials/tsp/index.html">
<span class="card-date">22 Sept 2018</span>
<span class="card-title">Travelling Salesperson Problem</span>
<span class="card-desc">Different implementations of the TSP problem — a classic.</span>
<a class="card project-card" data-tech="javascript" 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.</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>
</a>
<a class="card project-card" data-tech="javascript react" 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, 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>
</a>
<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="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>
</a>
<a class="card project-card" data-tech="javascript p5" 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 diagram for cubic Bézier curves.</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>
</a>
<a class="card project-card" data-tech="javascript p5" 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">Basic map rendering.</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>
</a>
<a class="card project-card" data-tech="javascript p5" 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">A 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>
</a>
<a class="card project-card" data-tech="javascript p5" 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>
</a>
<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="tag-row">
<span class="tag tag-green">JavaScript</span>
<span class="tag tag-red">p5.js</span>
</span>
<span class="card-arrow">→</span>
</a>
<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="tag-row">
<span class="tag tag-green">JavaScript</span>
<span class="tag tag-red">p5.js</span>
</span>
<span class="card-arrow">→</span>
</a>
<a class="card project-card" data-tech="javascript p5" 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>
</a>
<a class="card project-card" data-tech="javascript p5" 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">A p5.js maze generator using depth-first search and recursive backtracking.</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>
</a>
</div>
@@ -396,12 +455,10 @@
<!-- ─── Footer ─────────────────────────────────────────────────── -->
<footer>
<span>havox.org — John Gatward</span>
<span>umbra.mom — 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>.
Shiffman</a> & the <a href="https://p5js.org" target="_blank" rel="noopener">p5.js team</a> for starting this obsession.
</span>
</footer>

27
script.js
View File

@@ -22,3 +22,30 @@ window.addEventListener('scroll', () => {
a.style.color = a.getAttribute('href') === `#${current}` ? 'var(--mauve)' : '';
});
});
// ─── Project filters ──────────────────────────────────────────────
const filterChips = document.querySelectorAll('.filter-chip');
const projectCards = document.querySelectorAll('#project-grid .project-card');
if (filterChips.length > 0 && projectCards.length > 0) {
const applyFilter = (filter) => {
projectCards.forEach(card => {
const tech = (card.dataset.tech || '').split(/\s+/).filter(Boolean);
const shouldShow = filter === 'all' || tech.includes(filter);
card.classList.toggle('is-hidden', !shouldShow);
});
};
filterChips.forEach(chip => {
chip.addEventListener('click', () => {
const selected = chip.dataset.filter || 'all';
filterChips.forEach(other => {
other.classList.toggle('active', other === chip);
});
applyFilter(selected);
});
});
}

68
style.css
View File

@@ -515,6 +515,8 @@ section.full-width {
.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-red { background: rgba(243,139,168,0.12); color: var(--red); }
.tag-pink { background: rgba(245,194,231,0.12); color: var(--pink); }
/* ─── Tutorials / Projects shared ─────────────────────── */
.section-heading {
@@ -535,6 +537,71 @@ section.full-width {
margin-bottom: 3rem;
}
.projects-subheading {
margin: 0 0 0.9rem;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mauve);
}
.card-grid.card-grid--featured {
margin-bottom: 2rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#projects .section-intro {
margin-bottom: 1.8rem;
max-width: 640px;
}
#project-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
#project-grid .card {
padding: 1.2rem;
}
.project-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
border: none;
padding: 0;
min-width: 0;
margin-bottom: 1.25rem;
}
.filter-chip {
border: 1px solid var(--surface1);
background: var(--mantle);
color: var(--subtext0);
border-radius: 999px;
padding: 0.32rem 0.8rem;
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
font-family: 'JetBrains Mono', monospace;
cursor: pointer;
transition: all 0.2s;
}
.filter-chip:hover {
border-color: var(--mauve);
color: var(--text);
}
.filter-chip.active {
background: rgba(203,166,247,0.18);
border-color: rgba(203,166,247,0.7);
color: var(--mauve);
}
.card.is-hidden {
display: none;
}
/* ─── Card grid ────────────────────────────────────────── */
.card-grid {
display: grid;
@@ -725,6 +792,7 @@ footer a:hover { color: var(--mauve); }
nav { padding: 0 1.5rem; }
.nav-links { gap: 1.2rem; }
section { padding: 6rem 1.5rem 4rem; }
.card-grid.card-grid--featured { grid-template-columns: 1fr; }
.about-columns { grid-template-columns: 1fr; }
.about-block-tag { width: 4rem; }
.skills-grid { grid-template-columns: 1fr; }