Skip to content

README.md

Latest commit

 

History

History
202 lines (145 loc) · 6.46 KB

README.md

File metadata and controls

202 lines (145 loc) · 6.46 KB

Robot Fashion Show 2025 - https://robotfashion.show

A cutting-edge microsite showcasing the first-ever Robot Fashion Show at Humanoids '25 in Seoul, featuring cross-species haute couture experiences bridging robotics and fashion.

🌟 Overview

Robot Fashion Show 2025 is an innovative one-page bilingual website that presents a revolutionary fusion of robotics and fashion. Staged during the prestigious CoRL 2025 and Humanoids 2025 conferences in Seoul, this event marks the first-ever cross-species haute couture experience.

✨ Features

Core Functionality

  • Bilingual Support: Seamless English ↔ Korean language switching
  • Responsive Design: Optimized for all devices and screen sizes
  • Artist Carousel: Interactive showcase of featured artists and researchers
  • Smooth Animations: Advanced CSS animations with cyberpunk aesthetic
  • SEO Optimized: Complete Open Graph and Twitter Card integration
  • Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation

Visual Effects

  • Particle System: Floating neon particles with cyberpunk colors
  • Circuit Patterns: Animated background circuit designs
  • Holographic Shimmer: Premium card hover effects
  • Neon Glow: Cyber pulse animations on CTA buttons
  • Conference Badges: Floating CoRL & Humanoids logos
  • "First Ever" Badge: Highlighting the historic nature of the event

Technical Highlights

  • Vanilla JavaScript: No framework dependencies
  • Modular CSS: Well-organized stylesheet architecture
  • Progressive Enhancement: Graceful degradation for older browsers
  • Touch Support: Mobile-optimized interactions
  • Auto-slide Carousel: 6-second intervals with manual controls

🛠 Tech Stack

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Fonts: Pretendard (Korean), System fonts (fallback)
  • Icons: Custom SVG icons
  • Build: No build process required
  • Deployment: Static hosting ready

📁 Project Structure

RobotFashionShow/
├── index.html              # Main HTML file
├── README.md              # Project documentation
├── logo.png               # Project logo
├── assets/                # Static assets
│   ├── artist/           # Artist portrait images
│   ├── robot/            # Robot/artwork images
│   ├── favicon/          # Favicon collection
│   ├── fonts/            # Custom font files
│   ├── icons/            # SVG icons
│   └── logo.png          # Main logo
├── scripts/
│   └── script.js         # Main JavaScript file
└── styles/               # Modular CSS architecture
    ├── style.css         # Main stylesheet (imports all)
    ├── base.css          # Reset, variables, accessibility
    ├── navigation.css    # Navigation and language toggle
    ├── hero.css          # Hero section with special effects
    ├── carousel.css      # Artist carousel styles
    ├── info.css          # Information section and cards
    ├── footer.css        # Footer styles
    ├── animations.css    # All keyframe animations
    └── responsive.css    # Media queries

🚀 Quick Start

Prerequisites

  • Web browser (Chrome, Firefox, Safari, Edge)
  • Local web server (optional, for development)

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/RobotFashionShow.git
cd RobotFashionShow

  2. Open directly in browser

    open index.html
# or double-click index.html

  3. Or serve locally (recommended for development)

    # Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

  4. Visit http://localhost:8000

🎨 Customization

Adding New Artists

  1. Add artist images to assets/artist/ and assets/robot/
  2. Update the artists grid in index.html
  3. Add corresponding translation keys to script.js

Modifying Animations

  • Edit styles/animations.css for keyframe animations
  • Adjust styles/hero.css for particle and circuit effects
  • Modify timing in script.js for carousel intervals

Language Support

  • Add new language objects to translations in script.js
  • Update data-i18n attributes in HTML
  • Extend language toggle functionality

🌐 Browser Support

  • ✅ Chrome 90+
  • ✅ Firefox 88+
  • ✅ Safari 14+
  • ✅ Edge 90+
  • ✅ Mobile browsers (iOS Safari, Chrome Mobile)

📱 Responsive Breakpoints

  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px
  • Large Desktop: > 1440px

🎯 Performance

  • Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
  • First Contentful Paint: < 1.5s
  • Largest Contentful Paint: < 2.5s
  • Cumulative Layout Shift: < 0.1

🔧 Development

CSS Architecture

The project uses a modular CSS approach:

  • base.css: Foundation styles and CSS custom properties
  • navigation.css: Header and navigation components
  • hero.css: Landing section with advanced effects
  • carousel.css: Artist showcase carousel
  • info.css: Information cards and CTA sections
  • footer.css: Footer styling
  • animations.css: All keyframe animations
  • responsive.css: Media queries for all breakpoints

JavaScript Features

  • ES6+ syntax with fallbacks
  • Intersection Observer for scroll effects
  • Touch event handling for mobile
  • Automatic carousel with pause-on-hover
  • Dynamic language switching
  • Smooth scrolling navigation

📄 License

This project is created for the Robot Fashion Show 2025 event in conjunction with CoRL 2025 and Humanoids 2025 conferences.

👥 Contributors

  • Event Organizers: Humanoids '25
  • Contact: Jean Oh (CMU) - [email protected]
  • Website Development: [Your Name/Team]

🔗 Related Links

📞 Support

For technical support or inquiries about the Robot Fashion Show 2025:

  • Email: [email protected] (include "[RoboFashion25]" in subject)
  • Event Date: October 1, 2025
  • Venue: COEX Convention & Exhibition Center, Seoul

Robot Fashion Show 2025 - Where robotics meets haute couture in an unprecedented cross-species fashion experience.
⚡