API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
Living style guide
A warm welcome, all the way down.
Not a separate mockup. Every specimen below imports the components used by the site.
Direction: the familiar, slightly off-axis home.
Approved A, grounded in versions/v1 + v2: burgundy on warm paper, peach portrait framing, Newsreader display type and Lato. A personal personal greeting leads; projects carry the substance; the notification stream shares smaller changes from around Burooj's internet.
We considered the activity-first desk and the navigation-first circular index. The welcome stays because it is the direction Burooj selected. The composition revision pairs portrait with introduction and brings the first project into the opening screen. Its layout still awaits Burooj's visual review; preserving the palette is not enough on its own.
The hero, in context
Hey there!
Burooj here!
Frontend developer & designer
I make places on the web. Feel free to look around!
Composition → WelcomeHero imports Heading, Link, and the singular Portrait. The curved arrow below is retained as a historical specimen, no longer placed between the homepage introduction and work.
The ball nav, homepage form
On the homepage the same nav takes v1's uneven cluster and hangs into the introduction; narrower than 62.5rem it is the ordinary row. A ball lifts under the pointer and squishes when pressed, but its target never moves, so a press is always a click. A clicked ball becomes the page transition, which swells from that ball. No-JavaScript, touch and Reduced Motion visitors get the same links, without the sunrise.
The peeking B and J
v0's giant initials no longer sit at the foot of the homepage. Now and then, on any page, a B or a J peeks in from a screen edge or up from behind a section rule (on phones, from behind a picture too), and ducks when it is noticed or after a few seconds. One at a time, never over a line of text, never while scrolling; phones see them more often than wide screens. Reduced Motion turns it off; without JavaScript it does not exist.
Foundations
Paper
--color-page Burgundy
--color-accent Peach
--color-surface-strong Note
--color-surface Ink
--color-text Quiet ink
--color-text-soft Rule
--color-border Newsreader gives the page its voice.
Lato does the everyday work: introductions, metadata, navigation, and notes.
Shared colors, type scales, spacing, focus rings and motion timing live in src/design/tokens.css. The decorative corner alone owns its magnetic spring mechanics. Responsive contracts are 40.625rem and 62.5rem. Native media conditions cannot consume custom properties.
Links and wayfinding
The site navigation is one row of balls on every page, a tight honeycomb on phones. The current destination is the burgundy ball. Every destination stays visible on mobile and works without JavaScript.
A text link
An outbound text link
(opens in a new tab)
A pill
An outbound pill
(opens in a new tab)
A primary pill
Unavailable
An arrow means leaving the site, and nothing else. Inside the site a link has no arrow: the peach is the affordance, stretching under a pill's label or growing behind a text link's words, and on click the cover swells from that same shape. Leaving the site, a link wears the satellite: a small burgundy ball carrying one hand-inked arrow pointed out of the page, after the words or on a ball's rim. On hover the peach reaches it and kicks it a little way along its arrow.
One link language, one set of ball tokens. Navigation is balls; a standalone action is a pill, a peach ball resting behind its first letters that stretches under the whole label on hover; a primary action is the burgundy pill. Links inside prose stay text on a pencil rule, and on hover the same peach pill grows behind the words. Tab shows a ring that follows the shape.
From parts to real content
API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
Currently
I’m maintaining bjslab, my home-lab environment for the tools and services I use.
This site Project
A stable home for the API3 showcase
Updated the API3 Ecosystem record to point to the preserved showcase and its source repository.
Little signals from around my internet.
-
This site Project
-
This site Made
-
GitHub Pull request
-
GitHub Pull request
-
This site Project
-
This site Project
-
This site Project
A few things worth sharing, collected by hand.
A note can hold arbitrary content without inventing a new card style.
Motion Path Graph (external site)
Drawing a lotus one line at a time. An SVG path study using GSAP, stroke lengths, and a little orange and blue.
A smaller section title
The same heading grammar serves secondary sections.
Work, over time
2024
-
API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
Anatomy and contracts
| Component | Parts / slots | Variants | State and boundary |
|---|---|---|---|
| BallNav | Semantic navigation list → shared Link primitive (ball) | Row / compact honeycomb / homepage cluster; current / hover / focus / press | The one site navigation, on every page. Current page is the burgundy ball; project details retain the Projects marker. CSS only: no JavaScript dependency, and the hit area never moves. |
| Link | Label → arrow only when it leaves the site | Text / ball / pill / action; paper / wine | Native navigation; hover, focus, press, current, disabled. Disabled is a span. |
| Heading | Semantic heading → text or Link slot | Display / page / section / card / label; level 1–4 | Level does not change visual scale. No interactive behavior. |
| MediaFrame | Textured surround → image | Contain / cover | Reserved media space. Optional pointer shortcut beside an accessible title link; no duplicate tab stop. |
| Note | Peach silhouette → arbitrary content slot | Paper silhouette / plain content | Passive. No button behavior or card shadow. |
| TagList | Labeled list → items + editorial separators | One metadata recipe | Not controls; never styled like clickable filters. |
| ProjectRow | MediaFrame + Heading/Link + summary + TagList | Row / stack / feature | Featured work on Home and this guide; ProjectTimeline uses the same primitives for the full chronology. |
| CurrentNote / UpdateEntry | Note + Heading + Link / event glyph + sentence + date + provenance | Canonical current note / mixed notification stream | Projects persist; updates mark anything that changed. Curated events are not live presence. |
| SectionHeading / PageHeader / SectionIntro | Heading + optional context and Link | Section navigation / page title / compact intro | Never duplicate heading typography in the wrapper. |
| LabCard / MediaRail | MediaFrame + Heading/Link / image-video sequence | Lab listing / detail media | Video has native controls, no autoplay. |
| SiteHeader / SiteFooter | Identity + BallNav / identity + contact Links | Same shared chrome on every route | Active route is semantic; Resume remains available in footer. |
Shared colors and geometry belong to tokens; interaction belongs to its public component; assemblies import their children. The portrait, curve stay singular. Do not paste navigation markup into a page, put raw palette values in a composition, or fork project rows for this guide.