Building sajawal.dev in public
Why this site exists, the charcoal and paper design system behind it, and the hero that compiles itself. First entry in building it in public.
This site is a bet. I think a personal site can be a portfolio, a publication and a product demo at the same time, without giving up speed or search rankings to get there.
The idea
The hero literally compiles. Raw code types itself out, then a sweep renders it into the page you're reading. That's the whole thesis of the site in one animation: everything here was built, not assembled.
const Hero = () => (
<section className="hero">
<h1>Sajawal</h1>
<p>engineer · founder · educator</p>
<Button href="/work">See the work</Button>
</section>
);The rules
A few constraints keep the whole thing honest:
- Every page is real, crawlable HTML. Motion sits on top and never blocks content.
- One accent color, two voices: bright lime on charcoal, olive ink on paper.
- If a fancy thing costs load speed, the fancy thing loses.
The sites that impress engineers aren't the ones with the most animation. They're the ones where the motion feels engineered.
More entries as the build goes on. The changelog has the short version.