Page Flow
2-Page Navigation
Arduino section-এ দুটো page — listing আর viewer।
Page 01
Arduino Listing
arduino-projects.html
Page 02
Project Viewer
project-viewer.html?id=X&category=arduino
Page 1
Arduino Listing Page
arduino-projects.html — Cards load dynamically from arduino-data.json।
Projects
All Arduino Projects
IoT, Sensors & Embedded Systems
23 Projects
All 23
LED
Sensors
Display
LED Basics
LED Pattern Control
Control blinking patterns using potentiometer.
Sensors
Ultrasonic Distance
HC-SR04 sensor with LCD display.
Home
About
Projects
Studio
Contact
1
Category Hero
Microchip icon, "All Arduino Projects" heading, subtitle, count badge (23 Projects). Heading text dynamically changes based on active filter.
Active filter অনুযায়ী heading বদলায় — "LED Projects", "Sensor Projects" ইত্যাদি।
2
Back Button
Returns to
projects.html Hub page.Projects hub-এ ফিরে যায়।
3
Search Toggle
Magnifier icon in header right. Tap → search bar appears/disappears (
searchSection element, default display:none).Header-এর search icon tap করলে নিচে search bar দেখা যায়।
4
Search Bar
Searches across: title, description, and components[] simultaneously. Clear button (×) shows when text is entered.
Title, description, components সব কিছু একসাথে search করে। × button দিয়ে clear।
5
Filter Chips (Scrollable)
5 chips: All, LED Basics, Sensors/Actuators, Display/Input, Advanced. Each chip shows live count. Active chip turns red. Fade indicators show scroll direction.
5টা filter chip — tap করলে count badge আছে। Scroll করলে ডানে আরো chip দেখা যায়।
6
Project Card
Circuit image thumbnail (fallback: microchip icon), category badge, title, description, component count. Tapping navigates to
project-viewer.html?id=X&category=arduino.Circuit image না থাকলে microchip placeholder দেখায়। Tap → viewer।
Filter Categories
LED Basics
LED patterns, blink sequences, potentiometer control
Sensors & Actuators
Ultrasonic, temperature, motion, motor control
Display & Input
LCD screens, button inputs, keypad interfaces
Advanced
Bluetooth, WiFi, IoT, complex multi-sensor systems
Page 2
Project Viewer
project-viewer.html?id=X&category=arduino — URL query string দিয়ে project load হয়।
Back to Projects
LED Pattern Control
Control LED blinking using potentiometer
Components Required
1
Arduino UNO2
5× LED3
Potentiometer Arduino Sketch
Led-pattern.ino
Copy
void setup() {
pinMode(led, OUTPUT);
}
void loop() { ... }
pinMode(led, OUTPUT);
}
void loop() { ... }
Tinkercad Simulation
Open in Tinkercad
1
Share Button
Uses native Web Share API (
navigator.share()). Opens phone's native share sheet — WhatsApp, copy link, etc.Android/iOS-এর native share sheet খোলে। WhatsApp, copy link সব option আসে।
2
Bookmark Button
Saves bookmark state in
localStorage as project_[id]_saved. Icon turns yellow when saved. Persists after page close.Bookmark করলে icon হলুদ হয়। Browser বন্ধ করলেও থাকে।
3
Circuit Image / Hero
Circuit diagram from
Projects Storage/Arduino UNO.../[folder]/circuit.png. Fallback: microchip placeholder icon.Project folder থেকে circuit.png load করে। না পেলে icon placeholder।
4
Components List
Numbered list of all required components. Pulled from
components[] array in arduino-data.json.JSON-এর components array থেকে numbered list।
5
Arduino Sketch (.ino)
Code section with filename header, Copy button (copies to clipboard) and Download button (downloads .ino file).
Copy বা Download করা যায়। File name header-এ দেখায়।
6
Tinkercad Simulation
Circuit preview image + teal "Open in Tinkercad" button. Opens project directly in Tinkercad.com online simulator.
Tinkercad.com-এ directly circuit simulate করা যায়।
All Viewer Features
Project Viewer — Every Feature
Viewer page-এ সব features এক জায়গায়।
Web Share API
Native
navigator.share() — phone's own share sheet with project title + URL. Works on all modern Android/iOS browsers.Phone-এর native share dialog — WhatsApp, Instagram, copy link যা চাও।
Persistent Bookmark
localStorage.setItem('project_[id]_saved', true) — yellow icon when active. Survives page refresh and browser restart.LocalStorage-এ save হয়। পরে এসেও bookmarked দেখা যায়।
Components List
Numbered list from
components[] in JSON — Arduino UNO, resistors, sensors, etc. All parts clearly listed.প্রতিটা component numbered list-এ দেখায়।
Arduino Sketch Viewer
.ino file loads with syntax display. File name in header. Copy button for clipboard. Download button for .ino file. Scrollable horizontally.
.ino code দেখা, copy করা, download করা সব possible।
Tinkercad Simulation
Circuit preview image + teal button that opens the actual Tinkercad project in browser. Unique to Arduino category — simulate without hardware.
Hardware ছাড়াই online-এ circuit simulate করা যায়।
README Viewer
Markdown README rendered inline. Max 250px height, scrollable. Fullscreen button to read fully. Download README button.
README.md markdown render করে দেখায়। Fullscreen + download সুবিধা।
Beginner Explanation
"Code Explanation (For Beginners)" — separate markdown section. Fullscreen button. Explains code line by line in simple language.
Beginner-দের জন্য code explanation আলাদা section-এ। Fullscreen-এ পড়ার সুবিধা।
Deep Search
Listing page search covers title + description + all component names. Type "resistor" → only projects with resistors show up.
Component দিয়েও search করা যায়। "LED" লিখলে LED project গুলো দেখাবে।
Data Schema
arduino-data.json — Fields
প্রতিটা project object-এর সব field।
| Field | Type | Description |
|---|---|---|
id | Number | Unique project ID — used in URL ?id=X and localStorage key |
category | String | led-basics | sensors-actuators | display-input | advanced-projects |
folder | String | Storage folder name e.g. 01 LED Pattern — used to build file paths |
title | String | Project display name |
subtitle | String | Short tagline shown below title |
description | String | Searchable description shown on listing card |
components | Array | List of required hardware parts — also searchable |
tinkercad | URL | Tinkercad simulation link — triggers Tinkercad section in viewer |
files.code | String | .ino filename — loaded as Arduino Sketch |
files.circuit | String | circuit.png — hero image in viewer |
files.readme | String | README.md — loaded and rendered in README section |
files.explanation | String | Explanation .md file — loaded in Beginner Explanation section |
dateAdded | String | ISO date |
codeFile | String | Alias for files.code (legacy field) |
File Map
All Files
| File | Location | Role |
|---|---|---|
arduino-projects.html | mobile/projects/ | Category listing — filter chips, project cards grid |
arduino-projects.js | mobile/projects/ | Loads JSON, renders cards, search+filter logic |
project-viewer.html | mobile/projects/ | Shared viewer for Arduino, MATLAB, SolidWorks |
project-viewer.js | mobile/projects/ | Renders all viewer sections dynamically by category |
arduino-data.json | Projects Code/Arduino/ | All 23 Arduino project objects |
arduino-projects.html | Projects Code/Arduino/ | Desktop Arduino listing page |
arduino-project-viewer.html | Projects Code/Arduino/ | Desktop Arduino project viewer |
projects.css | mobile/projects/ | Shared styles for all mobile project pages |
| circuit.png / *.ino / README.md | Projects Storage/Arduino UNO.../[folder]/ | Per-project assets — circuit image, code, docs |