A beautiful, interactive wedding website built with React, TypeScript, and Vite. Features a stunning timeline story section with smooth animations and responsive design.
- Interactive Timeline: Horizontal scrolling timeline with smooth animations
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Modern UI: Built with Tailwind CSS and Radix UI components
- Smooth Animations: Powered by Framer Motion
- Touch & Swipe Support: Native touch gestures for mobile navigation
- Wedding Details: Complete ceremony and reception information
- Gallery Section: Beautiful photo gallery
- RSVP System: Guest response management
- PWA Ready: Progressive Web App capabilities
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone <your-repo-url>
cd wedding-site- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
wedding-site/
├── client/
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── data/ # Wedding data and content
│ │ ├── hooks/ # Custom React hooks
│ │ ├── types/ # TypeScript type definitions
│ │ └── assets/ # Images and media files
│ ├── public/ # Static assets
│ └── index.html # Main HTML file
├── attached_assets/ # Additional media assets
├── dist/ # Build output
└── package.json # Dependencies and scripts
The main wedding data is stored in client/src/data/weddingData.ts. This file contains:
- Bride & Groom Details: Names, photos, professions, family information
- Wedding Events: Ceremony and reception details with dates, times, and locations
- Gallery: Photo collection for the gallery section
- People: Wedding party and family member information
The timeline story data is in client/src/data/timelineData.ts and includes:
- Story Scenes: Each scene with title, date, message, and image
- Animation Settings: Motion configurations for smooth transitions
- Image Assets: References to story images
Edit client/src/data/weddingData.ts:
export const weddingData = {
groom: {
name: "Your Name",
fullName: "Your Full Name",
// ... update all groom details
},
bride: {
name: "Partner Name",
fullName: "Partner Full Name",
// ... update all bride details
},
wedding: {
date: new Date("YYYY-MM-DDTHH:mm:ss"), // Your wedding date
ceremony: {
place: "Your Venue Name",
location: "Your Address",
// ... update ceremony details
},
reception: {
place: "Your Reception Venue",
// ... update reception details
}
}
}Edit client/src/data/timelineData.ts:
export const timelineScenes: TimelineScene[] = [
{
id: 'scene-1',
title: 'Your Story Title',
date: 'Your Date',
message: 'Your story message...',
image: {
src: '/your-image.jpg', // Place images in client/public/
alt: 'Your image description'
}
},
// ... add more scenes
];Replace the images in the following locations:
Place your timeline story images in client/public/:
/phone-notification.jpg/chat.png/first_meet.png/we-meet.jpg/engagement.jpg/Wedding.png
Replace images in attached_assets/:
akhil_avatar_1768316293680.png- Groom's photosethu_avatar_1768316293680.png- Bride's photocouple_1768316554062.jpeg- Couple photocouple_bg.png- Couple background imagecouple_video.mp4- Couple videowedding_card.png- Wedding invitation cardreception_card.png- Reception invitation card
The project uses Tailwind CSS. You can customize colors in tailwind.config.ts:
theme: {
extend: {
colors: {
primary: "your-primary-color",
accent: "your-accent-color",
// ... customize other colors
}
}
}Update font families in tailwind.config.ts:
fontFamily: {
display: ["Your Display Font"],
body: ["Your Body Font"],
script: ["Your Script Font"],
}- Push your code to GitHub
- Connect your repository to Vercel
- Vercel will automatically detect the configuration from
vercel.json - Deploy with one click
For other hosting platforms:
- Build the project:
npm run build-
Upload the
distfolder contents to your web server -
Configure your server to serve
index.htmlfor all routes (SPA routing)
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locallynpm run check- Run TypeScript type checking
The website is fully responsive and includes:
- Touch gesture support for timeline navigation
- Optimized layouts for mobile screens
- Progressive Web App (PWA) capabilities
- Fast loading with optimized images
- Timeline: Interactive horizontal scrolling timeline (
client/src/components/Timeline.tsx) - TimelineScene: Individual story scenes (
client/src/components/TimelineScene.tsx) - Wedding Data Hook: Data management (
client/src/hooks/use-wedding-data.ts)
- No external data collection
- All data stored locally in the codebase
- HTTPS recommended for production deployment
- Consider adding password protection for private events
MIT License - Feel free to use this template for your own wedding website!
This is a personal wedding website template. Feel free to fork and customize for your own use.
- Test on Multiple Devices: Ensure your site works well on phones, tablets, and desktops
- Optimize Images: Compress images for faster loading
- Update Regularly: Keep information current as wedding plans evolve
- Share Early: Send the link to guests well in advance
- Backup Data: Keep backups of your customized data files
Made with ❤️ for Akhil & Sethu's special day