1
🎓 View Certificate (1)
← Back

Build a Portfolio Website

Create a professional portfolio with projects and blog.

Sign in to track your progress

Step 1: Next.js Setup

Initialize Next.js with App Router

⏱️ 2-3 hours

🎬 Video Walkthrough

📝 Code

bash
npx create-next-app@latest portfolio --typescript --tailwind --app
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Use App Router for better features

Hint 2 (unlocks after 10min)

Install Tailwind during setup

⚠️ Common Pitfalls:

  • Configure metadata for SEO
  • Set up fonts properly
  • Create layout structure

Step 2: Pages & Routing

Create About, Projects, Blog pages

⏱️ 3-4 hours

🎬 Video Walkthrough

📝 Code

typescript
export default function About() {
  return (
    <section className="max-w-4xl mx-auto py-12">
      <h1 className="text-4xl font-bold mb-6">About Me</h1>
      <p>Your story here...</p>
    </section>
  )
}
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Use file-based routing

Hint 2 (unlocks after 10min)

Create shared layout

⚠️ Common Pitfalls:

  • Use layout.tsx for shared UI
  • Add navigation component
  • Handle active links

Step 3: MDX Blog

Set up MDX for blog posts

⏱️ 4-5 hours

🎬 Video Walkthrough

📝 Code

javascript
import createMDX from "@next/mdx"

const withMDX = createMDX()

export default withMDX(nextConfig)
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Install @next/mdx

Hint 2 (unlocks after 10min)

Configure MDX in next.config

⚠️ Common Pitfalls:

  • Add frontmatter parsing
  • Create blog post template
  • Handle code syntax highlighting

Step 4: Project Gallery

Showcase projects with images

⏱️ 3-4 hours

🎬 Video Walkthrough

📝 Code

typescript
const projects = [
  { 
    title: "E-commerce Store", 
    image: "/projects/ecommerce.png", 
    tech: ["Next.js", "Stripe"],
    link: "https://example.com"
  }
]
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Use next/image for optimization

Hint 2 (unlocks after 10min)

Create project cards

⚠️ Common Pitfalls:

  • Optimize images with next/image
  • Add filtering by tech
  • Include live demo links

Step 5: Contact Form

Add contact form with validation

⏱️ 2-3 hours

🎬 Video Walkthrough

📝 Code

typescript
"use server"

export async function sendEmail(formData: FormData) {
  const email = formData.get("email")
  const message = formData.get("message")
  // Send email using Resend
}
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Use Server Actions

Hint 2 (unlocks after 10min)

Add email service (Resend)

⚠️ Common Pitfalls:

  • Validate email format
  • Add spam protection
  • Show success message

Step 6: Deploy & Analytics

Deploy to Vercel with analytics

⏱️ 1-2 hours

🎬 Video Walkthrough

📝 Code

bash
git push origin main
# Auto-deploys via Vercel
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Connect GitHub to Vercel

Hint 2 (unlocks after 10min)

Enable Vercel Analytics

⚠️ Common Pitfalls:

  • Set up custom domain
  • Add Vercel Analytics
  • Configure OG images
  • Test on mobile

Study Timer

🎯 Focus
25:00
Stay focused!
Total Study Time
0m
💡 Work: 25 min • Break: 5 min

⚙️ Technologies

Next.jsMDXTailwind