Projects Portfolio
Mobile Projects
Full-width project cards with live search, horizontally scrollable filter tabs, and tap-to-expand modal details — optimized for one-thumb navigation.
Desktop projects-এর সব features mobile-friendly করা হয়েছে। Horizontal filter tabs, full-width cards, touch-optimized search।
mobile/projects/index.html
Live Search
Filter Tabs
Features Overview
Projects Page Components
Desktop-এর feature set intact রেখে সব interaction mobile touch-এ optimized করা হয়েছে।
Touch Search Bar
Full-width top search bar. Live filter: project.title.toLowerCase().includes(query). 44px height for easy touch targets.
Type করতেই instant filter। Mobile keyboard সাথে ভালো কাজ করে।
Horizontal Filter Tabs
Tabs: All, Mechanical, Web, Electronics, Research. overflow-x: scroll; scroll-snap-type: x mandatory. Swipe left to reveal more tabs.
Swipe করলে আরও category tabs দেখা যায়। Snap scrolling smooth।
Full-Width Cards
Single-column layout. Full image strip, project name, short description, tech chip tags. Desktop uses 2–3 column grid, mobile uses 1 column.
Desktop-এ grid, mobile-এ single column। বড় tap area — easy to click।
Modal Detail View
Tap card → full-screen modal with scrollable content. Swipe down or tap X to close. overscroll-behavior: contain prevents body scroll-through.
Card tap করলে detail modal খোলে। Swipe-down করে বন্ধ করা যায়।
Search Demo
Touch-Optimized Search
Search bar + filter tabs — এই দুটো একসাথে project filtering করে।
Search projects...
All
Mechanical
Web Dev
Electronics
Research
Design
FEA Analysis of Composite Beam
Mechanical
Finite Element Analysis using Ansys Workbench with mesh convergence study.
AnsysSolidWorksMATLAB
A3KM Studio Website
Web Dev
PWA-enabled personal portfolio with desktop + mobile versions.
HTMLCSSJavaScriptPWA
Desktop vs Mobile Key Difference
Desktop-এ 3D card tilt effect আছে (mousemove event → CSS perspective + rotateX/Y)। Mobile-এ 3D tilt নেই — কারণ mouse hover mobile-এ meaningful না। পরিবর্তে touchstart → slight scale পেয়েছে।