colophon
This site is an artifact. The CV is on warm paper. The site is warm ink on a dark, lamp-lit desk. Same person, same register.
The idea
Three things happen here: making, breaking, and playing. What ties them together is that all three are the same act, reading a signal carefully until it tells you something. HTTP traffic, an audio buffer, a model's output. So the site is built as an instrument rather than a terminal: a display, a scale, and a control surface along the bottom edge.
The mark
The rule under my name is one trace read twice.
The left half is a real plucked note: near-instant attack, exponential decay, a fundamental plus a second harmonic, and a vibrato that widens the longer the note is held. Then it hits the quantiser, and the right half comes out the other side as a square wave carrying clean logic levels.
Those levels are not decoration. They are the ASCII of toprak.sh, most significant bit first, nine characters and seventy-two bits. You can decode it off the screen with a ruler if you are the kind of person who would.
Analogue in, data out. That is ToneForge (a guitar going into C), that is the proxy (traffic going into findings), and it is why the mark reads as engineering rather than as a picture of a song. The lit segment travelling along it is a playhead.
It is a server component, so the geometry is computed once at build time and ships as plain markup. The sweep is one CSS keyframe. No canvas, no JavaScript.
Typography
- Display: Fraunces by Undercase Type. A variable old-style serif with optical-size, softness and wonk axes, all three actually used. (SIL Open Font License)
- Body: Instrument Sans. Sharper and more opinionated than the usual grotesque, and it holds up next to Fraunces without arguing with it.
- Mono: IBM Plex Mono. An engineering drawing in a typeface. Used for the prompt, the shell, every kicker, and all data.
Palette
Warm near-black (#0a0908). Not pure black, which feels harsh on a sharp display, and not blue-black, which made the whole thing read as generic hacker green.
The primary accent is an amber phosphor (#e8a33d), used for the prompt, focus rings, links and the mark. Amber rather than mint because the room this site is set in has a lamp and a tube amp in it. Cold cyan (#5fd4d0) carries data and stack chips. A signal green appears only on live status dots. Critical is a refined rose, never a pure red.
Every text colour clears WCAG AA against the canvas, including the quietest one, which sits at 4.8:1 on purpose rather than by accident.
Stack
- Framework: Next.js 16 (App Router · static export).
- Styling: Tailwind CSS v4 with raw CSS variables for the palette. No
@applychains. - Rendering: the page is a server component. Everything is in the HTML on the first byte, so nothing animates in front of the content and a crawler sees the whole page rather than a name.
- Interactivity: three small client islands. A wall clock, the shell dock, and a scroll observer. No animation libraries anywhere.
- Hosting: static
out/on Cloudflare Pages, apex served through the Cloudflare edge.
The shell
/ opens it from anywhere on the page. Tab completes, the arrow keys walk your history, esc closes it, and help prints the manual. Same shell on every screen, rather than a novelty parked at the bottom of the homepage.
On closed source
Two of the four things in §01 cannot be opened. Öğrenci Nerede Yer has real users' data behind it and Glitch is in private alpha. ToneForge is closed for now for reasons that are mine.
I would rather say that plainly than leave a blank space where a repo link should be. Every entry states where its source stands, and for the closed ones the engineering detail in the bullets is the part I can show. If you want more than that, ask and I will screen-share the thing running.
What this site doesn't do
No glassmorphism. No dot grid hero. No rounded-xl cards with soft shadow. No hero gradient blob. No newsletter popup. No AI illustration. No typewriter effect holding the page hostage for three seconds. No "Hi, I'm Toprak 👋."
If a paragraph here ever uses the word passionate, the paragraph gets deleted.
EOF.