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

first draft

Browse Source
This commit is contained in:
Jay
2026-03-10 23:03:45 +00:00
parent 2d6ae6db8d
commit 0d7904a8de
13 changed files with 1340 additions and 908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

616
index.html
View File

@@ -1,123 +1,527 @@
<html>
<title>Havox</title>
<script src="https://kit.fontawesome.com/ad50eeab11.js" crossorigin="anonymous"></script>
<link href='index_style.css' rel='stylesheet' type='text/css'>
<nav class="nav">
<a href="#s1" class="active">Havox V2</a>
<a href="#s2">Tutorials</a>
<a href="#s3">Projects</a>
<a href="#s1">Intro</a>
</nav>
<h1>Havox.org V2</h1>
<article id="s1">
<h2>About havox&nbsp<i class="far fa-address-card"></i></h2>
<p>This is havox - havox is a collection of my projects and tutorials that I've written over the years. The tutorials written are more to consolidate my knowledge of whatever I've been working on however if they help even one person, I'll consider that a win.</p>
<p>Feel free to check out any of my <span class="nav"><a href="#s2">tutorials</a></span> or one of my various js <span class="nav"><a href="#s3">projects</a></span></p>
<p><b>Why V2?</b></p>
<p>
This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a chronic case of spaghetti code. An update with: neater <strike>and better</strike> code, updated theming and overall cleaner UI was long overdue.
</p>
<p><b>Why is Havox on umbra.cyou?</b></p>
<p>Havox has domain hopped a fair bit since 2017 (where it used to be hosted on jayomayo.host - lol) however since losing the <code>havox.org</code> domain, I will be using <code>umbra.cyou</code> for the foreseeable future</p>
<h2>Daily Trump Quote</h2>
<p><?=$quote;?></p>
</article>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Havox — John Gatward</title>
<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="#tutorials">tutorials</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
<article id="s2">
<h2>Tutorials&nbsp<i class="fas fa-code"></i></h2>
<div onclick="window.location='imgTut/summed-area.html'" class="tut_box">
<p class="tut_date">3 Jan 2021</p>
<a href="imgTut/summed-area.html" class="tutName">Summed area tables</a>
<p>This tutorial looks at intergral images and how they're useful.</p>
</div>
<!-- ─── Hero ─────────────────────────────────────────────────── -->
<section id="hero">
<p class="hero-eyebrow">// havox — 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>
<div onclick="window.location='terrainGen/index.html'" class="tut_box">
<p class="tut_date">3 Feb 2019</p>
<a href="terrainGen/index.html" class="tutName">Midpoint displacement terrain generation</a>
<p>This tutorial looks at generating random and natural looking 2D terrains.</p>
</div>
<span class="hero-by-line">
<span class="hero-by">Full-stack developer</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 figuring 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>
</div>
</section>
<div onclick="window.location='jarvisMarsh/index.php'" class="tut_box">
<p class="tut_date">14 Feb 2018</p>
<a href="jarvisMarsh/index.php" class="tutName">Convex hull Generator</a>
<p>This tutorial looks at wrapping algorithms.</p>
</div>
<div class="divider"></div>
<div onclick="window.location='TSP_files/index.php'" class="tut_box">
<p class="tut_date">22 Sep 2018</p>
<a href="TSP_files/index.php" class="tutName">Travelling sales person</a>
<p>This tutorial looks at different implementations of the TSP problem and how different solutions can be implemented.</p>
</div>
</article>
<!-- ─── 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>
<article id="s3">
<h2>Projects&nbsp<i class="fas fa-code"></i></h2>
<p>Please note a lot of these projects use <code>mouseClicked()</code> functions which don't work with mobile :(</p>
<!-- Bio blocks -->
<div class="about-grid">
<div class="about-block reveal" style="transition-delay: 0.05s">
<span class="about-block-tag tag tag-blue">day job</span>
<p>
CS graduate from the University of Nottingham (2022), now working as
a backend engineer at <strong>Sainsbury's</strong> Supply Chain
&amp; Logistics — building microservices with Spring Boot on AWS,
designing REST APIs, connecting services with Kafka, and storing
data in MongoDB.
</p>
</div>
<div onclick="window.location='projects/drawing_curves/index.html'" class="tut_box">
<p class="tut_date">1 Oct 2021</p>
<a class="tutName">Drawing bezier curves</a>
<p>An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to place points.</p>
</div>
<div class="about-block reveal" style="transition-delay: 0.1s">
<span class="about-block-tag tag tag-green">home infra</span>
<p>
I run a home server that hosts media and projects for friends and
family. I enjoy building things that feel solid and useful — from
small games like
<em>Crack the Quote</em> to websites and services running on my own
hardware.
</p>
</div>
<div onclick="window.location='projects/marching_squares.html'" class="tut_box">
<p class="tut_date">23 Sept 2021</p>
<a class="tutName">2D Marching Squares</a>
<p>A demonstration of marching squares, click a tile to edit the terrain.</p>
</div>
<div class="about-block reveal" style="transition-delay: 0.15s">
<span class="about-block-tag tag tag-teal">linux</span>
<p>
Long-time Linux user. Used to distro-hop obsessively and be deep in
the ricing community — these days it's Hyprland on Void Linux and a
growing collection of scripts that make the day job easier.
</p>
</div>
<div onclick="window.location='projects/sorting_vis.html'" class="tut_box">
<p class="tut_date">11 Apr 2020</p>
<a class="tutName">Bubble sort visualiser</a>
<p>A classic bubble sort visualiser where bars are sorted by height. One frame being one loop.</p>
</div>
<div class="about-block reveal" style="transition-delay: 0.2s">
<span class="about-block-tag tag tag-yellow">teaching</span>
<p>
I tutored during school and university — CS, maths, English.
Teaching stuck with me. Explaining things clearly is a skill, and
it's why I also write tutorials here.
</p>
</div>
<div onclick="window.location='projects/warp_lines.html'" class="tut_box">
<p class="tut_date">2 Apr 2020</p>
<a class="tutName">Warping lines illusion</a>
<p>A visualisation of the <a class="out_link" href="https://en.wikipedia.org/wiki/M%C3%BCller-Lyer_illusion#:~:text=The%20M%C3%BCller%2DLyer%20illusion%20is,consisting%20of%20three%20stylized%20arrows.&text=The%20fins%20can%20point%20inwards,the%20arrow%20with%20two%20heads.">M&uuml;ller-Lyer</a> illusion shown in js</p>
</div>
<div
class="about-block about-block--wide reveal"
style="transition-delay: 0.25s"
>
<span class="about-block-tag tag tag-mauve">havox</span>
<p>
Havox started as a place to document whatever I found cool —
tutorials, visualisations, experiments. It's been running in some
form since 2017, gone through four major redesigns, and outlasted
several domains. It represents my entire journey through technology,
and it's still going.
</p>
</div>
</div>
<div onclick="window.location='projects/fourier_series.html'" class="tut_box">
<p class="tut_date">27 Feb 2019</p>
<a class="tutName">Fourier Series</a>
<p>A project showing how a square wave can be made with just sin waves.</p>
</div>
<!-- Version timeline -->
<div class="reveal" style="transition-delay: 0.3s">
<p class="section-label" style="margin-top: 3.5rem">version history</p>
<div class="version-timeline">
<div class="version-item">
<div class="v-dot"></div>
<div class="v-content">
<div class="v-title">Havox V4 — this one</div>
<div class="v-year">2025 → present</div>
<div class="v-desc">
Catppuccin Mocha. Single page. Trying to get a new job this
time.
</div>
</div>
</div>
<div class="version-item">
<div class="v-dot"></div>
<div class="v-content">
<div class="v-title">Havox V3</div>
<div class="v-year">2023 → 2025</div>
<div class="v-desc">
Borrowed a template. Nord theme. Took SCSS seriously. Considered
mobile widths.
</div>
</div>
</div>
<div class="version-item">
<div class="v-dot"></div>
<div class="v-content">
<div class="v-title">Havox V2</div>
<div class="v-year">2019 → 2022</div>
<div class="v-desc">
First SCSS project. First site on own hardware — a Debian box
running nginx. Nord theme.
</div>
</div>
</div>
<div class="version-item">
<div class="v-dot"></div>
<div class="v-content">
<div class="v-title">Havox.org</div>
<div class="v-year">2017 → 2019</div>
<div class="v-desc">
Entire site in one PHP file 🤣. Had a Python quote-of-the-day
via cronjob though. <s>Counts.</s>
</div>
</div>
</div>
</div>
</div>
</section>
<div onclick="window.location='projects/ellipse_const.html'" class="tut_box">
<p class="tut_date">23 Feb 2019</p>
<a class="tutName">Constructing an ellispse</a>
<p>A visualisation of how an ellipse can be constructed with a circle and radial lines. <a class="out_link" href="https://twitter.com/3blue1brown/status/1016936129117937664?lang=en">inspo</a></p>
</div>
<div class="divider"></div>
<div onclick="window.location='projects/gameoflife.php'" class="tut_box">
<p class="tut_date">2 May 2018</p>
<a class="tutName">Game of Life</a>
<p>A js implementation of the classic Game of Life - John Conway.</p>
</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 onclick="window.location='projects/piApprox.php'" class="tut_box">
<p class="tut_date">18 Mar 2018</p>
<a class="tutName">Calculating PI</a>
<p>A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.</p>
</div>
<div class="skills-grid">
<div class="skill-card reveal">
<span class="skill-card-icon">☕</span>
<h3>Backend</h3>
<p>
Professional Java experience building RESTful APIs with Spring Boot.
Testing with JUnit & Mockito. Data persistence with MySQL, H2, JDBC.
</p>
<div class="tag-row">
<span class="tag tag-blue">Java</span>
<span class="tag tag-green">Spring Boot</span>
<span class="tag tag-peach">REST</span>
<span class="tag tag-teal">JUnit</span>
<span class="tag tag-sky">MySQL</span>
</div>
</div>
<div class="skill-card reveal" style="transition-delay: 0.08s">
<span class="skill-card-icon">🌐</span>
<h3>Frontend & Creative</h3>
<p>
JavaScript, p5.js, HTML/CSS/Scss. I enjoy visualising algorithms
interactively — it's more fun than a console output.
</p>
<div class="tag-row">
<span class="tag tag-yellow">JavaScript</span>
<span class="tag tag-peach">p5.js</span>
<span class="tag tag-mauve">Scss</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 user. Self-hosted web & media servers. Comfortable
with networking, security practices, and the command line.
</p>
<div class="tag-row">
<span class="tag tag-green">Linux</span>
<span class="tag tag-teal">nginx</span>
<span class="tag tag-sky">Networking</span>
<span class="tag tag-peach">Self-hosting</span>
</div>
</div>
<div class="skill-card reveal" style="transition-delay: 0.24s">
<span class="skill-card-icon">🎓</span>
<h3>Academic Breadth</h3>
<p>
C, C++, Haskell from uni. Coursework across Android dev, distributed
systems, graphics, cryptography, malware analysis.
</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>
</div>
</div>
</div>
</section>
<div onclick="window.location='projects/oscil.php'" class="tut_box">
<p class="tut_date">17 Dec 2017</p>
<a class="tutName">Oscillations in 3D</a>
<p>A js implementation of <a class="out_link" href="https://twitter.com/beesandbombs/status/940639806522085376">Bees and Bomb's gif.</a></p>
</div>
<div class="divider"></div>
<div onclick="window.location='projects/mazeGen.php'" class="tut_box">
<p class="tut_date">13 Nov 2017</p>
<a class="tutName">Maze Generator</a>
<p>A maze generator built in js.</p>
</div>
</article>
<!-- ─── 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>
<article class="margin" id="s4">
<h2>Credits</h2>
<p>Thank you to @uixmat for inspiration <strike>and some code</strike> for this webpage, check out his <a href="https://twitter.com/uixmat/" target="_blank">twitter</a>.</p>
<p>Also shoutout to <a href="https://www.youtube.com/user/shiffman">Daniel Shiffman</a> and the <a href="https://p5js.org">P5 team</a>. P5 is used extensively in these tutorials & projects</p>
</article>
<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>
<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">
Mostly p5.js — visualising algorithms in ways that look more interesting
than they have any right to. Most use
<code
style="
background: var(--surface0);
color: var(--peach);
padding: 1px 5px;
border-radius: 3px;
font-size: 0.8em;
"
>mouseClicked()</code
>
so desktop only, sorry mobile.
</p>
<div class="card-grid reveal" style="transition-delay: 0.15s">
<a class="card" href="projects/drawing_curves/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">23 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/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>
<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_const.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">
<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>
<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">
<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-arrow">→</span>
</a>
<a class="card" href="projects/mazeGen.php">
<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-arrow">→</span>
</a>
</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'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.
</p>
<p>
GitHub has the most complete picture of how I think. LinkedIn if
you're formal. Either works.
</p>
</div>
<div class="contact-links">
<a
href="https://github.com/jayo60013"
class="contact-link"
target="_blank"
rel="noopener"
>
<span class="contact-link-icon">
<svg
width="18"
height="18"
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>
</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">
<svg
width="18"
height="18"
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>
</span>
<span class="contact-link-label">LinkedIn</span>
<span class="contact-link-handle">jaygatward</span>
</a>
</div>
</div>
</section>
<!-- ─── Footer ─────────────────────────────────────────────────── -->
<footer>
<span>havox.org — 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
>.
</span>
</footer>
<script src="script.js"></script>
</body>
</html>