staff.html

---
layout: default
title: Staff
---
<div class="container mx-auto min-h-screen px-6 py-12">
    <h1 class="text-4xl font-bold mb-12 dark:text-white">Staff</h1>
    
    <section class="mb-16">
        <h2 class="text-3xl font-bold mb-8 dark:text-white">Chairs</h2>
        <div class="grid grid-cols-2 lg:grid-cols-5 gap-8">
            {% for member in site.data.staff %}
                {% if member.role == "chair" %}
                    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden duration-150 hover:scale-[1.01]">
                        <div class="w-full relative" style="padding-bottom: 100%">
                            <img src="{{ member.photo | default: '/assets/images/avatar.jpg'}}" 
                                alt="{{ member.name }}" 
                                class="absolute inset-0 w-full h-full object-cover">
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2 dark:text-white">{{ member.name }}</h3>
                            {% if member.email %}
                                <p class="text-gray-600 dark:text-gray-300">Email: <a href="mailto:{{ member.email }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">[Email]</a></p>
                            {% endif %}
                            {% if member.classes %}
                                <p class="text-gray-600 dark:text-gray-300">Classes: {{ member.classes | join: ", " }}</p>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </section>
    
    <section>
        <h2 class="text-3xl font-bold mb-8 dark:text-white">Course Assistants</h2>
        <div class="grid grid-cols-2 lg:grid-cols-5 gap-8">
            {% for member in site.data.staff %}
                {% if member.role == "ca" %}
                    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden duration-150 hover:scale-[1.01]">
                        <div class="w-full relative" style="padding-bottom: 100%">
                            <img src="{{ member.photo | default: '/assets/images/avatar.jpg'}}" 
                                alt="{{ member.name }}" 
                                class="absolute inset-0 w-full h-full object-cover">
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2 dark:text-white">{{ member.name }}</h3>
                            {% if member.email %}
                                <p class="text-gray-600 dark:text-gray-300">Email: <a href="mailto:{{ member.email }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">[Email]</a></p>
                            {% endif %}
                            {% if member.classes %}
                                <p class="text-gray-600 dark:text-gray-300">Classes: {{ member.classes | join: ", " }}</p>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </section>
</div>