🌱 Origin Story

Every developer starts somewhere. This project represents the "Hello World" phase of my career—a time when I moved from tutorials to building something real from scratch.

Unlike my current Next.js-powered site, this version ran on pure static files. It forced me to manually manage every pixel, link, and interaction, teaching me the "physics" of the web before I started using "engines" (frameworks).

🧠 Key Learnings

1. The Box Model

Understanding how padding, margin, and border affect layout calculation was the biggest hurdle. This project solidified my mental model of CSS layout flow.

2. Responsive Design Basics

I learned media queries the hard way—by breaking the layout on every screen size until I understood breakpoints.

@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    display: none; /* The classic hamburger menu pattern */
  }
}

3. Deployment Pipelines

This was my first introduction to Git concepts (commit, push, merge) and continuous deployment via Netlify/Vercel.

🔄 Evolution

Comparing this to my current work shows a clear trajectory:

• Then: Inline styles or expansive CSS files.
• Now: Utility-first CSS (Tailwind) and component-scoped styles.
• Then: Hardcoded HTML pages for every route.
• Now: Dynamic routing and server-side rendering with Next.js App Router.

💭 Reflection

While technically simple, this project holds value as a baseline. It reminds me that complex large-scale applications are still just HTML, CSS, and JS sent to a browser.