Add project evolution timeline to landing page

- Visual timeline showing full trajectory from prototype to present
- LED prototype → Haptics → Press → Grant → Institutional vendor → Open source
- Links to Hackaday, Mitacs, and York U integrated into timeline
- Shows progression from grassroots maker project to institutional partnership

Makes the compelling story visible on the landing page.

Author: MissCrispenCakes

index.html

@@ -201,6 +201,70 @@ <h4>⚙️ PCB Fabrication</h4>
             <h2>💡 Use Cases</h2>
             <p>Perfect for spatial audio feedback, VR/AR navigation, interactive installations, accessibility applications, research projects, gaming, and telepresence.</p>
         </div>
+
+        <div class="links">
+            <h2>🚀 Project Evolution</h2>
+            <div style="max-width: 800px; margin: 2rem auto;">
+                <div style="position: relative; padding-left: 3rem;">
+                    <!-- Timeline dots and line -->
+                    <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background: #667eea;"></div>
+
+                    <!-- Timeline item 1 -->
+                    <div style="position: relative; margin-bottom: 2rem;">
+                        <div style="position: absolute; left: -2.5rem; width: 12px; height: 12px; border-radius: 50%; background: #667eea; border: 3px solid white;"></div>
+                        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 6px;">
+                            <h4 style="color: #667eea; margin-bottom: 0.5rem;">🎨 Audio-Reactive LED Prototype</h4>
+                            <p style="margin: 0; color: #666;">Started as wearable LEDs that danced to sound. Claps, music, and environmental audio created spatial light patterns around the body.</p>
+                        </div>
+                    </div>
+
+                    <!-- Timeline item 2 -->
+                    <div style="position: relative; margin-bottom: 2rem;">
+                        <div style="position: absolute; left: -2.5rem; width: 12px; height: 12px; border-radius: 50%; background: #667eea; border: 3px solid white;"></div>
+                        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 6px;">
+                            <h4 style="color: #667eea; margin-bottom: 0.5rem;">🎮 Evolution to Haptics</h4>
+                            <p style="margin: 0; color: #666;">Same patterns, different sensory modality. Audio-reactive architecture translated from light to touch, creating wearable haptic feedback systems.</p>
+                        </div>
+                    </div>
+
+                    <!-- Timeline item 3 -->
+                    <div style="position: relative; margin-bottom: 2rem;">
+                        <div style="position: absolute; left: -2.5rem; width: 12px; height: 12px; border-radius: 50%; background: #667eea; border: 3px solid white;"></div>
+                        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 6px;">
+                            <h4 style="color: #667eea; margin-bottom: 0.5rem;">📰 Press Recognition (2020)</h4>
+                            <p style="margin: 0; color: #666;"><a href="https://hackaday.com/2020/02/12/in-pursuit-of-haptics-for-a-better-vr-experience/" target="_blank" style="color: #667eea;">Featured on Hackaday</a> as part of pursuing better VR haptic experiences.</p>
+                        </div>
+                    </div>
+
+                    <!-- Timeline item 4 -->
+                    <div style="position: relative; margin-bottom: 2rem;">
+                        <div style="position: absolute; left: -2.5rem; width: 12px; height: 12px; border-radius: 50%; background: #667eea; border: 3px solid white;"></div>
+                        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 6px;">
+                            <h4 style="color: #667eea; margin-bottom: 0.5rem;">🔬 Research Funding</h4>
+                            <p style="margin: 0; color: #666;"><a href="https://www.mitacs.ca/our-projects/washable-wearables-for-affordable-and-aesthetic-augmentation-of-visuo-tactile-sensory-perception-enhancement-in-mixed-reality/" target="_blank" style="color: #667eea;">Mitacs grant</a> for washable wearables research in mixed reality applications.</p>
+                        </div>
+                    </div>
+
+                    <!-- Timeline item 5 -->
+                    <div style="position: relative; margin-bottom: 2rem;">
+                        <div style="position: absolute; left: -2.5rem; width: 12px; height: 12px; border-radius: 50%; background: #667eea; border: 3px solid white;"></div>
+                        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 6px;">
+                            <h4 style="color: #667eea; margin-bottom: 0.5rem;">🎓 Institutional Partnership</h4>
+                            <p style="margin: 0; color: #666;">KDF Entertainment becomes <a href="https://www.yorku.ca/procurement/oba/kdf-entertainment/" target="_blank" style="color: #667eea;">official York University procurement vendor</a>, enabling direct academic collaboration.</p>
+                        </div>
+                    </div>
+
+                    <!-- Timeline item 6 -->
+                    <div style="position: relative;">
+                        <div style="position: absolute; left: -2.5rem; width: 12px; height: 12px; border-radius: 50%; background: #667eea; border: 3px solid white;"></div>
+                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1.5rem; border-radius: 6px; color: white;">
+                            <h4 style="color: white; margin-bottom: 0.5rem;">🌟 Open Source Today</h4>
+                            <p style="margin: 0;">Complete hardware designs, firmware, and software released under permissive licenses. Two production-ready implementations available for makers, researchers, and artists worldwide.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <footer>