BLT-University/contributing.html at main · willkhinz/BLT-University · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
---
layout: default
title: Contributing Guide
permalink: /contributing/
---

<script src="https://unpkg.com/@phosphor-icons/web"></script>

<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 leading-tight">
            Become an <span class="text-transparent bg-clip-text bg-gradient-to-r from-bltRed to-red-600">Instructor</span>
        </h1>
        <p class="text-sm md:text-base text-gray-500 dark:text-gray-400 max-w-xl mx-auto font-medium leading-relaxed">
            Share your cybersecurity expertise with our global open-source community through hands-on education.
        </p>
    </div>
</section>

<main class="max-w-6xl mx-auto px-6 py-16 space-y-20 dark:bg-gray-900 transition-colors">

    <section>
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-10 flex items-center justify-center gap-3">
            <i class="ph-fill ph-star text-bltRed"></i> Why Teach at BLT University?
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="p-6 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft">
                <i class="ph-bold ph-globe-hemisphere-west text-bltRed text-2xl mb-4"></i>
                <h3 class="font-bold text-gray-900 dark:text-white mb-2">Global Audience</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Share your knowledge with a global audience of cybersecurity students and professionals.</p>
            </div>
            <div class="p-6 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft">
                <i class="ph-bold ph-identification-badge text-bltRed text-2xl mb-4"></i>
                <h3 class="font-bold text-gray-900 dark:text-white mb-2">Build Reputation</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Establish yourself as a thought leader and build your reputation in the infosec community.</p>
            </div>
            <div class="p-6 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft">
                <i class="ph-bold ph-users-three text-bltRed text-2xl mb-4"></i>
                <h3 class="font-bold text-gray-900 dark:text-white mb-2">Keep Skills Sharp</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">Keep your skills sharp by teaching others and collaborating with other professionals.</p>
            </div>
        </div>
    </section>

    <section class="max-w-4xl mx-auto">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-12 text-center">How to Create a Course</h2>

        <div class="space-y-12 relative before:absolute before:inset-0 before:ml-[1.4rem] before:h-full before:w-0.5 before:bg-gradient-to-b before:from-red-100 before:to-transparent dark:before:from-red-900/20">

            <div class="relative flex items-start gap-8 group">
                <div class="flex items-center justify-center w-12 h-12 rounded-full border-4 border-white dark:border-gray-900 bg-gray-900 dark:bg-gray-800 text-white font-bold shadow-md shrink-0 z-10">01</div>
                <div class="bg-white dark:bg-gray-800 p-8 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft flex-1">
                    <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Fork the Repository</h3>
                    <p class="text-gray-500 dark:text-gray-400 leading-relaxed text-sm">Start by forking the <a href="https://github.com/OWASP-BLT/BLT-University" target="_blank" class="text-bltRed font-bold hover:underline">BLT-University repository</a> on GitHub.</p>
                </div>
            </div>

            <div class="relative flex items-start gap-8 group">
                <div class="flex items-center justify-center w-12 h-12 rounded-full border-4 border-white dark:border-gray-900 bg-gray-900 dark:bg-gray-800 text-white font-bold shadow-md shrink-0 z-10">02</div>
                <div class="bg-white dark:bg-gray-800 p-8 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft flex-1 overflow-hidden">
                    <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Create Instructor Profile</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Add a new file in the <code class="bg-gray-100 dark:bg-gray-900 px-2 py-1 rounded text-bltRed">_instructors</code> directory:</p>
                    <pre class="bg-gray-900 dark:bg-black/30 text-gray-300 p-5 rounded-2xl text-[11px] overflow-x-auto border border-gray-800 font-mono leading-relaxed shadow-inner"><code>---
layout: instructor
title: Your Name
expertise: Your Area of Expertise
avatar: /assets/images/instructors/yourname.jpg
github: yourusername
linkedin: yourprofile
---

Your bio and teaching philosophy goes here...</code></pre>
                </div>
            </div>

            <div class="relative flex items-start gap-8 group">
                <div class="flex items-center justify-center w-12 h-12 rounded-full border-4 border-white dark:border-gray-900 bg-gray-900 dark:bg-gray-800 text-white font-bold shadow-md shrink-0 z-10">03</div>
                <div class="bg-white dark:bg-gray-800 p-8 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft flex-1 overflow-hidden">
                    <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Create Your Course</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Add a new file in the <code class="bg-gray-100 dark:bg-gray-900 px-2 py-1 rounded text-bltRed">_courses</code> directory:</p>
                    <pre class="bg-gray-900 dark:bg-black/30 text-gray-300 p-5 rounded-2xl text-[11px] overflow-x-auto border border-gray-800 font-mono leading-relaxed shadow-inner"><code>---
layout: course
title: Your Course Title
category: Course Category
level: Beginner/Intermediate/Advanced
duration: 4 weeks
instructor: Your Name
featured: false
prerequisites: Any prerequisites
description: Short course description

resources:
  - title: Introduction Video
    url: https://youtube.com/watch?v=...
    type: video
  - title: Course Slides
    url: /assets/courses/yourcourse/slides.pdf
    type: pdf

syllabus:
  - title: Week 1 - Introduction
    description: Course overview
    topics:
      - Topic 1
      - Topic 2
  - title: Week 2 - Deep Dive
    description: Advanced concepts
    topics:
      - Topic 3
      - Topic 4
---

# Course Content

Your detailed course content goes here using Markdown...</code></pre>
                </div>
            </div>

            <div class="relative flex items-start gap-8 group">
                <div class="flex items-center justify-center w-12 h-12 rounded-full border-4 border-white dark:border-gray-900 bg-bltRed text-white font-bold shadow-lg shrink-0 z-10">04</div>
                <div class="bg-white dark:bg-gray-800 p-8 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft flex-1">
                    <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Submit and Go Live</h3>
                    <p class="text-gray-500 dark:text-gray-400 leading-relaxed text-sm">Submit a Pull Request. Once our team provides feedback and approves, your course merges and automatically publishes to the live site!</p>
                </div>
            </div>
        </div>
    </section>

    <section class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        <div class="lg:col-span-7 bg-gray-50 dark:bg-gray-800/50 p-8 md:p-10 rounded-[2.5rem] border border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-8 flex items-center gap-2">
                <i class="ph-bold ph-shield-check text-bltRed"></i> Course Guidelines
            </h2>
            <ul class="space-y-4">
                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                    <i class="ph-bold ph-check text-bltRed mt-1"></i>
                    <span><strong class="dark:text-gray-200">Focus on Cybersecurity:</strong> Content must relate to info-sec.</span>
                </li>
                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                    <i class="ph-bold ph-check text-bltRed mt-1"></i>
                    <span><strong class="dark:text-gray-200">Clear Structure:</strong> Organize content with clear learning objectives.</span>
                </li>
                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                    <i class="ph-bold ph-wrench text-bltRed mt-1"></i>
                    <span><strong class="dark:text-gray-200">Practical Examples:</strong> Include hands-on labs and real scenarios.</span>
                </li>
                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                    <i class="ph-bold ph-folders text-bltRed mt-1"></i>
                    <span><strong class="dark:text-gray-200">Multiple Formats:</strong> Combine videos, docs, and interactive content.</span>
                </li>
                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                    <i class="ph-bold ph-git-pull-request text-bltRed mt-1"></i>
                    <span><strong class="dark:text-gray-200">Open License:</strong> Compatible with AGPL-3.0.</span>
                </li>
            </ul>
        </div>

        <div class="lg:col-span-5 space-y-4">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 px-2">Supported Formats</h2>
            <div class="grid grid-cols-2 gap-4 text-center">
                <div class="p-5 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft group hover:border-bltRed transition-all">
                    <i class="ph-bold ph-video-camera text-xl text-bltRed mb-2 block mx-auto"></i>
                    <p class="text-[10px] font-bold uppercase tracking-widest text-gray-900 dark:text-gray-200">Videos</p>
                    <p class="text-[9px] text-gray-400 dark:text-gray-500 mt-1">YouTube, Vimeo</p>
                </div>
                <div class="p-5 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft group hover:border-bltRed transition-all">
                    <i class="ph-bold ph-file-pdf text-xl text-bltRed mb-2 block mx-auto"></i>
                    <p class="text-[10px] font-bold uppercase tracking-widest text-gray-900 dark:text-gray-200">Documents</p>
                    <p class="text-[9px] text-gray-400 dark:text-gray-500 mt-1">PDFs, Slides</p>
                </div>
                <div class="p-5 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft group hover:border-bltRed transition-all">
                    <i class="ph-bold ph-code text-xl text-bltRed mb-2 block mx-auto"></i>
                    <p class="text-[10px] font-bold uppercase tracking-widest text-gray-900 dark:text-gray-200">Code</p>
                    <p class="text-[9px] text-gray-400 dark:text-gray-500 mt-1">GitHub Repos</p>
                </div>
                <div class="p-5 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-soft group hover:border-bltRed transition-all">
                    <i class="ph-bold ph-pencil-line text-xl text-bltRed mb-2 block mx-auto"></i>
                    <p class="text-[10px] font-bold uppercase tracking-widest text-gray-900 dark:text-gray-200">Assignments</p>
                    <p class="text-[9px] text-gray-400 dark:text-gray-500 mt-1">Projects</p>
                </div>
            </div>
        </div>
    </section>

    <section class="max-w-4xl mx-auto bg-gray-900 dark:bg-gray-800 p-8 md:p-12 rounded-[3rem] text-white shadow-2xl relative overflow-hidden group text-center border border-transparent dark:border-gray-700">
        <div class="absolute -right-6 -bottom-6 opacity-10 group-hover:scale-110 transition-transform pointer-events-none">
            <i class="ph-fill ph-chalkboard-teacher text-[12rem]"></i>
        </div>
        <div class="relative z-10">
            <h2 class="text-2xl font-bold mb-3 tracking-tight">Ready to Build a Course?</h2>
            <p class="text-gray-400 text-sm mb-10 max-w-lg mx-auto leading-relaxed">
                Help shape the next generation of security professionals by sharing your cybersecurity expertise.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="https://github.com/OWASP-BLT/BLT-University/issues/new?template=course-submission.yml" target="_blank" class="px-8 py-3.5 bg-bltRed text-white font-bold rounded-2xl shadow-xl hover:bg-bltRedHover hover:-translate-y-0.5 transition-all text-xs">
                    Submit Course Proposal
                </a>
                <a href="https://github.com/OWASP-BLT/BLT-University" target="_blank" class="px-8 py-3.5 bg-white/10 backdrop-blur-md border border-white/20 text-white font-bold rounded-2xl hover:bg-white hover:text-gray-900 transition-all text-xs">
                    View on GitHub
                </a>
            </div>
        </div>
    </section>

</main>