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 & Game Designer</title> 8 <meta name="description" 9 content="Technical Art & 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 & 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 & Pipeline</button> 115 <button class="filter-tab" data-filter="graphics">Graphics & 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 & 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 • 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&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 & 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&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 & 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 & Distribution</div> 474 <h2 class="text-2xl sm:text-3xl font-display font-bold text-white mb-3">Tools & 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 & 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.