New layout, uses nextjs
parent
885d95d889
commit
880cfbeb74
@ -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: </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>
|
|
@ -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>
|
|
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…
Reference in New Issue