From ed713a931d76f9de7cd1abde0360c8728688ef9a Mon Sep 17 00:00:00 2001 From: John Gatward Date: Fri, 20 Mar 2026 18:40:30 +0000 Subject: [PATCH] final polish --- index.html | 72 ++++++++++++++++++++++++++--------------------------- script.js | 43 +++++++++++++++++++++++++++++--- style.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 141 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index d033319..98b5bff 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Havox — John Gatward +

// havox.org — v4

John Gatward

-

Software Developer

+

Software Engineer

Backend engineerby trade - Full-stack developerby + Developer enthusiastby curiosity Unofficial family cloud engineerby necessity I like building useful things and understanding how they work.

- see my work - - - - - GitHub - - - - - - LinkedIn - + View projects + Contact me
@@ -108,7 +96,7 @@
Havox V4 current
2026 → present
-
Catppuccin Mocha. Single page. Trying to get a new job this time.
+
Catppuccin Mocha. Single page. Built to highlight projects and craft.
@@ -117,7 +105,7 @@
Havox V3 ↗
2022 → 2025
-
Borrowed a template. Wasn't very 'me'.
+
Borrowed a professional looking template. Wasn't very 'me'.
@@ -139,7 +127,6 @@ quote-of-the-day achieved via webscraping a site daily. - @@ -172,8 +159,7 @@ 🎨

Frontend & Creative

Comfortable with react and CSS. I enjoy visualising algorithms interactively — it's more fun than - a - console output.

+ a console output.

React TypeScript @@ -216,7 +202,7 @@

projects

Things I built

- 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. + A timeline of projects focused on technical challenge and what each build taught me.

@@ -225,10 +211,10 @@
- 9 Feb 2025 + 9 Jan 2025 Wordle Solver Built after getting frustrated after one too many missed 3-guess games. Now it - plays marginally better than me. + plays marginally better than me. Uses information theory to recommend the next best guess. Rust React @@ -239,8 +225,7 @@ 13 Apr 2024 Crack the Quote - A fun word puzzle game focused on breaking a simple substitution cipher from a - daily quote. + A substitution-cipher puzzle game with a daily challenge. Rust React @@ -257,6 +242,7 @@
+ @@ -266,6 +252,15 @@
+ +
+ +
@@ -421,11 +420,11 @@

Let's talk

- 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. + I am currently employed and open to the right software engineering opportunity, particularly + backend or full-stack roles with teams that value thoughtful delivery and technical quality.

- GitHub has the most complete picture of how I think. LinkedIn if you're formal. Either works. + For professional enquiries, please connect with me on LinkedIn.

@@ -457,8 +456,7 @@ diff --git a/script.js b/script.js index 813906f..a5f9972 100644 --- a/script.js +++ b/script.js @@ -26,26 +26,61 @@ window.addEventListener('scroll', () => { // ─── Project filters ────────────────────────────────────────────── const filterChips = document.querySelectorAll('.filter-chip'); const projectCards = document.querySelectorAll('#project-grid .project-card'); +const seeMoreButton = document.querySelector('#projects-see-more'); +const DEFAULT_VISIBLE_PROJECTS = 8; if (filterChips.length > 0 && projectCards.length > 0) { - const applyFilter = (filter) => { + let selectedFilter = 'all'; + let isExpanded = false; + + const applyFilter = () => { + const visibleCards = []; + projectCards.forEach(card => { const tech = (card.dataset.tech || '').split(/\s+/).filter(Boolean); - const shouldShow = filter === 'all' || tech.includes(filter); + const shouldShow = selectedFilter === 'all' || tech.includes(selectedFilter); card.classList.toggle('is-hidden', !shouldShow); + + if (shouldShow) { + card.classList.remove('is-collapsed'); + visibleCards.push(card); + } }); + + if (!isExpanded) { + visibleCards.slice(DEFAULT_VISIBLE_PROJECTS).forEach(card => { + card.classList.add('is-collapsed'); + }); + } + + if (seeMoreButton) { + const canExpand = visibleCards.length > DEFAULT_VISIBLE_PROJECTS; + seeMoreButton.hidden = !canExpand; + seeMoreButton.setAttribute('aria-expanded', canExpand && isExpanded ? 'true' : 'false'); + seeMoreButton.textContent = isExpanded ? 'See less' : 'See more'; + } }; filterChips.forEach(chip => { chip.addEventListener('click', () => { - const selected = chip.dataset.filter || 'all'; + selectedFilter = chip.dataset.filter || 'all'; + isExpanded = false; filterChips.forEach(other => { other.classList.toggle('active', other === chip); }); - applyFilter(selected); + applyFilter(); }); }); + + if (seeMoreButton) { + seeMoreButton.addEventListener('click', () => { + isExpanded = !isExpanded; + applyFilter(); + }); + } + + applyFilter(); } diff --git a/style.css b/style.css index 427c2e7..601f2e3 100644 --- a/style.css +++ b/style.css @@ -39,6 +39,32 @@ body { font-size: 15px; line-height: 1.7; overflow-x: hidden; + position: relative; +} + +body::before, +body::after { + content: ''; + position: fixed; + width: 36rem; + height: 36rem; + border-radius: 50%; + pointer-events: none; + z-index: -1; + filter: blur(70px); + opacity: 0.12; +} + +body::before { + top: -10rem; + right: -10rem; + background: radial-gradient(circle, var(--mauve), transparent 65%); +} + +body::after { + bottom: -14rem; + left: -12rem; + background: radial-gradient(circle, var(--blue), transparent 65%); } ::selection { background: var(--mauve); color: var(--crust); } @@ -252,6 +278,7 @@ 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); } .btn-primary:hover { background: var(--lavender); transform: translateY(-2px); } @@ -309,7 +336,6 @@ section.full-width { } .about-block:last-child { border-bottom: none; } -.about-block:hover { background: var(--surface0); } .about-block-tag { flex-shrink: 0; @@ -469,8 +495,6 @@ section.full-width { transition: background 0.2s; } -.skill-card:hover { background: var(--surface0); } - .skill-card-icon { font-size: 1.5rem; margin-bottom: 1rem; @@ -527,7 +551,11 @@ section.full-width { margin-bottom: 0.75rem; } -.section-heading em { font-style: italic; color: var(--mauve); } +.section-heading em { + font-style: italic; + color: var(--mauve); + text-shadow: 0 0 16px rgba(203,166,247,0.25); +} .section-intro { color: var(--subtext0); @@ -556,7 +584,7 @@ section.full-width { } #project-grid { - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); } #project-grid .card { @@ -602,6 +630,35 @@ section.full-width { display: none; } +.card.is-collapsed { + display: none; +} + +.projects-more-row { + margin-top: 1rem; + display: flex; + justify-content: center; +} + +.projects-more-btn { + border: 1px solid var(--surface1); + background: var(--mantle); + color: var(--subtext0); + border-radius: 999px; + padding: 0.42rem 1rem; + font-size: 0.72rem; + letter-spacing: 0.06em; + text-transform: uppercase; + font-family: 'JetBrains Mono', monospace; + cursor: pointer; + transition: all 0.2s; +} + +.projects-more-btn:hover { + border-color: var(--mauve); + color: var(--text); +} + /* ─── Card grid ────────────────────────────────────────── */ .card-grid { display: grid; @@ -638,7 +695,10 @@ section.full-width { transition: transform 0.25s; } -.card:hover { background: var(--surface0); } +.card:hover { + background: var(--surface0); + transform: translateY(-1px); +} .card:hover::before { transform: scaleY(1); } .card-date { @@ -793,6 +853,7 @@ footer a:hover { color: var(--mauve); } .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; }