About this template
This is the portfolio page from Creative Portfolio, published with the brief that produced it rather than as a screenshot. It leads with “I craft bold brands and modern websites with purpose” and gives that line the frame rather than shrinking it into a card. The palette is deep green #181B17 underneath, white #DED9CF for the type and bright blue #309ADA carrying the accents, set in Figtree. The build is React and Tailwind CSS; every measurement in it is written down, which is what makes it reusable. Motion is confined to 1200ms transitions and cubic-bezier(0.16, 1, 0.3, 1). Use it as the reference when you are building an agency or studio portfolio page and want a finished composition instead of a starting point.
Designed for
- Founders who brief an agency will use the 640x468 frame as the acceptance test for the first round.
- In-house squads extending this portfolio page who need type from 28px to 200px and 80px spacing steps carried into the new blocks unchanged.
- People who brief a model on a portfolio page will use the 5,639-character prompt as the starting point.
What's included
- A navigation bar that gets out of the way. Links sit on one line at a single size, and the #309ADA action closes the row on the right so the eye finishes where the navigation ends. The links are set below the wordmark in size, and the #309ADA action is the only element in the bar with any weight. The bar is a handful of elements, so it rebuilds without a component library.
- One scale for type and frame. Nothing here is eyeballed. The spec fixes type from 28px to 200px, 80px spacing steps, 1200ms transitions and cubic-bezier(0.16, 1, 0.3, 1) easing, and the rest of the layout derives from those values. The list is short enough that a reviewer can check it element by element.
- Copy first, decoration second. The portfolio 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.
- Top row, one action. Test the bar over your own media before giving it a background. The reference was captured at 640x468.
Motion & interaction
Text arrives in pieces
The entrance gives the page its arrival, and the composition is unchanged once it has run: sections reveal as they enter the viewport. Under reduced motion the element simply appears and the layout is unchanged. If the copy changes length, the entrance still reads because it works per line.
The page answers the scroll
Content is tied to scroll position (sections reveal as they enter the viewport), so the composition changes as the reader moves rather than animating on a timer. The composition does not depend on the effect firing, so a fast scroll past it costs nothing. Test it with reduced motion on.
The order behind the portfolio page
Nothing here competes with the first decision. The page says it out loud: “I craft bold brands and modern websites with purpose”. The supporting material waits below the fold, and navigation, the stats row and the background clip carry the top of the page alone. A agency reader gets the offer before the options.
Making the portfolio page yours
Start with the promise, not the decoration. Rewrite “I craft bold brands and modern websites with purpose” as one sentence that names what you do, then set it in Figtree at the display size the brief uses. Replace bright blue #309ADA with your own accent and check it against deep green #181B17 before you touch anything else. Keep the media crop; it is doing as much work as the type.
Reading Creative Portfolio as a spec
You cannot fix a composition by eye when two people are rebuilding it. The brief removes the argument: type from 28px to 200px, 80px spacing steps, 1200ms transitions and cubic-bezier(0.16, 1, 0.3, 1) easing, stated once. Nothing in this portfolio page depends on a default.
Frequently asked questions
How long is the prompt behind Creative Portfolio?
The captured brief runs 5,639 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 much of Creative Portfolio depends on React and Tailwind CSS?
Creative Portfolio 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.
How much of Creative Portfolio is animated?
Transitions are attached to interface states rather than to a scroll timeline, and they resolve in the 1200ms range using cubic-bezier(0.16, 1, 0.3, 1). The brief records the values so a port can match them without guessing.
