Desktop — Page 03
PAGE 03 / 07

Projects Page

Projects Code/projects.html + 4 category sub-pages

Engineering project showcase with live search, category filter tabs, and 63+ glassmorphism project cards with 3D hover tilt effect and shimmer sweep animation.

৬৩+ engineering project — live search, filter, 3D tilt card। সব data JSON থেকে dynamically load হয়।

63+ Projects Live Search Filter Tabs 3D Card Tilt Shimmer Effect Glassmorphism JSON Driven
SECTION 01

Live Search

Real-time search filtering with instant results. The search bar filters cards as you type. A dropdown shows suggestions pulled from a recent searches array. If no results, shows "No projects found" message.

Type করলেই cards filter হয়। Recent search history localStorage-এ save হয়। Dropdown-এ suggestion দেখায়।

Instant Filter
Filters project title + tags on every keystroke — no lag
Recent Searches
Saved in localStorage — shown as suggestions on focus
Clear Button
X button appears when query is typed — clears and resets filter
No Results State
Shows "কোনো প্রজেক্ট পাওয়া যায়নি" with sad icon when 0 matches
Search System
engine design solidworks
arduino servo motor
MATLAB simulation
↑ Recent searches shown on focus
SECTION 02

Filter Tab System

5 filter tabs: All / SolidWorks / Arduino / Electronics / MATLAB. Active tab has red background + border glow. Clicking a tab instantly hides non-matching cards with a CSS opacity transition.

৫ category tab। Click করলে instantly filter হয়। Project count badge দেখায় প্রতিটি category-তে কতটা আছে।

SolidWorks
3D CAD models — engine parts, assemblies, mechanisms
Arduino
Embedded systems, servo control, sensor projects
Electronics
PCB design, circuit analysis, power electronics
MATLAB
Numerical simulations, signal processing, control systems
Filter Tabs
All SolidWorks Arduino Electronics MATLAB
Showing 63 projects — click a tab to filter
SECTION 03

3D Tilt Cards

Project cards use CSS 3D transforms on hover: perspective(800px) rotateX(2deg) rotateY(-2deg). Shimmer sweep runs on hover. Glassmorphism style: dark semi-transparent + red border.

Hover করলে card 3D tilt হয় এবং shimmer effect আসে। Glassmorphism design — semi-transparent dark background।

3D Perspective Tilt
rotateX(2deg) rotateY(-2deg) on hover — subtle depth effect
Shimmer Sweep
White gradient sweeps left-to-right on hover — 0.8s ease transition
View Options per Card
Each card: image, title, category tag, brief desc, and "View" button
JSON Data Source
All project data from projects.json — dynamic rendering
Sample Project Card — Hover to Try
4-Cylinder Engine Assembly
SolidWorks 3D Model Mechanical
Full engine assembly with pistons, crankshaft, camshaft, and valve system — SolidWorks 2023
SECTION 04

Category Sub-Pages

Each main category (SolidWorks, Arduino, Electronics, MATLAB) has its own detailed sub-page with a 3D model viewer, project specifics, and download options for SolidWorks files.

SolidWorks category-র নিজস্ব sub-page আছে 3D model viewer সহ। Model rotate, zoom করা যায়।

SolidWorks — 3D Viewer
Three.js based 3D model viewer for CAD files — rotate, zoom, pan
List + Grid Toggle
Switch between grid and list view on category pages
File Downloads
Download SolidWorks (.sldprt / .sldasm) files directly
Sub-page Structure
SolidWorks Models
3D viewer + filter + download
Arduino Projects
Code + circuit diagrams
Electronics
PCB + circuit analysis
MATLAB / Simulation
Graphs + code export

Projects — Full Tech Stack

File / SystemTypePurpose
Projects Code/projects.htmlCoreMain projects listing — search, filter, card grid
Projects Storage/projects.jsonDataAll 63+ project objects — title, category, tags, description, image path, file path
Projects Code/solidworks/Sub-pageSolidWorks category page with 3D model viewer (Three.js)
Projects Code/arduino/Sub-pageArduino projects with code viewer
Projects Code/electronics/Sub-pageElectronics + PCB projects
Projects Code/matlab/Sub-pageMATLAB simulation projects
Three.js (CDN)Library3D model viewer for SolidWorks files
localStorageAPIStores recent search history
filterProjects(category)FunctionJS function that applies category filter + search filter simultaneously
AOS (CDN)AnimationCards reveal with fade-up on scroll