nerumarried
An elegant digital wedding invitation with black, white, and gold theme. Built using modern technologies for an unforgettable experience.
π Neru & AI Wedding Invitation
An elegant digital wedding invitation with black, white, and gold theme. Built using modern technologies for an unforgettable experience.
#β¨ Key Features
##π― Core Features
- π± Responsive Design - Optimized for all devices
- π¨ Advanced Animations - 15+ interactive animation components
- π Multi-language - 8 languages (Indonesia, English, ζ₯ζ¬θͺ, νκ΅μ΄, δΈζ, EspaΓ±ol, FranΓ§ais, Ψ§ΩΨΉΨ±Ψ¨ΩΨ©)
- βΏ Accessibility - WCAG 2.1 AA compliant
- β‘ High Performance - 182KB First Load JS
##π Animations & Interactions
- ParticleField - Floating golden particles
- ImageReveal - Sophisticated image reveal effects
- Magnetic - Mouse-following interactions
- TextReveal - Progressive text animations
- TouchGestures - Swipe, pinch, pull for mobile
- ScrollAnimations - 7 types of scroll animations
##π Multi-language Support
- Auto-detection - Automatic browser language detection
- RTL Support - Arabic language support
- Cultural Adaptation - Typography and format adjustments
- Persistent Selection - Language choice saved
#π οΈ Technology Stack
##Frontend Stack
- Next.js 15.4.6 - React framework with Turbopack
- TypeScript - Type safety and developer experience
- Tailwind CSS v4 - Utility-first CSS framework
- Framer Motion 12.23.12 - Animations and transitions
##Optimization & Performance
- PWA Ready - Web App Manifest and offline support
- SEO Optimized - Structured data and meta tags
- Core Web Vitals - Real-time performance monitoring
- Lazy Loading - Intersection Observer optimizations
- Font Optimization - Next.js font loading with display swap
#π Getting Started
##Prerequisites
- Node.js 18.17 or later
- npm or yarn or pnpm
##Installation
# Clone repository
git clone https://github.com/nerufuyo/nerumarried.git
cd nerumarried
# Install dependencies
npm install
# Run development server
npm run dev
Open http://localhost:3000 to view the result.
##Available Scripts
npm run dev # Development server with Turbopack
npm run build # Production build
npm run start # Production server
npm run lint # ESLint check
#π Project Structure
src/
βββ app/ # Next.js App Router
β βββ globals.css # Global styles and theme
β βββ layout.tsx # Root layout with metadata
β βββ page.tsx # Homepage
βββ components/
β βββ animations/ # 15+ animation components
β β βββ ParticleField.tsx
β β βββ ImageReveal.tsx
β β βββ Magnetic.tsx
β β βββ TextReveal.tsx
β β βββ TouchGestures.tsx
β β βββ ScrollAnimations/
β βββ sections/ # Main website sections
β β βββ HeroSection.tsx
β β βββ StorySection.tsx
β β βββ WeddingDetailsSection.tsx
β β βββ GallerySection.tsx
β β βββ RSVPSection.tsx
β β βββ GiftRegistrySection.tsx
β βββ ui/ # UI components
β β βββ LanguageSwitcher.tsx
β βββ monitoring/ # Performance monitoring
β β βββ PerformanceMonitor.tsx
β βββ optimization/ # Mobile & performance optimizations
β βββ MobileOptimization.tsx
βββ data/
β βββ translations/ # Translation files for 8 languages
β β βββ en.json
β β βββ id.json
β β βββ ja.json
β β βββ ko.json
β β βββ zh.json
β β βββ es.json
β β βββ fr.json
β β βββ ar.json
β βββ wedding.json # Wedding data
βββ hooks/ # Custom React hooks
β βββ useTranslation.ts
βββ types/ # TypeScript type definitions
β βββ index.ts
βββ utils/ # Utility functions
βββ accessibility.utils.ts
βββ performance.utils.ts
βββ language.utils.ts
βββ seo.utils.ts
βββ storage.utils.ts
#π¨ Design System
##Color Palette
/* Primary Colors */
--color-black: #000000, #1a1a1a, #2d2d2d
--color-white: #ffffff, #f8f9fa, #e9ecef
--color-gold: #d4af37, #b8860b, #ffd700, #fff8dc
/* Gradients */
--gradient-gold: from-yellow-400 via-yellow-500 to-yellow-600
--gradient-dark: from-black via-gray-900 to-gray-800
##Typography
- Headings: Playfair Display (serif)
- Body: Inter (sans-serif)
- Script: Dancing Script (cursive)
#π Performance Metrics
- First Load JS: 182KB (optimized)
- Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
- Core Web Vitals: Excellent ratings
- Bundle Size: Tree-shaking and code splitting optimized
#βΏ Accessibility
- WCAG 2.1 AA compliant
- Screen Reader support with ARIA labels
- Keyboard Navigation complete
- Color Contrast validation
- Focus Management properly implemented
- Mobile Touch Targets 44px minimum
#π Internationalization
Supports 8 languages with features:
- Auto-detection of browser language
- RTL support for Arabic
- Date and number formatting per locale
- Typography adjusted per language
- Persistent language selection
#π Deployment
##Vercel (Recommended)
npm run build
Deploy to Vercel with one click or connect to GitHub repository.
##Manual Deployment
npm run build
npm run start
#π Customization
##Changing Wedding Data
Edit the
src/data/wedding.json file:{
"couple": {
"bride": {
"name": "Bride Name",
"fullName": "Full Name",
"parents": ["Father", "Mother"]
},
"groom": {
"name": "Groom Name",
"fullName": "Full Name",
"parents": ["Father", "Mother"]
}
},
"wedding": {
"date": "2024-12-15",
"ceremony": {
"time": "09:00",
"venue": "Venue Name",
"address": "Full Address"
}
}
}
##Adding New Language
- Create translation file in
src/data/translations/[lang].json - Add language to
src/types/index.ts - Update
LanguageUtils.tsfor language detection
#π€ Contributing
- Fork repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
#π License
This project is licensed under the MIT License - see the LICENSE file for details.
#π Acknowledgments
- Next.js Team - Amazing framework
- Tailwind CSS - Powerful utility-first CSS
- Framer Motion - Best animation library for React
- Vercel - Seamless deployment platform
π Built with β€οΈ for a special day
