SEO Optimized Portfolio
A full-stack, developer-focused portfolio optimized for SEO, accessibility, and performance — featuring custom blogs, real-time feedback, and seamless integrations.
🚀 Project Overview
This full-stack portfolio project is more than just a personal website — it's a complete digital identity hub. Built to be discoverable, fast, and beautiful, it combines modern web development best practices with intelligent UX patterns to deliver a seamless experience across devices.
📣 A Dev’s Personal Space
Not just a portfolio — it's an entire product ecosystem tailored for performance, content, and connection.
🌟 Features That Matter
SEO That Works
Structured metadata, Open Graph images, canonical URLs, and server-side rendering. Scores 95+ in Lighthouse SEO & Accessibility. Found fast. Ranked high.
OAuth Authentication
Integrated Auth.js for secure access using Google & GitHub. Combined with Zod for foolproof runtime validation and protected routes.
Powerful Blog System
Built with MDX Remote — write content in markdown, enhance it with custom React components, and render with full SSR for performance and SEO.
Dynamic Guestbook
Real-time guest interactions powered by Prisma + PostgreSQL. A fun, live touchpoint to connect with visitors.
Micro-UX Delight
Animations, scroll reveals, and transitions built with Framer Motion and the Intersection Observer API. Experience that feels alive.
Productivity Ready
Schedule meetings using Cal.com, handle email flows via Resend + React Email. Hosted on Vercel and secured with Cloudflare.
🧱 Architecture & Structure
- Pages & Routing: Dynamic routes using Next.js app directory with SSR and ISR.
- Blog System: MDX-based with frontmatter, custom React components, and file-based CMS.
- Guestbook: Server actions with Prisma and PostgreSQL for seamless database integration.
- Auth: Auth.js with OAuth and JWT session strategy.
- Styling: Tailwind CSS with utility-based design and Radix primitives.
- Animations: Scroll effects and transitions powered by Framer Motion and Intersection Observer.
- Email & Calendar: External services integrated for complete user interaction workflows.
🧪 Tech Stack
- Next.js – React-based full-stack framework with SSR & routing
- TypeScript – Static typing = less bugs and more confidence
- Tailwind CSS – Utility-first styling with full design control
- Zustand – Lightweight, flexible state management
- Zod – Schema validation that's developer-friendly
- Auth.js – Seamless authentication with built-in OAuth support
- MDX Remote – Write rich content using markdown + JSX
- Prisma – Intuitive ORM for scalable database workflows
- PostgreSQL – Reliable relational DB, perfect for guestbooks and dynamic content
- Framer Motion – Fluid animations for a slick UI
- Radix UI – Primitives for accessible and customizable components
- Cal.com – Schedule meetings without the email ping-pong
- Resend + React Email – Email done right, with visual design and developer control
- Cloudflare – DNS, security, and speed — all in one
- Vercel – Lightning-fast deployments with global CDN
🛠️ Deployment & Performance
The portfolio is deployed on Vercel, ensuring fast, serverless performance and scalability. With DNS managed by Cloudflare, the site is resilient, secure, and globally accessible with minimal latency.
✅ Results
- 20K+ monthly unique visitors
- 95+ scores across Lighthouse metrics: Performance, Accessibility, Best Practices, and SEO
- Built and maintained with maintainability, accessibility, and modern web standards in mind
Want to build something similar or better? Let’s talk.
