Missael Rangel
Frontend Developer from Guadalajara, Mexico.
Specialist in HTML, CSS, JavaScript (ES6+), TypeScript, and React.
About Me
Missael Rangel 👋
I hold a Bachelor’s in Computer Engineering from the University of Guadalajara, and I’m a frontend developer focused on designing and building modern, dynamic, and accessible interfaces. I specialize in HTML5, CSS3+, JavaScript (ES6+), TypeScript, and React, with experience using Git/GitHub and development best practices. I also apply UI/UX principles and responsive design to deliver clear, device-friendly experiences. I’m passionate about creative problem-solving and continuous learning, which helps me stay current with web technologies. I’m currently seeking my first role as a frontend developer, bringing a positive attitude, strong work ethic, and a focus on performance and clean code. I’m open to opportunities in Guadalajara as well as with remote and 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).