About this template
Before rebuilding a about page for an agency or studio, read Portfolio About: the composition and the specification behind it are both here. Colour is limited to black #0C0C0C underneath and white #D7E2EA for the type, set in Kanit. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. Motion is 200ms transitions, kept quiet enough that the copy still leads. Start from the captured brief, then edit the about page rather than rebuilding it from scratch.
Designed for
- If the reference is only a starting point, designers can keep a 640x468 frame and rebuild the rest of the about page.
- Product teams writing their own About page copy who need every line to keep the length the display type was sized for.
- Made for a solo founder shipping one about page for an agency or studio and no design system behind them.
What's included
- The brief names the steps. Type and spacing are drawn from one list here: 160px spacing steps and 200ms transitions. There is no invented intermediate value between the named ones; the measurement list is the whole system.
- Badge above the fold. One badge, one message: the pill sits above the headline in Kanit at the smallest step, and nothing else competes for that slot. The pill sits at the smallest step in the brief, so it reads as a label rather than as a second title.
- Copy first, decoration second. The about page is built so the copy lands before anything else: the type carries the hierarchy, the 640x468 frame holds the composition, and the supporting values stay quiet. The page is one composition at 640x468, which is why it holds together when the copy changes. The brief is the specification.
- Numbers carried into the build. Spacing is quoted the same way (160px spacing steps and 200ms transitions), not as a scale that grows on its own.
Motion & interaction
The whole animation budget
Every state change in the specification has a duration attached: transitions settle around 200ms. Nothing is left at the browser default, which is why the page feels authored rather than animated. One value is reused across the controls, so their timing cannot drift apart.
Reveals tied to movement
The effect sits on top of a finished layout rather than generating it, so the page is readable with a sticky element holds position while the content moves under it disabled. Reduced motion drops the effect without changing the composition's final state. The reference was captured at 640x468.
Making the about page yours
When you drop your own media in, keep the crop and the layer order. The media is a still at 640x468. That placement is what keeps the copy legible. If a new element does not help explain the offer or the next action, it belongs below the fold.
How Portfolio About sequences the first read
Set your own copy into this about page and the sequence still holds, because the elements are not interchangeable: the announcement badge, the stats row and the feature list each carry one job. A agency reader gets the offer before the options.
What holds up for Agencies & Studios
5,431 characters of brief produce one screen with no filler. The values in it are explicit (160px spacing steps and 200ms transitions), which is why the composition still reads when the words change. Portfolio About states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
Is the Portfolio About prompt a finished spec or a starting point?
The captured brief runs 5,431 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
How is this Portfolio About entry organised?
Everything quoted on the page comes from the captured 5,431-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Why does the entry name React and Tailwind CSS at all?
Portfolio About was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
