How I Built My Portfolio Using Next.js

Nadeem M Siyam — Tue, 01 Jul 2025 22:26:08 +0000

In 2025, I rebuilt my portfolio from scratch using the latest Next.js App Router. Here’s how I designed it, developed it, and optimized it for SEO and performance.

You could visit my portfolio from here nadeemsiyam.com

Why I rebuilt my portfolio?

I already had a working version (original site), but I wanted:

Better SEO with metadata APIs
Performance and DX improvements using App Router
Component reusability with a cleaner folder structure
Clean looking UI, as the old website had a bounce rate of about 70%

So I started fresh, using:

Next.js 14
Tailwind CSS
Framer Motion
TypeScript

🎨 Components That Make It Pop

Some key UI components I built:

ProjectCard: Interactive hoverable cards that link to GitHub/live demos
FeatureCard: Used in the homepage to highlight skills/tools
SkillsGrid: A responsive grid of tools/technologies I use

I used Framer Motion to animate page loads and hover effects. It gives a smooth, polished feel.

🔍 SEO and Open Graph Setup

I used the App Router’s metadata export for SEO:

// app/page.tsx
export const metadata = {
  title: "Nadeem Siyam – Developer Portfolio",
  description: "Web developer, backend engineer, ML enthusiast",
  openGraph: {
    title: "Nadeem Siyam",
    url: "https://nadeem-temp.vercel.app",
    images: ["/og-image.png"]
  }
}

Additional SEO improvements:

Added favicon.ico, sitemap.xml, and robots.txt
Set up Google Search Console
Used descriptive alt tags for all images

All these steps gave my portfolio website better page load time, verfied by Google Page Speed Insights.

⚙️ Hosting and Deployment

I deployed the site using Vercel, which supports Next.js natively, and setup a domain bought from Hostinger.

Optimizations:

Prefetching is automatic with App Router
Custom domain with HTTPS
Added caching headers for static assets

🧠 Lessons I Learned

Don’t underestimate metadata — it's crucial for discoverability
App Router is powerful but needs understanding of layouts and nesting
Reusable components save huge time long term
A portfolio is a product — treat it like one

✅ Final Thoughts

"Your portfolio should reflect not just your work, but also your thinking and design principles."

✉️ Connect With Me

Send me a mail at nadeemvadasseril@gmail.com

DEV Community: Nadeem M Siyam