Developer Portfolio Website
Build a personal portfolio site with a project showcase, an about page, and a contact form — a great first real project for practicing AI-assisted front-end development.
Technology used
- Next.js
- TypeScript
- Tailwind CSS
- MDX
AI coding tools you'll need
- Claude Code
- Cursor
- GitHub Copilot
Skills you'll practice
- How to structure a small multi-page site with the App Router (home, projects, about, contact)
- How to render project case studies from a typed content file instead of hardcoded JSX
- How to build an accessible contact form that sends email without a backend server
- How to use AI prompts effectively for layout and copy while keeping your own voice
- How to set up a custom domain and lightweight analytics for a personal site
Step-by-step build
- 1
Scaffold the project
Set up a Next.js + TypeScript + Tailwind project using the App Router.
- 2
Define your content model
Create a typed `lib/projects.ts` file listing each project you've built (title, description, stack, links, image).
- 3
Build the homepage
Add a short intro, a photo placeholder, and a preview grid linking to your top 3 projects.
- 4
Build the projects pages
Build a `/projects` index and a dynamic `/projects/[slug]` case-study page rendered from your typed content.
- 5
Build the About page
Add your background, skills, and a downloadable resume link.
- 6
Build the contact section
Add a form that posts to an API route wired to an email service, plus direct links to email, GitHub and LinkedIn.
- 7
Polish the design
Add dark/light mode support if desired, and refine typography and spacing across pages.
- 8
Run an accessibility pass
Check keyboard navigation, visible focus states, alt text, and color contrast.
- 9
Deploy
Deploy to Vercel and connect a custom domain.
Paste this into your AI coding tool
Adapt the placeholders in brackets to your own product, then iterate on the result step by step rather than expecting a perfect first pass.
Build a personal developer portfolio site using Next.js (App Router), TypeScript and Tailwind CSS. Structure: a homepage with a short intro, headshot placeholder, and a grid linking to my top 3 projects; a /projects page listing all projects pulled from a typed lib/projects.ts array (fields: slug, title, description, stack, liveUrl, repoUrl, image); a dynamic /projects/[slug] page rendering a full case study for each; an /about page with my background and a resume download link; and a contact section with a form that POSTs to /api/contact, validates the input, and returns a success/error state to the user. Use clean, accessible markup, add proper metadata per page, and make the whole site fully responsive. Use placeholder content for my name and bio that I can easily find and replace, but do not use lorem ipsum — write real-sounding placeholder sentences.
SEO considerations
- Give each project case-study page its own unique title tag and meta description
- Use a single H1 per page and structure headings hierarchically within each case study
- Add Person/ProfilePage structured data so search engines understand it's a portfolio
- Compress and properly size the headshot and project screenshots to avoid slow image loads
- Add a sitemap covering the homepage, about page, and every project case study
- Use descriptive link text for project links instead of generic 'click here'
Deployment steps
- Push the repository to GitHub
- Import into Vercel for automatic builds on every push
- Configure the contact form's email provider API key as an environment variable
- Attach a custom domain in Vercel's domain settings and verify DNS
- Add a lightweight analytics script to track visits without heavy tracking scripts
Related projects
AI-Powered SaaS Landing Page
Build a fast marketing landing page for a SaaS product with a hero, feature grid, pricing table, and an email capture form wired to a real API route.
Markdown-Powered Blog
Build a statically generated blog with Markdown/MDX posts, categories, and per-post SEO metadata — a solid project for learning content-driven Next.js sites.
AI Content Generator
Build a tool that turns a short brief into marketing copy, blog outlines, or social posts using an LLM API, with saved history and export options.
Ready to build developer portfolio website?
Pick a tool from the directory, paste in the starter prompt, and iterate from there.