How I Built a ChatGPT-Style Portfolio with Next.js

·2 min read
nextjsreactportfoliotailwindcssui-design

The Idea

Most developer portfolios follow the same patterns — hero sections, project grids, contact forms. I wanted something different. Something that reflects how I actually work with technology every day.

That's when it hit me: what if my portfolio looked like a ChatGPT conversation?

The idea was to present my professional information as if an AI was researching and compiling data about me in real-time, complete with chain-of-thought reasoning steps, search results, and progressive disclosure.

Tech Stack

Here's what powers this site:

  • Next.js 16 — App Router with static generation for fast page loads
  • React 19 — Latest features including Server Components
  • Tailwind CSS — Utility-first styling for rapid development
  • TypeScript — End-to-end type safety
  • Radix UI — Accessible, unstyled component primitives
  • Lucide Icons — Clean, consistent iconography

The Chain-of-Thought Component

The core of the design is a custom ChainOfThought component system that mimics how AI models display their reasoning:

<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep
      icon={SearchIcon}
      label="Searching for profiles..."
      status="complete"
    >
      <ChainOfThoughtSearchResults>
        {/* Search result badges */}
      </ChainOfThoughtSearchResults>
    </ChainOfThoughtStep>
  </ChainOfThoughtContent>
</ChainOfThought>

Each step animates in sequentially using timed state updates, creating the illusion of an AI processing information in real-time.

Progressive Disclosure

Instead of showing everything at once, information reveals itself step by step:

  1. Search — Social profiles are "discovered"
  2. Profile Photo — Found and displayed
  3. Bio — Compiled from public information
  4. Work History — Professional experience extracted
  5. Skills — Technical skillset aggregated

This keeps visitors engaged and encourages them to scroll through the entire page.

SEO Considerations

Even with a creative UI, SEO fundamentals matter:

  • Semantic HTML with proper h1, main, and nav elements
  • JSON-LD structured data for Person and WebSite schemas
  • Open Graph and Twitter Card meta tags
  • Dynamic sitemap and robots.txt
  • Statically generated pages for fast load times

Key Takeaways

  1. Differentiation matters — A unique portfolio stands out in a sea of templates
  2. Animation adds polish — Subtle, purposeful animations make the experience memorable
  3. SEO still matters — Creative design shouldn't come at the cost of discoverability
  4. Keep it fast — Static generation ensures the site loads instantly