instructors.html

---
layout: default
title: Instructors
permalink: /instructors/
---
<section class="relative pt-16 pb-24 overflow-hidden bg-white border-b border-gray-50 text-center">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(220,38,38,0.04),transparent_50%)] -z-10"></div>
    <div class="max-w-4xl mx-auto px-6 relative z-10">
        <h1 class="font-display text-3xl md:text-4xl font-bold text-gray-900 tracking-tight mb-4">
            Our <span class="text-transparent bg-clip-text bg-gradient-to-r from-bltRed to-red-600">Instructors</span>
        </h1>
        <p class="text-sm md:text-base text-gray-500 max-w-xl mx-auto font-medium">
            Learn from experienced cybersecurity professionals and active open-source contributors shaping the industry.
        </p>
    </div>
</section>

<main class="flex-1 max-w-7xl mx-auto px-6 py-16 w-full">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
    {% for instructor in site.instructors %}
        <div class="bg-white rounded-[2rem] p-8 shadow-sm hover:shadow-float border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:-translate-y-1">
            <div class="w-24 h-24 rounded-full border-4 border-bltRedLight shadow-inner overflow-hidden mb-5">
                {% if instructor.avatar %}
                <img src="{{ instructor.avatar | relative_url }}" alt="{{ instructor.title }}" class="w-full h-full object-cover">
                {% else %}
                <div class="w-full h-full bg-gray-100 flex items-center justify-center text-3xl">👤</div>
                {% endif %}
            </div>
            
            <h3 class="text-xl font-bold text-gray-900 mb-1"><a href="{{ instructor.url | relative_url }}" class="hover:text-bltRed">{{ instructor.title }}</a></h3>
            
            {% if instructor.expertise %}
            <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-semibold uppercase tracking-wider mb-4">{{ instructor.expertise }}</span>
            {% endif %}
            
            <p class="text-gray-500 text-sm mb-6 flex-1">{{ instructor.content | strip_html | truncate: 120 }}</p>
            
            <a href="{{ instructor.url | relative_url }}" class="w-full py-2.5 border border-gray-200 rounded-xl text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
                View Profile
            </a>
        </div>
    {% else %}
        <!-- Empty State UI -->
        <div class="col-span-full py-8 px-8 bg-white/50 backdrop-blur-sm rounded-[3rem] border-2 border-dashed border-gray-200 flex flex-col items-center text-center group hover:border-bltRed/20 transition-all duration-500">
            <div class="w-16 h-16 bg-white rounded-3xl shadow-soft flex items-center justify-center text-gray-300 mb-8 group-hover:bg-bltRedLight group-hover:text-bltRed transition-all duration-500 transform group-hover:scale-110 group-hover:rotate-3">
                <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
            </div>
            
            <h2 class="text-3xl font-bold text-gray-900 mb-4 tracking-tight font-display">Our Faculty is Currently Expanding</h2>
            <p class="text-gray-500 max-w-xl mx-auto mb-10 text-base leading-relaxed">
                We are meticulously curating a world-class faculty of industry-leading security researchers and open-source pioneers. While we finalize our roster of instructors, our mission remains: elite cybersecurity education for all. Check back shortly to meet the experts!
            </p>
            
            <a href="{{ '/contributing/' | relative_url }}" class="group inline-flex items-center gap-2 px-8 py-3.5 bg-bltRed text-white font-bold rounded-xl shadow-[0_8px_20px_rgba(220,38,38,0.25)] hover:bg-bltRedHover hover:-translate-y-0.5 transition-all duration-200">
                <span>Become an Instructor</span>
                <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>
        </div>
    {% endfor %}
    </div>
    
    <!-- htmlhint-disable-next-line spec-char-escape -->
    {% if site.instructors.size > 0 %}
    <div class="mt-20 bg-gray-900 rounded-3xl p-10 lg:p-16 text-center border border-gray-800 shadow-xl relative overflow-hidden">
        <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.8)_0,rgba(255,255,255,0)_1px)] bg-[length:24px_24px]"></div>
        <div class="relative z-10">
            <h2 class="text-3xl font-bold text-white mb-4">Become an Instructor</h2>
            <p class="text-gray-400 mb-8 max-w-xl mx-auto">Share your cybersecurity expertise with our global community. Help shape the next generation of security professionals.</p>
            <a href="{{ '/contributing/' | relative_url }}" class="inline-block px-8 py-3.5 bg-bltRed text-white font-bold rounded-xl shadow-[0_8px_20px_rgba(220,38,38,0.3)] hover:bg-bltRedHover transition-colors">
                Learn How to Teach
            </a>
        </div>
    </div>
    {% endif %}
</main>