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

14
index.html
View File

@@ -5,7 +5,8 @@
<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"
@@ -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>
@@ -202,7 +204,7 @@
<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>
@@ -456,7 +458,7 @@
<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>

251
style.css
View File

@@ -28,9 +28,15 @@
--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 {
@@ -280,22 +310,30 @@ section.full-width {
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); }
.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;
@@ -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 {
@@ -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;
}
}