Derjyn

Rebuilt: the new derjyn.github.io

2026-10-26T00:00:00Z

This rebuild was long overdue. D3 Labs had been the site since 2016, and I wanted a more complete space: somewhere to showcase my projects, share my thoughts, and hand out loot I think others might enjoy.

The site is new from the ground up: new look, new mark, new code underneath. This is the short tour of what changed and how it got here.

Built on Corpus

Every page here runs on Corpus, a raw CSS stack I'm building for small static sites: Detox resets the browser, Bones lays out the page, Flesh dresses it, and a skin gives it this look. No framework, no build step for the CSS, and the pages read fine with JavaScript off.

Why build my own instead of grabbing an existing one? The practice, for one. It's also my own opinionated design, and I don't need the bloat that comes with the other "micro" frameworks.

The site is also Corpus's first real test. Anything this site needed that Corpus couldn't do became a fix in Corpus, not a hack here.

The look: an instrument panel

The design is an industrial instrument panel with a retro display soul. It pulls from the cyberpunk genre in general, the books, films and games, and from my love of industrial UI. Every section is a module in a thin frame with a square node on each corner, a lamp and a name in its header, and an ID on the right. The nav keys are hardware keys with a lamp that lights on the section you're in.

It took seven moodboards to get here. The early ones put scanlines, grain and color fringing over everything, and they were hard to read. From the fifth board on, the retro effects touch display elements only (the wordmark, big numbers, images) and body text stays crisp.

Two grounds, one signal

There are two looks, flipped with the theme setting. Glass is near-black with a cool off-white ink and is the main one. Paper is a warm stone stock with near-black ink. Both share one palette, Vermilion: the vermilion signal marks what is live (the current key, lamps, the newest entry) and nothing else.

Why vermilion? Several themes were tested, and it just felt right. Plus I love that general color mix. Two of the others, Sodium and Mosaic, made it as far as the last moodboard and lost.

The mark

The mark, drawn on a 16 by 16 grid.

The mark is the old derjyn.com prototype mark, redrawn on a 16 by 16 grid and picked from 23 drafts. Three teeth on a stem read as a mirrored E, the Ǝ in the stylized name, and the flat-backed head with its one tall eye reads as a D, a 3 and a cyclops skull at once. Turn it upright and it's a plain skull.

It's only ever drawn at 16, 32, 64 or 128 pixels, so every cell lands on whole pixels and stays sharp.

The name has its own font too. The stylized spelling started with me, a character map, and a lot of tinkering with ways to make "Derjyn" look cool; ƊƎƦĴҰŊ is where that landed. The wordmark text is the plain word "Derjyn", so search, copy and paste, and screen readers all get the real word, but it's set in a tiny custom font that draws it as ƊƎƦĴҰŊ.

The background

Behind the page is a live lattice: X-shaped arms around small nodes, faint at rest. Move the cursor and the arms along its path light up and slowly fade. Click on empty space and a ping ring runs out from the click. The content boxes block the rings and bounce weaker copies back, a little like ripples on water.

Config switches it to Field, a dot grid with slow bands that part around the cursor, or turns it off. With Sound on, each mode has its own click sound, synthesized in an old little tool called ChipTone. Visitors don't expect a site to make noise, so it's off by default.

With reduced motion set in your system, the background draws one still frame and nothing follows the cursor.

What's next

Coming up in the Log: future plans, for the site and for the projects.

Placeholder article three

2026-10-25T00:00:00Z

Placeholder: this article exists to test the article panel and is replaced before launch.

This is the long one. It runs past a screen so the panel can show what reading a real article feels like: the panel grows with the text, the page scrolls, and the index stays in view beside it on a wide screen.

Why the panel grows

A box that scrolls inside a page that scrolls is hard to read in. The wheel moves one or the other depending on where the cursor sits, keyboard users have to find the inner box before they can scroll it, and a phone gives a long article almost no room. So the panel takes the article's full height and the page does the scrolling.

The trade-off is that a long article pushes the projects and the operator further down the page. The nav keys in the top bar get you there in one press.

How an article gets here

Each article is a Markdown file in content/articles/. A build script turns it into its own page and adds it to the home page's list, newest first. When the page loads, a small script fetches the first one, takes its article element and puts it in the panel. Picking another one does the same and sets the address to the article's name, so the back button and shared links work.

Write the new article as a Markdown file in content/articles/.
Run uv run build.py and commit what it wrote.

Without JavaScript

Every item in the list is a normal link to the article's own page, so nothing breaks. The panel just shows a link to the newest article instead of the article itself.

A third-level heading

Headings inside an article step down a level in the panel, so the page keeps one outline: the section heading, then the article's title, then its own headings.

A last paragraph, so the end of the article sits well below the fold on most screens and the scroll has somewhere to go.

Placeholder article two

2026-10-20T00:00:00Z

Placeholder: this article exists to test the article panel and is replaced before launch.

This one carries the parts a real article uses: a subheading, code, a quote and an image with a path relative to this file, which the panel has to rewrite to keep working.

A subheading

Inline code sits in the text; a block keeps its own width:

<feComposite in="gray" in2="bayer" operator="arithmetic" k2="1" k3="1" k4="-0.5"/>

A quote, to see how Flesh's quote reads in the skin.

An image with a relative path: it shows in the panel only if the path was rewritten.

Placeholder article one

2026-10-12T00:00:00Z

Placeholder: this article exists to test the article panel and is replaced before launch.

One paragraph, so the panel shows what a very short article looks like.