PageSourceSearch

https://ahmedosama9886.web.app/projects.html

html ahmedosama9886.web.app collected 2026-10-03 12:15:55 UTC 39,464 bytes, 540 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Portfolio | Ahmed Osama — Technical Artist &amp; Game Designer</title>
8    <meta name="description"
9        content="Technical Art &amp; Game Design portfolio featuring real-time visual effects, shaders, procedural tools, engine architecture, and gameplay systems.">
10    <meta name="keywords"
11        content="Technical Artist, Technical Game Designer, Shaders, Unreal Engine 5, Unity, Niagara, EmberGen, C++, Python, HLSL, Ahmed Osama">
12    <link rel="canonical" href="https://ahmedosama9886.com/projects.html">
13
14    <!-- Open Graph -->
15    <meta property="og:type" content="website">
16    <meta property="og:url" content="https://ahmedosama9886.com/projects.html">
17    <meta property="og:title" content="Portfolio | Ahmed Osama — Technical Artist &amp; Game Designer">
18    <meta property="og:description"
19        content="Technical design, production tools, graphics architecture, and real-time visual effects.">
20    <meta property="og:image" content="https://ahmedosama9886.com/assets/img/LogoTab.png">
21
22    <!-- Google Fonts Preconnect & Stylesheets -->
23    <link rel="preconnect" href="https://fonts.googleapis.com">
24    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
25    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
26
27    <link rel="icon" href="assets/img/LogoTab.png" type="image/x-icon" sizes="32x32" />
28    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
29    <link rel="stylesheet" href="css/style.css">
30    <link rel="stylesheet" href="css/animations.css">
31</head>
32
33<body class="bg-primary text-text font-sans h-full overflow-x-hidden antialiased">
34
35    <!-- Atmospheric Islamic Pattern Background -->
36    <div class="islamic-pattern-bg interactive" id="islamicPatternBg">
37        <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
38            <defs>
39                <linearGradient id="pattern-grad" x1="0%" y1="0%" x2="100%" y2="100%">
40                    <stop offset="0%" stop-color="#7028A0"></stop>
41                    <stop offset="50%" stop-color="#E81E62"></stop>
42                    <stop offset="100%" stop-color="#7028A0"></stop>
43                </linearGradient>
44                <symbol id="islamic-star-8" viewBox="0 0 100 100">
45                    <polygon points="50,5 61,35 95,35 68,55 79,85 50,65 21,85 32,55 5,35 39,35" fill="none" stroke="url(#pattern-grad)" stroke-width="1" opacity="0.6"></polygon>
46                </symbol>
47            </defs>
48            <!-- Layer 1: Large grid -->
49            <g class="pattern-layer-1" opacity="0.5">
50                <line x1="0" y1="200" x2="800" y2="200" stroke="url(#pattern-grad)" stroke-width="0.5" class="geometric-line"></line>
51                <line x1="0" y1="400" x2="800" y2="400" stroke="url(#pattern-grad)" stroke-width="0.5" class="geometric-line"></line>
52                <line x1="0" y1="600" x2="800" y2="600" stroke="url(#pattern-grad)" stroke-width="0.5" class="geometric-line"></line>
53                <line x1="200" y1="0" x2="200" y2="800" stroke="url(#pattern-grad)" stroke-width="0.5" class="geometric-line"></line>
54                <line x1="400" y1="0" x2="400" y2="800" stroke="url(#pattern-grad)" stroke-width="0.5" class="geometric-line"></line>
55                <line x1="600" y1="0" x2="600" y2="800" stroke="url(#pattern-grad)" stroke-width="0.5" class="geometric-line"></line>
56            </g>
57            <!-- Layer 2: Stars -->
58            <g class="pattern-layer-2" opacity="0.4">
59                <use href="#islamic-star-8" x="150" y="150" width="100" height="100" class="islamic-star"></use>
60                <use href="#islamic-star-8" x="350" y="150" width="100" height="100" class="islamic-star"></use>
61                <use href="#islamic-star-8" x="550" y="150" width="100" height="100" class="islamic-star"></use>
62                <use href="#islamic-star-8" x="150" y="350" width="100" height="100" class="islamic-star"></use>
63                <use href="#islamic-star-8" x="350" y="350" width="100" height="100" class="islamic-star"></use>
64                <use href="#islamic-star-8" x="550" y="350" width="100" height="100" class="islamic-star"></use>
65                <use href="#islamic-star-8" x="150" y="550" width="100" height="100" class="islamic-star"></use>
66                <use href="#islamic-star-8" x="350" y="550" width="100" height="100" class="islamic-star"></use>
67                <use href="#islamic-star-8" x="550" y="550" width="100" height="100" class="islamic-star"></use>
68            </g>
69            <!-- Layer 3: Diagonal lines -->
70            <g class="pattern-layer-3" opacity="0.3">
71                <line x1="0" y1="0" x2="800" y2="800" stroke="url
71(#pattern-grad)" stroke-width="0.3"></line>
72                <line x1="800" y1="0" x2="0" y2="800" stroke="url(#pattern-grad)" stroke-width="0.3"></line>
73                <line x1="400" y1="0" x2="800" y2="400" stroke="url(#pattern-grad)" stroke-width="0.3"></line>
74                <line x1="0" y1="400" x2="400" y2="800" stroke="url(#pattern-grad)" stroke-width="0.3"></line>
75            </g>
76            <!-- Interactive glow spots -->
77            <circle id="patternGlow1" cx="400" cy="300" r="130" fill="url(#pattern-grad)" opacity="0.4" filter="blur(60px)"></circle>
78            <circle id="patternGlow2" cx="250" cy="200" r="80" fill="#7028A0" opacity="0.25" filter="blur(40px)"></circle>
79            <circle id="patternGlow3" cx="550" cy="450" r="100" fill="#E81E62" opacity="0.2" filter="blur(50px)"></circle>
80        </svg>
81    </div>
82
83    <!-- Scroll Progress Indicator -->
84    <div class="scroll-progress" id="scrollProgress"></div>
85
86    <!-- Parallax Stars Background -->
87    <div class="parallax-stars" id="parallaxStars"></div>
88
89    <!-- Smooth Cursor Glow -->
90    <div class="cursor-glow" id="cursorGlow"></div>
91
92    <!-- Unified Navigation Bar -->
93    <div id="main-nav"></div>
94
95    <!-- Projects Section -->
96    <section id="projects" class="py-16 md:py-24 relative z-10">
97        <div class="max-w-7xl mx-auto px-4 sm:px-6">
98            <!-- Header Title -->
99            <div class="text-center max-w-3xl mx-auto mb-12">
100                <div class="section-eyebrow">Work Archive</div>
101                <h1 class="text-4xl sm:text-5xl font-display font-black text-white mb-4">
102                    Master <span class="fancy">Portfolio</span>
103                </h1>
104                <p class="text-base sm:text-lg text-[#A0AABF] leading-relaxed">
105                    Systems, tools, real-time shaders, graphics architecture, and gameplay pipelines.
106                </p>
107            </div>
108
109            <!-- Filter Tabs -->
110            <div class="filter-tabs-container mb-12">
111                <button class="filter-tab active" data-filter="all">All Projects</button>
112                <button class="filter-tab" data-filter="technical-design">Technical Design</button>
113                <button class="filter-tab" data-filter="technical-art">Technical Art</button>
114                <button class="filter-tab" data-filter="tools">Tools &amp; Pipeline</button>
115                <button class="filter-tab" data-filter="graphics">Graphics &amp; Engines</button>
116                <button class="filter-tab" data-filter="vfx">Real-Time VFX</button>
117            </div>
118
119            <!-- Projects Grid -->
120            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-grid">
121
122                <!-- 1. Asset Pipeline & Substance Painter Automation Tool (Tools / Technical Art) -->
123                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="tools technical-art">
124                    <div class="card-content-body">
125                        <div>
126                            <div class="flex items-center justify-between mb-2">
127                                <h3 class="text-xl font-bold font-display text-white">Asset Pipeline &amp; Substance Tool</h3>
128                                <span class="status-pill live">
129                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-emerald-400 animate-pulse"></span>Featured Tool
130                                </span>
131                            </div>
132                            <div class="flex flex-wrap gap-1.5 mb-3">
133                                <span class="chip text-[10px] py-0.5 px-2">Python</span>
134                                <span class="chip text-[10px] py-0.5 px-2">PySide6/Qt</span>
135                                <span class="chip text-[10px] py-0.5 px-2">Substance</span>
136                                <span class="chip text-[10px] py-0.5 px-2">Perforce</span>
137                            </div>
138                            <p class="text-[#A0AABF] text-sm mb-3">Pipeline tool to streamline asset setup, Substance Painter texture export, and version-control workflows for studio production.</p>
139                        </div>
140                        <div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
141                            <a href="https://www.linkedin.com/feed/update/urn:li:activity:7494467086312988674/" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors flex items-center gap-1.5">
142                                <span>LinkedIn Post <i class="fab fa-linkedin ml-1"></i> ↗</span>
143                            </a>
144                            <span class="text-gray-500 text-xs font-mono">Pipeline Tool</span>
145                        </div>
146                    </div>
147                </div>
148
149                <!-- 2. Technical Art Showreel (VFX / Technical Art) -->
150                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="vfx technical-art">
151                    <div class="card-content-body">
152                        <div>
153                            <div class="flex items-center justify-between mb-2">
154                                <h3 class="text-xl font-bold font-display text-white">Technical Art Showreel</h3>
155                                <span class="status-pill featured">
156                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-[#C084FC] animate-pulse"></span>Reel
157                                </span>
158                            </div>
159                            <p class="text-[#A0AABF] text-sm mb-3">Production showreel featuring real-time visual effects, custom shader architectures, GPU particle systems, and technical art across engines.</p>
160                        </div>
161                        <div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
162                            <a href="https://vimeo.com/1213878940?share=copy&fl=sv&fe=ci" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors flex items-center gap-1.5">
163                                <span>Watch on Vimeo <i class="fab fa-vimeo ml-1"></i> ↗</span>
164                            </a>
165                            <span class="text-xs font-mono text-[#C084FC]">Vimeo HD</span>
166                        </div>
167                    </div>
168                </div>
169
170                <!-- 3. Apoceus: Visual Effects (VFX / Technical Art) -->
171                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="vfx technical-art">
172                    <div class="card-content-body">
173                        <div>
174                            <div class="flex items-center justify-between mb-2">
175                                <h3 class="text-xl font-bold font-display text-white">Apoceus: VFX Breakdown</h3>
176                                <span class="status-pill active">
177                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-cyan-400 animate-pulse"></span>WIP
178                                </span>
179                            </div>
180                            <div class="flex flex-wrap gap-1.5 mb-3">
181                                <span class="chip text-[10px] py-0.5 px-2">UE5</span>
182                                <span class="chip text-[10px] py-0.5 px-2">Niagara</span>
183                                <span class="chip text-[10px] py-0.5 px-2">HLSL</span>
184                            </div>
185                            <p class="text-[#A0AABF] text-sm mb-3">All-new visual effects revealed: GPU particle simulations, vector field dynamics, custom Niagara modules, and HLSL shader work.</p>
186                        </div>
187                        <div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
188                            <a href="https://www.youtube.com/watch?v=iGTfohQmd5w" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors flex items-center gap-1.5">
189                                <span>Watch VFX Reel <i class="fab fa-youtube text-red-400 ml-1"></i> ↗</span>
190                            </a>
191                            <span class="text-xs font-mono text-[#707078]">YouTube</span>
192                        </div>
193                    </div>
194                </div>
195
196                <!-- 4. ITI Cutscene — Glitch Of Eden Final (Technical Art / Cinematics) -->
197                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="technical-art">
198                    <div class="card-content-body">
199                        <div>
200                            <div class="flex items-center justify-between mb-2">
201                                <h3 class="text-xl font-bold font-display text-white">ITI: Glitch Of Eden</h3>
202                                <span class="status-pill active">
203                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-purple-400 animate-pulse"></span>Cinematics
204                                </span>
205                            </div>
206                            <p class="text-[#A0AABF] text-sm mb-3">Formative cinematics project — character animation, camera direction, lighting, and real-time in-engine sequence direction.</p>
207                        </div>
208                        <div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
209                            <a href="https://www.linkedin.com/in/ahmedosama9886/details/projects/edit/forms/1026763544/" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors flex items-center gap-1.5">
210                                <span>LinkedIn Details <i class="fab fa-linkedin ml-1"></i> ↗</span>
211                            </a>
212                            <span class="text-xs font-mono text-purple-400">Project Form</span>
213                        </div>
214                    </div>
215                </div>
216
217                <!-- 5. Tech Art OS (Tools / Technical Art) -->
218                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="tools technical-art">
219                    <div class="card-content-body">
220                        <div>
221                            <div class="flex items-center justify-between mb-2">
222                                <h3 class="text-xl font-bold font-display text-white">Tech Art OS</h3>
223                                <span class="status-pill live">
224                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-emerald-400 animate-pulse"></span>Live Platform
225                                </span>
226                            </div>
227                            <div class="mb-2">
228                                <span class="ai-badge"><i class="fas fa-robot text-[10px]"></i> AI &bull; Pipeline Tools</span>
229                            </div>
230                            <p class="text-[#A0AABF] text-sm mb-3">Unified technical art production suite integrating Python Maya validators, automated mesh checks, sprite packing, and AI pipeline helpers.</p>
231                        </div>
232                        <div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
233                            <a href="https://techart-5a1b9.web.app/" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white text-xs flex items-center gap-1.5 transition-colors">
234                                <i class="fas fa-external-link-alt text-cyan-400"></i> Open Suite ↗
235                            </a>
236                        </div>
237                    </div>
238                </div>
239
240                <!-- 6. LAEEB Engine (Graphics / Tools) -->
241                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="graphics tools">
242                    <div class="card-content-body">
243                        <div>
244                            <div class="flex items-center justify-between mb-2">
245                                <h3 class="text-xl font-bold font-display text-white">LAEEB Engine</h3>
246                                <span class="status-pill indev">
247                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-cyan-400 animate-pulse"></span>Active R&amp;D
248                                </span>
249                            </div>
250                            <p class="text-[#A0AABF] text-sm mb-3">Custom real-time rendering architecture built in modern C++ exploring Vulkan/OpenGL graphics pipelines, shader compilation, and command buffers.</p>
251                        </div>
252                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
253                            <a href="https://techart-5a1b9.web.app/#/tools/laeeb-engine" target="_blank" rel="noopener noreferrer" class="px-2.5 py-1.5 rounded-lg font-semibold text-xs transition-colors bg-white/10 hover:bg-white/15 text-white flex items-center gap-1 border border-white/10 shrink-0">
254                                <i class="fas fa-external-link-alt text-cyan-400 text-[10px]"></i> App ↗
255                            </a>
256                            <a href="https://github.com/ahmedosama9886/LAEEB-Engine" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white text-xs flex items-center gap-1 transition-colors shrink-0">
257                                <i class="fab fa-github"></i> GitHub ↗
258                            </a>
259                        </div>
260                    </div>
261                </div>
262
263                <!-- 7. Arena Gameplay (Technical Design / Technical Art) -->
264                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="technical-design technical-art">
265                    <div class="card-content-body">
266                        <div>
267                            <div class="flex items-center justify-between mb-2">
268                                <h3 class="text-xl font-bold font-display text-white">Arena Gameplay</h3>
269                                <span class="status-pill active">
270                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-blue-400 animate-pulse"></span>Active Prototype
271                                </span>
272                            </div>
273                            <p class="text-[#A0AABF] text-sm mb-3">Gameplay sandbox in Unity testing custom character controllers, combat impact freezes (hitstop), Niyyah-weighted mechanics, and refractive screen-space shaders.</p>
274                        </div>
275                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
276                            <span class="text-gray-400 text-xs flex items-center gap-1.5">
277                                <i class="fas fa-gamepad text-[#FDA4AF]"></i> Systems Prototype
278                            </span>
279                        </div>
280                    </div>
281                </div>
282
283                <!-- 4. The Mountain Tower Room -->
284                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="technical-art">
285                    <div class="card-content-body">
286                        <div>
287                            <div class="flex items-center justify-between mb-2">
288                                <h3 class="text-xl font-bold font-display text-white">The Mountain Tower Room</h3>
289                                <span class="status-pill active">
290                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-amber-400 animate-pulse"></span>Environment
291                                </span>
292                            </div>
293                            <p class="text-[#A0AABF] text-sm mb-3">Tower Room Environment Artist project exploring realistic light distributions, architectural interior styling, and atmospheric mood illumination.</p>
294                        </div>
295                        <div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
296                            <a href="https://www.behance.net/gallery/212872921/The-Mountain-Tower-Room" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors flex items-center gap-1.5">
297                                <span>View on Behance <i class="fab fa-behance"></i> ↗</span>
298                            </a>
299                            <span class="text-gray-500 text-xs italic">3D Environment</span>
300                        </div>
301                    </div>
302                </div>
303
304                <!-- 5. RTVFX Unreal Showreel -->
305                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="vfx">
306                    <div class="card-content-body">
307                        <div>
308                            <div class="flex items-center justify-between mb-2">
309                                <h3 class="text-xl font-bold font-display text-white">RTVFX Unreal Showreel</h3>
310                                <span class="status-pill featured">
311                                    <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-[#C084FC] animate-pulse"></span>Featured
312                                </span>
313                            </div>
314                            <p class="text-[#A0AABF] text-sm mb-3">Unreal Engine 5 real-time VFX showreel highlighting GPU particle simulations, vector fields, and custom Niagara modules.</p>
315                        </div>
316                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
317                            <a href="https://youtu.be/Zd1kQYwnoow?si=21sTc_EqMOdlef3I" target="_blank" rel="noopener noreferrer" class="btn-primary px-3.5 py-2 rounded-lg font-semibold text-xs transition-colors flex items-center gap-1.5 shrink-0">
318                                <span>Watch Showreel <i class="fab fa-youtube text-red-400"></i> ↗</span>
319                            </a>
320                            <span class="text-xs font-mono text-[#707078] shrink-0">Showreel 2026</span>
321                        </div>
322                    </div>
323                </div>
324
325                <!-- 6. EmberGen: Nodes & Export -->
326                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="vfx">
327                    <div class="card-content-body">
328                        <div>
329                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
330                                <h3 class="text-xl font-bold font-display text-white">EmberGen: Nodes &amp; Export</h3>
331                                <span class="status-pill tutorial shrink-0">
332                                    <span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>Tutorial
333                                </span>
334                            </div>
335                            <p class="text-[#A0AABF] text-sm mb-3">Comprehensive breakdown of EmberGen node networks, simulation parameters, and best practices for exporting flipbooks and volumetric VDB sequences into game engines.</p>
336                        </div>
337                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
338                            <a href="https://www.youtube.com/watch?v=0EuUnQTRBXs" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors flex items-center gap-1.5 shrink-0">
339                                <span>Watch Tutorial <i class="fab fa-youtube text-red-500"></i> ↗</span>
340                            </a>
341                            <span class="text-xs font-mono text-[#707078] shrink-0">VFX Education</span>
342                        </div>
343                    </div>
344                </div>
345
346                <!-- 7. Dynamic Fire System -->
347                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="vfx">
348                    <div class="card-content-body">
349                        <div>
350                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
351                                <h3 class="text-xl font-bold font-display text-white">Dynamic Fire System</h3>
352                                <span class="status-pill active shrink-0">
353                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>Active
354                                </span>
355                            </div>
356                            <p class="text-[#A0AABF] text-sm mb-3">Real-time simulation built in EmberGen and Unreal Engine 5. Focuses on VDB rendering optimizations, custom vector fields, and Niagara GPU emitter integration.</p>
357                        </div>
358                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
359                            <a href="https://www.artstation.com/artwork/6LOqaO" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors shrink-0">
360                                <span>ArtStation Breakdown <i class="fab fa-artstation ml-1"></i> ↗</span>
361                            </a>
362                        </div>
363                    </div>
364                </div>
365
366                <!-- 8. Ocean Shader System -->
367                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="vfx technical-art">
368                    <div class="card-content-body">
369                        <div>
370                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
371                                <h3 class="text-xl font-bold font-display text-white">Ocean Shader System</h3>
372                                <span class="status-pill active shrink-0">
373                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>Active
374                                </span>
375                            </div>
376                            <p class="text-[#A0AABF] text-sm mb-3">Ocean surface shader in Unreal Engine 5 using Ocean Body Zone. Implements Gerstner waves displacement math, tessellation, and subsurface light scattering.</p>
377                        </div>
378                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
379                            <span class="text-gray-500 text-xs italic shrink-0">Internal R&amp;D</span>
380                        </div>
381                    </div>
382                </div>
383
384                <!-- 8. Sprite Sheet Creator -->
385                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="tools technical-art">
386                    <div class="card-content-body">
387                        <div>
388                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
389                                <h3 class="text-xl font-bold font-display text-white">
389Sprite Sheet Creator</h3>
390                                <span class="status-pill live shrink-0">
391                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>Live
392                                </span>
393                            </div>
394                            <p class="text-[#A0AABF] text-sm mb-3">Professional technical artist utility to convert PNG image sequences into optimized Unity &amp; Unreal compatible sprite sheets with batch slicing and flipbook preview.</p>
395                        </div>
396                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
397                            <a href="https://techart-5a1b9.web.app/#/tools/sprite-sheet" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors shrink-0">
398                                <i class="fas fa-rocket text-cyan-400 mr-1"></i> Launch App ↗
399                            </a>
400                        </div>
401                    </div>
402                </div>
403
404                <!-- 9. AI Spine Animation Generator -->
405                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="tools technical-art">
406                    <div class="card-content-body">
407                        <div>
408                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
409                                <h3 class="text-xl font-bold font-display text-white">
409AI Spine Animator</h3>
410                                <span class="status-pill active shrink-0">
411                                    <span class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse"></span>Active
412                                </span>
413                            </div>
414                            <div class="mb-2">
415                                <span class="ai-badge"><i class="fas fa-robot text-[10px]"></i> AI Workflow</span>
416                            </div>
417                            <p class="text-[#A0AABF] text-sm mb-3">Architected a Python pipeline leveraging vision LLMs to detect skeletal joints on character textures, generating Spine 2D skeletal JSON hierarchies automatically.</p>
418                        </div>
419                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
420                            <a href="https://techart-5a1b9.web.app/#/tools/spineflow" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors shrink-0">
421                                <i class="fas fa-external-link-alt text-cyan-400 mr-1"></i> Open App ↗
422                            </a>
423                        </div>
424                    </div>
425                </div>
426
427                <!-- 10. Magic Spell Effects -->
428                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="vfx">
429                    <div class="card-content-body">
430                        <div>
431                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
432                                <h3 class="text-xl font-bold font-display text-white">Magic Spell Effects</h3>
433                                <span class="status-pill indev shrink-0">
434                                    <span class="w-1.5 h-1.5 rounded-full bg-purple-400"></span>Planned
435                                </span>
436                            </div>
437                            <p class="text-[#A0AABF] text-sm mb-3">Planned procedural spell system using Houdini and Unreal Niagara. Automates orbit field curves generation to animate complex runic shapes dynamically.</p>
438                        </div>
439                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
440                            <span class="text-gray-500 text-xs italic shrink-0">Pre-Production</span>
441                        </div>
442                    </div>
443                </div>
444
445                <!-- 11. LifeSync -->
446                <div class="project-card rounded-xl overflow-hidden shadow-lg bg-gray-800" data-category="tools">
447                    <div class="card-content-body">
448                        <div>
449                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
450                                <h3 class="text-xl font-bold font-display text-white">LifeSync</h3>
451                                <span class="status-pill live shrink-0">
452                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>Live
453                                </span>
454                            </div>
455                            <div class="mb-2">
456                                <span class="ai-badge"><i class="fas fa-robot text-[10px]"></i> AI Workflow</span>
457                            </div>
458                            <p class="text-[#A0AABF] text-sm mb-3">Responsive dashboard built in Node/JS and Firebase. Features a smart scheduler leveraging LLMs to prioritize items based on energy levels.</p>
459                        </div>
460                        <div class="flex flex-wrap items-center justify-between gap-2 mt-auto pt-4 border-t border-white/5">
461                            <a href="https://lifesync-730820303869.us-west1.run.app/" target="_blank" rel="noopener noreferrer" class="btn-primary px-4 py-2 rounded-lg font-semibold text-xs transition-colors shrink-0">
462                                <i class="fas fa-rocket text-cyan-400 mr-1"></i>
462 Launch App ↗
463                            </a>
464                        </div>
465                    </div>
466                </div>
467
468            </div>
469
470            <!-- Ecosystem & Distribution elsewhere -->
471            <section class="mt-28 pt-16 border-t border-white/5">
472                <div class="text-center max-w-2xl mx-auto mb-12">
473                    <div class="section-eyebrow">Ecosystem &amp; Distribution</div>
474                    <h2 class="text-2xl sm:text-3xl font-display font-bold text-white mb-3">Tools &amp; Resources Elsewhere</h2>
475                    <p class="text-sm text-[#A0AABF]">
476                        Open-source repositories, platform tools, asset packs, and published case studies.
477                    </p>
478                </div>
479
480                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
481                    <!-- ArtStation -->
482                    <a href="https://www.artstation.com/ahmedosama9886" target="_blank" rel="noopener noreferrer" class="glass-card p-6 flex flex-col justify-between group">
483                        <div>
484                            <div class="w-10 h-10 rounded-xl bg-[#E81E62]/10 border border-[#E81E62]/30 flex items-center justify-center text-[#E81E62] mb-4">
485                                <i class="fas fa-cube text-lg"></i>
486                            </div>
487                            <h3 class="font-display font-bold text-white text-lg mb-1 group-hover:text-[#E81E62] transition-colors">VFX &amp; Shaders</h3>
488                            <p class="text-xs text-[#A0AABF] leading-relaxed mb-4">ArtStation breakdowns, simulation studies, and downloadable material assets.</p>
489                        </div>
490                        <span class="font-mono text-xs text-[#E81E62] flex items-center gap-1">Visit ArtStation <i class="fas fa-arrow-up-right-from-square text-[10px]"></i></span>
491                    </a>
492
493                    <!-- GitHub -->
494                    <a href="https://github.com/ahmedossam" target="_blank" rel="noopener noreferrer" class="glass-card p-6 flex flex-col justify-between group">
495                        <div>
496                            <div class="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-white mb-4">
497                                <i class="fab fa-github text-lg"></i>
498                            </div>
499                            <h3 class="font-display font-bold text-white text-lg mb-1 group-hover:text-[#E81E62] transition-colors">Open Source Tools</h3>
500                            <p class="text-xs text-[#A0AABF] leading-relaxed mb-4">LAEEB Engine, Python Maya validators, and experimental graphics repositories.</p>
501                        </div>
502                        <span class="font-mono text-xs text-[#E81E62] flex items-center gap-1">Visit GitHub <i class="fas fa-arrow-up-right-from-square text-[10px]"></i></span>
503                    </a>
504
505                    <!-- TechArt OS Platform -->
506                    <a href="https://techart-5a1b9.web.app/" target="_blank" rel="noopener noreferrer" class="glass-card p-6 flex flex-col justify-between group">
507                        <div>
508                            <div class="w-10 h-10 rounded-xl bg-[#7028A0]/15 border border-[#7028A0]/30 flex items-center justify-center text-[#D8B4FE] mb-4">
509                                <i class="fas fa-tools text-lg"></i>
510                            </div>
511                            <h3 class="font-display font-bold text-white text-lg mb-1 group-hover:text-[#E81E62] transition-colors">TechArt OS Suite</h3>
512                            <p class="text-xs text-[#A0AABF] leading-relaxed mb-4">Interactive web utilities including Sprite Sheet Optimizer and LAEEB tools.</p>
513                        </div>
514                        <span class="font-mono text-xs text-[#E81E62] flex items-center gap-1">Launch Suite <i class="fas fa-arrow-up-right-from-square text-[10px]"></i></span>
515                    </a>
516
517                    <!-- CV -->
518                    <a href="cv.html" class="glass-card p-6 flex flex-col justify-between group">
519                        <div>
520                            <div class="w-10 h-10 rounded-xl bg-[#081030] border border-white/10 flex items-center justify-center text-[#E0E5F0] mb-4">
521                                <i class="fas fa-file-invoice text-lg text-[#E81E62]"></i>
522                            </div>
523                            <h3 class="font-display font-bold text-white text-lg mb-1 group-hover:text-[#E81E62] transition-colors">Curriculum Vitae</h3>
524                            <p class="text-xs text-[#A0AABF] leading-relaxed mb-4">Structured production experience, shipped titles, education, and technical toolkit.</p>
525                        </div>
526                        <span class="font-mono text-xs text-[#E81E62] flex items-center gap-1">Open CV <i class="fas fa-arrow-up-right-from-square text-[10px]"></i></span>
527                    </a>
528                </div>
529            </section>
530        </div>
531    </section>
532
533    <!-- Footer -->
534    <div id="main-footer"></div>
535
536    <!-- Scripts -->
537    
537<script src="js/nav.js"></script>
537
538    
538<script src="js/script.js"></script>
538
539</body>
540</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.