EnviroGun
Frontend Development · React, Gatsby, TypeScript, i18n
- Multilingual structure
- Performance-first UI
- Maintainable component patterns
UI/UX Design & Frontend Development from concept to shipped interface.
I design and build digital experiences that are clear, accessible, and built to scale. Figma to React, without the handoff friction.
FigmaUI/UX DesignDesign SystemsReactTypeScriptAccessibilityi18nAI-assisted workflow
Focus
- Design-to-code without handoff gaps
- Accessibility as a foundation, not an afterthought
- Scalable systems components, tokens, documentation
What I deliver
UI/UX Design
Interface design in Figma wireframes, visual exploration, prototypes, and component specs ready for handoff or direct implementation.
Design Systems & UI Consistency
Reusable component libraries, design tokens, and documentation so teams ship consistent UI at scale.
React & Gatsby Development
Production-grade components, content-driven pages, and scalable frontend architecture.
AI-Assisted Workflow
Claude Code, Figma AI/Make, and Vercel v0 integrated into daily workflow faster prototyping, accelerated delivery, and consistent quality at scale.
Accessibility (WCAG-minded)
Semantic HTML, keyboard navigation, contrast checks, and inclusive UX patterns baked in from the start.
Multilingual Websites (i18n)
Clean translation structures, hreflang/canonical hygiene, and content parity across languages.
Performance Optimization
Core Web Vitals improvements, image strategy, caching, and frontend profiling.
Explore services
Core Web Vitals & Frontend Performance
Audit + implementation to improve LCP, INP, and CLS for React/Gatsby sites.
Design Systems & UI Consistency
A practical system of components, tokens, and guidelines for scalable UI delivery designed in Figma and implemented in React.
Accessibility Audit & WCAG Readiness
Actionable audit to uncover accessibility gaps and deliver a clear remediation plan.
Performance Optimization & Speed
Targeted improvements to reduce load times and improve UX across devices.
Process
01
Understand
Clarify goals, target users, constraints, and content priorities.
02
Design
Wireframes, visual exploration, and Figma prototypes validated before a single line of code.
03
Build
Clean, responsive, accessible UI implemented with maintainable code standards.
04
Refine
QA, accessibility checks, performance tuning, and SEO fundamentals.
Portfolio
Live projects and an archive of earlier designs.
Live projects (online)
Current and recent websites I've designed and built. Click each card to review details.
Reef Cleaning Company
Frontend Development · React, Gatsby, TailwindCSS
- Service-driven sections
- Lead generation forms
- Responsive layout
Code Crafted Studios
Design + Frontend Development + Regular Maintenance · React, Gatsby, TailwindCSS, i18n
- Content-driven sections
- Reusable UI blocks
- SEO & accessibility hygiene
- Multilingual structure
Juan Pablo Riano
Design + Frontend Development + Regular Maintenance · React, Gatsby, TailwindCSS, i18n
- Portfolio storytelling
- Focused hierarchy
- Clean layout
- SEO & accessibility hygiene
- Multilingual structure
Design and frontend development of this portfolio site.
Succulente Sculpture
Design + Frontend Development · React, Gatsby, TailwindCSS, i18n
- Visual-first UI
- Gallery layout
- Mobile-friendly browsing
Website for showcasing succulent chocolate sculptures (flowers)
Jazzy & Bright
Design + Frontend Development · HTML/CSS/JavaScript
- Service-driven sections
- Responsive layout
Website for showcasing cleaning services.
Amusez-vous
Design + Frontend Development · HTML/Bootstrap/JavaScript
- Event-driven sections
- Responsive layout
- Gallery showcase
Website for children's entertainment equipment rental.
Copygraphos
Design + Frontend Development · React, Gatsby, TailwindCSS
- Portfolio storytelling
- Service-driven sections
- Responsive layout
Website to showcase printing machines maintenance services.
Gama y Equipos
Design + Frontend Development · HTML/CSS/JavaScript
- Product showcase layout
- Responsive design
- Service-driven sections
SPA
Planchers & Renovations PC
Design + Frontend Development · React, Gatsby, TailwindCSS, Firebase
- Service-driven sections
- Lead generation forms
- Responsive layout
Website to showcase flooring and renovation services. Bilingual site.
Manual 3 (Project)
Design + Frontend Development · HTML/CSS/JavaScript
- Custom theme development
- Responsive layout
- Portfolio storytelling
Portfolio site for Aquitecture Agency. https://riano.ca/manual3/
Groupe Somos
Design + Frontend Development · HTML/CSS/JavaScript
- Landing page design
- Responsive layout
- Marketing-focused sections
Landing page for selection process. https://somosconstruction.ca & https://groupesomos.ca/main.html
Point Bar Lounge
Design + Frontend Development + Regular Maintenance · HTML/CSS/JavaScript
- Event-driven sections
- Responsive layout
- Regular updates
- Seasonal promotions
First version of the site, now replaced with a React-based build. https://ellounge.ca
El Lounge
Design + Frontend Development + Regular Maintenance · React, Gatsby, TailwindCSS, Firebase
- Event-driven sections
- Lead generation forms
- Responsive layout
- Regular updates
- Seasonal promotions
Multilingual site, regularly updated, with seasonal promotions, events, and offers.
Somos Construction
Design + Frontend Development · React, Gatsby, TailwindCSS, Firebase
- Portfolio storytelling
- Service-driven sections
- Responsive layout
Bilingual site
Wash A Fita
Design + Frontend Development · React, Gatsby, TailwindCSS, Firebase
- Service-driven sections
- Lead generation forms
- Responsive layout
SPA Bilingual site.
Archive (offline designs)
Older site designs that are no longer online. Click each card to review details.
About
I'm a UI/UX Designer and Frontend Developer based in Montréal. I work at the intersection of design and code which means I can take a product from concept to shipped interface without losing intent along the way. I integrate AI tools like Claude Code, Figma AI, and Vercel v0 into my workflow to move faster without sacrificing quality.
- Design in Figma, build in React no handoff friction
- AI-assisted workflow: Claude Code, Figma AI/Make, Vercel v0
- Accessibility and semantic HTML as defaults
- Performance and SEO hygiene baked into every delivery
Availability
Open to in-house and agency roles where design and frontend overlap. Based in Montréal (ET) with flexible overlap across North American time zones.
Canada / USRemote / HybridEN / FR / ES
Let's design and build something great together.
Share your goals, timeline, and target users. I'll reply with next steps and a clear plan.