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