How I Built My Developer Portfolio — From Idea to Production

As a founding engineer at a startup, I've always believed that your portfolio should be more than just a list of projects — it should be an experience. Something that demonstrates not just what you've built, but how you think about building software.

This is the story of how I designed and built my developer portfolio from scratch using modern web technologies, and the philosophy behind every decision.

The Idea: More Than Just a Resume

Most developer portfolios follow a predictable template: hero section, about me, projects grid, contact form, done. They're functional, but they don't stand out in a sea of developers who all claim to be "passionate about clean code."

I wanted something different. Something that would make another developer think, "This person actually knows what they're doing."

My core principles:

• Show, don't tell — Let the site itself demonstrate my skills

• Developer-first experience — Easter eggs, APIs, and interactive elements that developers would appreciate

• Performance matters — A portfolio that loads slowly is a contradition

• Dark theme, always — Because we're developers, and we live in dark mode

The Tech Stack: Why Each Choice

Next.js 16 + React 19

Next.js was a no-brainer. As someone who works with it professionally at Frover, I know its strengths intimately. Version 16 with React 19 gives me:

• App Router for file-based routing and layouts

• Server Components by default — my portfolio is mostly static content, so why ship unnecessary JavaScript?

• Streaming and Suspense for smooth loading states

• Built-in image optimization — no need for a separate CDN for a portfolio site

Framer Motion

Animations make the difference between a good site and a memorable one. Framer Motion handles:

• Scroll-triggered reveals — Elements animate in as you scroll through sections

• Staggered animations — Skills cards, project cards, and timeline items appear one after another

• Page transitions — Smooth preloader with a typewriter name effect

• Hover interactions — Subtle feedback on every interactive element

Tailwind CSS 4

Utility-first CSS with the latest version. The dark theme is built on a carefully curated color palette — not just bg-gray-900 everywhere, but layered with subtle gradients and glassmorphism effects.

Key Features Deep Dive

The Interactive Terminal

This is my favorite feature. Instead of a boring FAQ section, I built a working terminal that developers can interact with:

$ help
Available commands:
profile    - View my profile info
skills     - List my technical skills
projects   - Browse my projects
experience - View work history
api        - Hit the live /api/profile endpoint
clear      - Clear terminal
sudo hire vishwam - Try it ;)

The terminal supports command history (arrow keys), auto-complete (tab), and even fun Easter eggs like sudo hire vishwam. It directly hits the /api/profile endpoint, demonstrating that the site has a real API layer — not just static HTML.

The Public API

Speaking of APIs, the portfolio has a genuine REST API at /api/profile that returns my structured profile data in JSON:

{
"name": "Vishwam Dhavale",
"role": "Founding Engineer",
"skills": { ... },
"projects": [ ... ],
"experience": [ ... ]
}

It includes rate limiting (30 req/min per IP), proper caching headers, and clean error responses. Why? Because if I'm going to say I build APIs professionally, my portfolio should prove it.

DevConsole Easter Eggs

Open the browser's developer console on the site and you'll find:

• A styled ASCII art welcome message

• Global helper functions like profile(), skills(), and help() that output formatted data

• It's a small touch, but it tells other developers: "I thought about you visiting this site too."

The Preloader

A custom preloader with a typewriter animation that spells out my name, followed by a loading bar. It's not just visual flair — it ensures fonts are loaded and heavy assets (like the 3D globe) are ready before the user sees the main content. No layout shift, no flash of unstyled content.

Design Philosophy

Dark Theme with Depth

The design uses layered dark backgrounds with subtle differences:

• Pure black (#000) for the main background

• Slightly lighter shades for cards and sections

• Glassmorphism panels with backdrop blur

• Gradient accents for visual hierarchy

Typography: Instrument Sans

I chose Google's Instrument Sans for its clean, modern geometry. It's readable at small sizes (important for code snippets and metadata) and has great weight variations for hierarchy.

Micro-Animations Everywhere

Every interactive element has subtle feedback:

• Buttons scale slightly on hover

• Cards lift with a shadow transition

• Section headers slide in from the left

• The scrolling text ticker in the footer adds continuous motion

These aren't just decorative — they make the interface feel alive and responsive.

SEO Strategy

a portfolio that search engines love

Even for a portfolio, SEO matters. Here's what's in place:

• Structured data (JSON-LD) — Person schema for the main page, Article schema for blog posts

• Dynamic Sitemap — Auto-generated, includes all pages and blog posts

• Open Graph tags — Custom OG images with consistent branding

• Meta descriptions — Carefully crafted for each page

• Semantic HTML — Proper heading hierarchy, ARIA labels, landmark elements

• Performance — Core Web Vitals optimized for search ranking signals

The Blog: Content That Works for SEO

The blog (which you're reading right now) serves double duty:

1. Thought leadership — Shows I can articulate complex technical decisions

1. Long-tail keywords — Posts about specific technologies and techniques attract organic traffic

Each blog post gets its own Article or TechArticle schema markup, dynamic OG images, and proper canonical URLs.

The Development Journey

What Went Well

• Component architecture — Breaking the site into focused components (Hero, Services, Work, Process, Footer) made iteration fast

• Centralized data — All content in data/data.ts made it trivial to update without touching templates

• Framer Motion — Incredible DX for animations. The stagger variants pattern is addictive

• Vercel deployment — Push to GitHub, site is live. Zero config deployment is a gift

Challenges

• Mobile performance — Animations that look smooth on desktop can jank on older phones. Had to be selective about which animations run on mobile

• SEO without a CMS — Hardcoding blog content isn't sustainable, which is why I'm now integrating Payload CMS (more on this in a future post!)

Lessons Learned

1. Animations should enhance, not distract — I removed several animations that looked cool but slowed comprehension

1. Mobile-first isn't optional — Over 60% of portfolio visitors come from mobile (LinkedIn clicks on phones)

1. The terminal is a conversation starter — Multiple recruiters and developers have mentioned it in messages

1. Ship, then iterate — The first version was much simpler. Each feature was added incrementally based on feedback

What's Next

• Payload CMS integration — Moving blog content to a headless CMS for easier management

• Blog series — Technical deep dives on React Native, API design patterns, and startup engineering

• Performance monitoring — Setting up Vercel Speed Insights for real user metrics

• Dark/light mode toggle — For the 3 developers who use light mode 😄

##Assistance from AI Tools

While the architecture, implementation, and final decisions are my own, I used AI tools like ChatGPT and Claude as thinking partners during development — primarily for refining copy, validating assumptions, and exploring alternative approaches.

They were used in the same way I’d use documentation or peer feedback: to accelerate iteration, challenge ideas, and improve clarity — not to replace engineering judgment or authorship.

Try It Yourself

The best way to experience the portfolio is to visit vishwamdhavale.com and explore. Open the terminal, check the API, look at the console. Every detail was intentional.

If you're building your own portfolio, here's my advice: make it reflect how you actually work. If you care about APIs, build one into your site. If you love CSS animations, go wild with them. If you're a systems thinker, show your architecture decisions.

Your portfolio should be the most honest demo of your skills. Make it count.

---

Thanks for reading! If you found this helpful, connect with me on LinkedIn or check out my work on GitHub.