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 • Docker • Tailscale</div> 91 <h3 class="mt-2 text-xl font-semibold">Home Server & 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 • Private</text> 135 </svg> 136 <div class="text-sm text-gray-500">Python • Alpaca • OANDA • Binance • 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 & 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 • 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 • Prisma • 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 • 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 • cron-driven • auto-files tickets</text> 262 </svg> 263 <div class="text-sm text-gray-500">Node.js • Cron • gitleaks • 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 • Private</text> 304 </svg> 305 <div class="text-sm text-gray-500">Next.js • Plaid API • 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 • Private</text> 356 </svg> 357 <div class="text-sm text-gray-500">Express • EJS • MariaDB • 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 • Private</text> 407 </svg> 408 <div class="text-sm text-gray-500">PHP • MariaDB • 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">> 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 • Private</text> 440 </svg> 441 <div class="text-sm text-gray-500">Node.js • Cron • gitleaks • 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 • Vite • Tailwind • 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 — 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 • Dart • 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 • 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 • 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 • 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 • 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 • 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 — 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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.