Aliyu UsmanColophon
How this site is built, and why it looks the way it does.
The section band
Each project is drawn as a cross-section of a weld, the subject of my B.Eng. thesis at FUT Minna. The brief is the base metal, what was built is the heat-affected zone, and where it stands now is the weld that has to hold. Zone widths follow how much there is to say about each. The grain is a Voronoi tessellation generated at build time from the project's slug, with coarse grains for base metal, fine grains for the heat-affected zone, and columnar grains for the weld.
- briefAcademic administration for The Federal Polytechnic, Bida
- builtRole-based workflows for curriculum, students and examiners, with generated attendance sheets, score sheets and examiner payment documents
- resultLive in production at The Federal Polytechnic, Bida
The weld takes the colour of the work: a temper tint, the colour steel turns as it heats.
- Engineering
- Product design
- AI/ML
- Teaching
Type
- t-5, 40–88px, Geist, regularMake it hold
- t-4, 28–44px, Geist, regularHeat-affected zone
- t-3, 20–26px, Geist, mediumPostSem
- t-2, 16–18px, Geist, regularA live production system for The Federal Polytechnic, Bida, delivered through Sprinary Limited. It runs role-based academic workflows for curriculum management, student administration and examiner administration, and generates attendance sheets, score sheets and examiner payment documents.
- t-1, 12–13px, Geist Mononext.js / nestjs / postgresql / drizzle orm
Colour
Monochrome, dark unless you switch it: the interface has no colour of its own, so the only colour on a page comes from the work, in each project's band. Every pair below is measured in your browser from the current theme's tokens, so switching themes re-checks it.
| Pair | Sample | Ratio | Needs |
|---|---|---|---|
| Text on page | Aa | – | 4.5:1 |
| Text on panel | Aa | – | 4.5:1 |
| Secondary text on page | Aa | – | 4.5:1 |
| Secondary text on well | Aa | – | 4.5:1 |
| Links on page | Aa | – | 4.5:1 |
| Links on panel | Aa | – | 4.5:1 |
| Button label | Aa | – | 4.5:1 |
| Active item | Aa | – | 4.5:1 |
| Error text | Aa | – | 4.5:1 |
| Input borders | – | 3:1 | |
| Engineering tint | – | 3:1 | |
| Product design tint | – | 3:1 | |
| AI/ML tint | – | 3:1 | |
| Teaching tint | – | 3:1 |
Motion
Motion only shows a change you caused. Nothing on this site waits for an animation before you can read it, and reduced motion removes all of it.
- --dur-instant
- 90ms
- Pressed and focus states
- --dur-quick
- 160ms
- Hover and small reveals
- --dur-base
- 240ms
- Menus and drawers
- --dur-slow
- 420ms
- A card's band widening into a case-study header
Grid
Twelve columns from 48rem, four below, with the gutter and gap scaling with the viewport.
Stack
- Next.js 16 App Router and React 19, rendered to static HTML
- Tailwind CSS 4 for layout; colours, type and motion are plain custom properties in app/globals.css
- Geist and Geist Mono, self-hosted and subset by next/font
- d3-delaunay, run at build time to draw the grain; no graphics code ships to the browser
- Resend for the contact form