With a background in graphic design, I build responsive, accessible UIs with performance and SEO in mind. My work spans modern frontend technologies (React, Next.js, Redux, TypeScript, Tailwind) as well as WordPress implementations, translating design systems into clean, maintainable interfaces.
- React, Next.js, Redux, TypeScript
- JavaScript (ES6+), HTML5, CSS3/Sass
- Tailwind, Ant Design, design systems, component-driven UI
- Storybook for component documentation and UI development
- Performance, accessibility, responsive layout
- Strong Figma-to-code translation and pixel-accurate implementation
- Advanced responsive layout work (breakpoints, fluid grids, flexible components)
- Customizing Bootstrap and Ant Design—variables, tokens, typography, spacing, color systems, and component overrides
- WordPress (WPBakery, Elementor, custom theming)
- WooCommerce integration
- HubSpot CMS theming
- Git, CI/CD, Vercel
- Component-driven development workflows
- Consistent cross-device execution
-
Mulesoft mega-menu (component based)
Live demo · Jump to section -
Gómez-Pinzón (React + Next.js)
Live dev version · [Jump to section](#gómez-pinzón-development-version)
During my time at MuleSoft I worked on several frontend initiatives across their learning and marketing ecosystem, including platform migrations, component libraries, and UX improvements for training.mulesoft.com and related properties. Much of the work happened in highly constrained LMS/CMS environments, requiring isolated components, careful architecture, and cross-team collaboration.
A fully modular, self-contained mega-menu built as a technical and branding update for MuleSoft.
The requirement was to inject a large, content-heavy navigation component into four different websites without conflicting with their CSS, JavaScript, or existing frameworks.
The build uses a component-based architecture with Handlebars partials and selectively imported Bootstrap modules—only the pieces required for layout and interactions. The result is a responsive, accessible menu with smooth animations, keyboard navigation, and complete isolation from host environments.
🔗 Live isolated build:
Key aspects:
Modularization & Assembly
- Component architecture using Handlebars partials
- Atomic-style structure for maintainability
- Independent development and testing
- Cherry-picked Bootstrap modules (grid, utilities, buttons)
Optimization & Weight Reduction
- ~70% smaller than full Bootstrap (≈15KB vs 120KB)
- Selective Sass imports
- Automatic CSS/JS inlining (zero HTTP requests)
- Terser minification and build-time tree-shaking
Multi-Site Injection
- Standalone HTML output with fully inlined assets
- Zero runtime dependencies
- CMS-agnostic deployment
In progress of uploading dev versions...
Most of my freelance work comes from agency collaborations, joining ongoing projects to handle front-end implementation, UI translation, responsive behavior, and component styling.
Live sites may differ from what I delivered, but the links below represent work I contributed to during my engagement.
Agency work included:
- Front-end styling, layout structure, and responsive behavior
- Component-driven UI following Atomic Design principles
- System setup (typography, spacing, color scales, breakpoints, interaction states)
- Translating designs or Figma references into functioning components
- Custom styling (Tailwind, Bootstrap) and theme adjustments
- Integration work with WordPress or Laravel backends
Full-stack build using a Laravel API and a Next.js 14 frontend.
I developed the UI with Atomic Design, Tailwind custom styling, Framer Motion animations, and full internationalization (i18n) via next-i18n-router + i18next.
The project also included Headless UI components, Swiper.js, and react-hook-form for advanced form handling.
🔗 Development version:
- gomez-pinzon — development version
Live version was removed following a firm acquisition during development.
Frontend implementation for a Laravel platform using Bootstrap within an Atomic Design structure.
Delivered reusable UI modules, page templates, and responsive layouts for integration into the Laravel backend.
Marketing and corporate websites built via WPBakery, Elementor, or custom theming.
Work included front-end implementation, responsive layout, typography systems, interaction states, and component adjustments.
Fast-paced execution and delivery based on provided designs.
- biodefensecommission
- casunglasses
- nikangtx
- health-savings
- elumina
- sebastianmd
- securiport
- ibedigital — Currently broken; see original design reference — Reference
- mortgage365 — Updated since; diverges from original design — Reference
- health-savings — Image issue caused by removed styles after handoff
- brotherad.mx — Previous version; reference missing
- mrswordsmith — Previous version; reference missing