arch-jos/embedded-wizardry-portal

1 2// Project details data3const projects = {4    hapticGlove: {5        title: "Affordable Haptic Feedback Glove for Stroke Rehabilitation",6        content: `7            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">8                <div>9                    <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Project Details</h4>10                    <ul class="space-y-3">11                        <li class="flex items-start gap-3">12                            <i data-feather="user" class="text-primary-500 mt-1"></i>13                            <span><strong>Role:</strong> Hardware Architecture Designer & Embedded Systems Developer</span>14                        </li>15                        <li class="flex items-start gap-3">16                            <i data-feather="calendar" class="text-primary-500 mt-1"></i>17                            <span><strong>Status:</strong> Development & Competition Submission (TRON Programming Contest 2025)</span>18                        </li>19                        <li class="flex items-start gap-3">20                            <i data-feather="github" class="text-primary-500 mt-1"></i>21                            <span><strong>Repository:</strong> <a href="https://github.com/Jostin-arch/Affordable-Haptic-Glove" target="_blank" rel="noopener noreferrer" class="text-primary-500 hover:underline">github.com/Jostin-arch/Affordable-Haptic-Glove</a></span>22                        </li>23                        <li class="flex items-start gap-3">24                            <i data-feather="cpu" class="text-primary-500 mt-1"></i>25                            <span><strong>Microcontroller:</strong> ESP32 with dual-core architecture</span>26                        </li>27                        <li class="flex items-start gap-3">28                            <i data-feather="wifi" class="text-primary-500 mt-1"></i>29                            <span><strong>Communication:</strong> WebSocket over Wi-Fi</span>30                        </li>31                    </ul>32                </div>33                <div class="bg-primary-500/10 p-4 rounded-lg">34                    <img src="http://static.photos/medical/640x360/42" alt="Haptic Feedback Glove" class="w-full h-auto rounded-lg">35                </div>36            </div>37 38            <h4 class="text-xl font-semibold text-gray-800 dark:text-white mt-6 mb-4">Technical Implementation</h4>39            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">40                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">41                    <h5 class="font-semibold text-gray-800 dark:text-white mb-2">Hardware Design</h5>42                    <ul class="space-y-2">43                        <li class="flex items-start gap-2">44                            <i data-feather="check" class="text-primary-500 mt-1"></i>45                            <span>ESP32 microcontroller with dual-core processing</span>46                        </li>47                        <li class="flex items-start gap-2">48                            <i data-feather="check" class="text-primary-500 mt-1"></i>49                            <span>Flex sensors with custom signal conditioning</span>50                        </li>51                        <li class="flex items-start gap-2">52                            <i data-feather="check" class="text-primary-500 mt-1"></i>53                            <span>Vibration motors for haptic feedback</span>54                        </li>55                    </ul>56                </div>57                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">58                    <h5 class="font-semibold text-gray-800 dark:text-white mb-2">Software Features</h5>59                    <ul class="space-y-2">60                        <li class="flex items-start gap-2">61                            <i data-feather="check" class="text-primary-500 mt-1"></i>62                            <span>RTOS-based real-time processing</span>63                        </li>64                        <li class="flex items-start gap-2">65                            <i data-feather="check" class="text-primary-500 mt-1"></i>66                            <span>WebSocket communication protocol</span>67                        </li>68                        <li class="flex items-start gap-2">69                            <i data-feather="check" class="text-primary-500 mt-1"></i>70                            <span>Customizable rehabilitation exercises</span>71                        </li>72                    </ul>73                </div>74            </div>75        `76    },77    cobLed: {78        title: "COB LED Solar Spectrum Simulation",79        content: `80            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">81                <div>82                    <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Project Details</h4>83                    <ul class="space-y-3">84                        <li class="flex items-start gap-3">85                            <i data-feather="user" class="text-primary-500 mt-1"></i>86                            <span><strong>Role:</strong> Algorithm Developer & Simulation Engineer</span>87                        </li>88                        <li class="flex items-start gap-3">89                            <i data-feather="calendar" class="text-primary-500 mt-1"></i>90                            <span><strong>Status:</strong> Completed research project</span>91                        </li>92                        <li class="flex items-start gap-3">93                            <i data-feather="cpu" class="text-primary-500 mt-1"></i>94                            <span><strong>Technology:</strong> Python, NumPy, Matplotlib</span>95                        </li>96                        <li class="flex items-start gap-3">97                            <i data-feather="zap" class="text-primary-500 mt-1"></i>98                            <span><strong>Application:</strong> Precision agriculture lighting</span>99                        </li>100                    </ul>101                </div>102                <div class="bg-primary-500/10 p-4 rounded-lg">103                    <img src="http://static.photos/science/640x360/42" alt="COB LED Solar Spectrum" class="w-full h-auto rounded-lg">104                </div>105            </div>106 107            <h4 class="text-xl font-semibold text-gray-800 dark:text-white mt-6 mb-4">Technical Implementation</h4>108            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">109                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">110                    <h5 class="font-semibold text-gray-800 dark:text-white mb-2">Spectral Analysis</h5>111                    <ul class="space-y-2">112                        <li class="flex items-start gap-2">113                            <i data-feather="check" class="text-primary-500 mt-1"></i>114                            <span>Solar spectrum decomposition and analysis</span>115                        </li>116                        <li class="flex items-start gap-2">117                            <i data-feather="check" class="text-primary-500 mt-1"></i>118                            <span>LED spectral characteristics modeling</span>119                        </li>120                        <li class="flex items-start gap-2">121                            <i data-feather="check" class="text-primary-500 mt-1"></i>122                            <span>Optimization for plant growth wavelengths</span>123                        </li>124                    </ul>125                </div>126                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">127                    <h5 class="font-semibold text-gray-800 dark:text-white mb-2">Algorithm Features</h5>128                    <ul class="space-y-2">129                        <li class="flex items-start gap-2">130                            <i data-feather="check" class="text-primary-500 mt-1"></i>131                            <span>Least-squares optimization for LED combinations</span>132                        </li>133                        <li class="flex items-start gap-2">134                            <i data-feather="check" class="text-primary-500 mt-1"></i>135                            <span>Visual spectrum comparison tools</span>136                        </li>137                        <li class="flex items-start gap-2">138                            <i data-feather="check" class="text-primary-500 mt-1"></i>139                            <span>Cost-performance tradeoff analysis</span>140                        </li>141                    </ul>142                </div>143            </div>144        `145    },146    renesasSystem: {147        title: "Renesas EK-RA8D1 Embedded System",148        content: `149            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">150                <div>151                    <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Project Details</h4>152                    <ul class="space-y-3">153                        <li class="flex items-start gap-3">154                            <i data-feather="user" class="text-primary-500 mt-1"></i>155                            <span><strong>Role:</strong> Embedded Systems Developer</span>156                        </li>157                        <li class="flex items-start gap-3">158                            <i data-feather="calendar" class="text-primary-500 mt-1"></i>159                            <span><strong>Status:</strong> Ongoing development</span>160                        </li>161                        <li class="flex items-start gap-3">162                            <i data-feather="cpu" class="text-primary-500 mt-1"></i>163                            <span><strong>Microcontroller:</strong> Renesas EK-RA8D1 (ARM Cortex-M4)</span>164                        </li>165                        <li class="flex items-start gap-3">166                            <i data-feather="zap" class="text-primary-500 mt-1"></i>167                            <span><strong>RTOS:</strong> T-Kernel with optimized task scheduling</span>168                        </li>169                    </ul>170                </div>171                <div class="bg-primary-500/10 p-4 rounded-lg">172                    <img src="http://static.photos/technology/640x360/43" alt="Renesas EK-RA8D1" class="w-full h-auto rounded-lg">173                </div>174            </div>175 176            <h4 class="text-xl font-semibold text-gray-800 dark:text-white mt-6 mb-4">Technical Implementation</h4>177            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">178                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">179                    <h5 class="font-semibold text-gray-800 dark:text-white mb-2">RTOS Features</h5>180                    <ul class="space-y-2">181                        <li class="flex items-start gap-2">182                            <i data-feather="check" class="text-primary-500 mt-1"></i>183                            <span>Priority-based task scheduling</span>184                        </li>185                        <li class="flex items-start gap-2">186                            <i data-feather="check" class="text-primary-500 mt-1"></i>187                            <span>Inter-task communication mechanisms</span>188                        </li>189                        <li class="flex items-start gap-2">190                            <i data-feather="check" class="text-primary-500 mt-1"></i>191                            <span>Resource management</span>192                        </li>193                    </ul>194                </div>195                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">196                    <h5 class="font-semibold text-gray-800 dark:text-white mb-2">Hardware Integration</h5>197                    <ul class="space-y-2">198                        <li class="flex items-start gap-2">199                            <i data-feather="check" class="text-primary-500 mt-1"></i>200                            <span>Sensor interfacing with minimal latency</span>201                        </li>202                        <li class="flex items-start gap-2">203                            <i data-feather="check" class="text-primary-500 mt-1"></i>204                            <span>Wi-Fi/Bluetooth configuration</span>205                        </li>206                        <li class="flex items-start gap-2">207                            <i data-feather="check" class="text-primary-500 mt-1"></i>208                            <span>Power management</span>209                        </li>210                    </ul>211                </div>212            </div>213        `214    }215};216 217function showProjectDetails(projectId) {218    const modal = document.getElementById('projectModal');219    const project = projects[projectId];220    221    document.getElementById('modalTitle').textContent = project.title;222    document.getElementById('modalContent').innerHTML = project.content;223    224    modal.classList.remove('hidden');225    feather.replace(); // Refresh icons in modal226}227 228function closeModal() {229    document.getElementById('projectModal').classList.add('hidden');230}231 232// Initialize dark mode toggle233document.addEventListener('DOMContentLoaded', function() {234    const darkModeToggle = document.getElementById('darkModeToggle');235    236    // Check for saved user preference or OS preference237    if (localStorage.getItem('darkMode') === 'true' || 238        (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {239        document.documentElement.classList.add('dark');240        darkModeToggle.checked = true;241    }242 243    // Listen for toggle changes244    darkModeToggle.addEventListener('change', function() {245        if (this.checked) {246            document.documentElement.classList.add('dark');247            localStorage.setItem('darkMode', 'true');248        } else {249            document.documentElement.classList.remove('dark');250            localStorage.setItem('darkMode', 'false');251        }252    });253});254