What you'll build
Your personal portfolio website with Next.js and Tailwind CSS. It will have an "About me" section, a project gallery with interactive cards, a list of technologies you master, a contact form, and a dark mode toggle. By the end, you'll have a professional site ready to show recruiters or clients, that you can publish to Vercel with one click.
Essential sections
- About me - Who you are, what you do
- Projects - Your best work
- Skills - Technologies you master
- Contact - How to reach you
Step 1: Ask an AI for the design
I need a personal portfolio with:
- Header with sticky navigation
- Hero with my name and role
- Projects section with cards (image, title, link)
- Skills with technology icons
- Contact form
- Dark mode toggle
- Next.js + Tailwind CSS
- Subtle animations
Give me the commands and code.
Step 2: Follow the instructions
The AI will give you:
npx create-next-app@latest portfolio --typescript --tailwind
cd portfolio
npm run dev
And the code for the components.
What to include in projects
For each project:
- Screenshot or gif
- Clear title
- Brief description (1-2 lines)
- Technologies used
- Links: Demo + GitHub
Tips
| Tip | Why |
|---|---|
| Less is more | 3-5 good projects > 10 mediocre |
| Keep it updated | Recent projects first |
| Make it yours | Personality in design |
| Optimize | Fast load = good impression |
Next step
→ Static Blog — Share your knowledge