The complete 2026 guide — what to include, how to design it, which projects to feature, how to write compelling case studies, and where to host it for free.
G-Tech Blog | 2026 | 18 min readYour portfolio is often the first real impression you make on an employer, recruiter, or potential client — and in tech, it carries more weight than almost any other single document. A CV tells someone what you claim to be able to do. A portfolio proves it. A well-built tech portfolio can get you shortlisted over candidates with stronger academic credentials, more years of experience, or better-known companies on their CV, simply because it demonstrates your thinking, your craft, and your ability to ship real things. This guide walks you through every aspect of building one that actually works.
The tech hiring landscape has shifted significantly. In a market where anyone can list "React" or "Python" on a CV, employers have learned that self-reported skills are unreliable signals. What they trust is evidence: code they can read, projects they can click, problems they can see you have solved. A portfolio provides exactly this evidence in a format that is faster to evaluate than reading a stack of CVs and more revealing than any interview question.
Research consistently shows that software developers with strong portfolios receive more interview invitations, progress further in hiring processes, and accept offers at higher salary bands than equivalent candidates without portfolios. This is not because portfolios are a magic trick — it is because they signal something CVs cannot: that you actually build things, that you care enough to maintain a public presence, and that you have the communication skills to explain what you built and why.
The biggest mistake developers make when building a portfolio is starting with the technology ("I'll use Next.js and Tailwind") before answering the strategic questions ("Who's this for? What should they feel and do after seeing it?"). Your portfolio is a product. Like any product, it should be designed for its users — in this case, the specific employers, clients, or recruiters you want to attract.
Before touching a line of code or opening a design tool, answer these questions clearly. Are you targeting local employment, international freelancing, or remote jobs? Are you a specialist (backend only, mobile only) or a generalist? Are you early in your career and need to compensate for limited experience, or established and looking to move upmarket? Are you targeting product companies, agencies, or startups? Each of these decisions should influence the projects you feature, the tone of your writing, the technologies you emphasize, and the visual style of the site itself.
The hero section is the first thing every visitor sees. It must answer three questions instantly: who you are, what you do, and what you want. A strong hero has your name, your specific role title (not just "developer" — be specific: "Frontend Developer specializing in React and Next.js"), and a clear call to action. Keep it to 2— 3 lines of copy. Include a professional headshot — even a decent phone photo with good lighting significantly increases the human connection a visitor feels.
’R Weak: "Hi, I am a passionate developer who loves coding and learning new things."
“& Strong: "I am Brian Ochieng — a Full-Stack Developer based in Nairobi, Kenya. I build fast, accessible web applications with React and Node.js and specialize in M-Pesa payment integrations for African businesses."
This is the centrepiece of your portfolio and the section that gets the most attention from technical reviewers. Show 3— 6 projects — quality over quantity. Every project should be deployed and accessible via a live link. For each project, include: the project name and a one-line description, the problem it solves and who it serves, the technology stack, a screenshot or short video recording, a link to the live demo, and a link to the GitHub repository with a proper README.
The order matters. Lead with your strongest, most relevant project — not necessarily your most recent one. If you are targeting frontend roles, lead with your best UI work. If you are targeting backend roles, lead with a project that demonstrates API design, database architecture, or system design thinking.
List the technologies and tools you can use professionally. Group them into logical categories for easy scanning: Languages, Frontend, Backend, Databases, Cloud/DevOps, Design Tools, and Other. Avoid skill bars, percentages, or rating systems ("JavaScript —————————9") — these are subjective and often misleading. Simply listing the technology communicates that you can use it; employers will verify depth in interviews.
The About section is where your portfolio becomes a person rather than a list of technologies. Write 2— 3 short paragraphs: your background and what led you to tech, what drives your work (not "passion for coding" — something more specific and real), and what you are currently working on or learning. Mention your location, especially if you are applying for local Kenyan roles or if you are available for remote international work. End with a link to your CV and your contact details.
Make it effortless to contact you. Include: your professional email address, a LinkedIn profile URL, your GitHub profile URL, and optionally a WhatsApp number (particularly useful for local Kenyan clients). A simple contact form is a nice touch but not key — many visitors prefer clicking a mailto link or copying your email directly. Whatever you include, make sure it works and that you check it regularly.
A brief chronological list of employment, internships, and freelance engagements. Helpful for mid-career developers; less necessary for beginners who can let projects speak.
A 2— 3 sentence quote from a previous client, manager, or colleague. Even one genuine testimonial adds significant credibility. Ask satisfied clients explicitly.
Links to technical articles you have written. Demonstrates communication skills and depth of knowledge. Can be articles on your own site, Dev.to, Hashnode, or Medium.
Links to pull requests or projects you have contributed to. Signals community engagement and the ability to work within existing codebases — a skill employers value highly.
Project selection is the most consequential decision in building your portfolio. Two developers with identical skills can have portfolios that produce completely different hiring outcomes based solely on which projects they chose to showcase and how they described them. Here is a strategic framework for choosing what to include.
Projects that address Kenyan or African contexts differentiate you from international candidates in ways that matter to local employers and demonstrate cultural context that global employers find interesting:
Most developer portfolios list projects with a screenshot and a technology tag list. The ones that stand out go further with a case study: a structured explanation of the problem, the approach, the decisions made, the challenges overcome, and the outcome. A well-written case study shows technical depth, communication ability, and problem-solving thinking — three things that a technology list alone cannot convey.
Problem: A Nairobi-based online clothing store was collecting payments through bank transfers only, losing customers who expected to pay via M-Pesa.
Solution: Built a WooCommerce plugin that integrates Safaricom's Daraja API, enabling STK Push payments directly from the checkout page with automatic order confirmation.
Technical decisions: Used PHP for the WordPress plugin (matching the WooCommerce ecosystem), implemented webhook verification to prevent fraudulent payment confirmations, and added a transaction log table for reconciliation. Chose the Daraja STK Push API over C2B because it provides immediate user feedback within the checkout flow.
Challenge: The Daraja sandbox environment behaves differently from production for callback URLs. Solved this by using ngrok during development to expose localhost as a public HTTPS endpoint for testing.
Outcome: Deployed to 3 Kenyan e-commerce sites. Processes an average of KSh 250,000/month in transactions. Plugin available as open source on GitHub with 40+ stars.
The skills section is one of the most mishandled parts of a developer portfolio. Listing 30 technologies to appear full actually undermines your credibility — experienced reviewers immediately discount long generic skill lists because they know they can't possibly be accurate. The goal is not to list everything you have ever touched, but to clearly communicate your genuine areas of competency.
HTML/CSSJavaScriptTypeScriptReactNext.jsTailwind CSSResponsive DesignGit
Node.jsPythonExpress/FastAPIPostgreSQLREST APIsDockerAWS/GCPGit
FlutterDartReact NativeFirebaseM-Pesa APIAndroidApp Store
React/Next.jsNode.jsPostgreSQLPrismaREST/GraphQLVercel/NetlifyGit
Your GitHub profile is as important as your portfolio website — possibly more so for technical reviewers. Many companies check GitHub before they check anything else. A dead GitHub profile (no activity, no README files, private repositories) weakens even a beautiful portfolio website. An active, well-organized GitHub profile strengthens applications even without a portfolio website.
You do not need to be a designer to have a great-looking portfolio — but you do need to make conscious design choices. A portfolio that is difficult to navigate, slow to load, or visually chaotic reflects on your attention to detail as a developer. The following principles create a professional, effective portfolio without requiring advanced design skills.
There's no single correct technology stack for a portfolio. The best choice depends on your skills, how much customization you want, and how much time you want to invest. Here are the main approaches with honest trade-offs.
| Approach | Best For | Time to Build | Customization | Maintenance |
|---|---|---|---|---|
| Hand-coded HTML/CSS/JS | Developers who want full control and a fast, lightweight site | 1— 3 days | Total | Low |
| React / Next.js | React developers; good for SSG/SSR, easy Vercel deployment | 2— 5 days | Total | Low |
| Astro | Developers wanting minimal JS with component-based design | 1— 3 days | High | Very Low |
| Hugo or Jekyll (static site generators) | Developers comfortable with templating; blog-heavy portfolios | 1— 2 days | Medium | Very Low |
| No-code tools (Webflow, Notion + Super.so) | Designers or developers who want speed without coding the portfolio itself | Half a day | Limited | None |
There's no reason to pay for portfolio hosting. Every major free hosting platform supports the technical requirements of a developer portfolio and provides HTTPS automatically. Here is a breakdown of the best free options.
The best hosting option for React and Next.js portfolios. Deploy by connecting your GitHub
repository — Vercel automatically rebuilds and redeploys every time you push. Includes a free
custom subdomain (yourname.vercel.app), HTTPS, global CDN, and analytics. Supports
custom domains on the free plan.
Excellent for HTML/CSS/JS, Hugo, or Jekyll portfolios. Same workflow as Vercel — connect GitHub and deploy automatically. Includes form handling (useful for contact forms), split testing, and a generous free tier. Supports custom domains with automatic HTTPS.
Built into GitHub. Every account gets a free yourusername.github.io subdomain. Best
for static HTML/CSS/JS or Jekyll sites. The advantage is zero external services — your portfolio
lives in your GitHub account alongside your code. Custom domain support is included.
Cloudflare's static hosting platform. Known for the fastest global CDN performance of any free hosting option. Unlimited bandwidth, 500 builds per month, and native support for React, Vue, Angular, Svelte, and Hugo. Excellent if your visitors are geographically distributed.
A custom domain (brianochieng.dev or janemugo.com) is not required to have a
strong portfolio, but it makes a meaningful difference in how professional you appear — particularly for
freelancing and job applications to companies that pay attention to detail. The annual cost is very low:
a .dev domain costs approximately KSh 1,200— 1,800/year from Namecheap or Porkbun; a
.com costs similar amounts; a Kenyan .co.ke costs KSh 900— 1,500/year from
Truehost or Safaricom Domains.
firstname.dev or firstnamelastname.com is the
professional standard.dev TLD signals tech-specific intent and is increasingly common among
developersA single static portfolio trying to appeal to every possible employer rarely does any of them well. The most effective portfolios are subtly adjusted for the specific type of role or client being targeted. This does not mean rebuilding from scratch — it means being strategic about which projects you feature prominently, what your hero section says, and how you describe your experience.
| Target | Lead with | Emphasize | Include |
|---|---|---|---|
| Local Kenya employer | M-Pesa integrations, local business projects | Business impact, local domain knowledge | KES pricing, local client testimonials |
| International freelance (Upwork/Fiverr) | Your most polished, universally understandable project | Clean code, communication skills, delivery speed | USD rates, timezone availability, specific service packages |
| Remote job application | Your most technically complex project | Architecture decisions, code quality, scale | GitHub activity, async communication experience, tools used |
| Startup / agency | Full-stack or fast-delivery projects | Versatility, speed, shipping culture | Side projects, tools built under time pressure |
Most developers do not think about SEO for their portfolio — which means that developers who do have a significant advantage. A portfolio that ranks on Google for searches like "freelance React developer Nairobi" or "Next.js developer Kenya" generates inbound interest without any outreach effort. This is not guaranteed overnight, but the right technical foundation makes it possible.
<title> tag: "Brian Ochieng — React Developer in Nairobi,
Kenya" ranks better than "Portfolio"<meta name="description"> of 120— 160 characters that includes your name,
role, and locationalt attributes to all images — describe what the image shows, include relevant
keywords naturally<nav>, <main>,
<section>, <article>, <footer> — Google
reads the structure of your page
A portfolio with broken demo links immediately signals carelessness. Set a monthly reminder to click every link on your portfolio and verify they load. Free hosting on Render may put apps to sleep — upgrade to always-on or switch to Vercel/Netlify to avoid cold-start pages that look broken.
A TODO app, a weather app, and a movie search app from popular YouTube tutorials all look the same to reviewers who have seen them hundreds of times. Replace at least two of these with projects that solve specific, real problems in your context.
"I am a passionate developer with a strong work ethic and a team player" appears on thousands of portfolios. Every sentence in your portfolio should be specific to you. Replace generic phrases with concrete, specific statements about your actual experience and approach.
Burying your contact in a footer that requires scrolling through the entire page, or using only a form with no direct email, creates friction that costs you enquiries. Put your email and LinkedIn link prominently on the hero section and in a dedicated Contact section.
Claiming AWS or Kubernetes expertise without a single deployed project using those technologies is a red flag to experienced reviewers and will be exposed in interviews. Only list what your projects can verify.
A significant portion of recruiters and clients browse on phones. Test your portfolio thoroughly on actual mobile devices — not just the browser's responsive design mode. Pay special attention to navigation, image sizing, and text readability.
A portfolio is not a one-time build — it is a living document that should grow with your career. The most impactful thing you can do after launch is commit to a regular update schedule. Set a calendar reminder every 3 months to review and update your portfolio. Each review session should take 1— 2 hours and cover the following.
Three to six is the sweet spot for most developers. Below three, you do not have enough evidence for reviewers to form a confident impression of your capabilities. Above six, the portfolio begins to feel like a catalogue rather than a curated selection — and you implicitly ask reviewers to judge your weakest work alongside your strongest. If you genuinely have ten strong projects, consider creating a dedicated Projects page that shows all of them, while keeping only the top three to four on the main page as "featured" work.
For a developer portfolio specifically, building from scratch is generally better. The portfolio is itself a demonstration of your skills — a template tells a reviewer that you can configure and deploy an existing solution, which is less impressive than demonstrating that you can design and build a clean, functional website independently. If time is genuinely limited and you need something live quickly, use a minimal template but customize it thoroughly so it does not look like the original. Avoid over-designed Canva-style templates that prioritize aesthetics over function.
This is the most common question from students and career changers — and the answer is more encouraging than most people expect. Build the projects. No prior experience is needed to create portfolio projects. Choose a real problem you or someone you know faces — a business that needs a website, a process that could be automated, a tool you wish existed — and build a solution for it. Do 2— 3 projects across different complexity levels: one that demonstrates fundamental skills (a well-built static site), one that demonstrates a full stack (a CRUD app with a database), and one that demonstrates something you genuinely care about solving. These three projects are sufficient to get shortlisted for junior roles.
A portfolio that impresses employers is not the result of extraordinary design talent or years of experience. It's the result of making deliberate choices: choosing projects that demonstrate real problem-solving, writing case studies that show your thinking, presenting your skills honestly, optimizing for the audience you want to reach, and maintaining the portfolio as your career evolves.
The developers who consistently get the jobs and clients they want are not always the most technically skilled. They are the ones whose work is most visible, most clearly communicated, and most credibly demonstrated. A well-built portfolio is the most reliable tool for achieving all three of those things.
Start today — even with one project, a simple one-page site, and a GitHub README. An imperfect portfolio live on the internet is worth infinitely more than a perfect one still being planned. Ship it, share it, and improve it over time. Your future employer or client is out there looking for exactly what you can offer.