Everyone says you need a portfolio website. Nobody tells you what goes on it.
So you open a blank file, write "Welcome to my portfolio!" at the top, and then spend three hours picking a font. Two weeks later it's still not online, and the folder is named portfolio-final-new.
Sound familiar? Good, because this post fixes it. I'll walk you through what to put on your portfolio, how to make it look decent when you're no designer, and how to get it live without paying anything. No fancy skills required.
1. Do You Even Need One?
Fair question. If you already have a clean GitHub profile (I wrote a whole post on that), you're ahead of most people.
But a portfolio site does something GitHub can't: it lets you tell your own story, in your own order, on your own terms.
- GitHub shows your code. A portfolio shows your thinking.
- You control what people see first.
- You get one link to put on your resume, LinkedIn, and job applications.
- It proves you can finish and ship something, which is exactly what employers want to know.
It doesn't need to be huge. One good page beats a ten-page site nobody finishes.
2. Think of It as a Movie Trailer
Here's the mindset that changed how I approach this.
A movie trailer doesn't show the whole film. It shows the best moments in about two minutes, leaves you curious, and makes you want more.
Your portfolio is your trailer. Nobody will read every project description or scroll through everything you've ever made. They'll spend about half a minute deciding whether you're worth a closer look. So show your best three or four moments, make them easy to understand, and give people a clear next step.
3. What to Put On It
Keep it simple. A strong beginner portfolio has five parts:
- Hero section. Your name, one line about what you do, and a button that leads somewhere (like "See my projects" or "Contact me"). Example: "Computer engineering student building web tools and learning backend."
- Projects. Three or four of your best. Quality over quantity.
- About. A short, human paragraph. Where you study, what you're into, what you're learning. Add a photo if you're comfortable.
- Skills. A short list of tools you actually use. Skip the progress bars that say "JavaScript 85%." Nobody knows what that means, including you.
- Contact. Email, LinkedIn, and GitHub links. Make sure they work.
Optional extras: a link to your resume, and a blog or writing section if you publish posts.
4. How to Present Each Project
This is where most beginner portfolios fall apart. A screenshot and a title isn't enough.
For each project, answer these in a few lines:
- What is it? One sentence.
- What problem does it solve? Why did you build it?
- What did you use? The tech, in a short list.
- What was hard? One real challenge and how you dealt with it.
- Where can I see it? A live link and a GitHub link.
That "what was hard" line is gold. It shows that you can reason about your own work, and it gives an interviewer something to ask you about. If you used AI tools in the process, say how and where you checked the results.
5. Choose How You'll Build It
You have three realistic paths. Pick one.
Path A: A template or website builder. Fastest. Great if you're short on time or don't want to touch code. The downside is you learn less and it looks less unique.
Path B: Plain HTML, CSS, and a little JavaScript. Slower, but you learn a ton and you fully control it. This is my pick for a first portfolio, especially if you're still learning the basics. A portfolio you coded yourself doubles as a project.
Path C: A framework like React, Astro, or Next.js. Powerful, but it's a lot to learn at once. Choose this only if you already know it.
If you're unsure, go with Path B. Here's how small the starting point is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name | Web Developer</title>
<meta name="description" content="Student developer building web tools. See my projects.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Computer engineering student building web tools.</p>
</header>
<main>
<!-- projects, about, contact go here -->
</main>
</body>
</html>
That's a real starting page. Everything else is filling in sections and styling them.
6. Make It Look Good Without Being a Designer
You don't need talent. You need a few simple rules.
- Two fonts at most. One for headings, one for body text. Free options on Google Fonts have plenty of good pairings.
- Two or three colors. One background, one text color, one accent for buttons and links.
- Lots of whitespace. Crowded pages look amateur. Empty space looks confident.
- Consistent spacing. Use the same gaps between sections and cards.
- Readable text. Dark text on a light background, or the reverse, with strong contrast. Don't put light gray on white.
- Mobile first. Many people will open your link on a phone. Check it there before anything else.
Steal ideas shamelessly, in a good way. Browse a few portfolios you love, notice what they do (spacing, layout, how they show projects), then build your own version. Copying the approach is learning. Copying the code and content is not.
7. The Build Order That Works
Follow this sequence and you'll finish:
- Sketch it. A rough wireframe on paper or in Excalidraw. Five boxes, no colors.
- Write the words first. Your one-liner, About paragraph, and project descriptions. Design goes faster when the content exists.
- Build one page. Get it working end to end, ugly is fine.
- Make it responsive. Test on a phone-sized screen.
- Add polish. Colors, fonts, a hover effect or two.
- Deploy. Don't wait for perfect.
The biggest killer of portfolios is polishing something that isn't online yet. Ship the ugly version, then improve it.
8. Put It Online for Free
You can host a portfolio at no cost. Common options are GitHub Pages, Netlify, Vercel, and Cloudflare Pages. All of them can turn a folder of files into a live link in minutes, usually straight from a GitHub repo, so every update goes live automatically when you push.
Free plans and their limits change over time, so check the current details when you sign up.
Later, consider a custom domain like yourname.com or yourname.dev. It costs a little each year and looks much more professional than a long default address, but it's optional. Don't let it delay your launch.
9. The Small Details That Make You Look Professional
These take ten minutes and set you apart:
- Page title and description. What shows up in Google results and browser tabs. Include your name and what you do.
- A favicon. The tiny icon in the browser tab. Its absence quietly says "unfinished."
- A preview image for link sharing. When you paste your link into LinkedIn or a chat, a good preview card makes people click.
- Image descriptions (alt text). Good for accessibility and search.
- Compressed images. Huge photos make your site slow, and slow sites get closed.
- Working links. Click every single one. Broken links look sloppy.
10. Test It Before You Share It
Do a quick sanity check:
- Open it on your phone and on a different browser
- Ask three friends to look at it for five seconds, then tell you what you do. If they can't say, your hero section needs work.
- Read every word out loud for typos
- Make sure the contact links actually open the right thing
Then ask someone in the field for honest feedback. A senior student or a developer in your club works great. Honest feedback stings for a minute and helps for years.
11. Common Mistakes
- Waiting for it to be perfect. It never will be. Launch and iterate.
- Too many projects. Ten mediocre ones drown out three great ones.
- Tutorial clones. Every to-do app and weather app looks the same. Add something of your own.
- Fake skill bars and buzzwords. Show, don't claim.
- Never updating it. An old portfolio with two-year-old projects says you stopped building.
- Ignoring mobile. More people than you think will open it on a phone.
12. Keep It Alive
A portfolio isn't a one-time task. Every few months, add your newest project, retire the weakest one, and reread your bio. Set a calendar reminder so it doesn't rot.
Also, add your portfolio link everywhere: your GitHub profile, LinkedIn, Dev.to bio, resume, and email signature. A great site nobody visits does nothing for you.
Now Go Write One Sentence
Don't open a code editor yet. Open a plain text file and write your one-line intro: who you are and what you build.
Once you have that sentence, everything else gets easier. Then sketch five boxes, write the content, and build it in one weekend. You can improve it forever after that.
Let's Connect
I'm Prayush Adhikari, currently grinding through computer engineering, leading an IT club, and building my own company on the side. I write about Linux, productivity, and the honest side of being a developer.
Drop your portfolio link in the comments once it's live. I'd like to see it and give feedback.
- LinkedIn: linkedin.com/in/adhikareeprayush
- GitHub: github.com/adhikareeprayush
- Portfolio: prayushadhikari.com.np
What should I write next: how to stay consistent and avoid burnout while learning to code, or how to land your first freelance client as a student?
Top comments (0)