tech stack logos appear empty - Follow Up Deployment

index.html

@@ -51,31 +51,54 @@
     </svg>
   </div>
 
-  <div class="relative z-10 space-y-6 max-w-3xl">
-    <h1 class="text-5xl md:text-7xl font-bold tracking-tight">
-      Maximus Friedrich <span class="text-cyan-400">Baluyot</span>
+  <div class="relative z-10 space-y-8 max-w-4xl">
+    <h1 class="text-6xl md:text-8xl font-bold tracking-tighter">
+      Maximus <span class="text-cyan-400">Baluyot</span>
     </h1>
-    <p id="tagline" class="typewriter text-xl md:text-2xl text-slate-300"></p>
-    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+    <p id="tagline" class="typewriter text-2xl md:text-3xl text-slate-300 font-light"></p>
+    <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
       <a href="https://raw.githubusercontent.com/keshigami/portfolio/main/Resume_MaximusBaluyot.pdf"
-         class="glow bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-semibold px-6 py-3 rounded transition">
+         class="glow bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-semibold px-8 py-4 rounded-lg transition">
          Download Résumé (PDF)
       </a>
-      <a href="https://linkedin.com/in/maximusbaluyot"
-         class="border border-cyan-500 text-cyan-400 hover:bg-cyan-500 hover:text-slate-900 px-6 py-3 rounded transition">
-         Connect on LinkedIn
+      <a href="mailto:max@baluyot.dev"
+         class="border-2 border-cyan-500 text-cyan-400 hover:bg-cyan-500 hover:text-slate-900 px-8 py-4 rounded-lg transition font-semibold">
+         Let's Connect
+      </a>
+    </div>
+    <div class="flex justify-center gap-6 pt-4">
+      <a href="https://linkedin.com/in/maximusbaluyot" class="text-cyan-400 hover:text-white transition">
+        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
+      </a>
+      <a href="https://github.com/keshigami" class="text-cyan-400 hover:text-white transition">
+        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.931.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+      </a>
+      <a href="https://calendly.com/maximus-baluyot/15min" class="text-cyan-400 hover:text-white transition">
+        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M3 3h18v18H3V3zm16 16V5H5v14h14zM7 7h2v2H7V7zm4 0h2v2h-2V7zm4 0h2v2h-2V7zm-8 4h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm-8 4h2v2H7v-2zm4 0h2v2h-2v-2z"/></svg>
       </a>
     </div>
   </div>
 </section>
 
 <!-- VALUE PROP -->
-<section class="py-20 px-4 max-w-5xl mx-auto">
-  <ul class="space-y-4 text-lg list-disc list-inside text-slate-300">
-    <li>Tripled revenue via AI-orchestrated supply-chain (<strong>USD 28 M P&L</strong>).</li>
-    <li>Cut inventory <strong>12 %</strong> and OTIF <strong>+9 %</strong> with Python/TensorFlow forecasting.</li>
-    <li>Achieved <strong>99.9 % uptime</strong> across 200-seat AV/IT deployments (NetSuite, AWS).</li>
-  </ul>
+<section class="py-20 px-4 max-w-4xl mx-auto">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-12">
+    <div class="bg-slate-900 p-6 rounded-xl">
+      <div class="text-4xl font-bold text-cyan-400 mb-2">$45 M+</div>
+      <div class="text-sm text-slate-300">Projects Delivered</div>
+    </div>
+    <div class="bg-slate-900 p-6 rounded-xl">
+      <div class="text-4xl font-bold text-cyan-400 mb-2">3×</div>
+      <div class="text-sm text-slate-300">Revenue Growth</div>
+    </div>
+    <div class="bg-slate-900 p-6 rounded-xl">
+      <div class="text-4xl font-bold text-cyan-400 mb-2">99.9%</div>
+      <div class="text-sm text-slate-300">Uptime</div>
+    </div>
+  </div>
+  <p class="text-lg text-slate-300 text-center max-w-3xl mx-auto">
+    "I fuse AI forecasting, cloud ERP, and AV/IT architecture to turn global supply-chains into profit engines. My 14 years of experience spans from building CNN medical imaging models to deploying 200-seat unified communications systems - always with a focus on measurable business impact."
+  </p>
 </section>
 
 <!-- METRICS STRIP -->
@@ -108,10 +131,10 @@
     <h3 class="text-xl font-semibold mb-4 text-cyan-400">AI / Machine Learning & Data</h3>
     <div class="grid md:grid-cols-3 gap-8">
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/karnox.gif" alt="Karnox Dashboard" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Demand Forecasting Dashboard" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">Karnox AI Demand-Forecast Engine</h3>
-          <p class="text-slate-400 text-sm mb-4">Python/TensorFlow model that cut inventory 12 % and lifted OTIF 9 %.</p>
+          <p class="text-slate-400 text-sm mb-4">Python/TensorFlow model that cut inventory 12% and lifted OTIF 9%.</p>
           <ul class="text-sm text-cyan-400 space-y-1">
             <li>Python • TensorFlow • AWS Lambda</li>
             <li>NetSuite REST API</li>
@@ -119,7 +142,7 @@
         </div>
       </div>
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/ai-hr.jpg" alt="AI HR Assistant" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Chatbot Interface" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">AI-Powered HR Assistant</h3>
           <p class="text-slate-400 text-sm mb-4">Extractive-QA chatbot built with Gradio + GPT for employee policy queries.</p>
@@ -130,7 +153,7 @@
         </div>
       </div>
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/loan-prediction.jpg" alt="Loan Prediction Model" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Financial Data Analysis" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">Loan Default Prediction</h3>
           <p class="text-slate-400 text-sm mb-4">Deep-learning binary classifier using Keras on historical lending data.</p>
@@ -140,6 +163,39 @@
           </ul>
         </div>
       </div>
+      <div class="bg-slate-900 rounded-xl overflow-hidden">
+        <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Virtual PM Consultant" class="w-full h-48 object-cover">
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-2">Virtual PM Consultant</h3>
+          <p class="text-slate-400 text-sm mb-4">GPT-based project-planning assistant for internal teams.</p>
+          <ul class="text-sm text-cyan-400 space-y-1">
+            <li>ChatGPT API • Python</li>
+            <li>Project planning automation</li>
+          </ul>
+        </div>
+      </div>
+      <div class="bg-slate-900 rounded-xl overflow-hidden">
+        <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Diabetic Retinopathy Detection" class="w-full h-48 object-cover">
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-2">Diabetic Retinopathy Detection</h3>
+          <p class="text-slate-400 text-sm mb-4">CNN deployed on TensorFlow for medical-image classification.</p>
+          <ul class="text-sm text-cyan-400 space-y-1">
+            <li>TensorFlow • CNN</li>
+            <li>Medical imaging</li>
+          </ul>
+        </div>
+      </div>
+      <div class="bg-slate-900 rounded-xl overflow-hidden">
+        <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Restaurant Sales Forecasting" class="w-full h-48 object-cover">
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-2">Restaurant Sales Forecasting</h3>
+          <p class="text-slate-400 text-sm mb-4">Time-series demand-prediction model for F&B chain.</p>
+          <ul class="text-sm text-cyan-400 space-y-1">
+            <li>Python • Time-series</li>
+            <li>Demand forecasting</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -147,7 +203,7 @@
     <h3 class="text-xl font-semibold mb-4 text-cyan-400">IT / AV Infrastructure</h3>
     <div class="grid md:grid-cols-3 gap-8">
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/uhc-sla.png" alt="UHC SLA Chart" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Network Operations Center" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">UnitedHealth AV/VC Upgrade</h3>
           <p class="text-slate-400 text-sm mb-4">200-seat contact-center audiovisual and unified-communications deployment.</p>
@@ -158,7 +214,7 @@
         </div>
       </div>
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/erp-migration.jpg" alt="ERP Migration" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="ERP System Dashboard" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">Karnox Cloud ERP & MES Migration</h3>
           <p class="text-slate-400 text-sm mb-4">End-to-end NetSuite + AWS factory system rollout (99.9 % uptime).</p>
@@ -169,7 +225,7 @@
         </div>
       </div>
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/blitzmax.gif" alt="BlitzMax CLI" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="BlitzMax CLI" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">BlitzMax OSS Module Manager</h3>
           <p class="text-slate-400 text-sm mb-4">Lightning-fast CLI & GitHub Action (26 ★).</p>
@@ -183,7 +239,7 @@
     <h3 class="text-xl font-semibold mb-4 text-cyan-400">Logistics & Supply-Chain</h3>
     <div class="grid md:grid-cols-2 gap-8">
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/market-entry.jpg" alt="Market Entry" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Global Logistics Network" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">North-American Market Entry</h3>
           <p class="text-slate-400 text-sm mb-4">Led 3× revenue expansion via new DC in Los Angeles + freight optimization.</p>
@@ -194,7 +250,7 @@
         </div>
       </div>
       <div class="bg-slate-900 rounded-xl overflow-hidden">
-        <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/trade-compliance.jpg" alt="Trade Compliance" class="w-full h-48 object-cover">
+        <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Customs Documentation" class="w-full h-48 object-cover">
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-2">Global Trade-Compliance Program</h3>
           <p class="text-slate-400 text-sm mb-4">Built customs-clearance playbook that achieved 100 % accuracy across 42 countries.</p>
@@ -206,59 +262,54 @@
       </div>
     </div>
   </div>
-    <!-- Karnox -->
-    <div class="bg-slate-900 rounded-xl overflow-hidden">
-      <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/karnox.gif" alt="Karnox Dashboard" class="w-full h-48 object-cover">
-      <div class="p-6">
-        <h3 class="text-xl font-semibold mb-2">Karnox Global Supply-Chain AI</h3>
-        <p class="text-slate-400 text-sm mb-4">Real-time demand forecasting dashboard. Reduced stock-outs by 18 %.</p>
-        <ul class="text-sm text-cyan-400 space-y-1">
-          <li>Python • TensorFlow • AWS Lambda</li>
-          <li>NetSuite REST API</li>
-        </ul>
-      </div>
-    </div>
-
-    <!-- UnitedHealth -->
-    <div class="bg-slate-900 rounded-xl overflow-hidden">
-      <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/uhc-sla.png" alt="UHC SLA Chart" class="w-full h-48 object-cover">
-      <div class="p-6">
-        <h3 class="text-xl font-semibold mb-2">UnitedHealth AV/IT Upgrade</h3>
-        <p class="text-slate-400 text-sm mb-4">Before/after SLA improvement chart post AV-over-IP rollout.</p>
-        <ul class="text-sm text-cyan-400 space-y-1">
-          <li>AV-over-IP • Crestron • Q-SYS</li>
-          <li>99.9 % uptime achieved</li>
-        </ul>
-      </div>
-    </div>
-
-    <!-- BlitzMax -->
-    <div class="bg-slate-900 rounded-xl overflow-hidden">
-      <img src="https://raw.githubusercontent.com/keshigami/portfolio/main/blitzmax.gif" alt="BlitzMax CLI" class="w-full h-48 object-cover">
-      <div class="p-6">
-        <h3 class="text-xl font-semibold mb-2">BlitzMax OSS Module Manager</h3>
-        <p class="text-slate-400 text-sm mb-4">Lightning-fast CLI & GitHub Action (26 ★).</p>
-        <a href="https://github.com/keshigami/blitzmax-modman" class="text-sm text-cyan-400 hover:underline">GitHub →</a>
-      </div>
-    </div>
   </div>
 </section>
 
 <!-- TECH STACK -->
-<section class="py-20 px-4 max-w-4xl mx-auto text-center">
-  <h2 class="text-3xl font-bold mb-10">Tech Stack</h2>
-  <div class="flex flex-wrap justify-center gap-4 text-sm">
-    <span class="bg-slate-800 px-4 py-2 rounded-full">Python</span>
-    <span class="bg-slate-800 px-4 py-2 rounded-full">TensorFlow</span>
-    <span class="bg-slate-800 px-4 py-2 rounded-full">AWS</span>
-    <span class="bg-slate-800 px-4 py-2 rounded-full">NetSuite</span>
-    <span class="bg-slate-800 px-4 py-2 rounded-full">ITIL</span>
-    <span class="bg-slate-800 px-4 py-2 rounded-full">Jira</span>
-    <span class="bg-slate-800 px-4 py-2 rounded-full">ServiceNow</span>
-    <span class="bg-slate-800 px-4 py-2 rounded-full">AV-over-IP</span>
+<section class="py-20 px-4 max-w-5xl mx-auto">
+  <h2 class="text-3xl font-bold mb-12 text-center">Tech Stack</h2>
+  <div class="grid grid-cols-2 sm:grid-cols-4 gap-6">
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">Python</span>
+    </div>
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tensorflow/tensorflow-original.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">TensorFlow</span>
+    </div>
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/amazonwebservices/amazonwebservices-original-wordmark.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">AWS</span>
+    </div>
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/netsuite/netsuite-original.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">NetSuite</span>
+    </div>
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/itil/itil-original.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">ITIL</span>
+    </div>
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jira/jira-original.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">Jira</span>
+    </div>
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/servicenow/servicenow-original.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">ServiceNow</span>
+    </div>
+    <div class="tech-icon group">
+      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cisco/cisco-original.svg" class="w-16 h-16 mx-auto group-hover:scale-110 transition">
+      <span class="block text-center mt-2 group-hover:text-cyan-400">Cisco UC</span>
+    </div>
   </div>
 </section>
 
+<style>
+  .tech-icon {
+    @apply bg-slate-900 p-6 rounded-xl hover:bg-slate-800 transition cursor-pointer;
+  }
+</style>
+
 <!-- CERTS & TALKS -->
 <section class="py-20 px-4 max-w-5xl mx-auto">
   <h2 class="text-3xl font-bold mb-10 text-center">Certifications & Talks</h2>