fix: sanitize all paths to relative for local/prod compatibility and fix invisible images

TechStack Global · TechStack Global · commit 31cddf4ada1e · 2026-02-26T22:37:18.000+05:00
diff --git a/index.html b/index.html
@@ -27,14 +27,14 @@
     <!-- Google Fonts: Inter for that premium tech feel -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
         rel="stylesheet">
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="style.css">
 
     <!-- FontAwesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16.png">
-    <link rel="apple-touch-icon" sizes="192x192" href="/assets/icons/techstack-logo-192.png">
-    <link rel="shortcut icon" href="/assets/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16.png">
+    <link rel="apple-touch-icon" sizes="192x192" href="assets/icons/techstack-logo-192.png">
+    <link rel="shortcut icon" href="assets/icons/favicon.ico">
 </head>
 
 <body class="dark-theme">
@@ -46,15 +46,16 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo">
-                <a href="/index.html">
+                <a href="index.html">
                     TechStack<span class="accent">Global</span>
                 </a>
             </div>
             <ul class="nav-links">
-                <li><a href="/index.html" class="active">Home</a></li>
-                <li><a href="/blog.html">Software Reviews</a></li>
-                <li><a href="/about.html">About</a></li>
-                <li><a href="/contact.html">Contact</a></li>
+                <li><a href="index.html" class="active">Home</a></li>
+                <li><a href="amazon-stack.html">Amazon Stack</a></li>
+                <li><a href="blog.html">Software Reviews</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
     </header>
@@ -93,7 +94,7 @@ <h2>Explore the Stack</h2>
                 <p>Browse elite tools by category.</p>
             </div>
             <div class="category-grid">
-                <a href="/amazon-stack.html" class="cat-card featured-cat">
+                <a href="amazon-stack.html" class="cat-card featured-cat">
                     <i class="fa-brands fa-amazon"></i>
                     <h3>Amazon Reviews</h3>
                     <p>Standardized hardware benchmarks</p>
@@ -125,7 +126,7 @@ <h2 style="font-size: 2.5rem; margin-top: 1rem;">Top Tools This Month</h2>
             <div class="featured-spotlight glass-panel"
                 style="display: flex; gap: 3rem; align-items: center; padding: 3rem; border-radius: 20px; border: 1px solid rgba(0,255,157,0.1); margin-bottom: 4rem;">
                 <div style="flex: 1;">
-                    <img src="/assets/images/macbook_hero.jpg" alt="Apple MacBook Pro M4 Pro" loading="lazy"
+                    <img src="assets/images/macbook_hero.jpg" alt="Apple MacBook Pro M4 Pro" loading="lazy"
                         style="width: 100%; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);">
                 </div>
                 <div style="flex: 1.2;">
@@ -158,7 +159,7 @@ <h3 style="font-size: 2.2rem; margin: 1rem 0;">Apple MacBook Pro (M4 Pro)</h3>
             <div class="tool-grid"
                 style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 4rem;">
                 <article class="tool-card glass-panel" style="padding: 1.5rem; border-radius: 12px;">
-                    <img src="/assets/images/macbook_hero.jpg" alt="Apple MacBook Pro M4 Pro" loading="lazy"
+                    <img src="assets/images/macbook_hero.jpg" alt="Apple MacBook Pro M4 Pro" loading="lazy"
                         style="width:100%; height:160px; object-fit:contain; background:white; border-radius:8px; margin-bottom: 1.2rem;">
                     <h3 style="font-size: 1.1rem;">Apple MacBook Pro M4 Pro</h3>
                     <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem;">The definitive
@@ -170,7 +171,7 @@ <h3 style="font-size: 1.1rem;">Apple MacBook Pro M4 Pro</h3>
                 </article>
 
                 <article class="tool-card glass-panel" style="padding: 1.5rem; border-radius: 12px;">
-                    <img src="https://m.media-amazon.com/images/I/71Y87t4v19L._AC_SL1500_.jpg" alt="Dell XPS 15"
+                    <img src="https://m.media-amazon.com/images/I/61Ks9X44eVL._AC_SL1181_.jpg" alt="Dell XPS 15"
                         loading="lazy"
                         style="width:100%; height:160px; object-fit:contain; background:white; border-radius:8px; margin-bottom: 1.2rem;">
                     <h3 style="font-size: 1.1rem;">Dell XPS 15 (9530)</h3>
@@ -183,7 +184,7 @@ <h3 style="font-size: 1.1rem;">Dell XPS 15 (9530)</h3>
                 </article>
 
                 <article class="tool-card glass-panel" style="padding: 1.5rem; border-radius: 12px;">
-                    <img src="https://m.media-amazon.com/images/I/61NlUoQ7k6L._AC_SL1500_.jpg"
+                    <img src="https://m.media-amazon.com/images/I/61LMopCIyTL._AC_SL1200_.jpg"
                         alt="Surface Laptop Studio 2" loading="lazy"
                         style="width:100%; height:160px; object-fit:contain; background:white; border-radius:8px; margin-bottom: 1.2rem;">
                     <h3 style="font-size: 1.1rem;">Surface Laptop Studio 2</h3>
@@ -264,7 +265,7 @@ <h3 style="text-align: center; margin-bottom: 3rem;">Trusted by Scaling Founders
                 <!-- Mid-Page Lead Magnet -->
                 <div class="lead-magnet glass-panel"
                     style="padding: 3rem; margin: 4rem 0; border: 1px solid var(--accent); position: relative; display: flex; align-items: center; gap: 3rem; flex-wrap: wrap;">
-                    <img src="/assets/images/startup_guide_cover.png" alt="Startup Tools PDF Cover"
+                    <img src="assets/images/startup_guide_cover.png" alt="Startup Tools PDF Cover"
                         style="width: 240px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
                     <div style="max-width: 600px;">
                         <h2 style="color: var(--accent); margin-bottom: 1rem;">Get our Startup Tools PDF</h2>
@@ -344,24 +345,24 @@ <h3>TechStack<span class="accent">Global</span></h3>
             <div class="footer-links">
                 <h4>Legal</h4>
                 <ul>
-                    <li><a href="/affiliate-disclosure.html">Affiliate Disclosure</a></li>
-                    <li><a href="/privacy-policy.html">Privacy Policy</a></li>
-                    <li><a href="/terms-of-service.html">Terms of Service</a></li>
+                    <li><a href="affiliate-disclosure.html">Affiliate Disclosure</a></li>
+                    <li><a href="privacy-policy.html">Privacy Policy</a></li>
+                    <li><a href="terms-of-service.html">Terms of Service</a></li>
                 </ul>
             </div>
             <div class="footer-links">
                 <h4>Company</h4>
                 <ul>
-                    <li><a href="/about.html">About Us</a></li>
-                    <li><a href="/contact.html">Contact</a></li>
+                    <li><a href="about.html">About Us</a></li>
+                    <li><a href="contact.html">Contact</a></li>
                 </ul>
             </div>
         </div>
         <div class="container footer-bottom">
             <p>&copy; <span id="year">2026</span> TechStack Global. All rights reserved.</p>
         </div>
     </footer>
-    <script src="/script.js"></script>
+    <script src="script.js"></script>
 </body>
 
 </html>
