Missael Rangel
Frontend Developer from Guadalajara, Mexico.
Specialist in HTML, CSS, JavaScript (ES6+), TypeScript, and React.
About Me
Missael Rangel 👋
I’m a Frontend Developer with a Bachelor’s in Computer Engineering from the University of Guadalajara. I design and build modern, accessible interfaces with HTML5, CSS, JavaScript (ES6+), TypeScript, and React. I work with Git and GitHub, follow development best practices, and apply UI/UX principles and responsive design to deliver clear, consistent experiences across devices. I’m driven by creative problem solving and continuous learning to stay current, with a focus on performance, accessibility, and clean code. Open to collaborating in Guadalajara, remotely, and with international teams.
Projects
Develop - Landing Page
Responsive agency landing. I built an off-canvas mobile menu with submenus, a sticky navbar on scroll, and an on-demand dark mode. CSS with variables and BEM; modular JS (menu-mobile, navbar-fixed, dark). Reflow-free animations (transform/opacity) and solid SEO/A11y (alts, labels, heading hierarchy).
Gamer - News Portal
News portal featuring multi-level navigation (desktop + mobile), seamless ticker, sliders/carousels, and video module. BEM + CSS variables; modular JS (search toggle, rAF marquee, ARIA-aware mobile menu). Lazy-loaded media, semantic headings and A11y fixes (roles, aria-expanded, focus).
Shopping Cart
E-commerce demo with a shopping cart built in React + TypeScript. Logic lives in a custom hook (useCart): add/remove and quantity controls with per-item limits (1-5), localStorage persistence, and derived state via useMemo (isEmpty, total). Layout uses a Flexbox-based grid; the cart dropdown is pure CSS. Vite + SWC for a fast DX.
Tip Calculator
Restaurant app to build an order, choose a tip (10%, 20%, 50%), and see subtotal, tip, and total in real time. Business logic lives in a custom hook (useOrder) that handles add/increment/remove/reset. Totals are derived with useMemo; the save button is disabled when the total is 0. Controlled tip inputs, currency formatting with Intl.NumberFormat, and a clean split between components (MenuItem, OrderContents, TipPercentageForm, OrderTotals).