# ADR-002: Vanilla CSS & Glassmorphism over TailwindCSS ## Context The aesthetic goal of this portfolio is to achieve an "Apple/Linear/Vercel" level of premium design. This requires heavy use of micro-interactions, complex gradients, backdrop filters (glassmorphism), and precise typography. ## Decision We decided to use **Vanilla CSS** with a robust CSS Variable (Custom Properties) system instead of TailwindCSS. ### Reasons: 1. **DOM Cleanliness:** TailwindCSS leads to extreme HTML class clutter (e.g., `flex items-center justify-center bg-black/50 backdrop-blur-md border border-white/10...`). For a portfolio where recruiters and engineers might inspect the source code, a clean, semantic DOM is preferable. 2. **Complex Animations:** GSAP and custom CSS keyframes are heavily utilized. Integrating these with Tailwind's utility classes often creates friction when specific easing functions or complex nested selectors are required. 3. **Bespoke Craftsmanship:** Writing Vanilla CSS demonstrates an underlying mastery of the browser rendering engine, cascading rules, and modern CSS features (CSS Grid, Subgrid, `color-mix`, etc.). ## Consequences ### Positive - Semantic HTML (`<div class="engineering-console">` instead of `class="w-64 bg-gray-900..."`). - Easier integration with GSAP for complex timeline animations. - Granular control over the `backdrop-filter` rendering nuances across different browsers. ### Negative - No built-in design system constraints (colors, spacing must be strictly managed via CSS variables). - Slightly larger CSS file size compared to a purged Tailwind stylesheet (though negligible for this project size).