About this template
Personal Showcase is a agency portfolio page built from one written brief, and this page documents that brief. The palette runs deep blue #050E13 underneath and white #EFEEE9 for the type, and the type is Inter. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. Motion is confined to 300ms transitions, cubic-bezier(0.76, 0, 0.24, 1) and a looping video bed. Borrow the structure and not the subject: the portfolio page and its numbers move to your brand unchanged.
Designed for
- If you brief a model rather than a designer, start from the portfolio and let the prompt hold a 1462x1080 frame.
- Teams building an agency or studio portfolio page who want the measured detail (16vh sections and 28px spacing steps) rather than a screenshot to copy.
- This portfolio serves founders who need one screen of proof that agency copy can carry 12.9s of looping video.
What's included
- A bar with nothing spare. Navigation is a single row with no second level under it. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 1462x1080 composition without a background of its own, so the media runs edge to edge underneath it. Test the bar over your own media before giving it a background.
- Measured against the viewport. The brief states its sizes at capture (16vh sections, 28px spacing steps, 300ms transitions and cubic-bezier(0.76, 0, 0.24, 1) easing), so a rebuild can be verified instead of approximated. A rebuild that hits those numbers looks like the reference without further tuning. Keep the named values when you port the page.
- Type does the styling. With Inter doing the work, the sizes step down hard from the headline to the supporting copy and letter-spacing tightens as the size grows, so the hierarchy is carried by type rather than colour. Substituting the face is possible, but the proportions have to survive the swap. Keep the steps, swap the face.
- The footer is a full composition. Links are grouped into columns with the wordmark in its own block, which keeps a long footer readable instead of turning it into a list.
Motion & interaction
Durations from the brief
State changes are specified at 300ms, so the feedback on the controls is a designed value rather than a browser default. The durations are short enough that feedback reads as a response rather than as an animation. The timings are part of the design, not a finishing pass.
The loop does the ambient work
Ambient movement is one 12.9s clip at 1462x1080, looping quietly behind the copy rather than reacting to the pointer. Because it is muted, the loop can run under the copy without competing for sound or focus.
The order behind the portfolio page
A page like this usually buries the action under a feature grid. This one puts navigation, the stats row and the footer in a fixed sequence, with the action inside the first screen rather than after three scroll lengths. A agency reader gets the offer before the options.
Making the portfolio page yours
Change the copy and the media first, the colour second, the layout last. The 1462x1080 frame and the Inter scale are what hold the page together, so substitute around them rather than through them. Keep the frame and the scale; the subject is the part that should change.
How the portfolio page reflows
Where a template collapses to a single column and hopes, this brief states what happens (the section is held at 16vh, the navigation collapses into a mobile menu and the motion has a reduced-motion branch) and keeps the order intact. A squeeze would have been cheaper and would not hold.
Frequently asked questions
Is the Personal Showcase prompt a finished spec or a starting point?
The captured brief runs 6,948 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.
Why is Personal Showcase's prompt not printed here?
Everything quoted on the page comes from the captured 6,948-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Do I need React and Tailwind CSS to rebuild Personal Showcase?
Personal Showcase 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.
