New layout, uses nextjs

rewrite
Ashelyn Dawn 10 months ago
parent 885d95d889
commit 880cfbeb74

4
.gitignore vendored

@ -0,0 +1,4 @@
node_modules/
.next/
.vscode/
.DS_Store

@ -1,3 +0,0 @@
{
"m.server": "conduit.tempest.dev:443"
}

@ -1,112 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
Who are you?
<aside>(bonus system edition)</aside>
</h1>
<p>
This is a supplemental page to our main <a target="_blank" href="/about">about</a>
page - specifically for us to post in plural spaces or to use to explain
to people we trust
</p>
<h3>Origins</h3>
<p>
We became aware of our plurality near the end of February 2023,
on the day we received news of a family member's death. The part of us
now known as Dawn got overwhelmed, and withdrew from consciousness to
recover
</p>
<p>
The shock of abruptly losing her presence made the differences between
our other two memebers rather apparent. One of those (now Rose) set
about making sure the body was cared for and that our work constraints
were satisfied for the day, and the other (now Echo) started to try and
make sense of what was going on
</p>
<p>
The members of our system are split along lines that make us inclined
to belive our system been around for a while before we became aware of it.
However, beyond a few months the most we can really do is guess, so we
will not describe that here
</p>
<h3>Introductions</h3>
<aside>
<strong>Note:</strong>
Because we share memory (and are usually co-conscious), we tend to present
as if we were one individual. We do not commonly distinguish who is
primarily active or speaking, except with our partners and close friends,
or unless it becomes otherwise necessary
</aside>
<h4 style="color:#a4ffd4">Echo <aside>(it/?)</aside></h4>
<p>
The self-styled "librarian" of the system, Echo is the part of us that
has the best connection to memory of all of us, and enjoys getting lost
in categorizing and considering new information. It seems to have ended
up with most of the inclination for tradition and faith as well
</p>
<p>
Echo likes reading, learning, sharing what it has learned, and cuddling
with those close to us. It speaks excitedly and earnestly, and loves
making new friends
</p>
<h4 style="color:#ff6b79">Rose <aside>(they/them)</aside></h4>
<p>
As primary decision maker and the part who ended up with most of our skill
in coding, Rose tends to be fronting most of the time if we have work to
do. Rose is efficient in their work, tending to focus on understanding
just enough for the topic at hand - culling information and distractions
that aren't necessary and quickly traversing ideas to get at what they
need
</p>
<p>
In conversation Rose will be direct and to the point, sometimes coming
across as rude. But if they decide to focus their attention on you, then
their full personality comes out much more clearly. They can be
sarcastic, witty, and caring to a fault
</p>
<h4 style="color:#d8b8ff">Dawn <aside>(she/her)</aside></h4>
<p>
Our poet and performer, Dawn is the part of us who is most practiced at
managing our outside appearance and presentation. She helps us navigate
social situations, carries out most of our IRL conversations, and is the
one with the most grasp of language and rhythm
</p>
<p>
Dawn enjoys singing, writing poetry, and storytelling. She has the
strongest connection to our dreams and emotions, and enjoys coalescing
those feelings down to their purest expression. Outwardly Dawn is
cheerful and pleasant, although when speaking on matters of importance
she speaks carefully, with a lot of emphasis on the selection of each word
</p>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

@ -1,62 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
Who are you?
</h1>
<h3>Name</h3>
<p>Ashelyn, but I usually go by ashe, dawn, or tempest</p>
<h3>Interests</h3>
<p>
Coding, VR, 3D modeling, cryptography (encryption + privacy, not coin),
photography, hiking, reading, writing, and locksport
</p>
<h3>Games</h3>
<p>
Currently a lot of VRChat, other favorites include Hades, Celeste,
and Titanfall 2
</p>
<h3>Occupation</h3>
<p>
Web dev, primarily Javascript but also featuring Python, Rust, .NET,
Java, and an obscene amount of bash
</p>
<h3>Family</h3>
<p>
I am married to my lovely wife Emily, and we have two kids together. I also
have two other amazing partners.
</p>
<h3>Find me Elsewhere</h3>
<ul>
<li><a target="_blank" rel="me" href="https://social.treehouse.systems/@ashe">Mastodon</a></li>
<li><a target="_blank" href="https://git.tempest.dev/">Git</a></li>
<li><a target="_blank" href="https://web.libera.chat/">IRC</a> (my common nicks are tempest or dawn)</li>
</ul>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

@ -0,0 +1,9 @@
export default function Footer() {
return (
<footer>
<span>Website by Ashelyn Rose</span>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency">Pay Transparency</a>
</footer>
)
}

@ -0,0 +1,43 @@
'use client'
import React from 'react'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import header from '~/images/aurora-1197753.jpg'
export default function Title() {
const pathname = usePathname()
const isHomepage = pathname === '/'
return (
<header className={isHomepage ? 'homepage' : undefined}>
{isHomepage
? <h1 className="siteTitle">tempest.dev</h1>
: <a href="/" className="siteTitle">tempest.dev</a>
}
<nav>
<a href="/system">system</a>
<a href="/posts">posts</a>
<a href="/contact">contact</a>
</nav>
<div className="headerBackground">
<Image
src={header}
alt=""
role="presentation"
fill={true}
sizes={`
(max-width: 2560) 100vw,
(max-width: 1920) 100vw,
(max-width: 1280) 100vw,
(max-width: 800) 100vw,
(max-width: 600) 100vw,
`}
/>
</div>
</header>
)
}

@ -0,0 +1,12 @@
export default function About() {
return (
<>
<h1 className="pageTitle">
About
</h1>
<main className="mainColumn">
<p>Maybe we say some things about ourselves?</p>
</main>
</>
)
}

@ -0,0 +1,23 @@
import React, { ReactNode } from 'react';
import 'victormono'
import '~/styles/layout.css'
import '~/styles/text.css'
import Header from './Header'
import Footer from './Footer'
export default function SiteLayout({ children }: { children: ReactNode }) {
return (
<html>
<head>
<title>tempest.dev</title>
</head>
<body>
<Header />
{children}
<Footer />
</body>
</html>
)
}

@ -0,0 +1,23 @@
export default function NotFound() {
return (
<>
<h1 className="pageTitle">Not Found (404)</h1>
<main className="mainColumn">
<aside className="infobar">
<strong>Error:&nbsp;</strong>
Unable to find the requested resource
</aside>
<p>
Feel free to start again from the <a href="/">home page</a>, or
check our <a href="/posts">list of posts</a>
</p>
<p>
If you feel like something should have been here, and want to shout
at me about it, please <a href="/contact">contact Rose</a>
</p>
</main>
</>
)
}

@ -0,0 +1,47 @@
import React from 'react';
import styles from '~/styles/index.module.css'
export default function Index() {
return (
<main className="mainColumn">
<p>
Hi, we're tempest! And we also go by ashe. We're a median plural
system of three members, but most of the time you'll probably see us
operating as one
</p>
<p>We like coding, VR, and making CG art</p>
<h2>At a glance</h2>
<div className={styles.glance}>
<span className={styles.label}>Names:</span>
<span>ashe or ashelyn</span>
<span className={styles.label}>Pronouns:</span>
<span>they/them</span>
<span className={styles.label}>Cohort:</span>
<span>millenial</span>
<span className={styles.label}>Poly:</span>
<span>yes</span>
<span className={styles.label}>Partners:</span>
<span>three</span>
<span className={styles.label}>Children:</span>
<span>two</span>
<span className={styles.label}>Capitalize name:</span>
<span>not unless we're at work</span>
</div>
<p>
<em>Note:</em> This is the information for our system in aggregate,
for individual info see <a href="/system">system</a>
</p>
</main>
)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 MiB

@ -1,78 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>tempest.dev</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
hi, i'm ashe
<aside>[she/they]</aside>
</h1>
<p>
I am a professional web developer, usually making use of tools like
React, Webpack, Typescript, etc - the whole mess of "modern" web dev
stuff.
</p>
<p>
This site is something different, a bit of an experiment in minimalism
for me. A chance to return to my roots of carefully crafting a website
by hand.
</p>
<p>
As such, here are my rules for the site:
</p>
<ul>
<li>
No pre- or post-processing, transpilation, or other code-generation
</li>
<li>
To the best of my ability, the source will be clean and understandable
</li>
<li>
When used, javascript will be minimal, and intentional
</li>
<li>
The site will be usable in older or esoteric browsers (such as Lynx)
</li>
<li>
This site will be privacy-preserving, with no client-side analytics and
all resources hosted directly alongside the site itself. (Note that
this site is hosted on Neocities, so your request data may still be used
as described in <a target="_blank" href="https://neocities.org/privacy">
their Privacy Policy</a>)
</li>
</ul>
<p>
I'm not ruling out JS or anything (making a delightful interactive
experience is still one of my favorite things to do), but I'm taking the
opportunity to step away from the tools I primarily use at work, and
practice my other skills.
</p>
<p style="
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: min(80px, 20%);
">
<span style="font-size: 24px">~</span>
<img alt="Ashe" height="80px" src="/resources/signature.svg" />
</p>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

5
next-env.d.ts vendored

@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Not Found</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
</nav>
<h1>
Not Found
</h1>
<p>
Sorry friend, you followed a link to something that doesn't exist.
</p>
<p>
Feel free to start back over at my
<a href="/">Home page</a>.
</p>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

1162
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,23 @@
{
"name": "tempest.dev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"next": "^13.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sharp": "^0.32.1",
"victormono": "^1.5.5"
},
"devDependencies": {
"@types/node": "20.1.0",
"@types/react": "^18.2.6",
"typescript": "5.0.4"
}
}

@ -1,112 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Pay Transparency</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
Pay Transparency
</h1>
<p>
This page lists the title and pay rate of every job I have held since university
graduation<sup><a id="1-ref" href="#1-foot">1</a></sup>, and is inspired by
<a target="_blank" href="https://rin.systems/pay-transparency/">Rin's pay transparency</a>
page. Her page is what inspired me to make this one, and I hope the idea
continues to spread, as the more people know what common compensation is
across the industry, the more we can all benefit.
</p>
<div class="tableOverflow">
<table>
<thead>
<tr>
<th>Role</th>
<th>Start</th>
<th>End</th>
<th>Rate / Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Software Developer</td>
<td>Jan 2020</td>
<td>Sept 2020</td>
<td>$35 USD / hour</td>
</tr>
<tr>
<td>Software Engineer</td>
<td>Jan 2021</td>
<td>Sept 2021</td>
<td>$90,000 USD / year
<span class="asterisk">*</span>
</td>
</tr>
<tr>
<td>Software Engineer</td>
<td>Sept 2021</td>
<td>Oct 2022</td>
<td>$100,800 USD / year
<span class="asterisk">*</span>
</td>
</tr>
<tr>
<td>Software Engineer</td>
<td>Oct 2021</td>
<td>Jan 2022</td>
<td>$105,840 USD / year
<span class="asterisk">*</span>
</td>
</tr>
<tr>
<td>Senior Software Engineer</td>
<td>Jan 2022</td>
<td>May 2022</td>
<td>$121,716 USD / year
<span class="asterisk">*</span>
</td>
</tr>
<tr>
<td>Senior Software Engineer</td>
<td>June 2022</td>
<td>March 2023</td>
<td>$158,000 USD / year
<span class="asterisk">*</span>
<span class="asterisk">**</span>
</td>
</tr>
</tbody>
</table>
</div>
<p>
All positions listed here included health, dental, and vision insurance.<br/>
The positions listed with <span class="asterisk">*</span> came with
a retirement account.<br/>
The position listed with <span class="asterisk">**</span>
came with stock options.
</p>
<ol id="footnotes">
<li id="1-foot">
I unfortunately no longer have any accurate information for the job
I held during university. It spanned across six years, and my role changed
several times - I do remember I started at $9 USD / hour and ended at
$22.50 USD / hour.
<a href="#1-ref">^</a>
</li>
</ol>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

@ -1,123 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Advent of Wasm</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
Advent of Wasm
<span class="subtitle">Now with 87% more pain</span>
</h1>
<p>
So the last few years I have done Advent of Code off and on. Sometimes
I have tried to learn a new language, other times I was just trying to
beat my dad each evening. This year though, this year I don't know what
I was thinking.
</p>
<p>
It was several weeks after everyone else had started, I had largely written
it off for the year - I was not up for it. Until a terrible idea crossed
my mind.
</p>
<p>
Like an intrusive thought, my mind asked: "Well you've been wanting to do
something in web assembly for a while right? How bad could it be?"
</p>
<br/>
<p>
Turns out I was definitely not ready for this.
</p>
<h2>So what was so hard about it?</h2>
<p>
More than anything else, I forgot how much you need to do by hand to do
any sort of assembly. The first day saw me spending several hours just
on some loader code to pass the puzzle input in from JS, call a wasm
function, and then read back the result.
</p>
<p>
Next was a few functions for reading numbers out of the wasm memory buffer,
parsing them from ascii, etc. The core read loop was not too tricky, but
the bit that took far longer than it had any reason to was converting my
answer back to ascii and shoving it into an output area.
</p>
<p>
Really none of it was surprising, and none of it <em><strong>*should*</strong></em>
have been that hard ... it's just been a while since this Javascript girl
has written truly low-level code.
</p>
<p>
To make matters worse I got hard-core distracted by the non-wasm part of
my wasm project. After the first day I returned to my stub JS loader and
expanded it into a little wasm explorer.
</p>
<p>
I added a code view, syntax highlighting, auto-loaded my puzzle inputs,
even made a janky little dynamic list that would automatically pick up
new days' solutions as I added them to the repo without needing me to
touch the loader page each day.
</p>
<p>
In the end I'm really quite proud of it, I will absolutely be reusing
this setup for future years, and you should
<a href="https://aoc2022.tempest.dev/" target="_blank">check it out</a>
if you haven't already ... but for wanting to challenge myself with
something new I was doing a lot of the same-old.
</p>
<p>
Ultimately I got through 3 days before giving up jusst because every
step along the way involved <em><strong>*so much*</strong></em> extra
code. I may come back to some of the puzzles later, but for now I'm
kind of happy with what I did, and I don't feel like I need to prove
myself by doing more. I was doing it for fun, and so I stopped when
it stopped being fun.
</p>
<h2>Tips if you want to get into writing wasm by hand?</h2>
<p>
Uhh ... maybe consider don't?
</p>
<p>
Jokes aside: do a throwaway project or two so you get used to passing
data into and out of wasm, whatever parsing you're going to do, etc.
</p>
<p>
Do everything in your power to make sure you can focus on the actual
wasm part of your project, because (at least if you're anything like
me) it's easy to get sidetracked with all that.
</p>
<p>
With that said: I had fun. Doing new things is always a treat, so if
you're looking for something new to try definitely consider giving
webassembly a look.
</p>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

@ -1,107 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>On Communities and Trust</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
On Communities and Trust
<span class="subtitle">Some thoughts on the VRChat security update</span>
</h1>
<p>
So we've had the VRChat Security Update for a few days now, and while I'm
not the most prolific VR community member, I have heard a fair bit of
discourse about the update. This update has been a polarizing one to say
the least, with users excited for the new features that were and will soon
be added, others decrying the performance issues they have now from Easy
Anti-Cheat, and still others still unable to play due to missing
accessibility features they previously would have gotten via mods.
</p>
<p>
Overall, my personal concerns about update itself have been resolved:
although I used to run into issues with EAC crashing when hardware
virtualization was enabled, that seem to no longer be the case, and I
personally haven't even seen a performance hit. I was not
using any mod features, and the changes in the most recent beta
certainly a welcome addition to my experience.
</p>
<p>
However, I do still have some broader community concerns about how the
update was announced and rolled out, as well as how the VRChat team seems
to be handling this whole scenario as if they're only playing public
opinion damage control.
</p>
<p>
Regardless of their official policy or any amount of discouragement
towards mods for VRChat, the fact of the matter is that a large portion
of their community relied on mods to add accessibility, performance, or
comfort features to the game. While I have to acknowledge that the VRC
team has added some of these features back into the game since blocking
mods, the fact that they needed to reprioritize these features (as they
have been pretty clear about in their updates) shows us that they had
no interest in adding these features until they faced public backlash.
</p>
<p>
You might think that a reasonable development team (if they wanted to
reduce the use of mods for their game) might look at the sizable portion
of their community using mods for this sort of enhancement,
and come to the conclusion "clearly there is need for these features,
let's reduce the need for mods by implementing those features". But instead the
VRChat team decided to actively make their game worse for those people instead.
Disabling comments on Steam further indicates that they knew this would
be disliked by the community ahead of time, but chose to do it anyways.
</p>
<p>
Listen, VRChat team - what sort of conclusions am I supposed to draw about
your priorities here?!? Improving the game experience for your most
vulnerable players doesn't make the roadmap, but pushing an ineffective
solution to a problem <b>against the angry backlash of your community</b>
makes the cut?
</p>
<p>
So yeah . . . I guess in one sense, the game is fine. It's getting new features, more are
on the horizon, the community feels like they've been listened to.
</p>
<p>
But in another sense, the security update has made it incredibly clear
that the VRChat team either does not care, or did not think to consider
how their priorities would affect large portions of their community.
</p>
<p>
Social games grow and shrink with their communities. Regardless of technical
decisions, updates, or anything else, if large portions of the community
leave or can no longer join, then VRChat will no longer be the same game
(and it will be worse for it). With the latest changes and how they've
handled the community response, I just can't convince myself that the team remembers
this.
</p>
<p>
In that regard, I feel that even more than the actual removal of features
they have violated our trust - and unless this newfound responsiveness to
the needs of their players sticks around longer than it takes to clean up
their PR mess, I personally am hesitant to forgive them.
</p>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

@ -1,109 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Thoughts on Neovim</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
Thoughts on Neovim
<span class="subtitle">Who even needs an IDE anyways?</span>
</h1>
<h2>Why I'm using Neovim</h2>
<p>
When I first started coding in high school and then later in early
college I used to jump around between editors a lot more than I do today.
I used Notepad++, then Visual Studio, briefly Netbeans, then Atom.
</p>
<p>
But since settling into frontend web development I've stayed with VSCode
for a very long time. I liked it because it was straightforward to get
started with, but versatile enough to extend for other languages.
Between various jobs and projects I used it for Javascript, Java, C#,
Rust, and C - and it did admirably at pretty much all of these.
</p>
<p>
But about a year ago I saw that VSCode had a Neovim plugin, and I was
intrigued. I'd wanted to get more familiar with Vim beyond the basic
hjkl navigation, and this seemed like a great way to do that!
</p>
<p>
So for the last year and change I've had the
<a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim">vscode-neovim</a>
plugin installed, and I've been really enjoying it!
</p>
<p>
I quickly fell in love with visual block mode, or the "delete N words"
commands. They're just so handy I suddenly felt like they were missing
if I needed to edit code any other way!
</p>
<p>
But over the weekend I made the jump from using Neovim inside VSCode to
using it more or less on its own. I saw a video that mentioned the
AstroNvim configuration framework and Neovide, and decided "yeah, I think
I want to try that", and a few days later . . . here we are.
</p>
<h2>How is it going?</h2>
<p>
Overall, surprisingly well.
</p>
<p>
The AstroNvim config I'm using already had NeoTree set up which is
very nice. I've figured out how to get ESLint and Prettier configured
for work, rust-analyzer installed for my own projects, I've been poking
at themes over and over again, and honestly . . . I'm really liking this.
</p>
<p>
Getting Neovide to connect to a VM over the network was relatively
straightforward, I love how easy it is to drop my config into git and
keep it synced between computers, and finally having proper mouse support
(which I never could get sorted out with my terminal) is a pretty big
game changer for when I'm just reading code.
</p>
<p>
Also, I'd be lying if I said that I didn't love the smooth scrolling and
cursor animation. I am a simple girl after all.
</p>
<h2>Should you try replacing your IDE?</h2>
<p>
That is a tricky question to answer.
</p>
<p>
I was comfortable spending some time experimenting with this because I
already had decent familiarity with Vim and had been using Neovim
specifically for a while. If you don't have any similar experience,
the learning curve is going to be pretty steep.
</p>
<p>
But hey - if you're looking for a challenge, you'll definitely learn
a lot.
</p>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Posts</title>
<link rel="stylesheet" href="/resources/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/posts/">Posts</a>
</nav>
<h1>
Posts
</h1>
<h2>2023</h2>
<ul class="posts">
<li>
<span>January 4</span>
<a href="/posts/01_04_2023-advent-of-wasm.html">Retrospect: Advent of Wasm</a>
</li>
</ul>
<h2>2022</h2>
<ul class="posts">
<li>
<span>August 1</span>
<a href="/posts/08_01_2022-thoughts-on-neovim.html">Thoughts on Neovim</a>
</li>
<li>
<span>July 29</span>
<a href="/posts/07_29_2022-on-communities-and-trust.html">On Communities and Trust</a>
</li>
</ul>
<footer>
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
<a href="/pay-transparency.html">Pay Transparency</a>
</footer>
</body>
</html>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -1,228 +0,0 @@
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #2b2235;
}
body {
min-height: 100vh;
background: #211e22;
color: rgba(255,255,255,.8);
max-width: 600px;
margin: 0 auto;
padding: 16px;
display: flex;
flex-direction: column;
}
nav, footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: end;
}
nav a, footer a {
opacity: .4;
}
nav a:hover, footer a:hover {
opacity: .8;
}
nav > a:not(:last-child), footer > a:not(:last-child) {
margin-right: 40px;
}
h1 {
color: rgba(255,255,255,.9);
}
h1 > aside,
h2 > aside,
h3 > aside,
h4 > aside {
display: inline-block;
font-size: max(.5em, 14px);
font-weight: 100;
font-style: italic;
opacity: .6;
margin-left: 8px;
}
h1 > .subtitle {
display: block;
font-size: 20px;
opacity: .8;
font-weight: normal;
font-style: italic;
}
h3 + p,
h4 + p {
margin-top: -8px;
}
ul > li:not(:last-child) {
margin-bottom: 8px;
}
ul.posts {
list-style: none;
}
ul.posts li span {
display: inline-block;
min-width: 100px;
opacity: .5;
text-align: right;
margin-right: 10px;
}
body p {
line-height: 1.5;
}
a {
color: white;
opacity: .8;
}
a[href^="https:"],
a[href^="http:"],
a[href^="//"] {
color: #caa5ff;
}
h2 {
margin-top: 48px;
}
sup {
vertical-align: top;
}
sup a {
position: relative;
top: -4px;
color: #caa5ff;
margin: 0 2px;
text-decoration: none;
}
span.asterisk {
color: #caa5ff;
}
.tableOverflow {
margin: 0 -16px;
width: calc(100% + 32px);
overflow-x: auto;
padding: 0 16px;
position: relative;
}
body > aside {
border-left: solid 4px #caa5ff88;
padding-left: 8px;
}
body > aside strong:first-child {
color: #caa5ffcc;
}
table {
border-collapse: collapse;
text-align: left;
min-width: calc(600px - 32px);
}
table tr {
}
table th {
border-bottom: solid 1px white;
}
table th, table td {
padding: 8px 4px;
}
ol#footnotes {
padding-left: 0px;
list-style: none;
counter-reset: list-number;
flex: 1;
display: flex;
flex-direction: column;
justify-content: end;
margin-top: 40px;
}
ol#footnotes li {
display: flex;
flex-direction: row;
padding: 16px;
margin: 0 -16px;
position: relative;
transition: .15s ease-in-out background;
}
ol#footnotes li::before {
counter-increment: list-number;
content: counter(list-number);
color: #caa5ff;
width: 20px;
margin-right: 8px;
}
ol#footnotes li a {
margin-left: 8px;
color: #caa5ff;
}
ol#footnotes li:first-child::after {
position: absolute;
top: 1px;
width: calc(100% - 32px);
background: #caa5ff;
opacity: .4;
height: 1px;
content: '';
}
ol#footnotes li:target {
background: #3d3548;
}
footer {
margin-top: 40px;
flex: 1;
position: relative;
}
footer::before {
position: absolute;
bottom: 36px;
width: calc(100% - 0px);
height: 1px;
margin: 0 auto;
content: '';
background: #caa5ff;
opacity: .4;
}
ol#footnotes + footer {
flex: initial;
margin-top: 0;
}
ol#footnotes + footer::before {
display: none;
}

@ -0,0 +1,11 @@
.glance {
margin: var(--text-padding);
display: grid;
grid-template-columns: fit-content(35%) 1fr;
grid-row-gap: calc(.5 * var(--text-padding));
}
.glance .label {
color: var(--text-dimmed);
margin-right: var(--text-padding);
}

@ -0,0 +1,181 @@
:root {
--header-height: 400px;
--header-overlap: 150px;
--header-bar-height: 48px;
--main-width: 600px;
--footer-spacing: 8px;
--page-background: #262626;
--main-background: #423c3c;
--text-bright:rgba(255,255,255, 1);
--text-medium:rgba(255,255,255, .75);
--text-dimmed:rgba(255,255,255, .55);
--text-padding: 16px;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--page-background);
}
header {
height: calc(var(--header-height) - var(--header-overlap));
overflow-y: visible;
position: relative;
display: flex;
flex-direction: row;
padding: var(--text-padding);
padding-bottom: 0;
box-sizing: border-box;
align-items: start;
justify-items: flex-start;
}
header:not(.homepage) {
justify-content: space-between;
}
header.homepage {
flex-direction: column;
align-items: center;
height: calc(var(--header-height) - var(--header-overlap) + var(--header-bar-height));
}
header.homepage::before {
content: ' ';
flex: 1;
}
header .siteTitle {
margin: 0;
}
header.homepage .siteTitle {
font-size: 4em;
}
header:not(.homepage) .siteTitle {
font-size: 1.2em;
}
header nav {
display: block;
border: solid 5px transparent;
}
header nav a {
margin: 0 calc(1.5 * var(--text-padding));
}
header.homepage nav {
border: none;
background: var(--main-background);
height: var(--header-bar-height);
width: var(--main-width);
display: flex;
flex-direction: row;
justify-content: center;
border-bottom: solid 1px var(--text-dimmed);
}
header.homepage nav a {
height: 100%;
padding: 14px;
box-sizing: border-box;
}
header .headerBackground {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 400px;
z-index: -1;
user-select: none;
}
header .headerBackground img {
z-index: -1;
object-fit: cover;
object-position: center 75%;
}
header .headerBackground::after {
content: ' ';
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,.35);
}
header:not(.homepage) + h1 {
width: var(--main-width);
margin: 0 auto;
padding: var(--text-padding);
box-sizing: border-box;
height: 80px;
margin-top: -80px;
}
main {
font-family: Arial, sans-serif;
}
main.mainColumn {
width: var(--main-width);
box-sizing: border-box;
padding: var(--text-padding);
margin: 0 auto;
background: var(--main-background);
min-height: calc(var(--header-overlap) + 100px);
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
}
header.homepage + main.mainColumn {
min-height: calc(var(--header-overlap) + 100px - var(--header-bar-height));
}
main.mainColumn aside.infobar {
margin: calc(-1 * var(--text-padding));
margin-bottom: var(--text-padding);
padding: var(--text-padding);
background: var(--main-background);
height: var(--header-bar-height);
width: var(--main-width);
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: solid 1px var(--text-dimmed);
}
main.mainColumn > p:first-child,
main.mainColumn .infobar + p {
margin-top: 0;
}
footer {
flex: 1;
align-items: end;
box-sizing: border-box;
width: var(--main-width);
margin: 0 auto;
padding: var(--text-padding);
display: flex;
flex-direction: row;
margin-top: var(--footer-spacing);
}
footer span {
flex: 1;
}
footer a {
margin-left: calc(2 * var(--text-padding));
}

@ -0,0 +1,40 @@
body {
color: var(--text-medium);
}
a {
color: var(--text-bright);
font-family: 'Victor Mono Oblique', sans-serif;
}
.siteTitle {
font-family: 'Victor Mono';
opacity: .8;
font-style: italic;
text-decoration: none;
font-weight: normal;
text-decoration: none;
}
h1, .pageTitle {
font-family: 'Victor Mono Oblique', sans-serif;
opacity: .8;
}
h2, h3, h4, h5 {
color: var(--text-bright);
font-family: 'Victor Mono Oblique', sans-serif;
}
em {
color: var(--text-bright);
}
main {
font-family: 'Victor Mono', sans-serif;
}
footer {
font-family: 'Victor Mono', sans-serif;
opacity: .5;
}

@ -0,0 +1,39 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["*"]
},
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
]
},
"include": [
"next-env.d.ts",
".next/types/**/*.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Loading…
Cancel
Save