Portfolio Guide
How to build a portfolio that actually gets you interviews — what to include, what to leave out, and how to present projects.
Why Portfolios Matter for Frontend Developers
Frontend development is a visual discipline. You can describe your skills in a CV — or you can show them. A strong portfolio does two things: it proves you can build things, and it gives interviewers something concrete to discuss. Many junior developers get interviews purely based on their portfolio before any CV is read.
How Many Projects Do You Need?
3–5 high-quality projects is the right number. Quality beats quantity every time. A single impressive, polished project is worth more than 10 "built a todo app following a tutorial" projects.
What does "high quality" mean?
- It actually works — no broken buttons, empty pages, or console errors
- It looks decent — clean, legible, intentional design
- It is responsive — works on mobile and desktop
- The code on GitHub is readable and well-organised
- It has a README explaining what it is and how it was built
What Projects to Build
Projects that impress interviewers
- Something that solves a real problem you have (even a small one)
- A project that uses a real API (weather, GitHub, movie database)
- A full-stack project (even just with a JSON "backend" using a free service)
- A clone of a real product with visible improvements
- Something you are genuinely proud to show off
Projects that do NOT impress (but are fine as learning exercises)
- Tutorial clones with no personalisation
- "Basic Todo App" without significant extensions
- Landing pages with no functionality
- Unfinished or broken projects
Presenting Each Project
For every portfolio project, provide:
- A live demo link (GitHub Pages, Vercel, Netlify). If recruiters cannot see it working instantly, most will not look at the code.
- A short description: what it does, why you built it.
- The tech stack: list the main technologies used.
- Key challenges: one or two interesting problems you solved. This is great interview material.
- GitHub repository link: so the code can be reviewed.
A screenshot or GIF demo in the README and portfolio page significantly increases engagement.
Your Portfolio Website
Your portfolio website is itself a project. It does not need to be elaborate — but it should be:
- Fast-loading — a slow portfolio site is ironic for a frontend developer
- Accessible — you have learned about accessibility; use it here
- Mobile-responsive — many recruiters will view it on phones
- Clearly navigable — projects, about, contact at minimum
What to include on the homepage
- Your name and what you are (e.g. "Frontend Developer")
- 2–3 sentences about your background / what you focus on
- Links to your best 3–5 projects with live demos
- Your GitHub profile link
- Contact information or a contact form
What to leave out
- Skills bars showing "JavaScript 80%" — these are meaningless and look unprofessional
- Long personal backstory (save it for the About page)
- Placeholder projects or "coming soon" entries
- Tutorials you completed but did not build yourself
Hosting Your Portfolio for Free
- GitHub Pages — free, simple, good for static HTML/CSS/JS sites. URL:
username.github.io - Vercel — free tier, excellent for Next.js/React apps. Custom domain support.
- Netlify — free tier, easy drag-and-drop or Git-based deployment.
Get a custom domain (yourname.dev or yourname.com) if possible — it looks more professional. Domain registrars like Namecheap charge around £10–15/year.
Portfolio Checklist
- 3–5 polished, completed projects with live demo links
- Each project has a GitHub repository with a README
- Portfolio site loads quickly and looks clean on mobile
- Clear contact information visible
- No broken links or console errors
- Accessible — images have alt text, colour contrast is sufficient
- Your GitHub shows recent activity (green commit squares)