up until what i know
This commit is contained in:
John Gatward
790
index.html
790
index.html
@@ -1,527 +1,391 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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 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"
|
||||
/>
|
||||
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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<!-- ─── 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>
|
||||
|
||||
<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>
|
||||
<p class="hero-eyebrow">// havox.org — v4</p>
|
||||
<h1 class="hero-name">John <em>Gatward</em></h1>
|
||||
<p class="hero-subtitle">Software Developer</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">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 understanding 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 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>
|
||||
|
||||
<!-- 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
|
||||
& Logistics — building microservices with Spring Boot on AWS,
|
||||
designing REST APIs, connecting services with Kafka, and storing
|
||||
data in MongoDB.
|
||||
</p>
|
||||
<div class="reveal">
|
||||
<p class="section-label">about</p>
|
||||
<h2 class="section-heading">Havox & <em>me</em></h2>
|
||||
</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 class="about-columns">
|
||||
|
||||
<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>
|
||||
<!-- Bio blocks -->
|
||||
<div class="about-grid reveal" style="transition-delay:0.05s">
|
||||
|
||||
<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 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. Microservices,
|
||||
Spring Boot, Kafka, MongoDB, AWS. It's good fun.</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 class="about-block">
|
||||
<span class="about-block-tag tag tag-teal">linux</span>
|
||||
<p>Long-time Linux user and recovering distro-hopper. Currently: Hyprland on Void. Home server
|
||||
running 24/7 for friends and family who didn't ask for it but appreciate it.</p>
|
||||
</div>
|
||||
|
||||
<div class="about-block">
|
||||
<span class="about-block-tag tag tag-yellow">teaching</span>
|
||||
<p>Tutored CS, maths and English through school and uni. Still think the best way to understand
|
||||
something is to explain it — which is why this site has tutorials.</p>
|
||||
</div>
|
||||
|
||||
<div class="about-block">
|
||||
<span class="about-block-tag tag tag-mauve">havox</span>
|
||||
<p>Started in 2017 as a place to dump whatever I found interesting. Four redesigns and several dead
|
||||
domains later, it's still going. Less a portfolio, more a paper trail.</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>
|
||||
|
||||
<!-- 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">2025 → present</div>
|
||||
<div class="v-desc">Catppuccin Mocha. Single page. Trying to get a new job this time.</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">2023 → 2025</div>
|
||||
<div class="v-desc">Borrowed a template. 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">Havox V2 <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">
|
||||
<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">2017 → 2019</div>
|
||||
<div class="v-desc">Entire site in one PHP file 🤣. Had a daily <s>trump</s>
|
||||
quote-of-the-day achieved via webscraping a site daily.</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</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 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>
|
||||
<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 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 class="skills-grid">
|
||||
<div class="skill-card reveal">
|
||||
<span class="skill-card-icon">☕</span>
|
||||
<h3>Backend</h3>
|
||||
<p>Professional Java experience building microservices & RESTful APIs with Spring Boot. TDD with
|
||||
JUnit & Mockito.</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 enjoy visualising algorithms interactively — it's more fun than
|
||||
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-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">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>
|
||||
<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 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-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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user