⚡ Building My Portfolio: Clean, Fast & Dev-Centric

My goal wasn’t just to create a personal website — I wanted something that felt lightning-fast, looked modern, and stayed developer-friendly under the hood. The kind of portfolio I’d actually enjoy maintaining and extending.

🛠️ Stack Breakdown

• Frontend: Next.js + React + TypeScript — for speed, scalability, and static generation.
• Styling: Tailwind CSS + Shadcn UI — utility-first CSS with composable components that actually look good out of the box.
• Animations: Framer Motion — smooth transitions, page fades, and micro-interactions.
• Deployment: Vercel — one push to deploy, with instant preview URLs for every branch.

This setup gives me the flexibility of a full app while still feeling like a static site. Perfect for a portfolio.

🔁 Example: Dynamic Blog Routing

I wanted my blog to feel seamless, but still statically generated for speed and SEO. Here's how I handle dynamic routes for blog posts:

// pages/blog/[slug].tsx

export async function getStaticPaths() {
  const paths = getAllSlugs()
  return { paths: paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const post = getPostBySlug(params.slug)
  return { props: { post: post } }
}

This makes every blog post a statically rendered page with blazing speed and zero runtime cost.

🎨 Visual Consistency with Tailwind + Shadcn

I didn’t want to wrestle with design systems or custom themes, so I leaned on Shadcn UI. It plays beautifully with Tailwind and lets me create things like modals, cards, and forms that feel consistent and polished.

{/* components/ui/button.tsx */}  
import { Button } from "@/components/ui/button";

export default function ContactCTA() {
  return (
    <Button className="rounded-2xl px-6 py-3 text-base font-medium">
      Let’s Talk
    </Button>
  )
}

Just plug and play. And everything responds beautifully across devices.

💨 Animations Without the Overkill

I love a subtle page fade or a component that glides into view — but I don’t want a full-blown animation studio on my site. With Framer Motion, I got just the right amount of polish:

import { motion } from "framer-motion";

export default function PageWrapper({ children }) {
  return (
    <motion.div
      initial={ opacity: 0 }
      animate={ opacity: 1 }
      exit={ opacity: 0 }
      transition={ duration: 0.3 }
    >
      {children}
    </motion.div>
  )
}

Pages fade in cleanly, modals scale in with elegance, and I can tune every detail if I want to.

🚀 Vercel = Zero DevOps

Each push triggers a deployment. I get instant feedback, preview links for PRs, and analytics built-in. Hosting on Vercel lets me focus on building — not setting up CI pipelines or servers.

🧠 Final Thoughts

This portfolio was built with developers in mind — but also future-me. It’s fast to load, easy to update, and doesn’t require me to Google how it works every time I want to tweak a page. Mission accomplished.

If you're building your own, don't overcomplicate it. Start small, pick the tools you enjoy, and make something you're proud to share.