Your personal site: who you are, your projects with case studies, and a way to contact you.
The project for module 4, TypeScript and Next.js. It proves: next.js, typescript, seo and your personal brand.
Choose one theme, or your own idea. Same skills, but your portfolio won't look like everyone else's.
Classic: about, projects, contact
Case-study first: 3 deep project write-ups
Portfolio plus a small blog of what you're learning
Two short builds that practise the skills this project needs. About 3.5 hours in total.
A blog with a list page and a page per post, built from a typed array.
Done when: Each post has its own URL and title, and a wrong URL shows a 404.
A contact form that validates on the server and shows a success or error message.
Done when: Bad input shows clear errors without a page reload, and good input shows a thank-you message.
7 steps in order. Each one ends with a clear check, so you always know when to move on.
Write a 2-line intro, pick your 3 best projects, and for each one write the problem, what you built and what you learned.
Done when: A text file with all the words is done.
Lead with what you build for people, not a list of technologies.
Start a Next.js app with TypeScript and Tailwind, and add the home, projects and contact routes.
Done when: All routes load and share one layout with a nav.
Put shared header and footer in app/layout.tsx.
Store projects in a typed array (title, slug, problem, stack, links) and render cards from it.
Done when: Adding a project means adding one object, nothing else.
Define a Project type first. TypeScript will then tell you if a card is missing a field.
Build /projects/[slug] pages with generateStaticParams.
Done when: Every project has its own URL and a 404 for unknown slugs.
Call notFound() from next/navigation when the slug doesn't match.
Add metadata for each page and an Open Graph image.
Done when: Pasting your link in a chat app shows a title and preview image.
Use generateMetadata on dynamic pages so each project gets its own title.
Use next/image and next/font, then run PageSpeed Insights.
Done when: Performance scores 90 or more on mobile.
Large images are the usual problem. Give next/image a width and height.
Deploy on Vercel and add the link to your GitHub profile, LinkedIn and CV.
Done when: The link is live in all three places.
A custom domain is cheap and looks more professional than a .vercel.app link.
Tick each one when it's done. Saved to your account.
Optional. One of these makes your project stand out from the tutorial version.
Free APIs, tools and docs for this project.