Your portfolio is a living project. As you learn new skills, your portfolio should grow with you. This guide covers enhancements you can add to make your portfolio stand out.

'use client'

import { useState, useEffect } from 'react'

export default function ThemeToggle() {
  const [dark, setDark] = useState(false)

  useEffect(() => {
    const isDark = localStorage.getItem('theme') === 'dark'
    setDark(isDark)
    document.documentElement.classList.toggle('dark', isDark)
  }, [])

  function toggle() {
    const next = !dark
    setDark(next)
    localStorage.setItem('theme', next ? 'dark' : 'light')
    document.documentElement.classList.toggle('dark', next)
  }

  return (
    <button onClick={toggle} aria-label="Toggle dark mode">
      {dark ? '☀️' : '🌙'}
    </button>
  )
}

Configure Tailwind’s dark mode in tailwind.config.ts:

export default {
  darkMode: 'class',
  // ...
}

Use Framer Motion for page transitions and scroll animations:

npm install framer-motion

'use client'

import { motion } from 'framer-motion'

export default function AnimatedSection({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  )
}

Turn the optional blog section into a full Markdown blog:

1. Create content/blog/ folder with .md files
2. Read and parse them with gray-matter and remark
3. Display posts with syntax highlighting via rehype-highlight

Use Sanity or Contentful to manage your portfolio content:

• Sanity: Real-time editing with a visual editor
• Contentful: Headless CMS with a generous free tier
• Notion: Use Notion as a CMS with @notionhq/client

npm install @vercel/speed-insights @vercel/analytics

import { SpeedInsights } from '@vercel/speed-insights/next'
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
        <Analytics />
      </body>
    </html>
  )
}

• Keep it updated — Add new projects as you build them
• Remove outdated work — Replace early projects with stronger ones
• Show process — Include “what I learned” sections in project descriptions
• Link to live demos — Deploy every project so visitors can interact with them

Your portfolio is never truly done. Add dark mode, animations, a blog, or CMS integration as you grow. The best portfolios are those that reflect the developer’s current skill level and interests.

• Building Pages
• Deployment
• Phase 6 — Performance & SEO