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>