Skip to main content

​
Project Overview

This is a modern, multilingual wedding website for Alejandra and Alexander’s wedding celebration on October 22, 2026 in Cartagena de Indias, Colombia. The website provides guests with all the information they need about the wedding events, accommodations, and allows them to RSVP online.

​
Purpose

The website serves as the central hub for wedding guests to:
  • Learn about the couple’s story spanning three cultures and languages
  • View detailed event schedules for both the pre-wedding and main celebration
  • Confirm their attendance through an integrated RSVP form
  • Find accommodation recommendations with discount links
  • Contribute songs to the wedding playlist
  • Access dress code guidelines and local service recommendations

​
Key Features

The website offers a comprehensive set of features designed to enhance the guest experience:

Event Information

Complete schedules for the pre-wedding celebration at Casa Pura Rooftop (October 21) and the main wedding day events including religious ceremony at Iglesia Santo Toribio and reception at Casa 1537

RSVP System

Interactive confirmation form allowing guests to RSVP for the pre-wedding, wedding, or both events, with allergy information collection

Collaborative Playlist

Guests can contribute song suggestions to help create the soundtrack for the celebration

Accommodation Guide

Curated hotel recommendations with special discount links, featuring OSH as the primary recommended hotel

Dress Code Guidelines

Detailed dress code information including tropical casual for pre-wedding and black tie formal attire for the main event, with reserved color guidance

Local Services

Recommendations for hair & makeup services (Diego Moya Salón Day Spa, Portada Peluquería) and tuxedo rentals (Boutique Gabriel, D’ Clase)

​
Technology Stack

The website is built using modern web technologies optimized for performance and maintainability:

​
Core Framework

Astro 5.17.1 - The website uses Astro as its core framework, providing:
  • Static site generation for optimal performance
  • Component-based architecture
  • Built-in routing based on file structure
  • Server-side rendering capabilities via Node adapter

​
Styling & UI

TailwindCSS 4.2.1 - Utility-first CSS framework integrated via Vite plugin for:
  • Rapid UI development
  • Consistent design system
  • Responsive layouts
  • Custom styling without CSS conflicts

​
Backend Functionality

Nodemailer 8.0.1 - Email delivery system for:
  • RSVP form submissions
  • Guest communication
  • Automated confirmations

​
Build & Development

  • Node Adapter - Standalone server mode for deployment
  • Vite - Fast build tooling and development server
  • TypeScript - Type safety for development

​
Multilingual Support

One of the defining features of this wedding website is its comprehensive multilingual support, reflecting the couple’s multicultural background.
The website supports three languages: Spanish (es), English (en), and German (de), making it accessible to guests from different cultural backgrounds.

​
Language Implementation

1

Translation Files

All content is stored in JSON translation files located at src/i18n/:
  • en.json - English translations
  • es.json - Spanish translations
  • de.json - German translations
2

Route Structure

The website uses file-based routing for language versions:
  • / - Spanish (default)
  • /en/ - English
  • /de/ - German
3

Content Coverage

Every section is fully translated including:
  • Navigation menus and headers
  • Event schedules and descriptions
  • Form labels and validation messages
  • Contact information and recommendations
  • Error and success messages

​
Supported Content Areas

The i18n system covers all website sections:
  • Header & Navigation - Menu items, language switcher
  • Hero Section - Couple names, date, location
  • Story Section - The couple’s multicultural love story
  • Events - Pre-wedding and celebration schedules with timing, venues, and dress codes
  • RSVP Form - Form fields, validation messages, confirmation responses
  • Playlist Section - Collaborative music selection interface
  • Accommodation - Hotel recommendations and booking information
  • Services - Local vendor recommendations for hair, makeup, and tuxedo rentals
  • Contact - Wedding planner and couple contact details
  • Footer - Credits and acknowledgments

​
Architecture Overview

The project follows Astro’s recommended structure with clear separation of concerns:

​
Directory Structure

src/
├── assets/          # Static images and media files
├── components/      # Reusable Astro components
│   ├── Header.astro
│   ├── Footer.astro
│   ├── SectionPrincipal.astro
│   ├── SectionGaleria.astro
│   ├── SectionPreWeding.astro
│   ├── SectionCelebration.astro
│   ├── SectionDressCode.astro
│   ├── SectionGift.astro
│   ├── SectionPlayList.astro
│   ├── SectionHospedaje.astro
│   ├── SectionSugerencia.astro
│   ├── SectionContact.astro
│   └── SectionForm.astro
├── i18n/           # Translation files
│   ├── en.json
│   ├── es.json
│   └── de.json
├── layouts/        # Page layouts
│   └── Layout.astro
├── pages/          # File-based routing
│   ├── index.astro     (Spanish)
│   ├── en/
│   │   └── index.astro (English)
│   └── de/
│       └── index.astro (German)
└── styles/         # Global CSS

​
Component Architecture

The website uses a section-based component architecture where each major feature is encapsulated in its own component (e.g., SectionForm.astro, SectionCelebration.astro), making the codebase maintainable and modular.
Each page imports and composes these sections:
  1. Header - Navigation and language switcher
  2. SectionPrincipal - Hero section with couple names and wedding date
  3. SectionGaleria - Photo gallery
  4. SectionPreWeding - Pre-wedding event details
  5. SectionCelebration - Main wedding day schedule
  6. SectionDressCode - Attire guidelines
  7. SectionGift - Gift registry information
  8. SectionPlayList - Collaborative playlist feature
  9. SectionHospedaje - Accommodation recommendations
  10. SectionSugerencia - Local service recommendations
  11. SectionContact - Contact information with countdown timer
  12. SectionForm - RSVP form with validation
  13. Footer - Credits and final information

​
Design Approach

The website implements a single-page application (SPA) style with smooth scrolling navigation between sections, providing a seamless user experience while maintaining the benefits of static site generation.
The modular component structure makes it easy to add, remove, or reorder sections without affecting other parts of the website.

​
Development & Deployment

The project includes standard npm scripts for development and production:
  • npm run dev - Start local development server
  • npm run build - Build production site
  • npm run preview - Preview production build locally
The website uses Astro’s Node adapter in standalone mode, enabling deployment to any Node.js hosting environment.

Build docs developers (and LLMs) love

Get started for freeTalk to us