I build fast, accessible, and user-friendly websites and web apps using semantic HTML, SCSS/BEM, and modern JavaScript (ES6 modules). My projects are deployed with Netlify, version-controlled with Git, and designed with performance, accessibility, and maintainability in mind.
- 🖥️ Responsive by default — mobile-first layouts that adapt across every screen
- ♿ Accessibility-focused — WCAG-conscious contrast, ARIA patterns, and keyboard-friendly interactions
- ✨ Clean, systematic code — semantic HTML, modular SCSS, BEM, and DRY principles
- 🔧 Serverless backends when needed — Netlify Functions for APIs, image processing, and secure integrations
- 🌐 Web fundamentals first — building a strong foundation in HTML, CSS, and modern JavaScript before adopting frameworks where they add value.
💡 I believe great front-end development is a system: clean code, intuitive interfaces, accessible experiences, and performance that users can feel.
Refining my personal portfolio with polished UI details, stronger project case studies, and a consistent design system while continuing to deepen my JavaScript and serverless development skills.
jjmginon.dev — Explore my portfolio, project case studies, and the thinking behind each build.
📦 OptiPix — Image Compression Tool
My most complete project to date—a mobile-first image compression tool inspired by camera optics, combining a distinctive visual identity with practical serverless capabilities.
- Vanilla JavaScript (ES6 modules) with a Netlify Function powered by
sharp - Compresses PNG and JPG images while preserving visual quality
- Custom "dopamine optics" branding featuring a violet-to-orange gradient, bento layout, and Bricolage Grotesque + Plus Jakarta Sans
| Project | What it does | Stack |
|---|---|---|
| ☀️ AtmoSeek | Weather app with a serverless API proxy, accessible autocomplete search, and forecast-based dynamic themes | Semantic HTML · SCSS · JS · Netlify Functions |
| ☕ CoffeeScript Café | Multi-page café website showcasing accessibility, performance, and modern responsive design | Semantic HTML · CSS · BEM |
| 🔍 NexuSearch | Wikipedia search experience reimagined with a sleek cold-tech interface and cyan-glow styling | Semantic HTML · Modular SCSS · JS |
| ✅ WaTodo | Accessible to-do application with localStorage persistence and a clean responsive interface | Semantic HTML · Modular SCSS · ES6 JS |
| ⚔️ Rock Paper Scissors: PvE | RPG-inspired duel game featuring battle animations, chant sequences, and persistent scoreboards | Semantic HTML · Modular SCSS · ES6 JS |
Languages & Core HTML5 · CSS3 · SCSS · JavaScript (ES6+)
Architecture & Practices Semantic HTML · BEM · Responsive Design · Accessibility (WCAG) · Mobile-First Development · Performance Optimization
Tools & Deployment Git · GitHub · Netlify · Netlify Functions
- 🏆 Responsive Web Design Certification
- 🏆 Legacy Responsive Web Design V8 Certification
- 🏆 JavaScript Certification
- 🏆 Legacy JavaScript Algorithms and Data Structures V8 Certification
⭐️ Building thoughtful front-end experiences—one project at a time, with clean code, accessible design, and a commitment to continuous learning.