Readme
How I created this site
Artistry isn’t a vibe you can prompt. My career in tech started in web development, doing branding and site layouts for more than 100 clients. I designed the site’s structure and details in Illustrator, then wrote a Markdown quickstart guide as a framework for Claude Code to follow. The guide detailed the site’s branding, architecture, navigation, audience, and purpose, and drew on client questionnaires from my web design business.
Branding
The design is purposefully bold and colorful, with embedded silicon design and programming details.
The logo’s background shows portions of the Fibonacci sequence. The colors are inspired by the four inks of full-color printing: cyan, magenta, yellow, and key black.
I picked CSS color names that connect to my Dutch ancestry, including delft and licorice. I started with a Pantone palette and added colors from my graphics with the Illustrator eyedropper. I tweaked each hex value with opinionated feedback from my boys.
Bright colors are fills for tiles, chips, and buttons. Text uses licorice, or cream in dark mode. I tested every text and fill pair against accessibility standards.
All content text uses Figtree. IBM Plex Mono appears in the terminal details, like the cd prefix, the grep bar, and the 4-bit binary page numbers (0000.0010).
Warm
- cream#fcf8f2
- soft-yellow#f2efc0
- peach#f9e2da
Pink
- cool-pink#f9f0fc
- lavender#dec5e8
- fuchsia#ce459d
Blue
- light-blue#e2edf7
- delft#5681cc
- bright-blue#4853d3
Green
- mint#e8f9f6
- aqua#75d3ca
- teal#2b7d7f
Dark
- licorice#2f2a35
- wine#591a42
- grape#1f135b
Neutral
- white#fff
Mondrian tiles
Silicon chips are built from functional blocks, and that structure inspired the homepage. I drew the Mondrian-style tiles on a 1/12 grid map, then added the visual content. After launch, I tested resizing formulas to scale the design across devices.
Each tile has a light image and a dark image for the theme toggle.
- FPGA SoC
- Daisy
- Aqua
- Watercolor
- Paper
The 1/12 grid, with Illustrator column guides
Terminal
Learning Linux in my data engineering work inspired the terminal details. The nav reads as cd commands, and the search bar is an interactive tool to practice terminal basics. Type ls to list every page, cd readme to come back here, or any word to search titles, headings, and tools.
Writing rules
A prose lint runs on every commit. It blocks em dashes, sentences over 25 words, and Tara Mohr’s list of weak words, such as “just” and “actually,” that undercut women’s voices.
Architecture
One Astro monorepo builds this site and its subdomain apps, like the AI Lab. They share tokens, header, and footer, and the site deploys as static files.
~/readme $ ls
- ~
- /about
- /resume
- /portfolio
- /readme
- Python
- SQL
- Tableau