https://silueta-bespoke-atelier.vercel.app

Manuel Fernández — SILUETA Bespoke Atelier

A cinematic, immersive single-page website for a luxury bespoke tailoring house.

Features

• 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

Quick Start

No build step required — pure HTML / CSS / JS.

Option 1: VS Code Live Server

1. Install the Live Server extension in VS Code
2. Right-click index.html → Open with Live Server

Option 2: Python HTTP server

cd c:\SiteWork
python -m http.server 8000

Then open http://localhost:8000

Option 3: Node.js

npx serve .

Adding the Hero Video

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.

Folder Structure

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

Brand Palette

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

Typography

• Titles: DM Serif Display (Modern Serif)
• Body: Inter (Geometric Sans-Serif)