Project — 01
This site, built from
My personal site, designed and built from the ground up. Brand, logo, layout and copy.
Type
Design & build
Completed
Tools
Framer, Claude, Illustrator, Google Fonts
(01)
Why I built it
A LinkedIn profile shows where you’ve been, and a CV only has room for one line about each thing. I wanted somewhere to show how I think: the models, tools and ideas I’m working on, in a format I control. Building it from scratch felt like the right first project.
(02)
What I did
Built a brand around emerald and saffron, with a dark main theme and a light mode.
Designed a bilingual mark pairing the Arabic عبد with the Latin “abd”.
Set up a layout system: numbered sections, mono labels, serif headlines with one gold italic word.
Wrote all the copy and built every page in Framer.
(03)
What I learned
I treated this site the way I’d approach any new problem: pick the right tool, ship a rough version, then improve it. The design was built on a few deliberate rules. One palette of emerald and saffron. Serif headlines with a single gold italic word. Mono labels for structure. A geometric pattern, and a bilingual mark built from my name. Holding those rules together across two themes and mobile took several passes, and it taught me that good design is mostly consistency.
Turns out a good website and a good model have the same problem: everything has to add up. The site’s finished for now, but like any good model, it’s built to be updated.
Homepage
The mark, letter by letter
Two themes
Mobile