instructors.html

---
layout: default
title: Instructors
permalink: /instructors/
---
<section class="relative pt-16 pb-24 overflow-hidden bg-white dark:bg-gray-900 border-b border-gray-50 dark:border-gray-800 text-center transition-colors">
    <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 dark:text-white 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 dark:text-gray-400 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 dark:bg-gray-900 transition-colors">
    <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 dark:bg-gray-800 rounded-[2rem] p-8 shadow-sm hover:shadow-float border border-gray-100 dark:border-gray-700 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 dark:border-bltRed/20 shadow-inner overflow-hidden mb-5">
                {% if instructor.avatar %}
                <img src="{{ instructor.avatar }}" alt="{{ instructor.title }}" class="w-full h-full object-cover">
                {% else %}
                <div class="w-full h-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-3xl dark:text-gray-400">👤</div>
                {% endif %}
            </div>
            
            <h3 class="text-xl font-bold text-gray-900 dark:text-white 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 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full text-xs font-semibold uppercase tracking-wider mb-4">{{ instructor.expertise }}</span>
            {% endif %}
            
            <p class="text-gray-500 dark:text-gray-400 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 dark:border-gray-700 rounded-xl text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                View Profile
            </a>
        </div>
    {% endfor %}
    </div>
    
    <div class="mt-16 max-w-3xl mx-auto bg-gray-900 dark:bg-gray-800 rounded-3xl p-6 lg:p-10 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-2xl font-bold text-white mb-3">
                Become an Instructor
            </h2>
            <p class="text-gray-400 mb-6 max-w-md 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-6 py-3 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>
</main>