yetnora1/Culture
Creator:
yet
Host:
A bilingual (English / አማርኛ) journey through Ethiopian heritage, told as one continuous scroll: five chapters of history from Lucy to Adwa, six cultural pillars, and 22 UNESCO and heritage sites across the country.
# Culture — Land of Origins
A single-page, bilingual (English / አማርኛ) showcase of Ethiopian heritage, built
as a scroll-driven visual story. React 19 + Vite + Tailwind CSS v4 + GSAP.
```bash
npm install
npm run dev # localhost
npm run build # production bundle into dist/
npm run lint
```
## Page structure
| Section | Component | What it does |
| ---------------- | -------------------- | ---------------------------------------------------------------------------- |
| Hero | `Hero.jsx` | Clip-path wipe reveal, masked headline, parallax drift, magnetic CTA |
| About | `About.jsx` | Staggered copy reveal, clip-path stats panel, animated counters |
| Story | `VideoStory.jsx` | Pinned section; frame expands to full bleed, per-chapter backdrops cross-fade |
| Pillars | `Features.jsx` | Bento grid, per-card clip-path reveal, 3D tilt, video-on-hover for two cards |
| Places | `Places.jsx` | 22 heritage sites, category filter, row-by-row reveal + scroll-linked parallax |
| — full screen | `PlaceLightbox.jsx` | Photo morphs out of its card; arrow keys, prev/next, Escape, scroll lock |
| Voices | `Testimonials.jsx` | Two counter-scrolling marquees that pause on hover |
| Footer | `Footer.jsx` | Oversized drifting wordmark, magnetic back-to-top |
Global chrome: `ScrollProgress.jsx` (reading progress hairline) and
`CustomCursor.jsx` (dot + trailing ring, `mix-blend-mode: difference`).
## Conventions worth knowing
- **Never add a bare `* { margin: 0; padding: 0 }` reset to `index.css`.**
Tailwind v4 emits utilities inside `@layer utilities`, and unlayered rules
outrank every layered rule — such a reset silently kills every `p-*`, `m-*`
and `mx-auto` on the page. Pref …