Projects — Web
PROJECTS SUB-PAGE · WEB DEVELOPMENT

Website Projects

Projects Code/ · websites-listing.html

Responsive web development projects — landing pages, web apps, dashboards and tools. Each project card shows the live demo link, tech stack badges, GitHub repository, and a screenshot preview. Single-page layout for quick browsing.

Web development projects — landing pages, web apps, dashboards। প্রতিটি card-এ live demo link, tech stack badge, GitHub repo, আর screenshot preview আছে।

Web Projects Live Demo Links Tech Stack Filter GitHub Repos Screenshot Preview
a3km.studio/portfolio
Live
All React HTML/CSS Vue
Portfolio Website v2
React Tailwind
Live
Repo
Task Management Dashboard
Vue.js Cloud
PAGE 01

Project Listing Page

All web projects displayed in a responsive card grid. Each card includes a screenshot preview thumbnail, project title, tech stack badges, and action buttons for Live Demo and GitHub. A tech stack filter row at the top narrows results by framework or language.

Web projects card grid-এ দেখানো হয়। প্রতিটি card-এ screenshot thumbnail, tech badges, live demo আর GitHub button আছে। Tech filter দিয়ে specific framework বেছে নেওয়া যায়।

Screenshot Preview
Thumbnail of the live site shown on the card — hover may show animated preview
Live Demo Link
Direct link to the deployed project — opens in new tab
GitHub Repository
Link to source code repository for forking or contribution
Tech Stack Badges
Framework, library, and hosting badges displayed per project card
Card Grid Preview
All Stacks React HTML/CSS
Portfolio v2
React
Live
Dashboard
Vue
Live
SECTION 02

Live Demo & GitHub

Each project card provides direct access to the deployed live version and source code. The Live button opens the hosted project URL in a new tab. The GitHub button links directly to the repository. These links are stored in the projects data file and updated as projects evolve.

Live button click করলে deployed site খুলবে। GitHub button click করলে source code repo খুলবে। Project data file-এ সব link আপডেট করা থাকে।

Deployed Live Demos
Projects hosted on Vercel, Netlify, or GitHub Pages — always accessible
Public Repositories
Open source repositories available for forking, starring, and contributions
Security-First Builds
Projects follow OWASP guidelines — no exposed secrets, XSS-safe, CSP headers
Action Buttons
Portfolio Website v2 · React + Tailwind
portfolio.a3km.studio
Live Demo
Source
SECTION 03

Tech Stack Filter

A row of tech filter chips above the grid lets users view only projects built with a specific stack. Available filters appear dynamically based on what's actually used in the stored projects — no empty categories. Search bar further filters the visible results by project name or description.

Tech filter chips শুধু actual projects-এ use করা stacks দিয়ে তৈরি হয়। Search bar + filter একসাথে কাজ করে।

Dynamic Filter Chips
Filters built from actual project data — only used stacks appear as options
Combined Search
Search + filter work together — React filter + "portfolio" = precise results
No Reload
JavaScript filters DOM in place — instant results, no network requests
Filter System
search projects...
All React HTML/CSS Vue GSAP
4 React projects found

Websites — File Index

ItemTypeDescription
Projects Code/projects.htmlPageMain projects hub — routes to all sub-sections including websites
Projects Code/websites-listing.htmlPageWeb projects listing — tech filter, search bar, screenshot cards, live + GitHub buttons
Projects Storage/websites/StorageScreenshot images, project metadata organized per project folder
Content/projects.jsonDataProject entries with title, stack, liveUrl, githubUrl, screenshotPath, tags
Vercel / Netlify / GitHub PagesHostingDeployment platforms used for live demo URLs