https://silueta-bespoke-atelier.vercel.app
A cinematic, immersive single-page website for a luxury bespoke tailoring house.
- Dark luxury palette: Deep Navy, Obsidian Black, Antique Gold, Pure White
- Scroll-triggered reveal animations (IntersectionObserver)
- Parallax gold-thread guide lines between sections
- 3D WebGL wireframe suit (Three.js) with drag-to-rotate
- Interactive glossary (click to reveal style psychology)
- Before / After comparison slider (standard vs. bespoke silhouette)
- 3D tilt cards on persona selection (mouse-follow perspective)
- Language toggle (Spanish ↔ English) — all content is bilingual
- Configurator UX with step progression
- ASMR ambient audio toggle (Web Audio API white-noise placeholder)
- Booking form with demo submission handler
- Responsive design (mobile hamburger nav, stacked grids)
- Hero video placeholder — ready to drop in an
.mp4
No build step required — pure HTML / CSS / JS.
- Install the Live Server extension in VS Code
- Right-click
index.html→ Open with Live Server
cd c:\SiteWork
python -m http.server 8000Then open http://localhost:8000
npx serve .Replace the placeholder <div> inside .hero-video-placeholder with:
<video autoplay muted loop playsinline>
<source src="assets/hero.mp4" type="video/mp4" />
</video>Place your video file at assets/hero.mp4.
SiteWork/
├── index.html # Main page (all sections)
├── css/
│ └── styles.css # Full stylesheet
├── js/
│ └── main.js # All interactivity + Three.js
├── assets/ # Place hero.mp4 and images here
└── README.md
| Token | Hex | Usage |
|---|---|---|
| Deep Navy | #001220 |
Primary background |
| Obsidian Black | #0A0A0A |
Alternating section backgrounds |
| Antique Gold | #D4AF37 |
Accents, lines, hover states, icons |
| Pure White | #FFFFFF |
Text and breathing room |
- Titles: DM Serif Display (Modern Serif)
- Body: Inter (Geometric Sans-Serif)