This site — Own project

There’s no “open app” button here — you’re already inside it. This site is both a portfolio and its own case study. I’m showing it here because it most honestly answers the question: what can someone who designs and codes actually do? The answer isn’t a description. It’s the page you’re navigating right now.

Architecture: static Astro, zero database

The site is a collection of ready-made HTML files — loads instantly, nothing to hack, hosting costs pennies. The whole system runs on Astro 7 in static mode, with content collections described by a Zod schema. Portfolio, case studies, and AI projects are separate collections with their own frontmatter — adding a new entry means dropping in a markdown file and an image, no code changes needed.

Portfolio data lives in works.ts — a simple typed array with categories (znaki, druk, firmowe, opakowania, kampanie) that powers the homepage grid and portfolio filtering. Each work is just file, title, client, cat — minimum formalities, maximum flexibility.

Images pass through sharp at build time: Astro automatically generates responsive srcset in WebP, with proper sizes and loading strategy. OG cards (1200×630) are generated by a separate script that scans the pixels of the letter “ı” to plant the registration mark to the subpixel — zero manual positioning.

Visual system: inks, not a palette

The entire identity is derived from process printing inks — the same ones I used to close print files for over 10 years. The fox’s orange isn’t picked from a palette — it’s calculated as a 60% magenta overprint on 100% yellow in multiply mode. This isn’t a metaphor added after the fact: the color in the browser actually forms from two inks (mix-blend-mode: multiply), not from a hex code.

The dot above the dotless “ı” in “lıs” is a registration mark — the alignment target from a print sheet, the same crosshair the press operator uses to check if inks hit their register. Technical specs are set in monospace and carry real data (print run, inks), not decorative “eyebrows.” Typography is the variable font Bricolage Grotesque driven on width axes. Every element traces back to one source — the prepress department.

A living logotype

The logotype in the header is two ink plates layered in real time — you can grab them with the cursor and tear them apart; they’ll spring back to register. Letters breathe in width on hover. On scroll, the whole word docks into the navigation logo — native scroll-driven animations, no libraries.

Beneath the mark stands a colophon: print #45DB · edition 1/1. Every visit randomizes a different number and different micro-misregistration of the plates — like every print from a real press run.

AI as engineer, not generator

I designed the system myself — the ink concept, registration mark, data architecture, every typographic decision are mine. AI (Claude Code) was an engineering tool that let me translate this design into production code — independently, without a dev team, in a fraction of the time the same work would take manually.

Craft lives in the details

Accessibility is the floor, not a decoration. If you’ve disabled animations in your OS, you don’t get a dead page — you get a properly registered, static print. Every animated effect has its static counterpart. Visible keyboard focus, “skip to content,” screen reader descriptions.
Static HTML, zero client-side dependencies. The site loads no JS framework where it doesn’t need one. Interactions (hero, reveal) are vanilla TypeScript, loaded conditionally.
Sitemap, OG meta, structured data — all generated automatically at build time.

Why this is in the portfolio

Because the weakest proof is a claim, and the strongest is an artifact. I could write that I design consistent systems and implement them with AI. I could also give you a page that is that system: you browse it, click it, scroll it — and the whole time you’re standing inside the proof.