`, `<meta name="description">`, and canonical URL. Copy is keyword-rich in Spanish to target South Florida search intent for lash extensions, microblading, eyebrow lamination, and lip blush. ## Technical Architecture ### Frontend Stack - **Vite 8 + React 19** – Ultra-fast HMR in development; production build output goes straight to Cloudflare Pages. - **Tailwind CSS v4**: Utility-first styling with a custom design token layer (`primary-dark`, `porcelain`, `gold`, `taupe`) driving the dark-first brand palette. - **react-i18next + i18next-http-backend**: Lazy-loads translation namespaces from `/public/locales/{lang}/translation.json`, detecting browser language on first visit and persisting preference in localStorage. - **react-router-dom v7**: SPA routing with a shared `Layout` wrapper (navbar + booking drawer + floating contact buttons) and a standalone `/links` route outside the chrome. - **yet-another-react-lightbox**: Full-featured lightbox for the portfolio grid with keyboard navigation and custom backdrop color. - **lucide-react**: Consistent icon set used across navigation, course cards, certifications, and interactive controls. ### Media & CDN All images, videos, and before/after pairs are stored in a **Cloudflare R2 bucket** (`glambygrisel`) and served from `assets.glambygrisel.com`. A single `ASSETS_BASE_URL` constant in `src/config/assets.js` is the only place that needs updating to switch CDN origins across the entire app. ### Cloudflare Pages + Workers - **Pages** hosts the static Vite build with edge delivery globally. The `vite.config.js` uses `@cloudflare/vite-plugin` to bridge Workers bindings (R2, secrets) during local dev via `wrangler`. - **Functions** (`/functions/api/`) expose typed Cloudflare Workers for gallery listing, Instagram token proxy, and contact form relay, keeping all credentials in Cloudflare secrets, never in the client bundle. - A `vite.config.js` with `historyApiFallback` (dev) and Pages' built-in SPA redirect rule handle deep-link refreshes without 404s. ### Custom Hooks & Patterns | Hook | Purpose | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | `useScrollReveal(delay)` | Attaches an `IntersectionObserver` to a ref and toggles a CSS class for fade-up reveal animations, with configurable stagger delay. | | `useBookingDrawer` | Publish/subscribe pattern exposing `openBookingDrawer()` globally, no context provider required. | | `usePageTitle` | Sets `document.title` per route in a consistent `Page, Glam by Grisel` format. | ## Challenges & Solutions **Hydration-free SPA with deep-link support** Cloudflare Pages doesn't serve an HTML file for unknown paths by default. Fixed by adding a `_redirects` file mapping `/* → /index.html 200` alongside the Vite dev server's `historyApiFallback` option, ensuring reloads on any route work in both environments. **Gallery API with R2 in local dev** The gallery fetches from `/api/gallery`, which is a Cloudflare Worker with an R2 binding. In local dev, the Worker isn't running, so the fetch is wrapped in a try/catch that silently falls back to an empty state, the UI gracefully shows a placeholder instead of crashing. **Instagram token refresh** Instagram's long-lived tokens expire after 60 days. A scheduled Cloudflare Worker cron job refreshes the token weekly and stores the new value in a KV namespace, so the production feed never goes stale without manual intervention. **Mobile hero scroll lock** On small screens the hero is fixed to the viewport and the page overflow is hidden to prevent the content beneath from scrolling into view prematurely. A `useEffect` cleanup restores normal scroll behavior when the user navigates away. ## Results & Impact The rebuild delivers a significantly leaner delivery surface: no Node.js runtime, no serverless cold starts, and no Next.js framework overhead, just a pre-rendered HTML shell hydrated by React at the edge. The artist now has: - **A conversion-ready booking flow** reachable from every section in one tap or click. - **A self-sustaining Instagram feed** that stays live without manual token refreshes. - **A bilingual content layer** that serves Miami's English and Spanish-speaking clientele without duplicating pages. - **A CDN-backed media pipeline** on R2 that makes it trivial to upload new gallery images or before/after pairs without touching the codebase. - **A courses catalog** that supports enrollment inquiries via WhatsApp, reducing friction for prospective students. ## Live Site [glambygrisel.com](https://glambygrisel.com/) </article></body></html>

## Overview This project is a complete rebuild of **Glam by Grisel**, the digital flagship for a Miami-based permanent makeup and lash artist with 5+ years of experience and hundreds of happy clients. The original site was built on Next.js; this version migrates everything to a **Vite + React 19 SPA** served from **Cloudflare Pages**, trimming cold-start overhead and simplifying the delivery pipeline without sacrificing any of the richness that makes the brand stand out. Every major surface was redesigned: the immersive hero, the services library, the before-and-after gallery, the courses catalog, the Instagram strip, the booking drawer, and the FAQ, all rebuilt from scratch with Tailwind CSS v4, custom scroll-reveal hooks, and a bilingual (English/Spanish) content layer powered by **react-i18next**. ## Key Features ### Immersive Hero with Cinematic Imagery The full-bleed hero auto-cycles through curated beauty photography served directly from **Cloudflare R2** via a custom CDN domain (`assets.glambygrisel.com`). On mobile the hero locks to the viewport to prevent scroll jank, while on desktop it transitions seamlessly into the rest of the page content. ### Adaptive Services Library The `/services` page renders all service categories, eyebrows, lashes, and lips, in a side-scrolling sticky-tab layout on mobile and a full multi-column breakdown on desktop. Each service card surfaces its name, description, pricing, and a direct booking CTA built around the global booking drawer. ### Before & After Gallery with Sliders and Lightbox A drag-to-reveal `BeforeAfterSlider` component handles 19 real client transformation pairs (6 brows, 8 lashes, 5 lips). On mobile, pairs snap-scroll horizontally with a counter indicator; on desktop they render in a 3-up paginated carousel. A separate masonry portfolio grid consumes images fetched from the `/api/gallery` Cloudflare Worker, with category filters (all / eyebrow / lashes / lips), skeleton loaders, and a full-screen **yet-another-react-lightbox** overlay. ### Courses Catalog Three professional beauty training programs are rendered as structured cards, each with meta badges (duration, level), feature highlight badges, a two-column "What You'll Learn / What's Included" checklist, and a WhatsApp enrollment CTA. Staggered scroll-reveal animations give the page a premium editorial feel. ### Live Instagram Feed via Cloudflare Worker A dedicated Cloudflare Worker proxies the Instagram Graph API, refreshes tokens automatically, and exposes a clean JSON endpoint consumed by the `/instagram` page and the homepage `InstagramStrip` component. This keeps API credentials server-side and eliminates CORS friction. ### Persistent Booking Drawer A global booking drawer, triggered from the navbar, the hero, any CTA strip, and the about page, overlays the full viewport with an iframe to the artist's preferred scheduling tool. State is managed via a lightweight publish/subscribe hook (`useBookingDrawer`) that any component can call without prop drilling. ### About & Certifications The `/about` page pairs a portrait image (served from R2) with a two-column bio layout, a three-stat bar (certified / years of experience / happy clients), and a two-column certification checklist grid. A dedicated CTA section at the bottom routes users directly into the booking drawer. ### FAQ & Testimonials An accordion-style FAQ section (available as a compact homepage module or a full-page version) pairs with a testimonials carousel that auto-advances on desktop and supports touch-swipe on mobile. ### SEO per Page Every route renders a `` component that injects a ``, `<meta name="description">`, and canonical URL. Copy is keyword-rich in Spanish to target South Florida search intent for lash extensions, microblading, eyebrow lamination, and lip blush. ## Technical Architecture ### Frontend Stack - **Vite 8 + React 19** – Ultra-fast HMR in development; production build output goes straight to Cloudflare Pages. - **Tailwind CSS v4**: Utility-first styling with a custom design token layer (`primary-dark`, `porcelain`, `gold`, `taupe`) driving the dark-first brand palette. - **react-i18next + i18next-http-backend**: Lazy-loads translation namespaces from `/public/locales/{lang}/translation.json`, detecting browser language on first visit and persisting preference in localStorage. - **react-router-dom v7**: SPA routing with a shared `Layout` wrapper (navbar + booking drawer + floating contact buttons) and a standalone `/links` route outside the chrome. - **yet-another-react-lightbox**: Full-featured lightbox for the portfolio grid with keyboard navigation and custom backdrop color. - **lucide-react**: Consistent icon set used across navigation, course cards, certifications, and interactive controls. ### Media & CDN All images, videos, and before/after pairs are stored in a **Cloudflare R2 bucket** (`glambygrisel`) and served from `assets.glambygrisel.com`. A single `ASSETS_BASE_URL` constant in `src/config/assets.js` is the only place that needs updating to switch CDN origins across the entire app. ### Cloudflare Pages + Workers - **Pages** hosts the static Vite build with edge delivery globally. The `vite.config.js` uses `@cloudflare/vite-plugin` to bridge Workers bindings (R2, secrets) during local dev via `wrangler`. - **Functions** (`/functions/api/`) expose typed Cloudflare Workers for gallery listing, Instagram token proxy, and contact form relay, keeping all credentials in Cloudflare secrets, never in the client bundle. - A `vite.config.js` with `historyApiFallback` (dev) and Pages' built-in SPA redirect rule handle deep-link refreshes without 404s. ### Custom Hooks & Patterns | Hook | Purpose | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | `useScrollReveal(delay)` | Attaches an `IntersectionObserver` to a ref and toggles a CSS class for fade-up reveal animations, with configurable stagger delay. | | `useBookingDrawer` | Publish/subscribe pattern exposing `openBookingDrawer()` globally, no context provider required. | | `usePageTitle` | Sets `document.title` per route in a consistent `Page, Glam by Grisel` format. | ## Challenges & Solutions **Hydration-free SPA with deep-link support** Cloudflare Pages doesn't serve an HTML file for unknown paths by default. Fixed by adding a `_redirects` file mapping `/* → /index.html 200` alongside the Vite dev server's `historyApiFallback` option, ensuring reloads on any route work in both environments. **Gallery API with R2 in local dev** The gallery fetches from `/api/gallery`, which is a Cloudflare Worker with an R2 binding. In local dev, the Worker isn't running, so the fetch is wrapped in a try/catch that silently falls back to an empty state, the UI gracefully shows a placeholder instead of crashing. **Instagram token refresh** Instagram's long-lived tokens expire after 60 days. A scheduled Cloudflare Worker cron job refreshes the token weekly and stores the new value in a KV namespace, so the production feed never goes stale without manual intervention. **Mobile hero scroll lock** On small screens the hero is fixed to the viewport and the page overflow is hidden to prevent the content beneath from scrolling into view prematurely. A `useEffect` cleanup restores normal scroll behavior when the user navigates away. ## Results & Impact The rebuild delivers a significantly leaner delivery surface: no Node.js runtime, no serverless cold starts, and no Next.js framework overhead, just a pre-rendered HTML shell hydrated by React at the edge. The artist now has: - **A conversion-ready booking flow** reachable from every section in one tap or click. - **A self-sustaining Instagram feed** that stays live without manual token refreshes. - **A bilingual content layer** that serves Miami's English and Spanish-speaking clientele without duplicating pages. - **A CDN-backed media pipeline** on R2 that makes it trivial to upload new gallery images or before/after pairs without touching the codebase. - **A courses catalog** that supports enrollment inquiries via WhatsApp, reducing friction for prospective students. ## Live Site [glambygrisel.com](https://glambygrisel.com/) </article></body></html>