Logo
Back to Resources
Career Foundations12 min read

Portfolio Starter Kit

Layout ideas, content prompts, and visual principles to build a portfolio that turns visitors into interview invitations — works for designers, developers, writers, marketers, and students.

Browse jotlee templatesMore resources

What a portfolio is (and isn't)

  • A portfolio is curated proof of your skills — not everything you've ever made.
  • Quality beats quantity. 3 excellent case studies outperform 12 mediocre samples.
  • It should answer one question for the reader: "Can this person do what I need them to do?"
  • It's not a CV. Don't list responsibilities — show the thinking, the process, and the outcome.

If a piece doesn't make you proud to share it, don't include it. A short, strong portfolio always wins.

The 3 must-have sections

  • 1. Hero / About — Your name, role, one-line value proposition, and a professional photo (optional but recommended).
  • 2. Work samples / Case studies — 3–5 projects with context, your role, what you did, and the result.
  • 3. Contact — Email, LinkedIn, and one clear CTA ("Let's work together" or "Book a call").

Optional additions

• Optional: Testimonials (1–2 quotes from collaborators)

• Optional: A short video introduction (30–60 seconds)

• Optional: Skills or tools list (keep it brief)

• Optional: Resume download link

Don't over-engineer it. A clean, fast-loading portfolio with 3 great projects beats a complex site with 10 average ones.

Layout & visual principles

  • White space is your friend — don't cram. Breathing room = professionalism.
  • Use a 2-font maximum: one for headings, one for body text. Stick to Google Fonts.
  • Limit your palette: background + 1 accent colour + neutral text. 3 colours total.
  • Every project thumbnail should look consistent — same aspect ratio, similar style.
  • Mobile first: over 60% of portfolio traffic is mobile. Test on your phone before publishing.

Great portfolios look intentional, not accidental. Every spacing, colour, and font choice should feel deliberate.

Case study template — use for every project

Answer each field in 2–5 sentences max. Keep it tight and scannable.

01.Project title

Give it a clear name, not a codename. "E-commerce Checkout Redesign" is better than "Project X".

02.Your role

Be specific: "Lead UX Designer" or "Backend Developer" — not just "Contributor".

03.The problem

What was broken, missing, or needed solving? Give context in 1–2 sentences.

04.Your process

What steps did you take? Include research, decisions, and trade-offs. Show thinking, not just outputs.

05.The solution

What did you build or deliver? Include screenshots, mockups, code snippets, or writing samples.

06.The result

What changed? Use numbers where possible: "Reduced load time by 60%", "Grew sign-ups by 2x".

07.Tools used

Figma, React, Python, After Effects — list the stack or tools relevant to the role you're targeting.

Tips by role

Designers (UI/UX, Graphic)

  • ▸Lead with your process — wireframes, research, iterations
  • ▸Include a before/after comparison for redesign projects
  • ▸Show mobile AND desktop versions of every interface
  • ▸Explain your design decisions, not just the final output

Developers (Frontend, Backend, Full-Stack)

  • ▸Link to live demos and GitHub repos for every project
  • ▸Explain the architecture and why you made key tech decisions
  • ▸Include a README that's clear enough for a non-technical hiring manager
  • ▸Highlight performance metrics: load time, test coverage, uptime

Writers & Content Creators

  • ▸Curate 3–5 pieces that show range (different formats, tones, or industries)
  • ▸Always link to published work when possible
  • ▸Add a brief context note: "Written in 2 days for a campaign targeting Gen Z"
  • ▸Include before/after edits if you did content strategy or editing

Marketers & Growth

  • ▸Lead with results: "Campaign reached 500k, drove 12% conversion"
  • ▸Include screenshots of ad creatives, email campaigns, or landing pages
  • ▸Show the funnel: strategy → execution → outcome
  • ▸Include a case study on a failed experiment — it shows analytical maturity

Students & Career Changers

  • ▸Use academic projects, freelance work, hackathons, or personal projects
  • ▸One strong self-initiated project can outperform 5 class assignments
  • ▸Clearly label student/personal projects — recruiters appreciate honesty
  • ▸Focus on the process and what you learned over the polished outcome

Start with a template, not a blank page

Browse jotlee's professionally designed templates — built for students, graduates, and career changers across every industry.

Browse templatesResume Blueprint guide