I built a one‑page wedding invitation site for “Isha weds Shubhanshu” using TypeScript, Next.js 16 (App Router), React 19, Tailwind v4 and motion for animation, hosted in a GitHub repo under @sarthaksingh17.
- Key repo structure:
I import the five main visuals (two hero backdrops, Ganesha, envelope, couple) in lib/wedding.ts so Next.js generates content‑hashed URLs, which prevents stale caching when the files change.
import heroDesktop from "../public/art/hero-desktop.png";
import heroMobile from "../public/art/hero-mobile.png";
// other imports…
The hero desktop image is exactly 775 × 644 px; it is up‑scaled on large screens and has a dark top strip hidden by a small scale‑up in Hero.tsx.
The hero mobile image is a 7 MB PNG; next/image re‑encodes it at request time, but a leaner source would improve first‑paint performance on phones.
Path‑referenced art is served through /_next/image and cached on disk in .next/cache/images keyed on (URL, width, quality) with a four‑hour TTL; swapping a file under the same name will not update the cache until it expires or the .next folder is cleared.
The Haldi function currently uses a cropped Mehendi panorama (public/art/bg-haldi.jpg) with a turmeric scrim; no dedicated Haldi illustration exists yet.
If I need to replace any visual, I drop a new file with the same name into public/art/ and rebuild; for path‑referenced images I also clear .next and hard‑reload.
lib/wedding.tsstores all copy, dates, colours and image paths.lib/scenes.tsdefines scene backdrops and floating props for each function, with separate mobile and desktop lists.app/page.tsxholds the envelope‑open state and assembles sections.components/contains one file per section (scratch card, countdown, petals, etc.).- Images live in
public/art/and raw artwork folders (Assets/,South Asian Wedding Invitation UI/) are git‑ignored to keep the repo ~90 MB lighter.