Components / CSS
<CSS />
Takes CSS seriously. This site’s stylesheet is part of the portfolio.
one <div>. no svg, no canvas, no js — gradients, shadows & keyframes only.
Custom properties, cascade layers, container queries, light-dark(), view transitions, logical properties — used in production, not just in talks. BEM naming for sanity at scale, semantic HTML underneath, no utility-class frameworks where craft is the point.
Everything you see here is hand-written CSS: the theme is driven by real design tokens (inspect the :root), dark mode is one light-dark() declaration deep, and the accent color is a custom property you can change on the tokens page.
Props
| Prop | Type | Value | Description |
|---|---|---|---|
methodology | string | BEM | Predictable naming that survives teams and years. |
theming | string | custom-properties + light-dark() | One token layer drives both themes — flip a color-scheme. |
layout | string[] | ['grid','container-queries','logical-props'] | Modern layout without a single media-query hack. |
frameworks | null | none | No Tailwind on this site. Not a religion — a portfolio choice. |
Do
- Design a token system before designing components.
- Use the cascade — it’s a feature, not a bug.
- Let :focus-visible, prefers-reduced-motion and color-scheme do their job.
Don’t
- Reach for JavaScript when a selector can do it.
- Name things .wrapper2-final-new.
- Ship 4MB of utility classes to render a paragraph.
AA contrast enforced at the token level: every ink/paper combination is checked.
Focus states are designed, not default — and never removed.