Merge pull request #6 from rubytaiwan/init-layout-2025

Add UI layout coscup 2025

Author: ryudoawaru

CLAUDE.md

@@ -0,0 +1,59 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Jekyll-based static website for RubyConf Taiwan x COSCUP 2025 conference. It's built using Jekyll 4.4.1 with Tailwind CSS for styling, Alpine.js for JavaScript interactivity, and AOS (Animate On Scroll) for animations.
+
+## Development Commands
+
+### Local Development
+```bash
+# Install dependencies
+bundle install
+
+# Serve the site locally with live reload
+bundle exec jekyll serve
+
+# Build the site for production
+bundle exec jekyll build
+```
+
+### CSS Development
+The site uses Jekyll Tailwind CSS plugin (`jekyll-tailwindcss`) which automatically processes Tailwind styles defined in `_tailwind.css` using the configuration in `tailwind.config.js`.
+
+## Architecture & Structure
+
+### Jekyll Configuration
+- **Main config**: `_config.yml` contains site metadata, plugin configuration, and data for speakers/staff
+- **Layout**: Single `default.html` layout in `_layouts/` with Alpine.js integration
+- **Content**: Main page is `index.html` with front matter defining schedules and speakers data
+
+### Frontend Stack
+- **CSS Framework**: Tailwind CSS with custom color scheme (blue, green, red variants)
+- **JavaScript**: Alpine.js for component state management and interactions
+- **Animations**: AOS library for scroll-triggered animations
+- **Icons**: SVG icons stored in `_includes/icons/`
+- **Images**: Background SVGs in `_includes/images/`, photos in `assets/images/`
+
+### Data Structure
+The site uses Jekyll front matter in `index.html` to define:
+- **Schedules**: Conference schedule with tracks and timing
+- **Speakers**: Speaker profiles with images and session details
+- **Site config**: Staff information and social links in `_config.yml`
+
+### Key Features
+- **Single Page Application**: All content on one scrollable page with smooth section navigation
+- **Responsive Design**: Mobile-first with desktop enhancements
+- **Interactive Modals**: Speaker details and footer modals using Alpine.js
+- **Navigation**: Sticky navigation with active section highlighting
+- **Internationalization**: Chinese/English content mixing
+
+### JavaScript Architecture
+- `assets/js/main.js`: Initializes AOS animations and integrates with Alpine.js
+- Alpine.js components handle:
+  - Mobile navigation toggle
+  - Section scrolling and active state tracking
+  - Modal management for speakers and footer content
+  - Scroll position tracking for navigation styling

_config.yml

@@ -20,4 +20,4 @@ links:
   cfv: https://volunteer.coscup.org/
 conf:
   root_url: 'https://rubyconf.tw'
-  about_us: 'https://ruby.tw'
+  about_us: 'https://ruby.tw'

_data/footer.yml

@@ -0,0 +1,52 @@
+title: "©Rubyconf Taiwan 2025"
+
+coc:
+  title: Code of Conduct
+
+team_member:
+  title: Team Member
+
+rubytw:
+  title: Ruby Taiwan
+  href: https://ruby.tw
+
+social_links:
+  - name: Twitter
+    href: https://x.com/rubyconftw
+    icon: twitter
+  - name: Facebook
+    href: https://www.facebook.com/rubyconftw
+    icon: facebook
+  - name: Instagram
+    href: https://www.instagram.com/rubytaiwan2008
+    icon: instagram
+
+staffs:
+  - name: Mu-Fan Teng
+    title: Chief Organizer
+    avatar: /assets/images/ryudoawaru.jpg
+    x_id: ryudoawaru
+    facebook: https://www.facebook.com/ryudoawaru
+    ig_id: ryudoawaru
+    github_id: ryudoawaru
+  - name: Xillinna
+    title: Main Designer
+    avatar: /assets/images/Xillinna.jpg
+    ig_id: xillinna.daily
+  - name: Cadie Bui
+    title: Website Frontend Engineer
+    avatar: /assets/images/cadie.jpg
+    github_id: CadieBui
+  - name: Kasa Hsiao
+    title: Code Party Organizer
+    avatar: /assets/images/umbrella-h.jpg
+    github_id: umbrella-h
+    x_id: k_hno3
+  - name: Yu-Chi Wei
+    title: Staff
+    avatar: /assets/images/snowmint.jpg
+    github_id: snowmint
+  - name: Cheng-Chin Chiang
+    title: Website Frontend Engineer
+    avatar: /assets/images/cheng-chin.jpg
+    github_id: meo2326cc