first draft
This commit is contained in:
Binary file not shown.
Binary file not shown.
616
index.html
616
index.html
@@ -1,123 +1,527 @@
|
|||||||
<html>
|
<!doctype html>
|
||||||
<title>Havox</title>
|
<html lang="en">
|
||||||
<script src="https://kit.fontawesome.com/ad50eeab11.js" crossorigin="anonymous"></script>
|
<head>
|
||||||
<link href='index_style.css' rel='stylesheet' type='text/css'>
|
<meta charset="UTF-8" />
|
||||||
<nav class="nav">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<a href="#s1" class="active">Havox V2</a>
|
<title>Havox — John Gatward</title>
|
||||||
<a href="#s2">Tutorials</a>
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<a href="#s3">Projects</a>
|
<link
|
||||||
<a href="#s1">Intro</a>
|
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"
|
||||||
</nav>
|
rel="stylesheet"
|
||||||
<h1>Havox.org V2</h1>
|
/>
|
||||||
<article id="s1">
|
<link rel="stylesheet" href="style.css" />
|
||||||
<h2>About havox <i class="far fa-address-card"></i></h2>
|
</head>
|
||||||
<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>
|
<body>
|
||||||
<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>
|
<!-- ─── Nav ─────────────────────────────────────────────────── -->
|
||||||
<p><b>Why V2?</b></p>
|
<nav>
|
||||||
<p>
|
<a href="#hero" class="nav-logo">havox</a>
|
||||||
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.
|
<ul class="nav-links">
|
||||||
</p>
|
<li><a href="#about">about</a></li>
|
||||||
<p><b>Why is Havox on umbra.cyou?</b></p>
|
<li><a href="#skills">skills</a></li>
|
||||||
<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>
|
<li><a href="#tutorials">tutorials</a></li>
|
||||||
<h2>Daily Trump Quote</h2>
|
<li><a href="#projects">projects</a></li>
|
||||||
<p><?=$quote;?></p>
|
<li><a href="#contact">contact</a></li>
|
||||||
</article>
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<article id="s2">
|
<!-- ─── Hero ─────────────────────────────────────────────────── -->
|
||||||
<h2>Tutorials <i class="fas fa-code"></i></h2>
|
<section id="hero">
|
||||||
<div onclick="window.location='imgTut/summed-area.html'" class="tut_box">
|
<p class="hero-eyebrow">// havox — v4</p>
|
||||||
<p class="tut_date">3 Jan 2021</p>
|
<h1 class="hero-name">John <em>Gatward</em></h1>
|
||||||
<a href="imgTut/summed-area.html" class="tutName">Summed area tables</a>
|
<p class="hero-subtitle">Software Engineer</p>
|
||||||
<p>This tutorial looks at intergral images and how they're useful.</p>
|
<p class="hero-desc">
|
||||||
</div>
|
<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">
|
<span class="hero-by-line">
|
||||||
<p class="tut_date">3 Feb 2019</p>
|
<span class="hero-by">Full-stack developer</span>
|
||||||
<a href="terrainGen/index.html" class="tutName">Midpoint displacement terrain generation</a>
|
<span class="hero-by-role">by curiosity</span>
|
||||||
<p>This tutorial looks at generating random and natural looking 2D terrains.</p>
|
</span>
|
||||||
</div>
|
<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">
|
<div class="divider"></div>
|
||||||
<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 onclick="window.location='TSP_files/index.php'" class="tut_box">
|
<!-- ─── About ─────────────────────────────────────────────────── -->
|
||||||
<p class="tut_date">22 Sep 2018</p>
|
<section id="about" class="about-section">
|
||||||
<a href="TSP_files/index.php" class="tutName">Travelling sales person</a>
|
<div class="reveal">
|
||||||
<p>This tutorial looks at different implementations of the TSP problem and how different solutions can be implemented.</p>
|
<p class="section-label">about</p>
|
||||||
</div>
|
<h2 class="section-heading">Havox & <em>me</em></h2>
|
||||||
</article>
|
</div>
|
||||||
|
|
||||||
<article id="s3">
|
<!-- Bio blocks -->
|
||||||
<h2>Projects <i class="fas fa-code"></i></h2>
|
<div class="about-grid">
|
||||||
<p>Please note a lot of these projects use <code>mouseClicked()</code> functions which don't work with mobile :(</p>
|
<div class="about-block reveal" style="transition-delay: 0.05s">
|
||||||
|
<span class="about-block-tag tag tag-blue">day job</span>
|
||||||
|
<p>
|
||||||
|
CS graduate from the University of Nottingham (2022), now working as
|
||||||
|
a backend engineer at <strong>Sainsbury's</strong> Supply Chain
|
||||||
|
& Logistics — building microservices with Spring Boot on AWS,
|
||||||
|
designing REST APIs, connecting services with Kafka, and storing
|
||||||
|
data in MongoDB.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div onclick="window.location='projects/drawing_curves/index.html'" class="tut_box">
|
<div class="about-block reveal" style="transition-delay: 0.1s">
|
||||||
<p class="tut_date">1 Oct 2021</p>
|
<span class="about-block-tag tag tag-green">home infra</span>
|
||||||
<a class="tutName">Drawing bezier curves</a>
|
<p>
|
||||||
<p>An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to place points.</p>
|
I run a home server that hosts media and projects for friends and
|
||||||
</div>
|
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">
|
<div class="about-block reveal" style="transition-delay: 0.15s">
|
||||||
<p class="tut_date">23 Sept 2021</p>
|
<span class="about-block-tag tag tag-teal">linux</span>
|
||||||
<a class="tutName">2D Marching Squares</a>
|
<p>
|
||||||
<p>A demonstration of marching squares, click a tile to edit the terrain.</p>
|
Long-time Linux user. Used to distro-hop obsessively and be deep in
|
||||||
</div>
|
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">
|
<div class="about-block reveal" style="transition-delay: 0.2s">
|
||||||
<p class="tut_date">11 Apr 2020</p>
|
<span class="about-block-tag tag tag-yellow">teaching</span>
|
||||||
<a class="tutName">Bubble sort visualiser</a>
|
<p>
|
||||||
<p>A classic bubble sort visualiser where bars are sorted by height. One frame being one loop.</p>
|
I tutored during school and university — CS, maths, English.
|
||||||
</div>
|
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">
|
<div
|
||||||
<p class="tut_date">2 Apr 2020</p>
|
class="about-block about-block--wide reveal"
|
||||||
<a class="tutName">Warping lines illusion</a>
|
style="transition-delay: 0.25s"
|
||||||
<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üller-Lyer</a> illusion shown in js</p>
|
>
|
||||||
</div>
|
<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">
|
<!-- Version timeline -->
|
||||||
<p class="tut_date">27 Feb 2019</p>
|
<div class="reveal" style="transition-delay: 0.3s">
|
||||||
<a class="tutName">Fourier Series</a>
|
<p class="section-label" style="margin-top: 3.5rem">version history</p>
|
||||||
<p>A project showing how a square wave can be made with just sin waves.</p>
|
<div class="version-timeline">
|
||||||
</div>
|
<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">
|
<div class="divider"></div>
|
||||||
<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 onclick="window.location='projects/gameoflife.php'" class="tut_box">
|
<!-- ─── Skills ─────────────────────────────────────────────────── -->
|
||||||
<p class="tut_date">2 May 2018</p>
|
<section id="skills">
|
||||||
<a class="tutName">Game of Life</a>
|
<p class="section-label reveal">skills</p>
|
||||||
<p>A js implementation of the classic Game of Life - John Conway.</p>
|
<h2 class="section-heading reveal" style="transition-delay: 0.05s">
|
||||||
</div>
|
What I <em>know</em>
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div onclick="window.location='projects/piApprox.php'" class="tut_box">
|
<div class="skills-grid">
|
||||||
<p class="tut_date">18 Mar 2018</p>
|
<div class="skill-card reveal">
|
||||||
<a class="tutName">Calculating PI</a>
|
<span class="skill-card-icon">☕</span>
|
||||||
<p>A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.</p>
|
<h3>Backend</h3>
|
||||||
</div>
|
<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">
|
<div class="divider"></div>
|
||||||
<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 onclick="window.location='projects/mazeGen.php'" class="tut_box">
|
<!-- ─── Tutorials ─────────────────────────────────────────────── -->
|
||||||
<p class="tut_date">13 Nov 2017</p>
|
<section id="tutorials">
|
||||||
<a class="tutName">Maze Generator</a>
|
<p class="section-label reveal">tutorials</p>
|
||||||
<p>A maze generator built in js.</p>
|
<h2 class="section-heading reveal" style="transition-delay: 0.05s">
|
||||||
</div>
|
Things I <em>wrote down</em>
|
||||||
</article>
|
</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">
|
<div class="card-grid reveal" style="transition-delay: 0.15s">
|
||||||
<h2>Credits</h2>
|
<a class="card" href="tutorials/summed_area/summed-area.html">
|
||||||
<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>
|
<span class="card-date">3 Jan 2021</span>
|
||||||
<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>
|
<span class="card-title">Summed-area tables</span>
|
||||||
</article>
|
<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>
|
</html>
|
||||||
|
|||||||
117
index_style.css
117
index_style.css
@@ -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 */
|
|
||||||
@@ -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
235
nord.scss
@@ -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
144
old/index.html
@@ -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 <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 <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 <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
111
old/style.css
@@ -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
36
script.js
@@ -1,14 +1,24 @@
|
|||||||
// https://twitter.com/uixmat
|
// ─── Scroll reveal ─────────────────────────────────────────
|
||||||
|
const reveals = document.querySelectorAll('.reveal');
|
||||||
function scrollNav() {
|
const observer = new IntersectionObserver((entries) => {
|
||||||
$('.nav a').click(function(){
|
entries.forEach(e => {
|
||||||
$(".active").removeClass("active");
|
if (e.isIntersecting) {
|
||||||
$(this).addClass("active");
|
e.target.classList.add('visible');
|
||||||
|
observer.unobserve(e.target);
|
||||||
$('html, body').stop().animate({
|
|
||||||
scrollTop: $($(this).attr('href')).offset().top - 160
|
|
||||||
}, 300);
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
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
802
style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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
168
style.scss
@@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user