💡 The Philosophy

Before adopting frameworks like Next.js or React, I wanted to prove I could build a professional, responsive, and highly performant website using only the core technologies of the web. This project is a testament to the power of simpler tools.

This site achieves 100/100 Lighthouse scores not because of complex optimizations, but because it lacks the bloat that necessitates them.

🧱 Technical Deep Dive

1. Semantic Architecture

Instead of div soup, this site rigorously uses semantic tags:

• <nav>, <main>, <article>, <aside>, and <footer> for layout.
• <picture> and srcset for responsive image delivery.
• Proper heading hierarchy (h1 through h6) for SEO and accessibility.

2. Advanced CSS Layouts

I implemented complex layouts without a single CSS framework:

• CSS Grid: Used for the project gallery to handle diverse aspect ratios.
• Flexbox: Used for navigation bars and card internals.
• CSS Variables: A centralized root declaration for consistent theming (colors, spacing, typography).

:root {
  --primary-color: #2563eb;
  --text-main: #0f172a;
  --spacing-unit: 8px;
  /* Dark mode support via simple variable swaps */
}

3. Interaction Design

• Vanilla Timeline: A custom JavaScript intersection observer that animates timeline items as they scroll into view.
• Dark Mode: A simple toggle that persists preference via localStorage and respects prefers-color-scheme.

📈 Evolution

While I have since moved to Next.js for its powerful ecosystem (this current site!), com.jibanwebsite remains strictly online as a sandbox. It serves as a reminder that:

1. Load time is a feature.
2. Accessibility is structural, not an add-on.
3. You don't always need a bundler.

🔄 Reflections

If I were to refactor this today while keeping the "No Framework" constraint, I would:

• Adopt BEM methodology or CUBE CSS for better style organization.
• Implement Web Components for repeated elements like the project cards.
• Add a build step purely for image optimization (WebP conversion).