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

BIN
.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc
View File

Binary file not shown.

BIN
.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc
View File

Binary file not shown.

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>

117
index_style.css
View File

@@ -1,117 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box; }
html, body {
font-family: "Roboto", sans-serif;
background: #eceff4;
padding: 80px 30px 30px;
color: #444;
height: 100%; }
ol, ul {
margin: 0 0 50px 0; }
ul {
position: relative;
width: 75%;
margin: 100px auto 0;
padding: 10px;
box-sizing: border-box; }
ul li {
display: flex;
background: red; }
h1 {
color: #2e3440;
font-size: 48px; }
h2 {
color: #2e3440;
font-size: 28px; }
p {
line-height: 1.6em;
margin-bottom: 10px;
font-size: 20px;
padding: 0; }
p:last-child {
margin-bottom: 40px; }
code {
background: #f8f8f8;
color: #d64f9b;
border: 1px solid #eee;
padding: 2px;
border-radius: 3px; }
a {
font-size: 22px;
font-weight: bold;
color: #88c0d0;
text-decoration: none;
transition: all 200ms; }
a:hover, a:focus {
color: #ebcb8b; }
article {
margin-bottom: 50px; }
article .margin {
margin-bottom: 100vh; }
nav {
display: flex;
width: 100%;
top: 0;
left: 0;
background: #3b4252;
position: fixed;
padding: 30px; }
nav a {
display: inline-flex;
padding: 20px 30px;
color: #eceff4;
text-decoration: none; }
nav a:hover, nav a:focus {
color: #ebcb8b; }
nav a.active {
color: #88c0d0; }
.tut_box {
border: 2px solid #3b4252;
border-radius: 5px;
margin-bottom: 10px;
padding: 5px; }
.tut_box:hover {
background-color: #3b4252;
color: #eceff4; }
.tut_box:hover a {
color: #ebcb8b; }
.tut_box:hover .out_link {
color: #8fbcbb; }
.tut_box p {
padding: 0px;
margin: 0px; }
.tut_box .tut_date {
float: right;
position: relative;
top: 0px;
right: 0px;
text-align: right; }
.tutName {
font-weight: bold;
color: #8fbcbb;
font-size: 22px; }
.tutName:hover {
color: #ebcb8b; }
.out_link {
font-weight: bold;
color: #4c566a;
text-decoration: none;
padding: 5px, 5px;
font-size: 19px; }
/*# sourceMappingURL=index_style.css.map */

7
index_style.css.map
View File

@@ -1,7 +0,0 @@
{
"version": 3,
"mappings": "AAAQ,2EAAmE;AAE3E,CAAE;EAAE,UAAU,EAAE,UAAU;;AAO1B,UAAW;EACT,WAAW,EAAE,oBAAoB;EACjC,UAAU,ECsIJ,OAAO;EDrIb,OAAO,EAAE,cAAc;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAGd,MAAO;EACL,MAAM,EAAE,UAAU;;AAGpB,EAAG;EACD,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,YAAY;EACpB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;;AAGxB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,GAAG;;AAGjB,EAAG;EACA,KAAK,ECEA,OAAO;EDDZ,SAAS,EAAE,IAAI;;AAGlB,EAAG;EACD,KAAK,ECHC,OAAO;EDIb,SAAS,EAAE,IAAI;;AAGjB,CAAE;EACA,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,CAAC;EACV,YAAa;IACX,aAAa,EAAE,IAAI;;AAIvB,IAAK;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,cAAc;EACtB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGpB,CAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,ECuGC,OAAO;EDtGb,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,SAAS;EACrB,gBACO;IACL,KAAK,ECiJA,OAAO;;AD7IhB,OAAQ;EACN,aAAa,EAAE,IAAI;EACnB,eAAQ;IACN,aAAa,EAAE,KAAK;;AAIxB,GAAI;EACF,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,UAAU,ECvCJ,OAAO;EDwCb,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,KAAE;IACA,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,ECqDD,OAAO;IDpDX,eAAe,EAAE,IAAI;IACrB,wBACQ;MACN,KAAK,ECuHF,OAAO;IDrHZ,YAAS;MACP,KAAK,ECqEH,OAAO;;ADhEf,QAAS;EACP,MAAM,EAAE,iBAAgB;EACxB,aAAa,EAAE,GAAG;EAClB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;EAEZ,cAAQ;IACN,gBAAgB,EChEZ,OAAO;IDiEX,KAAK,ECiCD,OAAO;IDhCX,gBAAE;MACA,KAAK,ECqGF,OAAO;IDnGZ,wBAAS;MACP,KAAK,ECqCH,OAAO;EDlCb,UAAE;IACA,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;EAGb,kBAAU;IACR,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,GAAG;IACV,UAAU,EAAE,KAAK;;AAIrB,QAAS;EACP,WAAW,EAAE,IAAI;EACjB,KAAK,ECkBC,OAAO;EDjBb,SAAS,EAAE,IAAI;EACf,cAAQ;IACN,KAAK,EC4EA,OAAO;;ADxEhB,SAAU;EACR,WAAW,EAAE,IAAI;EACjB,KAAK,ECzCC,OAAO;ED0Cb,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,IAAI",
"sources": ["style.scss","nord.scss"],
"names": [],
"file": "index_style.css"
}

235
nord.scss
View File

@@ -1,235 +0,0 @@
// Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
// Copyright (c) 2016-present Sven Greb <development@svengreb.de>
// Project: Nord
// Version: 0.2.0
// Repository: https://github.com/arcticicestudio/nord
// License: MIT
// References:
// http://sass-lang.com
// http://sassdoc.com
////
/// An arctic, north-bluish color palette.
/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
/// highlighting and UI.
/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
/// ambiance.
///
/// @author Arctic Ice Studio <development@arcticicestudio.com>
////
/// Base component color of "Polar Night".
///
/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
///
/// @access public
/// @example scss - SCSS
/// /* For dark ambiance themes */
/// .background {
/// background-color: $nord0;
/// }
/// /* For light ambiance themes */
/// .text {
/// color: $nord0;
/// }
/// @group polarnight
/// @since 0.1.0
$nord0: #2e3440;
/// Lighter shade color of the base component color.
///
/// Used as a lighter background color for UI elements like status bars.
///
/// @access public
/// @group polarnight
/// @see $nord0
/// @since 0.1.0
$nord1: #3b4252;
/// Lighter shade color of the base component color.
///
/// Used as line highlighting in the editor.
/// In the UI scope it may be used as selection- and highlight color.
///
/// @access public
/// @example scss - SCSS
/// /* Code Syntax Highlighting scope */
/// .editor {
/// &.line {
/// background-color: $nord2;
/// }
/// }
///
/// /* UI scope */
/// button {
/// &:selected {
/// background-color: $nord2;
/// }
/// }
/// @group polarnight
/// @see $nord0
/// @since 0.1.0
$nord2: #434c5e;
/// Lighter shade color of the base component color.
///
/// Used for comments, invisibles, indent- and wrap guide marker.
/// In the UI scope used as pseudoclass color for disabled elements.
///
/// @access public
/// @example scss - SCSS
/// /* Code Syntax Highlighting scope */
/// .editor {
/// &.indent-guide,
/// &.wrap-guide {
/// &.marker {
/// color: $nord3;
/// }
/// }
/// }
/// .comment,
/// .invisible {
/// color: $nord3;
/// }
///
/// /* UI scope */
/// button {
/// &:disabled {
/// background-color: $nord3;
/// }
/// }
/// @group polarnight
/// @see $nord0
/// @since 0.1.0
$nord3: #4c566a;
/// Base component color of "Snow Storm".
///
/// Main color for text, variables, constants and attributes.
/// In the UI scope used as semi-light background depending on the theme shading design.
///
/// @access public
/// @example scss - SCSS
/// /* For light ambiance themes */
/// .background {
/// background-color: $nord4;
/// }
/// /* For dark ambiance themes */
/// .text {
/// color: $nord4;
/// }
/// @group snowstorm
/// @since 0.1.0
$nord4: #d8dee9;
/// Lighter shade color of the base component color.
///
/// Used as a lighter background color for UI elements like status bars.
/// Used as semi-light background depending on the theme shading design.
///
/// @access public
/// @group snowstorm
/// @see $nord4
/// @since 0.1.0
$nord5: #e5e9f0;
/// Lighter shade color of the base component color.
///
/// Used for punctuations, carets and structuring characters like curly- and square brackets.
/// In the UI scope used as background, selection- and highlight color depending on the theme shading design.
///
/// @access public
/// @group snowstorm
/// @see $nord4
/// @since 0.1.0
$nord6: #eceff4;
/// Bluish core color.
///
/// Used for classes, types and documentation tags.
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord7: #8fbcbb;
/// Bluish core accent color.
///
/// Represents the accent color of the color palette.
/// Main color for primary UI elements and methods/functions.
///
/// Can be used for
/// - Markup quotes
/// - Markup link URLs
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord8: #88c0d0;
/// Bluish core color.
///
/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
/// punctuations like (semi)colons,commas and braces.
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord9: #81a1c1;
/// Bluish core color.
///
/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord10: #5e81ac;
/// Colorful component color.
///
/// Used for errors, git/diff deletion and linter marker.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord11: #bf616a;
/// Colorful component color.
///
/// Used for annotations.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord12: #d08770;
/// Colorful component color.
///
/// Used for escape characters, regular expressions and markup entities.
/// In the UI scope used for warnings and git/diff renamings.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord13: #ebcb8b;
/// Colorful component color.
///
/// Main color for strings and attribute values.
/// In the UI scope used for git/diff additions and success visualizations.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord14: #a3be8c;
/// Colorful component color.
///
/// Used for numbers.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord15: #b48ead;

144
old/index.html
View File

@@ -1,144 +0,0 @@
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src="https://kit.fontawesome.com/ad50eeab11.js" crossorigin="anonymous"></script>
<link href='style.css' rel='stylesheet' type='text/css'>
<nav class="nav">
<a href="#s1" class="active">Havox V2</a>
<a href="#s1">Intro</a>
<a href="#s2">Tutorials</a>
<a href="#s3">Projects</a>
</nav>
<h3>Havox.org V2</h3>
<article id = "s1">
<h1>About havox&nbsp<i class="far fa-address-card"></i></h1>
<p>This is havox - idk rlry know what havox is but isss whatever</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>Comrades</b></p>
<p>
The Union of the indestructible republics of the free ones
The Great Russia has forever consolidated itself.
Long live the people created by the will of the people
A single, mighty Soviet Union!
</p>
<p>
Be glorious, our free Fatherland,
Friendship, peoples a reliable stronghold!
The Soviet banner, the banner of the people
Let it lead from victory to victory!
</p>
<p>
Through the thunderstorms the sun of freedom shone,
And Lenin, the great one, illumined our way.
We were brought up by Stalin - to be faithful to the people.
We were inspired by work and deeds.
</p>
<p>
Be glorious, Fatherland freer,
Happiness of peoples reliable stronghold!
The Soviet banner, the banner of the people
Let it lead from victory to victory!
</p>
<p>
We raised our army in the battles,
The invaders of the vile from the road are estimated!
We are in the battles to decide the fate of generations,
We will lead our glory to our Fatherland!
</p>
<p>
Be glorious, our free Fatherland,
the glory of peoples is a reliable stronghold!
The Soviet banner, the banner of the people
Let it lead from victory to victory!
</p>
<p>
The Union of the indestructible republics of the free ones
The Great Russia has forever consolidated itself.
Long live the people created by the will of the people
A single, mighty Soviet Union!
</p>
<p>
Be glorious, our free Fatherland,
Friendship, peoples a reliable stronghold!
The Soviet banner, the banner of the people
Let it lead from victory to victory!
</p>
<p>
Through the thunderstorms the sun of freedom shone,
And Lenin, the great one, illumined our way.
We were brought up by Stalin - to be faithful to the people.
We were inspired by work and deeds.
</p>
<p>
Be glorious, Fatherland freer,
Happiness of peoples reliable stronghold!
The Soviet banner, the banner of the people
Let it lead from victory to victory!
</p>
<p>
We raised our army in the battles,
The invaders of the vile from the road are estimated!
We are in the battles to decide the fate of generations,
We will lead our glory to our Fatherland!
</p>
<p>
Be glorious, our free Fatherland,
the glory of peoples is a reliable stronghold!
The Soviet banner, the banner of the people
Let it lead from victory to victory!
</p>
</article>
<article id="s2">
<h2>Tutorials&nbsp<i class="fas fa-code"></i></h2>
<table>
<tr>
<td> <a class="tutName">Travelling sales person</a> </td>
<td>This tutorial looks at different implementations of the TSP problem</td>
</tr>
<tr>
<td> <a class="tutName">Midpoint displacement terrain gen</a> </td>
<td>This tutorial looks at generating random and natural looking 2D terrains</td>
</tr>
<tr>
<td> <a class="tutName">Convex hull Generator</a> </td>
<td>This tutorial looks at wrapping algorithsm</td>
</tr>
</table>
</article>
<div class="p"></div>
<article id="s3">
<h2>Projects&nbsp<i class="fas fa-code"></i></h2>
<table>
<tr>
<td> <a class="tutName">Game of Life</a> </td>
<td>A js implementation of the classic Game of Life - John Conway</td>
</tr>
<tr>
<td> <a class="tutName">Maze Generator</a> </td>
<td>A maze generator built in js</td>
</tr>
<tr>
<td> <a class="tutName">Oscillations in 3D</a> </td>
<td>A js implementation of <a href="https://twitter.com/beesandbombs/status/940639806522085376">Bees and Bomb's gif</a></td>
</tr>
</table>
</article>
<div class="p"></div>
<article class="margin" id="s4">
<h2>Credits</h2>
<p>Thank you to @uixmat for inspiration <strike>and some code</strike> for this page, check out his <a href="https://twitter.com/uixmat/" target="_blank">Twitter</a>.</p>
</article>

111
old/style.css
View File

@@ -1,111 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box; }
html, body {
font-family: "Roboto", sans-serif;
background: #eceff4;
padding: 80px 30px 30px;
color: #444;
height: 100%; }
ol, ul {
margin: 0 0 50px 0; }
ul {
position: relative;
width: 75%;
margin: 100px auto 0;
padding: 10px;
box-sizing: border-box; }
ul li {
display: flex;
background: red; }
h3 {
color: black;
font-size: 48px; }
h1 {
font-weight: bold;
color: black; }
p {
line-height: 1.6em;
margin-bottom: 10px;
font-size: 20px;
padding: 0; }
p:last-child {
margin-bottom: 40px; }
code {
background: #f8f8f8;
color: #d64f9b;
border: 1px solid #eee;
padding: 2px;
border-radius: 3px; }
a {
font-size: 22px;
font-weight: bold;
color: #88c0d0;
text-decoration: none;
transition: all 200ms; }
a:hover, a:focus {
color: #ebcb8b; }
article {
margin-bottom: 50px; }
article .margin {
margin-bottom: 100vh; }
nav {
display: flex;
width: 100%;
top: 0;
left: 0;
background: #3b4252;
position: fixed;
padding: 30px; }
nav a {
display: inline-flex;
padding: 20px 30px;
color: #eceff4;
text-decoration: none; }
nav a:hover, nav a:focus {
color: #ebcb8b; }
nav a.active {
color: #88c0d0; }
table {
text-align: center;
background-color: #3b4252;
color: #eceff4;
width: 75%;
align-self: center;
border: 1px solid #8fbcbb;
border-collapse: collapse;
position: absolute;
left: 50%;
transform: translate(-50%, 0%); }
td {
border: 1px solid #8fbcbb;
padding: 10px; }
td a {
font-size: 16px;
text-decoration: none;
color: #eceff4; }
.tutName {
font-weight: bold;
color: #8fbcbb;
font-size: 20px; }
.tutName:hover {
color: #ebcb8b; }
.p {
padding: 50px; }
/*# sourceMappingURL=style.css.map */

36
script.js
View File

@@ -1,14 +1,24 @@
// https://twitter.com/uixmat
function scrollNav() {
$('.nav a').click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
$('html, body').stop().animate({
scrollTop: $($(this).attr('href')).offset().top - 160
}, 300);
return false;
});
// ─── Scroll reveal ─────────────────────────────────────────
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
observer.unobserve(e.target);
}
scrollNav();
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
reveals.forEach(el => observer.observe(el));
// ─── Active nav link on scroll ──────────────────────────────
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-links a');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(s => {
if (window.scrollY >= s.offsetTop - 120) current = s.id;
});
navLinks.forEach(a => {
a.style.color = a.getAttribute('href') === `#${current}` ? 'var(--mauve)' : '';
});
});

802
style.css Normal file
View File

@@ -0,0 +1,802 @@
/* ─── Catppuccin Mocha ─────────────────────────────────── */
:root {
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
--surface0: #313244;
--surface1: #45475a;
--surface2: #585b70;
--overlay0: #6c7086;
--overlay1: #7f849c;
--overlay2: #9399b2;
--text: #cdd6f4;
--subtext0: #a6adc8;
--subtext1: #bac2de;
--lavender: #b4befe;
--blue: #89b4fa;
--sapphire: #74c7ec;
--sky: #89dceb;
--teal: #94e2d5;
--green: #a6e3a1;
--yellow: #f9e2af;
--peach: #fab387;
--maroon: #eba0ac;
--red: #f38ba8;
--mauve: #cba6f7;
--pink: #f5c2e7;
--flamingo: #f2cdcd;
--rosewater: #f5e0dc;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--base);
color: var(--text);
font-family: "JetBrains Mono", monospace;
font-size: 15px;
line-height: 1.7;
overflow-x: hidden;
}
::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);
}
/* ─── Nav ──────────────────────────────────────────────── */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3rem;
height: 56px;
background: rgba(17, 17, 27, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--surface0);
}
.nav-logo {
font-family: "Fraunces", serif;
font-size: 1.3rem;
color: var(--mauve);
text-decoration: none;
letter-spacing: 0.02em;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
color: var(--subtext0);
text-decoration: none;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s;
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 1px;
background: var(--mauve);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s;
}
.nav-links a:hover {
color: var(--text);
}
.nav-links a:hover::after {
transform: scaleX(1);
}
/* ─── Sections ─────────────────────────────────────────── */
section {
min-height: 100vh;
padding: 7rem 3rem 5rem;
max-width: 1100px;
margin: 0 auto;
}
section.full-width {
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* ─── Section labels ───────────────────────────────────── */
.section-label {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mauve);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-label::after {
content: "";
display: block;
height: 1px;
width: 3rem;
background: var(--mauve);
opacity: 0.5;
}
/* ─── Hero ─────────────────────────────────────────────── */
#hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 5rem;
position: relative;
}
.hero-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 0.6s 0.2s forwards;
}
.hero-name {
font-family: "Fraunces", serif;
font-size: clamp(3.5rem, 9vw, 7.5rem);
font-weight: 600;
line-height: 1;
color: var(--text);
margin-bottom: 0.5rem;
opacity: 0;
animation: fadeUp 0.7s 0.35s forwards;
}
.hero-name em {
font-style: italic;
color: var(--mauve);
}
.hero-subtitle {
font-family: "Fraunces", serif;
font-size: clamp(1.2rem, 3vw, 2.2rem);
font-weight: 300;
color: var(--subtext1);
margin-bottom: 2rem;
opacity: 0;
animation: fadeUp 0.7s 0.5s forwards;
}
.hero-desc {
max-width: 560px;
color: var(--subtext0);
font-size: 0.9rem;
line-height: 1.8;
margin-bottom: 2.5rem;
opacity: 0;
animation: fadeUp 0.7s 0.65s forwards;
}
.hero-by-line {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin-bottom: 0.3rem;
}
.hero-by {
color: var(--text);
font-size: 0.9rem;
}
.hero-by-role {
font-family: "Fraunces", serif;
font-style: italic;
font-size: 0.85rem;
color: var(--mauve);
opacity: 0.8;
}
.hero-by-role::before {
content: "— ";
opacity: 0.4;
}
.hero-by-footer {
display: block;
margin-top: 1rem;
color: var(--subtext0);
font-size: 0.82rem;
opacity: 0.75;
}
.hero-links {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 0.7s 0.8s forwards;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.4rem;
border-radius: 4px;
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
letter-spacing: 0.05em;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--mauve);
color: var(--crust);
}
.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);
}
/* Decorative grid bg */
#hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--surface0) 1px, transparent 1px),
linear-gradient(90deg, var(--surface0) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.18;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
pointer-events: none;
}
/* ─── About ────────────────────────────────────────────── */
.about-section {
min-height: auto;
padding-bottom: 5rem;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--surface0);
border: 1px solid var(--surface0);
border-radius: 8px;
overflow: hidden;
margin-top: 2.5rem;
}
.about-block {
background: var(--mantle);
padding: 1.75rem 2rem;
position: relative;
transition: background 0.2s;
}
.about-block:hover {
background: var(--surface0);
}
.about-block--wide {
grid-column: 1 / -1;
border-top: 1px solid var(--surface0);
}
.about-block-tag {
display: inline-block;
margin-bottom: 0.85rem;
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.about-block p {
color: var(--subtext0);
font-size: 0.85rem;
line-height: 1.85;
}
.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;
flex-direction: column;
gap: 0;
position: relative;
}
.version-timeline::before {
content: "";
position: absolute;
left: 0.65rem;
top: 0.5rem;
bottom: 0.5rem;
width: 1px;
background: var(--surface1);
}
.version-item {
display: flex;
gap: 1.25rem;
padding: 1rem 0;
position: relative;
}
.v-dot {
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
background: var(--surface0);
border: 2px solid var(--surface1);
flex-shrink: 0;
margin-top: 0.15rem;
transition:
border-color 0.2s,
background 0.2s;
position: relative;
z-index: 1;
}
.version-item:hover .v-dot {
border-color: var(--mauve);
background: var(--mauve);
}
.v-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.15rem;
}
.v-year {
font-size: 0.7rem;
color: var(--mauve);
margin-bottom: 0.3rem;
letter-spacing: 0.05em;
}
.v-desc {
font-size: 0.8rem;
color: var(--subtext0);
line-height: 1.6;
}
/* ─── Skills ───────────────────────────────────────────── */
#skills h2 {
font-family: "Fraunces", serif;
font-size: 2.8rem;
font-weight: 600;
color: var(--text);
margin-bottom: 3rem;
}
#skills h2 em {
font-style: italic;
color: var(--mauve);
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1px;
background: var(--surface0);
border: 1px solid var(--surface0);
border-radius: 8px;
overflow: hidden;
}
.skill-card {
background: var(--mantle);
padding: 2rem;
transition: background 0.2s;
}
.skill-card:hover {
background: var(--surface0);
}
.skill-card-icon {
font-size: 1.5rem;
margin-bottom: 1rem;
display: block;
}
.skill-card h3 {
font-size: 0.85rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.skill-card p {
font-size: 0.82rem;
color: var(--subtext0);
line-height: 1.7;
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 1rem;
}
.tag {
display: inline-block;
padding: 0.15rem 0.6rem;
border-radius: 3px;
font-size: 0.7rem;
letter-spacing: 0.04em;
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);
}
/* ─── Tutorials / Projects shared ─────────────────────── */
.section-heading {
font-family: "Fraunces", serif;
font-size: 2.8rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.75rem;
}
.section-heading em {
font-style: italic;
color: var(--mauve);
}
.section-intro {
color: var(--subtext0);
font-size: 0.88rem;
max-width: 560px;
line-height: 1.8;
margin-bottom: 3rem;
}
/* ─── Card grid ────────────────────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1px;
background: var(--surface0);
border: 1px solid var(--surface0);
border-radius: 8px;
overflow: hidden;
}
.card {
background: var(--mantle);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-decoration: none;
color: inherit;
transition: background 0.2s;
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--mauve);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.25s;
}
.card:hover {
background: var(--surface0);
}
.card:hover::before {
transform: scaleY(1);
}
.card-date {
font-size: 0.68rem;
color: var(--overlay1);
letter-spacing: 0.06em;
}
.card-title {
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
transition: color 0.2s;
}
.card:hover .card-title {
color: var(--mauve);
}
.card-desc {
font-size: 0.8rem;
color: var(--subtext0);
line-height: 1.6;
flex: 1;
}
.card-arrow {
font-size: 0.8rem;
color: var(--overlay0);
transition:
color 0.2s,
transform 0.2s;
align-self: flex-end;
margin-top: 0.5rem;
}
.card:hover .card-arrow {
color: var(--mauve);
transform: translateX(3px);
}
/* ─── Contact ──────────────────────────────────────────── */
#contact {
min-height: auto;
padding-bottom: 8rem;
}
.contact-inner {
border: 1px solid var(--surface0);
border-radius: 8px;
padding: 3.5rem;
background: var(--mantle);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.contact-inner h2 {
font-family: "Fraunces", serif;
font-size: 2.4rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1rem;
}
.contact-inner h2 em {
font-style: italic;
color: var(--mauve);
}
.contact-inner p {
color: var(--subtext0);
font-size: 0.88rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
.contact-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border: 1px solid var(--surface0);
border-radius: 6px;
text-decoration: none;
color: var(--text);
background: var(--base);
transition: all 0.2s;
font-size: 0.85rem;
}
.contact-link:hover {
border-color: var(--mauve);
color: var(--mauve);
transform: translateX(4px);
}
.contact-link-icon {
font-size: 1.1rem;
width: 1.5rem;
text-align: center;
}
.contact-link-label {
flex: 1;
}
.contact-link-handle {
font-size: 0.72rem;
color: var(--overlay1);
}
/* ─── Footer ───────────────────────────────────────────── */
footer {
border-top: 1px solid var(--surface0);
padding: 1.5rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.72rem;
color: var(--overlay0);
}
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);
}
}
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.6s ease,
transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* ─── Divider ──────────────────────────────────────────── */
.divider {
height: 1px;
background: var(--surface0);
max-width: 1100px;
margin: 0 auto;
}
/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
nav {
padding: 0 1.5rem;
}
.nav-links {
gap: 1.2rem;
}
section {
padding: 6rem 1.5rem 4rem;
}
.about-grid {
grid-template-columns: 1fr;
}
.about-block--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;
}
}

7
style.css.map
View File

@@ -1,7 +0,0 @@
{
"version": 3,
"mappings": "AAAQ,2EAAmE;AAE3E,CAAE;EAAE,UAAU,EAAE,UAAU;;AAO1B,UAAW;EACT,WAAW,EAAE,oBAAoB;EACjC,UAAU,ECsIJ,OAAO;EDrIb,OAAO,EAAE,cAAc;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAGd,MAAO;EACL,MAAM,EAAE,UAAU;;AAGpB,EAAG;EACD,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,YAAY;EACpB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;;AAGxB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,GAAG;;AAGjB,EAAG;EACA,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,IAAI;;AAGlB,EAAG;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;;AAGd,CAAE;EACA,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,CAAC;EACV,YAAa;IACX,aAAa,EAAE,IAAI;;AAIvB,IAAK;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,cAAc;EACtB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGpB,CAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,ECuGC,OAAO;EDtGb,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,SAAS;EACrB,gBACO;IACL,KAAK,ECiJA,OAAO;;AD7IhB,OAAQ;EACN,aAAa,EAAE,IAAI;EACnB,eAAQ;IACN,aAAa,EAAE,KAAK;;AAIxB,GAAI;EACF,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,UAAU,ECvCJ,OAAO;EDwCb,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,KAAE;IACA,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,ECqDD,OAAO;IDpDX,eAAe,EAAE,IAAI;IACrB,wBACQ;MACN,KAAK,ECuHF,OAAO;IDrHZ,YAAS;MACP,KAAK,ECqEH,OAAO;;ADhEf,KAAM;EACF,UAAU,EAAE,MAAM;EAClB,gBAAgB,EC3DZ,OAAO;ED4DX,KAAK,ECsCD,OAAO;EDrCX,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,iBAAgB;EACxB,eAAe,EAAE,QAAQ;EACzB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,mBAAmB;;AAGlC,EAAG;EACC,MAAM,EAAE,iBAAgB;EACxB,OAAO,EAAE,IAAI;EAEb,IAAE;IACC,SAAS,EAAE,IAAI;IACf,eAAe,EAAE,IAAI;IACrB,KAAK,ECqBJ,OAAO;;ADjBf,QAAS;EACJ,WAAW,EAAE,IAAI;EACjB,KAAK,ECwBF,OAAO;EDvBV,SAAS,EAAE,IAAI;EACf,cAAQ;IACP,KAAK,ECkFF,OAAO;;AD9EhB,EAAG;EACE,OAAO,EAAE,IAAI",
"sources": ["style.scss","nord.scss"],
"names": [],
"file": "style.css"
}

168
style.scss
View File

@@ -1,168 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import "nord.scss";
* { box-sizing: border-box;}
$primaryColor: deeppink;
$dkBg: #303947;
$itemBg: #6788a7;
$itemBgOdd: darken(#6788a7,15%);
html, body {
font-family: "Roboto", sans-serif;
background: $nord6;
padding: 80px 30px 30px;
color: #444;
height: 100%;
}
ol, ul {
margin: 0 0 50px 0;
}
ul {
position: relative;
width: 75%;
margin: 100px auto 0;
padding: 10px;
box-sizing: border-box;
}
ul li {
display: flex;
background: red;
}
h1 {
color: $nord0;
font-size: 48px;
}
h2 {
color: $nord0;
font-size: 28px;
}
p {
line-height: 1.6em;
margin-bottom: 10px;
font-size: 20px;
padding: 0;
&:last-child {
margin-bottom: 40px;
}
}
code {
background: #f8f8f8;
color: #d64f9b;
border: 1px solid #eee;
padding: 2px;
border-radius: 3px;
}
a {
font-size: 22px;
font-weight: bold;
color: $nord8;
text-decoration: none;
transition: all 200ms;
&:hover,
&:focus{
color: $nord13;
}
}
article {
margin-bottom: 50px;
.margin {
margin-bottom: 100vh;
}
}
nav {
display: flex;
width: 100%;
top: 0;
left: 0;
background: $nord1;
position: fixed;
padding: 30px;
a {
display: inline-flex;
padding: 20px 30px;
color: $nord6;
text-decoration: none;
&:hover,
&:focus {
color: $nord13;
}
&.active {
color: $nord8;
}
}
}
.tut_box {
border: 2px solid $nord1;
border-radius: 5px;
margin-bottom: 10px;
padding: 5px;
&:hover {
background-color: $nord1;
color: $nord6;
a {
color: $nord13;
}
.out_link{
color: $nord7;
}
}
p {
padding: 0px;
margin: 0px;
}
.tut_date {
float: right;
position: relative;
top: 0px;
right: 0px;
text-align: right;
}
}
.tutName {
font-weight: bold;
color: $nord7;
font-size: 22px;
&:hover {
color: $nord13;
}
}
.out_link {
font-weight: bold;
color: $nord3;
text-decoration: none;
padding: 5px, 5px;
font-size: 19px;
}

5
todo.md Normal file
View File

@@ -0,0 +1,5 @@
1. Havox & Me: Add another section for development
2. Move version history down to the bottom
3. What I know
4. Wire tutorials & projects up - maybe swap tutorials & projects
5. Add Professional github?