Add development documentation and refactor content management

Added CLAUDE.md for development guidance, moved hardcoded footer and staff content to Jekyll configuration, externalized Code of Conduct to separate markdown file, and added staff profile functionality with images.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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,25 @@ links:
   cfv: https://volunteer.coscup.org/
 conf:
   root_url: 'https://rubyconf.tw'
-  about_us: 'https://ruby.tw'
+  about_us: 'https://ruby.tw'
+footer:
+  title: "©Rubyconf Taiwan 2025"
+  coc:
+    title: Code of Conduct
+  team_member:
+    title: Team Member
+  rubytw:
+    title: Ruby Taiwan
+    href: https://ruby.tw
+staffs:
+  -
+    name: Mu-Fan Teng
+    avatar: /assets/images/ryudoawaru.jpg
+    x_id: ryudoawaru
+    facebook: https://www.facebook.com/ryudoawaru
+    ig_id: ryudoawaru
+    github_id: ryudoawaru
+  -
+    name: Xillinna
+    avatar: /assets/images/Xillinna.jpg
+    ig_id: xillinna.daily

_includes/icons/github.svg

@@ -0,0 +1,25 @@
+All attendees, speakers, sponsors and volunteers at our conference are required to agree to follow the Code of Conduct. Organizers will enforce this Code of Conduct throughout the event. We are expecting cooperation from all participants to help ensure a safe environment for everybody.
+
+Harassment includes offensive verbal comments related to gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, religion, sexual images in public spaces, deliberate intimidation, stalking, following, harassing photography or recording, sustained disruption of talks or other events, inappropriate physical contact, and unwelcome sexual attention.
+
+Participants asked to stop any harassing behavior are expected to comply immediately. Sponsors are also subject to the anti-harassment policy. In particular, sponsors should not use sexualized images, activities, or other material. Booth staff (including volunteers) should not use sexualized clothing/uniforms/customes, or otherwise create a sexualized environment.
+
+If a participant engages in harassing behavior, the conference organizers may take any action they deem appropriate, including warning the offender or expulsion from the conference with no refund. If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact a member of conference staff immediately. Conference staff will be visible by their special badges and clothing.
+
+Conference staff will be happy to help participants contact hotel/venue security or local law enforcement, provide escort, or otherwise assist those experiencing harassment to feel safe for the duration of the conference. We value your attendance. We expect participants to follow these rules at all conference venues and conference-related social events.
+
+This Code of Conduct is based off the work done at [Conference Code of Conduct](http://confcodeofconduct.com/).
+
+所有此次活動的聽眾、演講者、贊助商和志工，都必須同意遵守下列行為準則。而主辦單位也將嚴格地執行這些準則，我們期待所有參加者的合作，以確保大家能有一個安全友善的環境。
+
+騷擾包括有關性別，性別認同、年齡、性向、殘疾、外貌、體型、種族、宗教的攻擊性言語，或是在公共場合散播色情圖片、蓄意恐嚇、跟踪、騷擾性的攝影或錄影、多次打斷活動、不恰當的身體接觸，和讓人感到不舒服的性關注。參與者必須停止任何騷擾行為並且立即遵守行為準則。
+
+贊助商也必須遵守行為準則。贊助商不應該使用帶有性意味的圖像、活動，或其它材料。工作人員（包括志工）不該穿著帶有性意味的衣服/制服/裝扮，或是建立一個具有性意味的環境。
+
+如果參與者從事騷擾行為，工作人員會採取其認為適當的任何手段，包括警告或是請離會場，並且不會退費。 如果你被騷擾、看到別人受到騷擾，或有任何其他問題，請立即聯繫會議工作人員，工作人員身上會穿戴可以識別身份的特殊徽章或衣服。
+
+工作人員會很樂意幫助參與者聯繫酒店/場地警衛或當地警察、提供護送，或以其他方式幫助那些遇到騷擾的參與者感到安全。我們非常重視您的參與。
+
+我們希望參與者在各活動場合、會議有關的社群活動都能遵循這些規則。
+
+此行為準則是基於 [Conference Code of Conduct](http://confcodeofconduct.com/) 而訂定。

_includes/posts/coc.md

@@ -56,20 +56,20 @@
             @click="modal_id=1"
             class="text-blue-light hover:text-blue-light-active cursor-pointer"
           >
-            Code of Conduct
+            {{ site.footer.coc.title }}
           </button>
 
           <button
             @click="modal_id=2"
             class="text-blue-light hover:text-blue-light-active cursor-pointer"
           >
-            Team Member
+            {{ site.footer.team_member.title }}
           </button>
           <a
-            href="https://ruby.tw"
+            href="{{ site.footer.rubytw.href}}"
             target="_blank"
             class="text-blue-light hover:text-blue-light-active"
-            >Ruby Taiwan</a
+            >{{ site.footer.rubytw.title }}</a
           >
         </div>
         <div class="flex justify-center space-x-4">
@@ -90,7 +90,7 @@
           </a>
         </div>
         <div class="font-light text-xs text-center text-blue-light">
-          ©Rubyconf Taiwan 2025
+          {{ site.footer.title }}
         </div>
       </div>
       <!-- code of conduct modal -->
@@ -111,92 +111,11 @@
             <div class="relative w-full p-4 bg-white">
               <div class="flex flex-col items-center">
                 <h3 class="text-3xl text-center font-bold text-red-normal">
-                  Code of Conduct
+                  {{ site.footer.coc.title }}
                 </h3>
                 <div class="mt-4 text-green-normal space-y-4">
-                  <p>
-                    All attendees, speakers, sponsors and volunteers at our
-                    conference are required to agree to follow the Code of
-                    Conduct. Organizers will enforce this Code of Conduct
-                    throughout the event. We are expecting cooperation from all
-                    participants to help ensure a safe environment for
-                    everybody.
-                  </p>
-                  <p>
-                    Harassment includes offensive verbal comments related to
-                    gender, gender identity and expression, age, sexual
-                    orientation, disability, physical appearance, body size,
-                    race, religion, sexual images in public spaces, deliberate
-                    intimidation, stalking, following, harassing photography or
-                    recording, sustained disruption of talks or other events,
-                    inappropriate physical contact, and unwelcome sexual
-                    attention.
-                  </p>
-                  <p>
-                    Participants asked to stop any harassing behavior are
-                    expected to comply immediately. Sponsors are also subject to
-                    the anti-harassment policy. In particular, sponsors should
-                    not use sexualized images, activities, or other material.
-                    Booth staff (including volunteers) should not use sexualized
-                    clothing/uniforms/customes, or otherwise create a sexualized
-                    environment.
-                  </p>
-                  <p>
-                    If a participant engages in harassing behavior, the
-                    conference organizers may take any action they deem
-                    appropriate, including warning the offender or expulsion
-                    from the conference with no refund. If you are being
-                    harassed, notice that someone else is being harassed, or
-                    have any other concerns, please contact a member of
-                    conference staff immediately. Conference staff will be
-                    visible by their special badges and clothing.
-                  </p>
-                  <p>
-                    Conference staff will be happy to help participants contact
-                    hotel/venue security or local law enforcement, provide
-                    escort, or otherwise assist those experiencing harassment to
-                    feel safe for the duration of the conference. We value your
-                    attendance. We expect participants to follow these rules at
-                    all conference venues and conference-related social events.
-                  </p>
-                  <p>
-                    This Code of Conduct is based off the work done at
-                    <a
-                      target="_blank"
-                      class="underline cursor-pointer text-blue-500"
-                      href="http://confcodeofconduct.com/"
-                      >Conference Code of Conduct</a
-                    >.
-                  </p>
-                  <p>
-                    所有此次活動的聽眾、演講者、贊助商和志工，都必須同意遵守下列行為準則。而主辦單位也將嚴格地執行這些準則，我們期待所有參加者的合作，以確保大家能有一個安全友善的環境。
-                  </p>
-                  <p>
-                    騷擾包括有關性別，性別認同、年齡、性向、殘疾、外貌、體型、種族、宗教的攻擊性言語，或是在公共場合散播色情圖片、蓄意恐嚇、跟踪、騷擾性的攝影或錄影、多次打斷活動、不恰當的身體接觸，和讓人感到不舒服的性關注。參與者必須停止任何騷擾行為並且立即遵守行為準則。
-                  </p>
-                  <p>
-                    贊助商也必須遵守行為準則。贊助商不應該使用帶有性意味的圖像、活動，或其它材料。工作人員（包括志工）不該穿著帶有性意味的衣服/制服/裝扮，或是建立一個具有性意味的環境。
-                  </p>
-                  <p>
-                    如果參與者從事騷擾行為，工作人員會採取其認為適當的任何手段，包括警告或是請離會場，並且不會退費。
-                    如果你被騷擾、看到別人受到騷擾，或有任何其他問題，請立即聯繫會議工作人員，工作人員身上會穿戴可以識別身份的特殊徽章或衣服。
-                  </p>
-                  <p>
-                    工作人員會很樂意幫助參與者聯繫酒店/場地警衛或當地警察、提供護送，或以其他方式幫助那些遇到騷擾的參與者感到安全。我們非常重視您的參與。
-                  </p>
-                  <p>
-                    我們希望參與者在各活動場合、會議有關的社群活動都能遵循這些規則。
-                  </p>
-                  <p>
-                    此行為準則是基於
-                    <a
-                      target="_blank"
-                      class="underline cursor-pointer text-blue-500"
-                      href="http://confcodeofconduct.com/"
-                      >Conference Code of Conduct</a
-                    >
-                    而訂定。
-                  </p>
+                  {% capture coc_content %}{% include posts/coc.md %}{% endcapture %}
+                  {{ coc_content | markdownify }}
                 </div>
                 <button
                   @click="modal_id=0"
@@ -234,44 +153,61 @@ <h3 class="text-3xl text-center font-bold text-red-normal">
               <div
                 class="grid grid-cols-1 md:grid-cols-3 gap-x-4 justify-center items-center text-center"
               >
+                {% for staff in site.staffs %}
                 <div class="flex flex-col items-center gap-4">
                   <div class="w-45 h-45 border rounded-full relative">
                     <div
                       class="absolute inset-1 rounded-full border border-white z-10"
                     ></div>
                     <img
                       class="w-full h-full object-cover rounded-full relative"
-                      src="/assets/images/matz.jpg"
+                      src="{{staff.avatar}}"
                       alt="Matz"
                     />
                   </div>
                   <span class="mt-2 text-lg text-blue-normal font-bold"
-                    >Matz</span
+                    >{{staff.name}}</span
                   >
                   <div class="flex gap-x-2">
+                    {% if staff.github_id %}
+                    <a
+                      href="https://github.com/{{staff.github_id}}"
+                      target="_blank"
+                      class="text-blue-normal w-7 h-7"
+                    >
+                      {% include icons/github.svg %}
+                    </a>
+                    {% endif %}
+                    {% if staff.x_id %}
                     <a
-                      href="https://x.com/matz"
+                      href="https://x.com/{{staff.x_id}}"
                       target="_blank"
                       class="text-blue-normal w-7 h-7"
                     >
                       {% include icons/twitter.svg %}
                     </a>
+                    {% endif %}
+                    {% if staff.facebook %}
                     <a
-                      href="https://www.facebook.com/matz"
+                      href="{{staff.facebook}}"
                       target="_blank"
                       class="text-blue-normal w-7 h-7"
                     >
                       {% include icons/facebook.svg %}
                     </a>
+                    {% endif %}
+                    {% if staff.ig_id %}
                     <a
-                      href="https://www.instagram.com/matz"
+                      href="https://www.instagram.com/{{staff.ig_id}}"
                       target="_blank"
                       class="text-blue-normal w-7 h-7"
                     >
                       {% include icons/instagram.svg %}
                     </a>
+                    {% endif %}
                   </div>
                 </div>
+                {% endfor %}
               </div>
               <button
                 @click="modal_id=0"