PageSourceSearch

https://alidjebbari.com/projects.html

html alidjebbari.com collected 2026-10-02 01:21:55 UTC 54,883 bytes, 677 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="dark">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6    <meta name="theme-color" content="#0a0806" />
7    <title>Projects | Ali Djebbari</title>
8    <meta name="description" content="Every project Ali Djebbari has shipped: production systems in his homelab, mobile apps, and class builds." />
9    <meta property="og:title" content="Projects | Ali Djebbari" />
10    <meta property="og:description" content="Every project Ali Djebbari has shipped: production systems in his homelab, mobile apps, and class builds." />
11    <meta property="og:type" content="website" />
12    <meta property="og:url" content="https://alidjebbari.com/projects.html" />
13    <link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml" />
14    <link rel="preload" href="assets/fonts/bricolage-var.woff2" as="font" type="font/woff2" crossorigin />
15    <link rel="preload" href="assets/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />
16    <link rel="stylesheet" href="assets/css/tailwind.css?v=ember1" />
17    <link rel="stylesheet" href="assets/css/custom.css?v=ember1" />
18    <link rel="stylesheet" href="assets/css/ember.css?v=ember1" />
19    
19<script>if(!matchMedia("(prefers-reduced-motion: reduce)").matches)document.documentElement.classList.add("motion")</script>
19
20  </head>
21  <body>
22    <a class="skip-link" href="#main">Skip to content</a>
23    <div id="scroll-progress" aria-hidden="true"></div>
24    <header class="site-header">
25      <div class="shell">
26        <a href="index.html" class="brand" aria-label="Ali Djebbari, home"><span class="brand-mark">AD</span>Ali Djebbari</a>
27        <nav class="nav" aria-label="Main">
28          <a href="index.html#work">Work</a>
29          <a href="about.html">About</a>
30          <a href="projects.html" aria-current="page">Projects</a>
31          <a href="lab.html">Lab</a>
32          <a href="blog.html">Blog</a>
33          <a href="services.html">Services</a>
34          <a href="resume.html">Resume</a>
35        </nav>
36        <a href="index.html#contact" class="btn btn-primary header-cta" data-magnetic>Let's talk</a>
37        <button id="menu-btn" class="menu-btn" aria-label="Menu" aria-expanded="false" aria-controls="menu"><span></span><span></span></button>
38      </div>
39    </header>
40    <nav id="menu" class="menu" aria-label="Mobile" aria-hidden="true">
41      <ol>
42        <li><a href="index.html#work">Work</a></li>
43        <li><a href="about.html">About</a></li>
44        <li><a href="projects.html">Projects</a></li>
45        <li><a href="lab.html">Lab</a></li>
46        <li><a href="blog.html">Blog</a></li>
47        <li><a href="services.html">Services</a></li>
48        <li><a href="resume.html">Resume</a></li>
49      </ol>
50      <div class="menu-foot">
51        <a href="index.html#contact" class="btn btn-primary">Let's talk →</a>
52        <a href="AliDjebbariResume.pdf" download class="btn btn-ghost">Resume PDF ↓</a>
53      </div>
54    </nav>
55    <main id="main">
56      <section class="page-hero">
57        <div class="shell">
58          <span class="label">Projects</span>
59          <h1 class="page-title">Everything<br />I've shipped.</h1>
60          <p class="lede">15 projects, from production systems running in my homelab to class builds recruiters still ask about. Filter by stack.</p>
61        </div>
62      </section>
63      <div class="page-body">
64<!-- PROJECTS -->
65      <section id="projects" class="py-16">
66        <div class="mx-auto max-w-6xl px-6">
67          <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
68            <div>
69              
70            </div>
71            <div class="project-filter flex flex-wrap gap-2 text-sm font-semibold">
72              <button class="rounded-full border border-gray-300 px-4 py-2 dark:border-gray-700 active" data-filter="all">All</button>
73              <button class="rounded-full border border-gray-300 px-4 py-2 dark:border-gray-700" data-filter="java">Java</button>
74              <button class="rounded-full border border-gray-300 px-4 py-2 dark:border-gray-700" data-filter="python">Python</button>
75              <button class="rounded-full border border-gray-300 px-4 py-2 dark:border-gray-700" data-filter="web">Web</button>
76              <button class="rounded-full border border-gray-300 px-4 py-2 dark:border-gray-700" data-filter="infrastructure">
76Infrastructure</button>
77              <button class="rounded-full border border-gray-300 px-4 py-2 dark:border-gray-700" data-filter="systems">Systems</button>
78            </div>
79          </div>
80          <!-- Project status legend -->
81          <div class="mt-6 flex flex-wrap items-center gap-4 text-xs font-medium text-gray-600 dark:text-gray-400">
82            <span class="text-[11px] uppercase tracking-wider text-gray-400">Status key</span>
83            <span class="inline-flex items-center"><span class="legend-dot live"></span>Live in production</span>
84            <span class="inline-flex items-center"><span class="legend-dot dev"></span>In active development</span>
85            <span class="inline-flex items-center"><span class="legend-dot maint"></span>Maintenance mode</span>
86            <span class="inline-flex items-center"><span class="legend-dot archived"></span>Archived</span>
87          </div>
88          <div class="m-swipe mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
89            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="infrastru
89cture">
90              <div class="text-sm text-gray-500">Linux &bull; Docker &bull; Tailscale</div>
91              <h3 class="mt-2 text-xl font-semibold">Home Server &amp; Infrastructure Lab</h3>
92              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Self-hosted portfolio, Plex, Immich photo backup, and 15+ services on a Dell R720 + Raspberry Pi cluster with Proxmox orchestration and AI-powered surveillance.</p>
93              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
94                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">DevOps</span>
95                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Networking</span>
96                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Self-hosted</span>
97              </div>
98            </article>
99            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="python,infrastructure">
100              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
101                <defs>
102                  <linearGradient id="bg-trading" x1="0" y1="0" x2="1" y2="1">
103                    <stop offset="0%" stop-color="#231a13"/>
104                    <stop offset="100%" stop-color="#17110c"/>
105                  </linearGradient>
106                </defs>
107                <rect width="250" height="130" rx="12" fill="url(#bg-trading)"/>
108                <line x1="15" y1="100" x2="235" y2="100" stroke="#a8988a" stroke-width="0.5" stroke-dasharray="2,2" opacity="0.4"/>
109                <line x1="15" y1="70" x2="235" y2="70" stroke="#a8988a" stroke-width="0.5" stroke-dasharray="2,2" opacity="0.4"/>
110                <line x1="15" y1="40" x2="235" y2="40" stroke="#a8988a" stroke-width="0.5" stroke-dasharray="2,2" opacity="0.4"/>
111                <line x1="30" y1="50" x2="30" y2="90" stroke="#16a34a" stroke-width="1"/>
112                <rect x="26" y="60" width="8" height="22" rx="1" fill="#16a34a"/>
113                <line x1="48" y1="40" x2="48" y2="85" stroke="#ef4444" stroke-width="1"/>
114                <rect x="44" y="48" width="8" height="28" rx="1" fill="#ef4444"/>
115                <line x1="66" y1="55" x2="66" y2="95" stroke="#16a34a" stroke-width="1"/>
116                <rect x="62" y="62" width="8" height="26" rx="1" fill="#16a34a"/>
117                <line x1="84" y1="35" x2="84" y2="80" stroke="#16a34a" stroke-width="1"/>
118                <rect x="80" y="42" width="8" height="32" rx="1" fill="#16a34a"/>
119                <line x1="102" y1="45" x2="102" y2="92" stroke="#ef4444" stroke-width="1"/>
120                <rect x="98" y="55" width="8" height="30" rx="1" fill="#ef4444"/>
121                <line x1="120" y1="30" x2="120" y2="75" stroke="#16a34a" stroke-width="1"/>
122                <rect x="116" y="38" width="8" height="30" rx="1" fill="#16a34a"/>
123                <line x1="138" y1="25" x2="138" y2="70" stroke="#16a34a" stroke-width="1"/>
124                <rect x="134" y="32" width="8" height="32" rx="1" fill="#16a34a"/>
125                <line x1="156" y1="35" x2="156" y2="78" stroke="#ef4444" stroke-width="1"/>
126                <rect x="152" y="42" width="8" height="28" rx="1" fill="#ef4444"/>
127                <line x1="174" y1="20" x2="174" y2="60" stroke="#16a34a" stroke-width="1"/>
128                <rect x="170" y="28" width="8" height="26" rx="1" fill="#16a34a"/>
129                <circle cx="210" cy="38" r="4" fill="#16a34a">
130                  <animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite"/>
131                </circle>
132                <text x="218" y="42" font-family="monospace" font-size="8" fill="#16a34a" font-weight="bold">LIVE</text>
133                <rect x="6" y="6" width="86" height="14" rx="6" fill="#ff6a2b" opacity="0.9"/>
134                <text x="12" y="16" font-family="sans-serif" font-size="7" fill="#fff" font-weight="600">Self-hosted &bull; Private</text>
135              </svg>
136              <div class="text-sm text-gray-500">Python &bull; Alpaca &bull; OANDA &bull; Binance &bull; WireGuard</div>
137              <h3 class="mt-2 text-xl font-semibold">
137Trading Bot + Market Simulator</h3>
138              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Multi-asset algorithmic trading framework — stocks &amp; options via Alpaca, crypto via Binance/Bybit testnet, forex via OANDA. Paired with a Gunicorn-served market simulator for backtesting strategies before going live. All traffic routed through WireGuard via a dedicated PIA VPN gateway.</p>
139              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
140                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Algo Trading</span>
141                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Backtesting</span>
142                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Multi-Asset</span>
143                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">VPN</span>
144              </div>
145            </article>
146
147            <!-- Khoya AI Assistant -->
148            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web,infrastructure">
149              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
150                <defs>
151                  <linearGradient id="bg-khoya" x1="0" y1="0" x2="1" y2="1">
152                    <stop offset="0%" stop-color="#231a13"/>
153                    <stop offset="100%" stop-color="#17110c"/>
154                  </linearGradient>
155                </defs>
156                <rect width="250" height="130" rx="12" fill="url(#bg-khoya)"/>
157                <!-- Self-hosted badge -->
158                <rect x="6" y="6" width="86" height="14" rx="6" fill="#ff6a2b" opacity="0.9"/>
159                <text x="12" y="16" font-family="sans-serif" font-size="7" fill="#fff" font-weight="600">Self-hosted &bull; Private</text>
160                <!-- Chat bubbles -->
161                <rect x="14" y="32" width="140" height="18" rx="9" fill="#2a2019" stroke="#3a3029"/>
162                <text x="22" y="44" font-family="sans-serif" font-size="7" fill="#e5d9cc">What's on my schedule today?</text>
163                <rect x="58" y="56" width="178" height="20" rx="9" fill="#ff6a2b"/>
164                <text x="66" y="69" font-family="sans-serif" font-size="7" fill="#fff">3 meetings, 2 tickets in triage, gym at 6pm</text>
165                <rect x="14" y="82" width="120" height="18" rx="9" fill="#2a2019" stroke="#3a3029"/>
166                <text x="22" y="94" font-family="sans-serif" font-size="7" fill="#e5d9cc">Open tickets across all projects</text>
167                <!-- Provider badges -->
168                <g font-family="sans-serif" font-size="6" font-weight="600">
169                  <rect x="14" y="108" width="32" height="12" rx="6" fill="#16a34a" opacity="0.9"/>
170                  <text x="20" y="116" fill="#fff">Groq</text>
171                  <rect x="50" y="108" width="40" height="12" rx="6" fill="#3b82f6" opacity="0.9"/>
172                  <text x="56" y="116" fill="#fff">Ollama</text>
173                  <rect x="94" y="108" width="48" height="12" rx="6" fill="#a855f7" opacity="0.9"/>
174                  <text x="100" y="116" fill="#fff">NVIDIA NIM</text>
175                </g>
176                <!-- Pulse indicator -->
177                <circle cx="226" cy="20" r="3" fill="#22c55e">
178                  <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
179                </circle>
180              </svg>
181              <div class="text-sm text-gray-500">Next.js 16 &bull; Prisma &bull; Groq / Ollama / NVIDIA NIM</div>
182              <h3 class="mt-2 text-xl font-semibold">Khoya — Personal AI Assistant</h3>
183              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Self-hosted ChatGPT-style assistant with multi-provider routing — Groq for speed, local Ollama for privacy, NVIDIA NIM for heavy lifting. PIN-gated access, manual morning briefing, SQLite history. Pulls context from my tickets, calendar, and projects.</p>
184              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
185                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">AI / LLM</span>
186                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Multi-Provider</span>
187                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Self-Hosted</span>
188              </div>
189            </article>
190
191            <!-- Bot Operations Fleet -->
192            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="python,infrastructure">
193              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
194                <defs>
195                  <linearGradient id="bg-fleet" x1="0" y1="0" x2="1" y2="1">
196                    <stop offset="0%" stop-color="#231a13"/>
197                    <stop offset="100%" stop-color="#17110c"/>
198                  </linearGradient>
199                </defs>
200                <rect width="250" height="130" rx="12" fill="url(#bg-fleet)"/>
201                <rect x="6" y="6" width="86" height="14" rx="6" fill="#ff6a2b" opacity="0.9"/>
202                <text x="12" y="16" font-family="sans-serif" font-size="7" fill="#fff" font-weight="600">Self-hosted &bull; Private</text>
203                <!-- Bot grid: 11 cells in a 4x3 grid (last row 3) -->
204                <g font-family="sans-serif" font-size="5" font-weight="600">
205                  <g transform="translate(14, 28)">
206                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
207                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
208                    <text x="12" y="13" fill="#e5d9cc">audit</text>
209                  </g>
210                  <g transform="translate(70, 28)">
211                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
212                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
213                    <text x="12" y="13" fill="#e5d9cc">backup</text>
214                  </g>
215                  <g transform="translate(126, 28)">
216                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
217                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
218                    <text x="12" y="13" fill="#e5d9cc">cert</text>
219                  </g>
220                  <g transform="translate(182, 28)">
221                    <rect width="54" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
222                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
223                    <text x="12" y="13" fill="#e5d9cc">deps</text>
224                  </g>
225                  <g transform="translate(14, 54)">
226                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#ff6a2b"/>
227                    <circle cx="6" cy="11" r="2" fill="#ff6a2b"/>
228                    <text x="12" y="13" fill="#e5d9cc">frontend</text>
229                  </g>
230                  <g transform="translate(70, 54)">
231                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
232                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
233                    <text x="12" y="13" fill="#e5d9cc">git</text>
234                  </g>
235                  <g transform="translate(126, 54)">
236                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
237                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
238                    <text x="12" y="13" fill="#e5d9cc">knowledge</text>
239                  </g>
240                  <g transform="translate(182, 54)">
241                    <rect width="54" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
242                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
243                    <text x="12" y="13" fill="#e5d9cc">canary</text>
244                  </g>
245                  <g transform="translate(14, 80)">
246                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
247                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
248                    <text x="12" y="13" fill="#e5d9cc">stale</text>
249                  </g>
250                  <g transform="translate(70, 80)">
251                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
252                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
253                    <text x="12" y="13" fill="#e5d9cc">triage</text>
254                  </g>
255                  <g transform="translate(126, 80)">
256                    <rect width="52" height="22" rx="4" fill="#2a2019" stroke="#16a34a"/>
257                    <circle cx="6" cy="11" r="2" fill="#16a34a"/>
258                    <text x="12" y="13" fill="#e5d9cc">uptime</text>
259                  </g>
260                </g>
261                <text x="14" y="120" font-family="sans-serif" font-size="6" fill="#a8988a">11 bots &bull; cron-driven &bull; auto-files tickets</text>
262              </svg>
263              <div class="text-sm text-gray-500">Node.js &bull; Cron &bull; gitleaks &bull; Acorn</div>
264              <h3 class="mt-2 text-xl font-semibold">Operational Reliability Bot Fleet</h3>
265              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">
26511 specialized bots that keep my infrastructure self-healing — secrets scanning, backups, SSL expiry, dependency audits, every-30-min frontend smoke tests, git hygiene, knowledge drift, scheduler canary, stale ticket cleanup, auto-triage, and uptime monitoring. All findings file tickets via API.</p>
266              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
267                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">DevSecOps</span>
268                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">SRE</span>
269                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Automation</span>
270              </div>
271            </article>
272            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web,infrastructure">
273              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
274                <defs>
275                  <linearGradient id="bg-finance" x1="0" y1="0" x2="1" y2="1">
276                    <stop offset="0%" stop-color="#231a13"/>
277                    <stop offset="100%" stop-color="#17110c"/>
278                  </linearGradient>
279                  <linearGradient id="finance-line" x1="0" y1="0" x2="1" y2="0">
280                    <stop offset="0%" stop-color="#ff6a2b"/>
281                    <stop offset="100%" stop-color="#ffb547"/>
282                  </linearGradient>
283                </defs>
284                <rect width="250" height="130" rx="12" fill="url(#bg-finance)"/>
285                <rect x="14" y="28" width="100" height="22" rx="11" fill="#2a2019" stroke="#ff6a2b" stroke-width="1"/>
286                <text x="22" y="38" font-family="sans-serif" font-size="6" fill="#a8988a">NET WORTH</text>
287                <text x="22" y="47" font-family="sans-serif" font-size="9" font-weight="bold" fill="#16a34a">$87,634.50</text>
288                <polyline points="125,72 140,65 155,68 170,55 185,50 200,42 215,38 230,30" fill="none" stroke="url(#finance-line)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
289                <circle cx="230" cy="30" r="2.5" fill="#ffb547"/>
290                <rect x="14" y="62" width="100" height="14" rx="4" fill="#2a2019" opacity="0.85"/>
291                <circle cx="22" cy="69" r="3" fill="#ff6a2b"/>
292                <rect x="30" y="66" width="40" height="2.5" rx="1" fill="#e5d9cc"/>
293                <rect x="80" y="66" width="28" height="2.5" rx="1" fill="#16a34a"/>
294                <rect x="14" y="80" width="100" height="14" rx="4" fill="#2a2019" opacity="0.85"/>
295                <circle cx="22" cy="87" r="3" fill="#ffb547"/>
296                <rect x="30" y="84" width="44" height="2.5" rx="1" fill="#e5d9cc"/>
297                <rect x="80" y="84" width="28" height="2.5" rx="1" fill="#16a34a"/>
298                <rect x="14" y="98" width="100" height="14" rx="4" fill="#2a2019" opacity="0.85"/>
299                <circle cx="22" cy="105" r="3" fill="#16a34a"/>
300                <rect x="30" y="102" width="36" height="2.5" rx="1" fill="#e5d9cc"/>
301                <rect x="80" y="102" width="28" height="2.5" rx="1" fill="#ef4444"/>
302                <rect x="158" y="6" width="86" height="14" rx="6" fill="#ff6a2b" opacity="0.9"/>
303                <text x="164" y="16" font-family="sans-serif" font-size="7" fill="#fff" font-weight="600">Self-hosted &bull; Private</text>
304              </svg>
305              <div class="text-sm text-gray-500">Next.js &bull; Plaid API &bull; PostgreSQL</div>
306              <h3 class="mt-2 text-xl font-semibold">Finance Tracker</h3>
307              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Self-hosted personal finance dashboard with Plaid bank integration, automatic transaction categorization, budget tracking, and net worth charts. Built with Next.js, deployed on home lab.</p>
308              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
309                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Fintech</span>
310                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Self-Hosted</span>
311                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Plaid</span>
312              </div>
313            </article>
314            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web,infrastructure">
315              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
316                <defs>
317                  <linearGradient id="bg-tickets" x1="0" y1="0" x2="1" y2="1">
318                    <stop offset="0%" stop-color="#231a13"/>
319                    <stop offset="100%" stop-color="#17110c"/>
320                  </linearGradient>
321                </defs>
322                <rect width="250" height="130" rx="12" fill="url(#bg-tickets)"/>
323                <text x="22" y="32" font-family="sans-serif" font-size="7" font-weight="bold" fill="#a8988a">OPEN</text>
324                <rect x="14" y="38" width="68" height="20" rx="4" fill="#2a2019" stroke="#ef4444" stroke-width="0.8"/>
325                <rect x="18" y="42" width="40" height="2" rx="1" fill="#e5d9cc"/>
326                <rect x="18" y="48" width="50" height="2" rx="1" fill="#6b5d51"/>
327                <circle cx="74" cy="46" r="2" fill="#ef4444"/>
328                <rect x="14" y="62" width="68" height="20" rx="4" fill="#2a2019" stroke="#ef4444" stroke-width="0.8"/>
329                <rect x="18" y="66" width="36" height="2" rx="1" fill="#e5d9cc"/>
330                <rect x="18" y="72" width="48" height="2" rx="1" fill="#6b5d51"/>
331                <circle cx="74" cy="70" r="2" fill="#ff6a2b"/>
332                <text x="98" y="32" font-family="sans-serif" font-size="7" font-weight="bold" fill="#a8988a">IN PROGRESS</text>
333                <rect x="90" y="38" width="68" height="20" rx="4" fill="#2a2019" stroke="#ff6a2b" stroke-width="0.8"/>
334                <rect x="94" y="42" width="44" height="2" rx="1" fill="#e5d9cc"/>
335                <rect x="94" y="48" width="38" height="2" rx="1" fill="#6b5d51"/>
336                <circle cx="150" cy="46" r="2" fill="#ff6a2b"/>
337                <rect x="90" y="62" width="68" height="20" rx="4" fill="#2a2019" stroke="#ff6a2b" stroke-width="0.8"/>
338                <rect x="94" y="66" width="38" height="2" rx="1" fill="#e5d9cc"/>
339                <rect x="94" y="72" width="46" height="2" rx="1" fill="#6b5d51"/>
340                <circle cx="150" cy="70" r="2" fill="#ff6a2b"/>
341                <rect x="90" y="86" width="68" height="20" rx="4" fill="#2a2019" stroke="#ff6a2b" stroke-width="0.8"/>
342                <rect x="94" y="90" width="42" height="2" rx="1" fill="#e5d9cc"/>
343                <rect x="94" y="96" width="40" height="2" rx="1" fill="#6b5d51"/>
344                <circle cx="150" cy="94" r="2" fill="#ef4444"/>
345                <text x="174" y="32" font-family="sans-serif" font-size="7" font-weight="bold" fill="#a8988a">DONE</text>
346                <rect x="166" y="38" width="68" height="20" rx="4" fill="#2a2019" stroke="#16a34a" stroke-width="0.8"/>
347                <rect x="170" y="42" width="40" height="2" rx="1" fill="#6b5d51"/>
348                <rect x="170" y="48" width="36" height="2" rx="1" fill="#6b5d51"/>
349                <circle cx="226" cy="46" r="2" fill="#16a34a"/>
350                <rect x="166" y="62" width="68" height="20" rx="4" fill="#2a2019" stroke="#16a34a" stroke-width="0.8"/>
351                <rect x="170" y="66" width="38" height="2" rx="1" fill="#6b5d51"/>
352                <rect x="170" y="72" width="48" height="2" rx="1" fill="#6b5d51"/>
353                <circle cx="226" cy="70" r="2" fill="#16a34a"/>
354                <rect x="14" y="112" width="86" height="14" rx="6" fill="#ff6a2b" opacity="0.9"/>
355                <text x="20" y="122" font-family="sans-serif" font-size="7" fill="#fff" font-weight="600">Self-hosted &bull; Private</text>
356              </svg>
357              <div class="text-sm text-gray-500">Express &bull; EJS &bull; MariaDB &bull; PM2</div>
358              <h3 class="mt-2 text-xl font-semibold">Tickets System</h3>
359              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Self-hosted Jira-style ticket tracker. Single source of truth for bugs, features, and ops issues across 11+ projects. External API for automated ticket creation, full kanban board, project routing, and audit trail.</p>
360              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
361                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">DevOps</span>
362                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Project Mgmt</span>
363                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">API</span>
364              </div>
365            </article>
366            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web,infrastructure">
367              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
368                <defs>
369                  <linearGradient id="bg-osticket" x1="0" y1="0" x2="1" y2="1">
370                    <stop offset="0%" stop-color="#231a13"/>
371                    <stop offset="100%" stop-color="#17110c"/>
372                  </linearGradient>
373                </defs>
374                <rect width="250" height="130" rx="12" fill="url(#bg-osticket)"/>
375                <rect x="14" y="28" width="222" height="20" rx="6" fill="#2a2019"/>
376                <circle cx="24" cy="38" r="3" fill="#ef4444"/>
377                <text x="32" y="41" font-family="monospace" font-size="7" fill="#a8988a" font-weight="bold">#1042</text>
378                <rect x="60" y="35" width="80" height="2.5" rx="1" fill="#e5d9cc"/>
379                <rect x="60" y="40" width="60" height="2" rx="1" fill="#6b5d51"/>
380                <circle cx="200" cy="38" r="6" fill="#ff6a2b"/>
381                <text x="200" y="41" font-family="sans-serif" font-size="6" fill="#fff" text-anchor="middle" font-weight="bold">JD</text>
382                <circle cx="216" cy="38" r="6" fill="#ffb547"/>
383                <text x="216" y="41" font-family="sans-serif" font-size="6" fill="#fff" text-anchor="middle" font-weight="bold">AK</text>
384                <rect x="14" y="52" width="222" height="20" rx="6" fill="#2a2019"/>
385                <circle cx="24" cy="62" r="3" fill="#ff6a2b"/>
386                <text x="32" y="65" font-family="monospace" font-size="7" fill="#a8988a" font-weight="bold">#1041</text>
387                <rect x="60" y="59" width="68" height="2.5" rx="1" fill="#e5d9cc"/>
388                <rect x="60" y="64" width="74" height="2" rx="1" fill="#6b5d51"/>
389                <circle cx="200" cy="62" r="6" fill="#16a34a"/>
390                <text x="200" y="65" font-family="sans-serif" font-size="6" fill="#fff" text-anchor="middle" font-weight="bold">SM</text>
391                <rect x="14" y="76" width="222" height="20" rx="6" fill="#2a2019"/>
392                <circle cx="24" cy="86" r="3" fill="#16a34a"/>
393                <text x="32" y="89" font-family="monospace" font-size="7" fill="#a8988a" font-weight="bold">#1040</text>
394                <rect x="60" y="83" width="74" height="2.5" rx="1" fill="#e5d9cc"/>
395                <rect x="60" y="88" width="58" height="2" rx="1" fill="#6b5d51"/>
396                <circle cx="200" cy="86" r="6" fill="#ff6a2b"/>
397                <text x="200" y="89" font-family="sans-serif" font-size="6" fill="#fff" text-anchor="middle" font-weight="bold">RT</text>
398                <rect x="14" y="100" width="222" height="20" rx="6" fill="#2a2019"/>
399                <circle cx="24" cy="110" r="3" fill="#ef4444"/>
400                <text x="32" y="113" font-family="monospace" font-size="7" fill="#a8988a" font-weight="bold">#1039</text>
401                <rect x="60" y="107" width="64" height="2.5" rx="1" fill="#e5d9cc"/>
402                <rect x="60" y="112" width="70" height="2" rx="1" fill="#6b5d51"/>
403                <circle cx="200" cy="110" r="6" fill="#ffb547"/>
404                <text x="200" y="113" font-family="sans-serif" font-size="6" fill="#fff" text-anchor="middle" font-weight="bold">LD</text>
405                <rect x="6" y="6" width="86" height="14" rx="6" fill="#ff6a2b" opacity="0.9"/>
406                <text x="12" y="16" font-family="sans-serif" font-size="7" fill="#fff" font-weight="600">Self-hosted &bull; Private</text>
407              </svg>
408              <div class="text-sm text-gray-500">PHP &bull; MariaDB &bull; Nginx</div>
409              <h3 class="mt-2 text-xl font-semibold">osTicket Helpdesk</h3>
410              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Production helpdesk system serving customer support tickets across multiple business ventures. Departments, SLA policies, knowledge base, email integration via Cloudflare Routing, agent workflows.</p>
411              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
412                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">SaaS</span>
413                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Customer Support</span>
414                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Self-Hosted</span>
415              </div>
416            </article>
417            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="python,infrastructure">
418              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
419                <defs>
420                  <linearGradient id="bg-audit" x1="0" y1="0" x2="1" y2="1">
421                    <stop offset="0%" stop-color="#231a13"/>
422                    <stop offset="100%" stop-color="#17110c"/>
423                  </linearGradient>
424                </defs>
425                <rect width="250" height="130" rx="12" fill="url(#bg-audit)"/>
426                <rect x="10" y="24" width="230" height="100" rx="8" fill="#0d0a08"/>
427                <circle cx="18" cy="32" r="2" fill="#ef4444"/>
428                <circle cx="25" cy="32" r="2" fill="#ff6a2b"/>
429                <circle cx="32" cy="32" r="2" fill="#16a34a"/>
430                <text x="16" y="48" font-family="monospace" font-size="7" fill="#16a34a">$ audit-bot scan --all</text>
431                <text x="16" y="58" font-family="monospace" font-size="6.5" fill="#16a34a">[OK] tickets: 0 secrets</text>
432                <text x="16" y="67" font-family="monospace" font-size="6.5" fill="#16a34a">[OK] gym: 0 secrets</text>
433                <text x="16" y="76" font-family="monospace" font-size="6.5" fill="#ef4444">[!!] finance: PLAID_KEY leaked</text>
434                <text x="16" y="85" font-family="monospace" font-size="6.5" fill="#16a34a">[OK] portfolio: 0 secrets</text>
435                <text x="16" y="94" font-family="monospace" font-size="6.5" fill="#ef4444">[!!] akhi: 3 npm vulns (high)</text>
436                <text x="16" y="103" font-family="monospace" font-size="6.5" fill="#16a34a">[OK] homelab: clean</text>
437                <text x="16" y="115" font-family="monospace" font-size="6.5" fill="#ff6a2b">&gt; 2 tickets filed via API_</text>
438                <rect x="158" y="6" width="86" height="14" rx="6" fill="#ff6a2b" opacity="0.9"/>
439                <text x="164" y="16" font-family="sans-serif" font-size="7" fill="#fff" font-weight="600">Self-hosted &bull; Private</text>
440              </svg>
441              <div class="text-sm text-gray-500">Node.js &bull; Cron &bull; gitleaks &bull; npm audit</div>
442              <h3 class="mt-2 text-xl font-semibold">Audit Bot</h3>
443              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Automated weekly security auditor that scans every codebase for committed secrets, dependency vulnerabilities, and broken links. Files findings as tickets via API with deduplication. Caught a leaked Plaid key on first run.</p>
444              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
445                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Security</span>
446                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Automation</span>
447                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">DevSecOps</span>
448              </div>
449            </article>
450            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web">
451              <svg width="100%" height="130" viewBox="0 0 250 130" xmlns="http://www.w3.org/2000/svg" class="mb-3 rounded-xl border border-gray-200 dark:border-gray-700">
452                <defs>
453                  <linearGradient id="bg-akhi" x1="0" y1="0" x2="1" y2="1">
454                    <stop offset="0%" stop-color="#231a13"/>
455                    <stop offset="100%" stop-color="#17110c"/>
456                  </linearGradient>
457                </defs>
458                <rect width="250" height="130" rx="12" fill="url(#bg-akhi)"/>
459                <rect x="14" y="14" width="68" height="84" rx="8" fill="#2a2019"/>
460                <rect x="20" y="20" width="56" height="44" rx="4" fill="#3d2a1a"/>
461                <path d="M 30 56 L 40 42 L 48 50 L 58 38 L 70 56 Z" fill="#ff6a2b" opacity="0.6"/>
462                <circle cx="62" cy="32" r="4" fill="#ffc9a8"/>
463                <rect x="20" y="68" width="40" height="3" rx="1" fill="#e5d9cc"/>
464                <rect x="20" y="74" width="28" height="2.5" rx="1" fill="#6b5d51"/>
465                <rect x="20" y="84" width="22" height="10" rx="5" fill="#16a34a"/>
466                <text x="31" y="91" font-family="sans-serif" font-size="6" fill="#fff" font-weight="bold" text-anchor="middle">$45</text>
467                <rect x="91" y="14" width="68" height="84" rx="8" fill="#2a2019"/>
468                <rect x="97" y="20" width="56" height="44" rx="4" fill="#17110c"/>
469                <path d="M 105 60 Q 115 38 125 50 Q 135 30 145 52 L 145 60 Z" fill="#ffb547" opacity="0.6"/>
470                <rect x="97" y="68" width="44" height="3" rx="1" fill="#e5d9cc"/>
471                <rect x="97" y="74" width="32" height="2.5" rx="1" fill="#6b5d51"/>
472                <rect x="97" y="84" width="22" height="10" rx="5" fill="#16a34a"/>
473                <text x="108" y="91" font-family="sans-serif" font-size="6" fill="#fff" font-weight="bold" text-anchor="middle">$89</text>
474                <rect x="168" y="14" width="68" height="84" rx="8" fill="#2a2019"/>
475                <rect x="174" y="20" width="56" height="44" rx="4" fill="#3a2414"/>
476                <ellipse cx="202" cy="42" rx="14" ry="16" fill="#ff6a2b" opacity="0.5"/>
477                <rect x="200" y="40" width="4" height="20" fill="#c23b0c"/>
478                <rect x="174" y="68" width="36" height="3" rx="1" fill="#e5d9cc"/>
479                <rect x="174" y="74" width="40" height="2.5" rx="1" fill="#6b5d51"/>
480                <rect x="174" y="84" width="22" height="10" rx="5" fill="#16a34a"/>
481                <text x="185" y="91" font-family="sans-serif" font-size="6" fill="#fff" font-weight="bold" text-anchor="middle">$28</text>
482                <rect x="70" y="106" width="110" height="18" rx="9" fill="#ff6a2b"/>
483                <text x="125" y="118" font-family="sans-serif" font-size="9" fill="#fff" font-weight="bold" text-anchor="middle">+ Add to Cart</text>
484              </svg>
485              <div class="text-sm text-gray-500">React &bull; Vite &bull; Tailwind &bull; Square Payments</div>
486              <h3 class="mt-2 text-xl font-semibold">Akhi Clothin</h3>
487              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">
487E-commerce platform for Islamic clothing and accessories &mdash; thobes, abayas, prayer mats, oud attar, Umrah kits. Multi-currency (USD/CAD/GBP), Square Web Payments SDK, free shipping over $75. Self-hosted to skip Shopify fees.</p>
488              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
489                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">E-Commerce</span>
490                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Fintech</span>
491                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Multi-Currency</span>
492              </div>
493            </article>
494            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web">
495              <div class="text-sm text-gray-500">Flutter &bull; Dart &bull; Deno</div>
496              <h3 class="mt-2 text-xl font-semibold">MoneyFlap Mobile App</h3>
497              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Cross-platform fintech app with BLoC state management, secure payment processing via Deno/TypeScript, and REST APIs on serverless architecture.</p>
498              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
499                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Fintech</span>
500                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Mobile</span>
501                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Serverless</span>
502              </div>
503            </article>
504            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="java">
505              <div class="text-sm text-gray-500">Java &bull; CLI</div>
506              <h3 class="mt-2 text-xl font-semibold">ReminderApp</h3>
507              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">OOP-based task management app using linked lists, stacks, and queues with persistent storage, priority scheduling, and undo functionality.</p>
508              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
509                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">DSA</span>
510                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Productivity</span>
511              </div>
512            </article>
513            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="python">
514              <div class="text-sm text-gray-500">Python &bull; SQLite</div>
515              <h3 class="mt-2 text-xl font-semibold">Inventory + Order Tracker</h3>
516              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Tracks restaurant stock levels with full CRUD, prevents waste, auto-generates purchasing suggestions, and exports CSV reports.</p>
517              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
518                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Automation</span>
519                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Ops</span>
520              </div>
521            </article>
522            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web,infrastructure">
523              <div class="text-sm text-gray-500">Web App &bull; Self-Hosted</div>
524              <h3 class="mt-2 text-xl font-semibold"><a href="https://gym.alidjebbari.com" target="_blank" class="hover:text-orange-500">Fitness Tracker</a></h3>
525              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Self-hosted fitness tracking app for logging workouts, tracking progress, and monitoring fitness goals. Built and deployed on my home lab infrastructure.</p>
526              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
527                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Full-Stack</span>
528                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Self-Hosted</span>
529                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Health</span>
530              </div>
531            </article>
532            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="web,python">
533              <div class="text-sm text-gray-500">Flask &bull; HTML/CSS</div>
534              <h3 class="mt-2 text-xl font-semibold">RSVP Collection System</h3>
535              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Full-stack Flask web app for event RSVPs with validation, response dashboard, attendance tracking, and CSV export.</p>
536              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
537                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Full-Stack</span>
538                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Web App</span>
539              </div>
540            </article>
541            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="python,infrastructure">
542              <div class="text-sm text-gray-500">Python &bull; psutil</div>
543              <h3 class="mt-2 text-xl font-semibold">System Health Monitor</h3>
544              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Real-time CLI dashboard monitoring CPU, memory, disk, and network metrics with threshold alerts and historical logging &mdash; built for home lab observability.</p>
545              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
546                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Infrastructure</span>
547                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Monitoring</span>
548              </div>
549            </article>
550            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="java">
551              <div class="text-sm text-gray-500">Java &bull; Minimax</div>
552              <h3 class="mt-2 text-xl font-semibold">TicTacToe AI</h3>
553              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Game AI using recursion + minimax with alpha-beta pruning and a debugging UI.</p>
554              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
555                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">AI</span>
556                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Education</span>
557              </div>
558            </article>
559            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="python,systems">
560              <div class="text-sm text-gray-500">Python &bull; Ethics</div>
561              <h3 class="mt-2 text-xl font-semibold">Autonomous Driving Simulator</h3>
562              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Simulated high-stakes choices for self-driving cars with analytics on moral frameworks.</p>
563              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
564                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Simulation</span>
565                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Ethics</span>
566              </div>
567            </article>
568            <article class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:bg-gray-900" data-tech="systems">
569              <div class="text-sm text-gray-500">C &bull; Bash</div>
570              <h3 class="mt-2 text-xl font-semibold">Linux Shell Lab</h3>
571              <p class="mt-2 flex-1 text-gray-600 dark:text-gray-300">Custom bash shell clone with piping, I/O redirection, process control, and history.</p>
572              <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold text-orange-500">
573                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Systems</span>
574                <span class="rounded-full bg-orange-50 px-3 py-1 dark:bg-orange-500/10">Networking</span>
575              </div>
576            </article>
577          </div>
578        </div>
579      </section>
580
581<!-- COURSE SPOTLIGHTS -->
582      <section id="courses" class="bg-gray-50 py-16 dark:bg-gray-950">
583        <div class="mx-auto max-w-6xl px-6">
584          <p class="text-sm uppercase tracking-[0.3em] text-orange-500">Course Spotlights</p>
585          <h2 class="mt-4 text-3xl font-bold">Projects that grew out of class</h2>
586          <p class="mt-2 max-w-3xl text-gray-600 dark:text-gray-300">
587            I turn every assignment into something portfolio-worthy. These are the builds recruiters often ask me about during interviews.
588          </p>
589          <div class="m-swipe mt-10 grid gap-6 md:grid-cols-2">
590            <article class="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
591              <div class="badge-pill bg-orange-100 text-orange-700">CS 110 &bull; Computing principles</div>
592              <h3 class="mt-3 text-xl font-semibold">Ethical Autonomous Driving Simulator</h3>
593              <p class="mt-2 text-gray-600 dark:text-gray-300">
594                Built branching storylines that visualize trolley-problem scenarios, captured player sentiment, and prepared a classroom talk on AI ethics.
595              </p>
596              <ul class="mt-4 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
597                <li>Python</li><li>Decision trees</li><li>UX research</li>
598              </ul>
599            </article>
600            <article class="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
601              <div class="badge-pill bg-orange-100 text-orange-700">CS 112 &bull; Intro to CS II</div>
602              <h3 class="mt-3 text-xl font-semibold">Cookie Cost Estimator</h3>
603              <p class="mt-2 text-gray-600 dark:text-gray-300">
604                Modeled ingredient depletion, labor, shipping, and packaging to forecast bakery margins and flag unprofitable custom orders.
605              </p>
606              <ul class="mt-4 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
607                <li>Python</li><li>File I/O</li><li>Unit testing</li>
608              </ul>
609            </article>
610            <article class="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
611              <div class="badge-pill bg-orange-100 text-orange-700">CS 262 &bull; Low-level programming</div>
612              <h3 class="mt-3 text-xl font-semibold">Linux Shell Lab</h3>
613              <p class="mt-2 text-gray-600 dark:text-gray-300">
614                Implemented a Bash-like CLI with piping, I/O redirection, job control, and a persistent history file. Instrumented with strace to profile syscalls.
615              </p>
616              <ul class="mt-4 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
617                <li>C</li><li>Signals</li><li>Systems</li>
618              </ul>
619            </article>
620            <article class="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
621              <div class="badge-pill bg-orange-100 text-orange-700">CS 321 &bull; Software engineering</div>
622              <h3 class="mt-3 text-xl font-semibold">Inventory + Order Tracker 2.0</h3>
623              <p class="mt-2 text-gray-600 dark:text-gray-300">
624                Iterated on the restaurant ops tool with REST APIs, authentication, and dashboards built with Plotly to share analytics with partners.
625              </p>
626              <ul class="mt-4 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
627                <li>Python</li><li>SQLite</li><li>API design</li>
628              </ul>
629            </article>
630          </div>
631        </div>
632      </section>
633
634      </div>
635    </main>
636    <footer class="site-footer">
637      <div class="shell">
638        <div class="foot-grid">
639          <div>
640            <a href="index.html" class="brand"><span class="brand-mark">AD</span>Ali Djebbari</a>
641            <p style="margin-top:16px;max-width:34ch">Data center engineer, software engineer and co-owner of two businesses. Based in Northern Virginia.</p>
642          </div>
643          <div>
644            <h4>Explore</h4>
645            <ul><li><a href="index.html#work">Work</a></li><li><a href="projects.html">Projects</a></li><li><a href="about.html">About</a></li><li><a href="lab.html">Lab</a></li></ul>
646          </div>
647          <div>
648            <h4>More</h4>
649            <ul><li><a href="blog.html">Blog</a></li><li><a href="services.html">Services</a></li><li><a href="resume.html">Resume</a></li><li><a href="https://github.com/alidjebbari" target="_blank" rel="noopener">GitHub ↗</a></li><li><a href="https://linkedin.com/in/alidjebbari" target="_blank" rel="noopener">LinkedIn ↗</a></li></ul>
650          </div>
651          <div>
652            <h4>Get updates</h4>
653            <p>One email when something ships. No spam.</p>
654            <form id="newsletter-form" class="newsletter">
655              <label class="sr-only" for="newsletter-email">Email</label>
656              <input type="email" id="newsletter-email" placeholder="[email protected]" required autocomplete="email" />
657              <button type="submit" class="btn btn-primary">Notify me</button>
658            </form>
659            <p id="newsletter-toast" class="hidden" role="status"></p>
660          </div>
661        </div>
662        <p class="wordmark" aria-hidden="true">Ali Djebbari</p>
663        <div class="foot-bottom">
664          <span>© <span id="current-year">2026</span> Ali Djebbari. Built by hand, hosted on my own servers.</span>
665          <a href="services.html">Want a site like this? →</a>
666        </div>
667      </div>
668    </footer>
669    
669<script src="assets/vendor/gsap.min.js" defer></script>
669
670    
670<script src="assets/vendor/ScrollTrigger.min.js" defer></script>
670
671    
671<script src="assets/vendor/lenis.min.js" defer></script>
671
672    
672<script src="assets/js/site.js?v=ember1" defer></script>
672
673    
673<script src="assets/js/motion.js?v=ember1" defer></script>
673
674    
674<script src="assets/js/main.js?v=ember1" defer></script>
674
675  
675<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"f22ce9893a814ed4a84aced4b7e48b2d","r":1,"spa":2}' crossorigin="anonymous"></script>
675
676</body>
677</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.