Matthew Miguel

Frontend Web Developer

  • HTML
  • CSS
  • JavaScript
  • React
  • Astro
  • Git
  • GitHub

About Me

Headshot of Matthew Miguel

Hello, I'm Matthew

I am a detailed-oriented and design minded web developer focusing on transforming great designs into excellent user experiences through well-written, maintainable code.

Over the years, I have gained experience building landing pages, multi-page websites, small components, and web applications.

With a background in engineering, I love the process of analytical thinking and problem solving. However, I've always been drawn to creative work like graphic design and video editing. Once I started learning to code, I quickly fell in love with frontend development. It's the perfect intersection of problem solving and creative work.

I strive to create products that function efficiently, and provide seamless user experiences. I'm always looking for opportunities to learn new skills and grow, so that I can build products people love to use.

Certificates

  • Complete Full-Stack Web Development Bootcamp - Angela Yu
  • CSS Demystified - Kevin Powell
  • JavaScript for Everyone - Piccalilli

Education

  • MS Occupational Health and Safety Engineering - NJIT
  • BS Chemical Engineering - NJIT

Skills

Development

  • Semantic HTML
  • CSS
  • JavaScript
  • React
  • Astro

Design

  • Figma
  • Penpot
  • Affinity
  • Canva

Tools

  • Git / GitHub
  • Command Line
  • Chrome Dev Tools
  • Claude AI
  • Copilot

Knowledge

  • CSS Architecture
  • Accessibility
  • Responsive Design
  • API Data Handling
  • Components

My Work

Weather Now on desktopWeather Now on tabletWeather Now on mobile

Weather Now

  • React
  • React Hooks
  • API Integration
  • CSS Grid
  • Keyboard Accessibility

Weather Now is a forecast app that lets users check current, hourly, and daily weather conditions for any location in the world. Built with React, it features geolocation on load, a searchable location dropdown with full keyboard accessibility, and unit toggling between imperial and metric. The responsive layout uses CSS Grid with named template areas to adapt across screen sizes. Data is sourced from the Open-Meteo API, Big Data Cloud API, and the native Geolocation API.

Scoot Multi-Page Site on desktopScoot Multi-Page Site on tabletScoot Multi-Page Site on mobile

Scoot Multi-Page Site

  • Semantic HTML
  • Mobile Navigation
  • Accessibility
  • CSS Grid
  • Flexbox

Scoot is a multi-page marketing website for a fictional scooter-sharing service. The site features four pages with complex responsive layouts using CSS Grid and Flexbox, reusable decorative patterns built with pseudo-elements and CSS counters, and a mobile navigation menu with proper ARIA state management. Semantic HTML and consistent component patterns are maintained across all pages.

React Contact Form on desktopReact Contact Form on tabletReact Contact Form on mobile

React Contact Form

  • React
  • Constraint Validation API
  • Error Handling
  • Accessibility

A contact form component built with React featuring custom validation using the native Constraint Validation API. Errors display on blur and clear as the user types, providing immediate feedback without being intrusive. The form uses semantic HTML with proper ARIA attributes including aria-live regions for screen reader announcements and aria-describedby to connect inputs to their error messages. A toast notification confirms successful submission.

Password Generator on desktopPassword Generator on tabletPassword Generator on mobile

Password Generator

  • Advanced CSS Selectors
  • Semantic HTML
  • Form Handling
  • JavaScript

A password generator that lets users customize length and character types to create secure passwords. The strength indicator uses minimal JavaScript to set a single class, with CSS :has() and sibling selectors handling all visual states from there. Form inputs are built with semantic HTML and custom-styled while maintaining full accessibility. Generated passwords can be copied to the clipboard with a single click.

Front End Quiz App on desktopFront End Quiz App on tabletFront End Quiz App on mobile

Front End Quiz App

  • Theme Switcher
  • JavaScript
  • Data-Driven UI
  • Async/Await

A quiz app that tests your knowledge across multiple frontend development topics. Quiz data is fetched asynchronously from a JSON file and used to dynamically populate questions, answer choices, and scoring. The theme switcher uses the CSS light-dark() function with custom properties and respects the user's system preference as a default. Progress is tracked throughout with a visual progress bar and a final score screen.

FAQ Accordion - CSS Only on desktopFAQ Accordion - CSS Only on tabletFAQ Accordion - CSS Only on mobile

FAQ Accordion - CSS Only

  • Semantic HTML
  • CSS Only
  • CSS Animations
  • Interpolate-size

A FAQ accordion built entirely with HTML and CSS. The accordion uses native details and summary elements for open and close functionality, with smooth animations powered by the CSS interpolate-size property — no JavaScript required.

Community Work

  • WordPress
  • Divi Theme

These are websites built for meditation centers in New Jersey and New York in collaboration with their owners. I designed them in Figma and built them using WordPress and the Divi theme. Since learning to code, I've applied my CSS knowledge to create custom styles where Divi felt limiting. I wanted these sites to feel bright, hopeful, and easy to navigate to encourage people to explore meditation.

The first website I ever built was on Wix for Lyndhurst Meditation, where I was attending classes. That experience sparked my interest in web development and set me on the path to learning to code. I'm grateful for that journey and happy to give back to the community with my skills.

Get In Touch

Interested in working together? I'd love to hear from you.