A central portfolio dashboard showcasing my Frontend Mentor solutions with a focus on semantic HTML5, responsive layouts, and accessible components—from static designs to interactive JavaScript projects.
- Semantic HTML5: Clean document outlines and accessible elements.
- A11y & SEO: Image lazy-loading, explicit
alttext, and proper ARIA attributes for high Lighthouse scores. - Responsive Layouts: CSS Grid, Flexbox, and fluid typography for mobile, tablet, and desktop viewports.
- Conventional Commits: Structured git workflows (
feat:,style:,docs:) for clear history.
| Project Name | Core Tech Stack | Source Code (Repo) | Live Preview |
|---|---|---|---|
| Hoddle landing Page | HTML, CSS Grid | 📦 View Repo | 🚀 Live Demo |
| Stats Preview Card component | HTML, CSS Flexbox | 📦 View Repo | 🚀 Live Demo |
| 3 Column Card Component | HTML, CSS Grid | 📦 View Repo | 🚀 Live Demo |
| Recipe Page | HTML, CSS Grid | 📦 View Repo | 🚀 Live Demo |
| Qr Code Component | HTML, CSS Grid | 📦 View Repo | 🚀 Live Demo |
| Social links Profile | HTML, CSS Flexbox | 📦 View Repo | 🚀 Live Demo |
| Blog Preview Card | HTML, CSS Flexbox | 📦 View Repo | 🚀 Live Demo |
| Testimonial Grid section | HTML, CSS Grid & Flexbox | 📦 View Repo | 🚀 Live Demo |
| Four Card Feature Section | HTML, CSS Grid & Flexbox | 📦 View Repo | 🚀 Live Demo |
| Product Preview Card Component | HTML, CSS Grid | 📦 View Repo | 🚀 Live Demo |
| Profile Card Component | HTML, CSS Grid & Flexbox | 📦 View Repo | 🚀 Live Demo |
| Order Summary Card | HTML, CSS Flexbox | 📦 View Repo | 🚀 Live Demo |
| Nft Preview Card Component | HTML, CSS Grid & Flexbox | 📦 View Repo | 🚀 Live Demo |
| Single Price Component | HTML, CSS Grid | 📦 View Repo | 🚀 Live Demo |
| Social Proof Section | HTML, CSS Grid] | 📦 View Repo | 🚀 Live Demo |
| [Project Name] | [e.g., HTML5, CSS Grid] | 📦 View Repo | 🚀 Live Demo |
| Project Name | Core Tech Stack | Source Code (Repo) | Live Preview |
|---|---|---|---|
| Article Preview Component | HTML, CSS, JavaScript | 📦 View Repo | 🚀 Live Demo |
| FAQ Accordion | HTML, CSS, JavaScript | 📦 View Repo | 🚀 Live Demo |
| Contact Form | HTML, CSS, JavaScript | 📦 View Repo | 🚀 Live Demo |
| Interactive Rating Component | HTML, Flexbox, JavaScript | 📦 View Repo | 🚀 Live Demo |
| Results Summary Component | HTML, CSS Grid & Flexbox, JavaScript | 📦 View Repo | 🚀 Live Demo |
| Ping Page | HTML, CSS, JavaScript | 📦 View Repo | 🚀 Live Demo |
| Intro SignUp Form | HTML, CSS JavaScript | 📦 View Repo | 🚀 Live Demo |
| [Project Name] | [e.g., HTML5, CSS Grid] | 📦 View Repo | 🚀 Live Demo |
- GitHub: @henrydevlab
- Frontend Mentor: @henrydevlab
- Twitter: @henrydevlab
- Instagram: @henrydevlab
"The digital landscape is fluid, and our designs should be too." — Ethan Marcotte