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

formatting

Browse Source
This commit is contained in:
John Gatward
2026-03-20 18:46:38 +00:00
parent ed713a931d
commit af0cb702a2
3 changed files with 1099 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
index.html
View File

@@ -2,21 +2,22 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Havox — John Gatward</title>
<meta name="description" content="John Gatward's portfolio: software engineering projects spanning backend systems, infrastructure, and creative developer experiments." />
<meta name="description"
content="John Gatward's portfolio: software engineering projects spanning backend systems, infrastructure, and creative developer experiments."/>
<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" />
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- ─── Nav ─────────────────────────────────────────────────── -->
<nav>
<!-- ─── Nav ─────────────────────────────────────────────────── -->
<nav>
<a href="#hero" class="nav-logo">havox</a>
<ul class="nav-links">
<li><a href="#about">about</a></li>
@@ -24,10 +25,10 @@
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</nav>
<!-- ─── Hero ─────────────────────────────────────────────────── -->
<section id="hero">
<!-- ─── Hero ─────────────────────────────────────────────────── -->
<section id="hero">
<p class="hero-eyebrow">// havox.org — v4</p>
<h1 class="hero-name">John <em>Gatward</em></h1>
<p class="hero-subtitle">Software Engineer</p>
@@ -44,12 +45,12 @@
<a href="#projects" class="btn btn-primary">View projects</a>
<a href="#contact" class="btn btn-ghost">Contact me</a>
</div>
</section>
</section>
<div class="divider"></div>
<div class="divider"></div>
<!-- ─── About ─────────────────────────────────────────────────── -->
<section id="about" class="about-section">
<!-- ─── 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>
@@ -124,7 +125,8 @@
<div class="v-title">Havox.org <span class="v-link-arrow">↗</span></div>
<div class="v-year">2016 → 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>
quote-of-the-day achieved via webscraping a site daily.
</div>
</div>
</a>
</div>
@@ -132,12 +134,12 @@
</div>
</section>
</section>
<div class="divider"></div>
<div class="divider"></div>
<!-- ─── Skills ─────────────────────────────────────────────────── -->
<section id="skills">
<!-- ─── 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>
@@ -193,16 +195,16 @@
</div>
</div>
</div>
</section>
</section>
<div class="divider"></div>
<div class="divider"></div>
<!-- ─── Projects ──────────────────────────────────────────────── -->
<section id="projects">
<!-- ─── 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">
A timeline of projects focused on technical challenge and what each build taught me.
A timeline of fun projects used as an excuse to learn something new.
</p>
<div class="projects-subheading reveal" style="transition-delay:0.12s">
@@ -211,7 +213,7 @@
<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 Jan 2025</span>
<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. Uses information theory to recommend the next best guess.</span>
@@ -222,7 +224,7 @@
</span>
<span class="card-arrow">→</span>
</a>
<a class="card" href="#projects">
<a class="card" href="https://crackthequote.umbra.mom">
<span class="card-date">13 Apr 2024</span>
<span class="card-title">Crack the Quote</span>
<span class="card-desc">A substitution-cipher puzzle game with a daily challenge.</span>
@@ -409,12 +411,12 @@
<div class="projects-more-row reveal" style="transition-delay:0.22s">
<button id="projects-see-more" type="button" class="projects-more-btn" aria-expanded="false">See more</button>
</div>
</section>
</section>
<div class="divider"></div>
<div class="divider"></div>
<!-- ─── Contact ───────────────────────────────────────────────── -->
<section id="contact">
<!-- ─── Contact ───────────────────────────────────────────────── -->
<section id="contact">
<p class="section-label reveal">contact</p>
<div class="contact-inner reveal" style="transition-delay:0.1s">
<div>
@@ -432,7 +434,7 @@
<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" />
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>
@@ -442,7 +444,7 @@
<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" />
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>
@@ -450,17 +452,17 @@
</a>
</div>
</div>
</section>
</section>
<!-- ─── Footer ─────────────────────────────────────────────────── -->
<footer>
<!-- ─── Footer ─────────────────────────────────────────────────── -->
<footer>
<span>umbra.mom — John Gatward</span>
<span>
Source code repository is also self-hosted: <a href="https://gitea.umbra.mom/jay/havox">repository</a>
Source code (self‑hosted): <a href="https://gitea.umbra.mom/jay/havox">repository</a>
</span>
</footer>
</footer>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>

2
script.js
View File

@@ -7,7 +7,7 @@ const observer = new IntersectionObserver((entries) => {
observer.unobserve(e.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
}, {threshold: 0.1, rootMargin: '0px 0px -40px 0px'});
reveals.forEach(el => observer.observe(el));
// ─── Active nav link on scroll ──────────────────────────────

285
style.css
View File

@@ -3,18 +3,18 @@
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
--surface0:#313244;
--surface1:#45475a;
--surface2:#585b70;
--overlay0:#6c7086;
--overlay1:#7f849c;
--overlay2:#9399b2;
--surface0: #313244;
--surface1: #45475a;
--surface2: #585b70;
--overlay0: #6c7086;
--overlay1: #7f849c;
--overlay2: #9399b2;
--text: #cdd6f4;
--subtext0:#a6adc8;
--subtext1:#bac2de;
--lavender:#b4befe;
--subtext0: #a6adc8;
--subtext1: #bac2de;
--lavender: #b4befe;
--blue: #89b4fa;
--sapphire:#74c7ec;
--sapphire: #74c7ec;
--sky: #89dceb;
--teal: #94e2d5;
--green: #a6e3a1;
@@ -24,13 +24,19 @@
--red: #f38ba8;
--mauve: #cba6f7;
--pink: #f5c2e7;
--flamingo:#f2cdcd;
--rosewater:#f5e0dc;
--flamingo: #f2cdcd;
--rosewater: #f5e0dc;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
html {
scroll-behavior: smooth;
}
body {
background: var(--base);
@@ -67,18 +73,35 @@ body::after {
background: radial-gradient(circle, var(--blue), transparent 65%);
}
::selection { background: var(--mauve); color: var(--crust); }
::selection {
background: var(--mauve);
color: var(--crust);
}
/* ─── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mantle); }
::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mauve); }
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--mantle);
}
::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--mauve);
}
/* ─── Nav ──────────────────────────────────────────────── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
@@ -117,7 +140,9 @@ nav {
.nav-links a::after {
content: '';
position: absolute;
bottom: -3px; left: 0; right: 0;
bottom: -3px;
left: 0;
right: 0;
height: 1px;
background: var(--mauve);
transform: scaleX(0);
@@ -125,8 +150,13 @@ nav {
transition: transform 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a:hover {
color: var(--text);
}
.nav-links a:hover::after {
transform: scaleX(1);
}
/* ─── Sections ─────────────────────────────────────────── */
section {
@@ -278,24 +308,32 @@ section.full-width {
.btn-primary {
background: var(--mauve);
color: var(--crust);
box-shadow: 0 0 0 1px rgba(203,166,247,0.25), 0 10px 26px rgba(17,17,27,0.4);
box-shadow: 0 0 0 1px rgba(203, 166, 247, 0.25), 0 10px 26px rgba(17, 17, 27, 0.4);
}
.btn-primary:hover {
background: var(--lavender);
transform: translateY(-2px);
}
.btn-primary:hover { background: var(--lavender); transform: translateY(-2px); }
.btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--surface1);
}
.btn-ghost:hover { border-color: var(--mauve); color: var(--mauve); transform: translateY(-2px); }
.btn-ghost:hover {
border-color: var(--mauve);
color: var(--mauve);
transform: translateY(-2px);
}
/* Decorative grid bg */
#hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--surface0) 1px, transparent 1px),
background-image: linear-gradient(var(--surface0) 1px, transparent 1px),
linear-gradient(90deg, var(--surface0) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.18;
@@ -335,7 +373,9 @@ section.full-width {
gap: 1.25rem;
}
.about-block:last-child { border-bottom: none; }
.about-block:last-child {
border-bottom: none;
}
.about-block-tag {
flex-shrink: 0;
@@ -352,9 +392,19 @@ section.full-width {
line-height: 1.75;
}
.about-block p strong { color: var(--text); font-weight: 700; }
.about-block p em { color: var(--mauve); font-style: italic; }
.about-block p s { color: var(--overlay1); }
.about-block p strong {
color: var(--text);
font-weight: 700;
}
.about-block p em {
color: var(--mauve);
font-style: italic;
}
.about-block p s {
color: var(--overlay1);
}
.version-timeline {
display: flex;
@@ -455,7 +505,7 @@ section.full-width {
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(203,166,247,0.15);
background: rgba(203, 166, 247, 0.15);
color: var(--mauve);
padding: 0.1rem 0.45rem;
border-radius: 3px;
@@ -473,7 +523,10 @@ section.full-width {
margin-bottom: 3rem;
}
#skills h2 em { font-style: italic; color: var(--mauve); }
#skills h2 em {
font-style: italic;
color: var(--mauve);
}
.skills-grid {
display: grid;
@@ -532,15 +585,50 @@ section.full-width {
font-weight: 700;
}
.tag-blue { background: rgba(137,180,250,0.12); color: var(--blue); }
.tag-green { background: rgba(166,227,161,0.12); color: var(--green); }
.tag-peach { background: rgba(250,179,135,0.12); color: var(--peach); }
.tag-teal { background: rgba(148,226,213,0.12); color: var(--teal); }
.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); }
.tag-blue {
background: rgba(137, 180, 250, 0.12);
color: var(--blue);
}
.tag-green {
background: rgba(166, 227, 161, 0.12);
color: var(--green);
}
.tag-peach {
background: rgba(250, 179, 135, 0.12);
color: var(--peach);
}
.tag-teal {
background: rgba(148, 226, 213, 0.12);
color: var(--teal);
}
.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 {
@@ -554,7 +642,7 @@ section.full-width {
.section-heading em {
font-style: italic;
color: var(--mauve);
text-shadow: 0 0 16px rgba(203,166,247,0.25);
text-shadow: 0 0 16px rgba(203, 166, 247, 0.25);
}
.section-intro {
@@ -621,8 +709,8 @@ section.full-width {
}
.filter-chip.active {
background: rgba(203,166,247,0.18);
border-color: rgba(203,166,247,0.7);
background: rgba(203, 166, 247, 0.18);
border-color: rgba(203, 166, 247, 0.7);
color: var(--mauve);
}
@@ -686,7 +774,8 @@ section.full-width {
.card::before {
content: '';
position: absolute;
top: 0; left: 0;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--mauve);
@@ -699,7 +788,10 @@ section.full-width {
background: var(--surface0);
transform: translateY(-1px);
}
.card:hover::before { transform: scaleY(1); }
.card:hover::before {
transform: scaleY(1);
}
.card-date {
font-size: 0.68rem;
@@ -714,7 +806,9 @@ section.full-width {
transition: color 0.2s;
}
.card:hover .card-title { color: var(--mauve); }
.card:hover .card-title {
color: var(--mauve);
}
.card-desc {
font-size: 0.8rem;
@@ -731,7 +825,10 @@ section.full-width {
margin-top: 0.5rem;
}
.card:hover .card-arrow { color: var(--mauve); transform: translateX(3px); }
.card:hover .card-arrow {
color: var(--mauve);
transform: translateX(3px);
}
/* ─── Contact ──────────────────────────────────────────── */
#contact {
@@ -758,7 +855,10 @@ section.full-width {
margin-bottom: 1rem;
}
.contact-inner h2 em { font-style: italic; color: var(--mauve); }
.contact-inner h2 em {
font-style: italic;
color: var(--mauve);
}
.contact-inner p {
color: var(--subtext0);
@@ -819,13 +919,25 @@ footer {
color: var(--overlay0);
}
footer a { color: var(--overlay1); text-decoration: none; }
footer a:hover { color: var(--mauve); }
footer a {
color: var(--overlay1);
text-decoration: none;
}
footer a:hover {
color: var(--mauve);
}
/* ─── Animations ───────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal {
@@ -849,16 +961,55 @@ footer a:hover { color: var(--mauve); }
/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
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; }
#project-grid { grid-template-columns: 1fr; }
.about-columns { grid-template-columns: 1fr; }
.about-block-tag { width: 4rem; }
.skills-grid { grid-template-columns: 1fr; }
.skill-card--wide { grid-column: 1; }
.contact-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
.hero-name { font-size: clamp(2.8rem, 12vw, 5rem); }
footer { flex-direction: column; gap: 0.5rem; text-align: center; }
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;
}
#project-grid {
grid-template-columns: 1fr;
}
.about-columns {
grid-template-columns: 1fr;
}
.about-block-tag {
width: 4rem;
}
.skills-grid {
grid-template-columns: 1fr;
}
.skill-card--wide {
grid-column: 1;
}
.contact-inner {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem;
}
.hero-name {
font-size: clamp(2.8rem, 12vw, 5rem);
}
footer {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}