How I built my freelance developer portfolio with Next.js 15

As a full-stack developer and software engineering student in Casablanca, my portfolio is my most important project — it's the first thing a potential client sees. Here's how I built it and the choices that mattered most.

Why Next.js 15 and the App Router

I wanted a site that is fast by default, easy to make SEO-friendly, and simple to scale as I add projects. The App Router gives me server-rendered pages, per-route metadata, and static generation for content pages — all of which matter for ranking and load speed.

• Static generation for the homepage and every project case study
• next/image for automatic AVIF/WebP and responsive sizes
• Per-route metadata (title, description, canonical, OpenGraph)

SEO that actually gets you found

A beautiful site nobody can find is useless. The highest-leverage things I did: a clean sitemap, a real Person schema in JSON-LD so search engines understand who I am, and dedicated case-study pages that target long-tail queries about each project's stack.

Structured data won't rank you overnight, but it helps search engines confidently connect your name, your work, and your skills into one clear entity.

Performance is a feature

I compressed a 27 MB demo video down to under 4 MB, converted every screenshot to WebP, and made sure the hero headline renders on the server so it paints instantly. On a mobile-first market like Morocco, this directly affects both ranking and whether a visitor stays.

Built to convert, not just to look good

Every section leads toward one action: starting a project. A persistent "Hire me" button, a freelance inquiry form that captures project type, budget and timeline, and honest social proof instead of fake reviews.

If you're a developer building your own portfolio: lead with what you can do for the client, prove it with real work, keep it fast, and make the next step obvious. Want to talk about a project? Get in touch — I reply within 24 hours.