⟵ the door 010 · take something

no. 010

Take something

Most portfolios ask for your attention. This page pays for it. Below is everything I'd hand a friend who wanted to build a site like this. Every tool is free, chosen from real research, and none of it sits behind an email field. Print this page if you like; it's typeset for paper too.

The whole free stack, one line per decision

Type: Fontshare for distinctive faces (or use system fonts, zero bytes, zero permission needed) · pairing via Fontjoy · scale via Typescale.

Color: explore with Coolors or Khroma · verify with PaletteChecker: contrast checks, colorblindness simulation, free exports.

Icons: Lucide for clean defaults · Eva Icons if you don't want to look like everyone else's defaults.

Illustration: unDraw (recolorable) · Hero Patterns for texture · Haikei for organic shapes.

Images: Unsplash · compress everything through Squoosh before it touches your site.

Motion: GSAP is fully free now, ScrollTrigger included, and sits behind most award-site motion. For gentler needs, CSS transitions and an IntersectionObserver are enough. That is all this site uses.

3D, if truly needed: Spline without code, Three.js with it.

Design tool: Penpot: open source, browser-based, no seat limits. The Figma alternative nobody advertises.

Ship it: Cloudflare Pages, with unlimited bandwidth on the free tier · favicon from Real Favicon Generator · audit with axe DevTools and Lighthouse before telling anyone.

The five rules, if you'd rather take those

1. How you organize reveals how you think. Invent your own categories; the industry's categories describe the industry.

2. Show the unfinished. Completion got cheap, and honesty about work in progress is what stands out now.

3. Give the viewer something. This page is my attempt. Make your own version and the relationship changes from audition to encounter.

4. Keep contradictions. A site that never disagrees with itself reads as managed, and managed reads as false.

5. Put care where it wasn't required. The 404 page, the print stylesheet, the footnote spacing. Care is the hardest thing to fake and the first thing people feel.

One honest warning, free with any purchase of nothing

Tools were never my bottleneck, and they are probably not yours. My bottleneck was the tenth round of preparation that postponed the first round of making. If that sentence stung, close this tab and go build the thing. That's the real gift. The tools above are just so you have no excuses left.