Skip to content

README.md

Latest commit

 

History

History
115 lines (81 loc) · 3.05 KB

README.md

File metadata and controls

115 lines (81 loc) · 3.05 KB

JSConf Chile 🇨🇱

JSConf Chile Preview

JSConf Chile website built with modern web technologies, featuring a beautiful design and optimized performance.

🚀 Tech Stack

  • Astro - Modern static site generator with partial hydration
  • TypeScript - Type-safe JavaScript development
  • Tailwind CSS - Utility-first CSS framework
  • Bun - Fast JavaScript runtime and package manager

🏗️ Architecture

This project follows Atomic Design principles for component organization:

src/components/
├── atoms/          # Basic building blocks (buttons, inputs, etc.)
├── molecules/      # Simple combinations of atoms
├── organisms/      # Complex components made of molecules/atoms
└── templates/      # Page-level components and layouts

🎨 Features

  • Modern Design System - Atomic Design architecture
  • Performance Optimized - Multiple image formats (AVIF, WebP, JPG)
  • Responsive Gallery - Dynamic masonry layout with hover effects
  • Type Safety - Full TypeScript integration
  • Modern Fonts - Custom Magra font family
  • YouTube Integration - Lite YouTube component for performance

📦 Installation

# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

🎯 Project Structure

├── public/
│   ├── preview.webp           # Preview image
│   ├── fonts/                 # Custom fonts (Magra)
│   └── jsconf/gallery/        # Event gallery images
├── src/
│   ├── components/
│   │   ├── atoms/             # Basic components
│   │   ├── molecules/         # Gallery, forms, etc.
│   │   ├── organisms/         # Complex sections
│   │   └── templates/         # Page templates
│   ├── layouts/               # Page layouts
│   ├── pages/                 # Astro pages
│   └── styles/                # Global styles
└── astro.config.mjs           # Astro configuration

🖼️ Image Optimization

The project uses multiple image formats for optimal performance:

  • AVIF - Modern format with best compression
  • WebP - Widely supported modern format
  • JPG/PNG - Fallback for older browsers

Gallery component automatically groups images by filename and serves the best format available.

🎬 Components

Gallery Component

Dynamic masonry gallery with:

  • Automatic image grouping by filename
  • Multiple format support (AVIF, WebP, JPG)
  • Hover animations and effects
  • Responsive column layout

Picture Component

Optimized image component with:

  • Automatic format selection
  • Lazy loading
  • Responsive sizing
  • Fallback support

🚀 Development

# Run development server
bun run dev

# Access at http://localhost:4321

📝 License

MIT License

Built with ❤️ for the Darío Espinoza