About My Portfolio

Why Build a Custom Portfolio?

As a developer, your portfolio is the most important project you'll ever build. It's not just a showcase — it's a living proof of your capabilities. Template-based portfolios fail to communicate the depth of engineering skill that goes into building real-world applications.

• Design Control: Full ownership over every pixel, animation, and interaction. No template constraints.
• Performance: Lighthouse 100/100 scores across all categories. Server-side rendering with zero layout shift.
• Branding: A unique visual identity that stands out from the crowd of generic developer portfolios.
• Learning: Building a portfolio from scratch forces you to think deeply about architecture, accessibility, and user experience.

Architecture & Design Decisions

The portfolio is built on Next.js 16 with the App Router, leveraging server components for optimal performance and client components for interactive elements.

1. Data-Driven Design: All portfolio content (projects, experience, tech stack) is stored in a centralized TypeScript data file. Adding a new project requires zero UI code changes.
2. Component Architecture: Each section (Hero, Projects, About, Tech Stack) is a self-contained, reusable component with typed props.
3. Animation System: Framer Motion is used for scroll-triggered animations, page transitions, and micro-interactions. Every animation serves a purpose.
4. Theme System: Full dark/light mode support using next-themes with CSS custom properties. The design looks premium in both modes.

Technical Implementation

The core of the portfolio is a data-driven rendering system. Here's how the project cards are dynamically generated:

// Data-driven project rendering
import { portfolioData } from "@/data/portfolio";

export default function Projects({ projects }: ProjectsProps) {
  return (
    <section id="projects" className="max-w-2xl mx-auto px-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
        {projects.map((project) => (
          <ProjectCard
            key={project.id}
            title={project.title}
            description={project.description}
            image={project.image}
            tags={project.tags}
            status={project.status}
            link={project.link}
          />
        ))}
      </div>
    </section>
  );
}

Design Philosophy

The visual design follows a brutalist-minimal aesthetic — dashed borders, uppercase typography, monochrome palette with strategic accent colors. Every design choice is intentional:

• Dashed Borders: Create visual separation without heavy dividers. They feel technical and developer-oriented.
• Uppercase Typography: Bold, uppercase headings with tight tracking communicate confidence and precision.
• Grid Background: A subtle dot-grid pattern adds depth without distraction, reinforcing the engineering aesthetic.
• Micro-Animations: Hover effects, scroll reveals, and transition animations make the interface feel alive and responsive.

Key Features

• GitHub Contribution Graph — Real-time contribution data fetched from the GitHub API, rendered as an interactive SVG heatmap.
• Command Palette — Keyboard-driven navigation (⌘K) for instant access to any section or project.
• Blog System — Markdown-powered blog with category filtering, reading time estimation, and social sharing.
• Dynamic Project Pages — Each project has its own detail page with overview, features, tech stack, and impact metrics.
• SEO Optimized — Proper meta tags, Open Graph images, and structured data for maximum discoverability.

Lessons Learned

• Ship early, iterate often. The first version was basic — each iteration added depth and polish.
• Design is engineering. Good UI isn't just aesthetics — it's performance, accessibility, and maintainability.
• Data-driven > hard-coded. Centralizing content in data files makes the portfolio infinitely extensible.
• Animations must serve purpose. Every transition and hover effect should communicate state change or draw attention to key content.