An immersive, scroll-based events display with stunning visual effects. Events fade in and out as you scroll, with the center event always highlighted. Designed for an intimate friend group experience.

• 🌊 Immersive Scrolling: Events fade in/out based on scroll position with smooth transitions
• ✨ Center Highlighting: The event in the center of the screen is always highlighted
• 🎨 Beautiful Gradients: Rich purple-to-red gradient background with glass-morphism cards
• 📱 Responsive: Optimized for all screen sizes with mobile-first design
• ⚡ Instant Loading: Events pre-loaded for immediate display
• 🔄 Auto-Sync: Calendar data automatically synced 3 times daily
• 🎭 Smooth Interactions: Click events to expand details with elegant animations
• 📅 Smart Formatting: Intelligent date/time display for all event types

• Fade Transitions: Events smoothly fade in as they approach the center of the screen
• Scale Animation: Events grow slightly as they become the focus
• Blur Effects: Distant events have subtle blur for depth perception
• Center Highlighting: The middle event gets enhanced glass-morphism effects
• Smooth Scrolling: Hardware-accelerated animations for buttery smooth performance

• Gradient Background: Rich gradient from deep purple through violet to warm reds
• Glass Cards: Frosted glass effect with backdrop blur and subtle borders
• Circular Date Display: Elegant date circles with day/month information
• Typography: Inter font family for clean, modern text rendering
• Responsive Layout: Adapts beautifully from mobile to desktop

1. Initial Load: Events appear with the first upcoming event centered and highlighted
2. Scrolling: As you scroll, events fade in/out with the center event always prominent
3. Interaction: Click any event to expand details with smooth height transitions
4. Visual Feedback: Hover effects and smooth transitions provide tactile feedback

1. /calendar-sync.ts - Cron job that fetches and parses ICS calendar data

   • Runs 3 times daily to keep events up-to-date
   • Parses Google Calendar ICS format
   • Stores events in blob storage
   • Filters out past events

2. /backend/index.ts - Hono-based API server

   • Serves the main HTML page with embedded event data
   • Provides /api/events endpoint for dynamic updates
   • Handles static file serving

3. /frontend/index.html - Main HTML template

   • Beautiful responsive design with Tailwind CSS
   • Custom animations and transitions
   • Loading, empty, and error states

4. /frontend/app.js - Frontend JavaScript application

   • Event rendering and interaction handling
   • Smooth expand/collapse animations
   • Smart date/time formatting
   • Responsive design adaptations

1. Sync Process: Cron job fetches ICS → Parses events → Stores in blob storage
2. Page Load: Backend embeds latest events → Frontend renders immediately
3. Interactions: JavaScript handles event expansion and animations
4. Updates: API endpoint provides fresh data when needed

interface CalendarEvent {
  id: string;           // Unique event identifier
  title: string;        // Event title/summary
  description: string;  // Event description (supports multi-line)
  startDate: string;    // ISO date string
  endDate: string;      // ISO date string
  location?: string;    // Event location (optional)
  url?: string;         // Event URL (optional)
}

• Framework: Tailwind CSS via CDN
• Fonts: Inter font family for clean typography
• Animations: Custom CSS transitions and keyframes
• Effects: Glass morphism, gradient backgrounds, hover effects
• Responsive: Mobile-first design with breakpoint adaptations

The site automatically syncs with a Google Calendar via ICS feed:

• Format: Standard ICS (iCalendar) format
• Frequency: 3 times daily via cron job
• Parsing: Custom ICS parser handles various date formats
• Filtering: Only shows upcoming events (today onwards)

• Instant Loading: Events embedded in initial HTML
• Smooth Animations: Hardware-accelerated CSS transitions
• Efficient Rendering: Minimal DOM manipulation
• Caching: Events cached in blob storage
• Error Handling: Graceful fallbacks for network issues

• Modern browsers with ES6+ support
• CSS Grid and Flexbox support
• Fetch API support
• CSS custom properties support

The site is automatically deployed on Val Town with:

• HTTP trigger for the main backend
• Cron trigger for calendar synchronization
• Blob storage for event data persistence

To customize the calendar source, update the calendarUrl in /calendar-sync.ts. The site supports any standard ICS calendar feed.