Page Layout
Websites Listing Page
websites-listing.html — Single-page section with search, filter, and project cards.
Projects
Website & Web Projects
UI/UX · Frontend · Full Stack
All Projects
All
React
HTML/CSS
Node.js
HTML
CSS
JS
Portfolio Website
Full-featured personal portfolio with animations
React
Cloud
E-commerce UI
Responsive storefront with cart system
1
Category Hero
Blue globe icon, "Website & Web Projects" heading, category subtitle. Badge updates count based on active filter.
Filter অনুযায়ী count badge update হয়।
2
Tech Stack Filter
Filter by framework/language: All, React, HTML/CSS/JS, Node.js, Vue, and others. Scrollable chip row.
Tech stack অনুযায়ী filter। Scrollable chip row।
3
Project Card
Screenshot preview (or icon fallback), tech stack badges, title, description. Two quick-action links: Live Demo (opens in new tab) and GitHub.
Screenshot, tech badges, Live Demo & GitHub link। সব card-এ আছে।
4
Live Demo Badge
Green "Live" badge appears on cards with a deployed live URL. Tapping opens the deployed site in a new tab.
Live site থাকলে green "Live" badge দেখায়।
5
Search
Searches project titles, descriptions, and tech stack tags. Clears with × button. Counts update in real-time.
Title, description, tech tags একসাথে search।
All Features
Websites Features
Tech Stack Filter
Filter by React, HTML/CSS, Node.js, Vue, and other frameworks. Instant results.
Tech stack দিয়ে instant filter।
Live Demo Links
Direct links to deployed projects — opens in new tab. Available on all projects with live hosting.
Live deployed site-এ directly যাওয়া যায়।
GitHub Integration
Direct GitHub repo links on every card. Source code, README, and version history accessible.
প্রতিটা card-এ GitHub repo link।
Screenshot Preview
Project screenshot thumbnails on cards. Fallback to category icon if no screenshot available.
Screenshot না থাকলে icon placeholder।
Smart Search
Search by project name, description, and technology tags. Real-time filtering with clear button.
Name, description, tech tags search। Real-time।
Touch Optimized
Single-column full-width card layout optimized for thumb scrolling. Minimum 44px tap targets.
Single-column layout, 44px tap targets। Thumb-friendly।