A hand-picked list across computer science, design, and architecture — with a short analysis of what each one does well so you can steal the pattern, not just the pixels.
Don't clone a portfolio. Pick the pattern that fits your field — case-study depth for design, live demos for CS, a diagram-first PDF book for architecture — and rebuild it with your own work. When you're ready to build, read the step-by-step guide.
Recruiters want to see shipped code and clear thinking. These portfolios pair live demos with short, honest write-ups.
Software Engineer (Yale CS grad)
A benchmark CS portfolio. Left-fixed nav with active-section highlighting, a chronological experience timeline, and project cards that link to live sites and repos. Copy stays technical but readable — every project answers what, why, and stack.
Creative Developer
The entire homepage is a drivable 3D world. Extreme, but the takeaway is showing your craft through the medium — a WebGL developer builds a WebGL homepage. If your field has a medium, use it.
Frontend Engineer & Educator
Blog-forward portfolio. Josh proves depth through teaching — every article ships with custom interactive demos. Great model for students who want to signal expertise before they have big employers on their CV.
Designer / Developer
A living portfolio — redesigned every year, with old versions archived. Signals iteration and curiosity, which is exactly what recruiters look for in juniors.
Full-stack Developer
Minimal and honest. Above-the-fold answers who / what / how to hire. Perfect template for a student with 1–3 projects — don't fake volume, sharpen the pitch.
Design hiring is scored on process, not pixels. Study how these portfolios structure a case study from problem → decisions → outcome.
Illustrator / Designer
Turns a resume into a Mario-style level. Extreme execution, but it earned him press and job offers. Lesson: pick ONE distinctive interaction and polish it — don't sprinkle novelty everywhere.
UI/UX & Frontend Designer
Case studies open with the problem, not the pretty final screen. Every project shows research, sketches, and constraints — this is what design hiring managers actually score.
Product Designer
Magazine-style grid, generous whitespace, opinionated writing. Students often skip the writing — but a paragraph of point of view outperforms three more Behance shots.
Product Designer
Great template for design students: three case studies, each ~800 words + screens + a Loom-style video. Depth over breadth wins junior roles.
Product Designer
Feels like a conversation, not a resume. First-person voice + a clear list of who he wants to hear from removes the awkward cold-outreach barrier.
Architecture still lives in the PDF book. These references show how students sequence studio work with diagrams, plans, and sections.
Architecture practice inspiration
Even if you're a student, borrow the structure: cover image, concept diagram, plan, section, one paragraph of intent. Recruiters skim — the diagram does the talking.
Architecture / M.Arch students
Architecture still runs on the PDF book. Study the top-liked student portfolios on Issuu for grid systems, drawing hierarchy, and how to sequence a five-year studio archive into ~40 pages.
Architecture & fine art students
Popular with M.Arch and RCA students. Templates give you a defensible visual system so the work — not the CSS — carries the portfolio.
Architecture student portfolio
A well-known student reference. Notice how each project runs: concept → site → plan → section → detail → model photo. Copy that spine and swap in your own work.
M.Arch, GSD
Grad-school-tier portfolio. Two-color palette, huge diagrams, minimal body text. Great reference for how to make dense studio work feel calm.