alina-website/IMPLEMENTATION.md

Implementation Summary

Tech Stack

• Vite 6 + Vanilla HTML/CSS/JS (no framework)
• Archivo (Google Fonts, expanded width, weight 900) for headlines
• Inter (Google Fonts, weight 400) for body text

Project Structure

├── index.html              # Single page with all 5 screens
├── package.json
├── vite.config.js
├── public/
├── src/
│   ├── main.js             # Scroll reveal, smooth scroll, header scroll
│   ├── style.css            # Master @import file
│   ├── css/
│   │   ├── reset.css        # Modern CSS reset
│   │   ├── tokens.css       # Design tokens (colors, type, spacing, grid)
│   │   ├── base.css         # Typography classes (.h1, .h2, .h3)
│   │   ├── grid.css         # 12-col grid + utilities
│   │   ├── components.css   # Buttons, annotations, hairlines
│   │   ├── header.css       # Sticky header
│   │   ├── hero.css         # Screen 1
│   │   ├── manifest.css     # Screen 2
│   │   ├── journal.css      # Screen 3
│   │   ├── cases.css        # Screen 4
│   │   ├── services.css     # Screen 5 (accordion)
│   │   ├── footer.css
│   │   └── animations.css   # Scroll-driven + IntersectionObserver fallback
│   └── assets/

Running

• npm run dev — development server with HMR
• npm run build — production build to dist/
• npm run preview — preview production build

Design Decisions

• Native <details name="accordion"> for one-at-a-time accordion (zero JS)
• CSS animation-timeline: view() with IntersectionObserver fallback
• Colored placeholder blocks instead of images (swap with <img> later)
• BEM-lite class naming