entangled.one
My personal site!
Features
- Color schemes
- Design tokens
- Lots of guys, if you want them
Tech Stack
- SvelteKit
- mdsvex
- Vercel
Live Link
Overview
This is my personal website, so it better be fun. Otherwise, what even is the point?
Themin’ and schemin’
My theme component sets a data attribute on the <html> element. This data attribute determines the values of the foreground, background, and accent colors in CSS variables. I add some extra pseudo-generative ~pizazz~ with an SVG background that also recolors with the theme! Unfortunately, I can’t apply these CSS variables to this SVG directly, so I set the background-image on each theme manually to call an endpoint that returns an SVG with the background and stroke colors for that theme.
At first, I persisted the theme over sessions by storing the user’s choice in local storage. However, this resulted in the default theme being flashed on the initial page load while the theme component was still being mounted. I addressed this by instead storing the selected theme in a cookie, which allows me to set the data attribute on the initial delivery of the page — well before the DOM is rendered.
Absolutely Extra™ focus styling
It’s 2022 and pixels are only getting smaller and no, I cannot see that microscopic 1px dotted outline that is somehow still the Firefox user agent default — I want big, heavy, obvious focus styles. Thus let it be known that the thick chunky dotted outlines on my website are 100% ideologically motivated and I will never apologize for it!!!
The rectangle is my homage to the blocky cursor that keeps me oriented in my terminal and text editor to this very day. Sure, sometimes it bumps things arounds. But I don’t mind that the browser may need to huff and puff a bit to recalculate layout, because my website is not about efficiency but it is about doing something different and fun and cool with what I’ve learned about front-end development and design.
This is also why I went all-in on styling *:focus-within — I just find it really neat that a couple lines of CSS can conditionally expose the underlying structure of the page! Although it’s completely impractical for most sites, this is my home page, and therefore I dig it.
Guys???
When I was a kid, one of the programs installed on our home computer was Neko. Unlike every other piece of software we had, geared toward business or creativity or education or gaming, Neko was… beautifully pointless. All it did was spawn a cat that would chase your mouse pointer around the screen or lounge around in a corner or on a taskbar. Just a little buddy for your screen that couldn’t do anything but distract you from what you were doing on the computer in the first place.
I’m very fond of Neko, so I was delighted when I discovered that someone had written a web port of Neko. I almost added this very Neko to my website, but it wasn’t working with the aesthetic I was going for. But I still wanted to bring in that spirit of those little buddies… and thus, guys.
What’s a guy? Oh, just an absolutely positioned icon that approximately follows the mouse and focus around on the page. (Since these icons are inline SVGs, the theme styling applies to them too!) Svelte’s built-in spring function made implementing the guy motion trivial, so the only thing left for me to do was update their position on mousemove and focus events. I love my guys!
Takeaways
My interest in web development and more general programming is primarily as a creative medium. It is one of many means of expression and communication. And it is too often used in very antihuman, antilife ways.
I learned the hard way that I cannot invest in work that does not resonate in some way with my values. (Or, I can, but it’s a guaranteed fast track to burnout and personal existential crisis.) Technology is not neutral, and neither am I. Most broadly, I can only commit to life-affirming projects toward liberation. (If that sounds lofty, well… it’s a high ideal that can manifest in small ways, and I sincerely feel it for every site in this portfolio.) As for work that reinforces and reproduces injustice and oppression — count me out.
Coding is something that I’ll be doing whether I’m paid to do it or not. But I have bills to pay, so I might as well get paid for it. And I also might as well be working alongside others toward good in the world, because I also believe that we have more impact when we work together than we do by ourselves.
I can make websites, and do lots of other programming stuff too. If you’re still with me at this point, please let me know how I can work with you!