Add projects and tutorials

This commit is contained in:
John Gatward
2026-03-16 18:03:17 +00:00
parent fc54c3bd4e
commit 4e94902f01
132 changed files with 19170 additions and 65 deletions

View File

@@ -125,13 +125,13 @@
<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">Havox V2 <span class="v-link-arrow"></span></div>
<div class="v-title">Umbra.cyou <span class="v-link-arrow"></span></div>
<div class="v-year">2019 → 2022</div>
<div class="v-desc">Complete redesign using SCSS & Nord theme.</div>
</div>
</a>
<a class="version-item version-item--link" href="archive/v1/index.php">
<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>
@@ -212,49 +212,6 @@
<div class="divider"></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>
<div class="card-grid reveal" style="transition-delay:0.15s">
<a class="card" href="tutorials/summed_area/summed-area.html">
<span class="card-date">3 Jan 2021</span>
<span class="card-title">Summed-area tables</span>
<span class="card-desc">Integral images — what they are, how they work, and why they're surprisingly
useful for image processing.</span>
<span class="card-arrow"></span>
</a>
<a class="card" href="terrainGen/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>
<span class="card-arrow"></span>
</a>
<a class="card" href="TSP_files/index.php">
<span class="card-date">22 Sep 2018</span>
<span class="card-title">Travelling salesperson</span>
<span class="card-desc">Different implementations of the TSP problem — a classic that never gets
old.</span>
<span class="card-arrow"></span>
</a>
<a class="card" href="jarvisMarsh/index.php">
<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>
<span class="card-arrow"></span>
</a>
</div>
</section>
<div class="divider"></div>
<!-- ─── Projects ──────────────────────────────────────────────── -->
<section id="projects">
<p class="section-label reveal">projects</p>
@@ -280,12 +237,6 @@
<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/sorting_vis.html">
<span class="card-date">11 Apr 2020</span>
<span class="card-title">Bubble sort visualiser</span>
<span class="card-desc">Bars sorted by height, one frame per loop. Classic.</span>
<span class="card-arrow"></span>
</a>
<a class="card" href="projects/warp_lines.html">
<span class="card-date">2 Apr 2020</span>
<span class="card-title">Müller-Lyer illusion</span>
@@ -298,36 +249,81 @@
<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_const.html">
<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/gameoflife.php">
<a class="card" href="projects/game_of_life.html">
<span class="card-date">2 May 2018</span>
<span class="card-title">Game of Life</span>
<span class="card-desc">A JS implementation of Conway's classic. Still fascinating.</span>
<span class="card-arrow"></span>
</a>
<a class="card" href="projects/piApprox.php">
<span class="card-date">18 Mar 2018</span>
<a class="card" href="projects/pi_approximation.html">
<span class="card-date">14 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/oscil.php">
<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. One of my oldest.</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/mazeGen.php">
<a class="card" href="projects/maze_generator/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 JS. The first project that made me think "oh, I like
this".</span>
<span class="card-desc">A maze generator in p5.js. Using DFS & recursive backtracking.</span>
<span class="card-arrow"></span>
</a>
</div>
</section>
<div class="divider"></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>
<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>
<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>
<span class="card-arrow"></span>
</a>
<a class="card" href="tutorials/convex_hull/index.html">
<span class="card-date">22 Sept 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>
<span class="card-arrow"></span>
</a>
<a class="card" href="tutorials/tsp/index.html">
<span class="card-date">14 Feb 2018</span>
<span class="card-title">Travelling Salesperson Problem</span>
<span class="card-desc">Different implementations of the TSP problem — a classic.</span>
<span class="card-arrow"></span>
</a>
</div>