44 lines
1.8 KiB
Markdown
44 lines
1.8 KiB
Markdown
|
# 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
|