The Vision: Beyond a Resume

Most portfolios are static business cards. For saifulalom.com, I engineered a “Digital Garden” with two mission-critical goals:

1. The Showcase: A high-contrast, brutalist interface designed to demonstrate frontend mastery to recruiters.
2. The Second Brain: A searchable technical archive where I document solved bugs and architectural decisions to accelerate future development.

The Technical Stack

I chose a modern, performance-first stack to ensure the site remains lightweight yet interactive:

• Framework: Astro (Static Site Generation for zero-JS by default)
• Styling: Tailwind CSS (Utility-first for rapid UI iteration)
• Animation: Framer Motion

Key Engineering Challenges

1. Optimizing Motion for Core Web Vitals

Animations often kill SEO scores through Layout Shift (CLS).

• The Problem: Heavy entry animations were delaying the “Largest Contentful Paint” (LCP).
• The Solution: I refactored the animation triggers using intersection observers. This ensures that heavy GSAP/Framer Motion logic only executes when elements enter the viewport, maintaining a 100/100 Lighthouse score.

2. Solving the “Asset Bloat” Issue

Initially, static images in the /public folder were unoptimized, leading to slow mobile load times.

• The Fix: I migrated all media to src/assets/ and implemented Astro’s Image Service.
• The Impact: Automated WebP conversion and lazy-loading reduced total page weight by 60%, significantly improving the user experience on low-bandwidth connections.

System Architecture

I organized the project to treat “Knowledge” as data, using Astro’s Content Collections for type-safety.

src/
├── assets/         # Optimized media (WebP/AVIF)
├── content/        # Type-safe schemas for posts & projects
├── constants/      # Global site configuration
└── pages/posts/    # The "Knowledge Base" (Markdown-driven)