Pages
Home, catalogue, details, company
Individual project · Responsive business catalogue
Electrical Solutions
A fast multi-page electrical-products website with searchable categories, product details, company information, legal pages, and direct phone and WhatsApp conversion paths.
Project typeIndividual project
My roleDesign and front-end development
OwnershipIndividual project
DeploymentPublic static deployment
01 / Overview
The problem and my contribution.
A local electrical supplier needs customers to find the right category and contact the business quickly. A heavy account system would add cost without helping that job.
My roleDesign and front-end development
OwnershipIndividual project
I created the visual system, responsive layouts, multi-page navigation, searchable catalogue behavior, product-detail state, accessibility touches, SEO metadata, and direct contact hand-off.
02 / Architecture
How the product is put together.
Design
Shared responsive CSS
Behavior
Search, filters, URL state
Conversion
Phone and WhatsApp
Technology choices
Semantic HTML
Accessible, indexable pages with no runtime dependency.
Responsive CSS
One design system scales from desktop to mobile.
Vanilla JavaScript
Focused search, filter, navigation, and product-detail behavior.
Nginx / CDN
Static delivery is the simplest reliable production architecture for this scope.
03 / Engineering
Challenges and decisions.
The architecture stays honest: the site hands off inquiries directly instead of pretending to persist data it does not need.
Shared CSS and JavaScript keep navigation, catalogue behavior, and responsive breakpoints consistent.
Product cards, controls, and contact actions remain usable on narrow screens.
04 / Product
Real screens, not mockups.
05 / Evidence
Quality you can verify.
3automated tests
7complete pages
0runtime dependencies
CInavigation verified
- Automated tests verify every page, main navigation, search/filter hooks, responsive metadata, and contact links.
- GitHub Actions runs the same checks on every change.
- The Nginx Docker image reproduces conventional production static hosting.
Electrical Solutions