Sanjit Mart
A practice e-commerce experience focused on catalog browsing, product presentation, and a clear path to checkout-style actions — structured like a real storefront without relying on a heavy framework.
Context & goals
Sanjit Mart was scoped as a portfolio-grade practice build: prove I could carry a multi-page shopping flow from empty repo to a deployable demo. The goal was not only pixel polish but also predictable information architecture — shoppers should always know where they are, how to move between categories, and what happens after they tap “add” or open a product.
I treated accessibility and keyboard focus as first-class concerns where the stack allowed it, because those details are what separate a student layout from something a team could iterate on.
Approach
I started from low-fidelity structure: semantic regions for header, navigation, main catalog, and footer, then layered visual hierarchy with typography scale and restrained accent color. Grids were defined with CSS so the same markup scales from two-column mobile layouts to wider multi-card rows without one-off breakpoints everywhere.
Product cards share one pattern — image ratio, title, price, and action — so extending the catalog is mostly content work. That consistency also made hover and focus states easier to test systematically.
What I shipped
- Responsive product grid with category navigation and clear active states
- Product detail views with imagery, descriptive blocks, and scannable specs
- Cart-style interactions with visible feedback (disabled buttons, counts, microcopy)
- Reusable HTML patterns and CSS utilities to avoid duplicated layout rules
- Static hosting on GitHub Pages with paths that work for shared demos and résumé links
Tech & constraints
HTML, CSS, and vanilla JavaScript on top of GitHub Pages. Without a bundler, I kept file structure flat and documented assumptions in comments so the project stays approachable for reviewers cloning the repo cold.
Results & lessons
The finished demo reads as a coherent shop: navigation does not dead-end, imagery is cropped consistently, and spacing follows a single rhythm. The biggest lesson was front-loading layout tokens (spacing, radii, type sizes) — doing that early prevented a late-stage refactor when the product grid grew.
If I extended this next, I would add a lightweight cart model in JavaScript (persisted to localStorage) and stub checkout validation, then optionally swap the static JSON catalog for a minimal API to show full-stack thinking end to end.