What you'll learn
Quick Answer
Four sections: who you are in one line, three projects with live links, your skills as plain text, and how to contact you. Anything that delays a reader from reaching the projects is working against you.
Be clear about what it is for
A portfolio site has one job: convince someone with limited time that you can build things, and make it easy for them to check. It is not an art project, and it is not a CV in HTML.
That framing settles most design arguments. A full-screen animated intro delays the reader from reaching your projects, so it is a cost. A dark-mode toggle is a small demonstration of front-end skill, so it is a small benefit. Judge every feature by whether it helps a busy stranger reach your work faster.
It is also worth being realistic: for most junior roles your portfolio is a supporting document. The GitHub profile and the projects themselves do the heavy lifting. A good portfolio site makes those easier to find.
The four sections that matter
1. A one-line introduction. Name, what you do, what you are looking for. "Final year CSE student. I build backend systems in Python and Java. Looking for a 2027 new-grad role." Concrete and scannable beats "passionate developer with a zeal for innovation", which says nothing and appears on thousands of sites.
2. Three projects. This is the whole site. For each: what it does in one line, the stack, a live link, a repository link, and one sentence on the hard part. Three good ones beat eight weak ones, because a reader assumes the average rather than the best.
3. Skills, as plain text. A simple grouped list. Skip the percentage bars — nobody knows what "JavaScript 80%" means, and it invites the question of what the missing 20% is.
4. Contact. Email, GitHub, LinkedIn. Visible without scrolling to the end, and an email address you actually read.
Optional and genuinely useful: a link to your resume as a PDF. Optional and usually not: a blog with two abandoned posts, a testimonials section with no testimonials, and a visitor counter.
Writing the projects section
This is where portfolios are won and lost. Compare:
"E-Commerce Website — A full-stack e-commerce website with modern UI and many features."
against:
"E-Commerce Store — MERN. Handles concurrent checkouts without overselling stock, by reserving inventory inside the payment transaction rather than after it. Live demo · Code"
The second tells a technical reader that you met a real problem and solved it deliberately. It also hands your interviewer a question you already know the answer to, which is a good position to be in.
Every link must work. A dead demo link is worse than no link, because it reads as "this person does not check their own work". Test them on the day you apply.
What to build it with
Whatever you already know. This is not the project to learn a new framework on, because the site is a means to an end and the end has a deadline.
- Plain HTML and CSS is completely acceptable and loads instantly. For a static one-page portfolio it is arguably the correct choice.
- React or similar if you want the site itself to demonstrate framework skill for a front-end role.
- A template is fine, as long as you customise it. Recruiters recognise unmodified templates, and an obviously untouched one signals less than plain HTML you wrote.
Non-negotiables: it must work on a phone, it must load fast, and it must be reachable at a real URL. See how to deploy your project for free — a static portfolio is the easiest thing there is to host.
If you want a worked starting point, our projects catalogue includes a personal portfolio build with the structure above.
The common mistakes
- Adjectives instead of evidence. "Passionate, hardworking, quick learner" appears on every site and is checked by nobody.
- Under construction sections. Delete them. An empty section is worse than a missing one.
- An intro animation before the content. Every second is a chance to close the tab.
- No live links. The single most common and most costly omission.
- Not updating it. A portfolio with a 2024 project listed as "current" reads as abandoned.
Spend one evening on it, ship it, then spend your remaining time making the projects better. The projects are what get you interviews; the site just makes sure they get seen.