Portfolio
A portfolio is judged by its work within seconds. This order puts projects first, explains them with results, then introduces the person and ends with a simple way to start a project together.
The order
Top to bottom, the way the sections sit on the finished page.
Step 1 / 6 · Portfolio
Portfolio
Selected work as large images, the strongest project first.
Projects as a filtered grid, large rows, a sideways gallery, an index with hover pictures, a project header and a project in numbers.
Step 2 / 6 · Case studies
Case studies
Two or three projects told from task to result show how the work comes about.
Customer stories with results, from a card grid to a full case study header and measured before and after.
Step 3 / 6 · About
About
The person, the way of working and the values behind it, kept short.
Story, values, mission, offices on a dotted map, numbers and the founders.
Step 4 / 6 · Personal brand
Freelancer
Services, availability and rates for clients who want to book.
For freelancers and solo studios. An intro with live availability, the next months week by week, rates with a day calculator, a project enquiry with budget range and a typical week as a timetable.
Step 5 / 6 · Testimonials
Testimonials
Words from former clients confirm what the projects promise.
Quotes, reviews, ratings, videos and posts from the people who use it.
Step 6 / 6 · Contact
Contact
A short brief form or a direct mail address to start the conversation.
Forms with validation, channels, a map, booking, opening hours, a help center and a sales form.
Install all of it at once
One command puts every component of this collection into your project.
aiw add @ai-website/portfolio @ai-website/case-studies @ai-website/about @ai-website/freelancer @ai-website/testimonials @ai-website/contactPrompt for your AI assistant
Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.
Build a portfolio with the UI Kit. Use Portfolio, Case studies, About, Freelancer, Testimonials and Contact in this order. Write real copy for my offer and check the page in light and dark.More collections
- SaaS landing pageFrom the promise to the trial
- Local businessCafé, shop or trade around the corner
- Medical practiceTrust, hours and the next free slot
- Online shopFrom the shelf to the order
- Blog or magazineFront page, reading and coming back
- EventProgram, tickets and the countdown
- App dashboardThe frame and the screens inside it
- AI productWhat the AI does, shown honestly
- Creator pageOne person, their work and their audience