ABOUT ME

I’m Jose Felix, a creative frontend developer & designer specializing in WebGL (Three.js, OGL), GLSL shaders, GSAP, and JavaScript to build immersive creative websites with unique interactions, captivating animations, and clever effects.

From design to code, I place strong emphasis on pixel-perfect translation from concept to production. I’m highly comfortable working from Figma and motion references, using tools like Figma Dev Mode, advanced CSS techniques, and visual QA workflows to ensure the live site matches the intended layout, spacing, typography, and motion with a high level of fidelity.

From design to code, I place strong emphasis on pixel-perfect translation from concept to production. I’m highly comfortable working from Figma and motion references, using tools like.

VIEW LATEST PROJECTVIEW LATEST PROJECT

BACK TOP PROJECTSBACK TOP PROJECTS

Cercas Humaya

Designed and Developed a user-friendly, visually captivating, and performant website for Cercas Humaya, a construction, and cyclonic mesh installation business.

Role

Lead Designer & Full-Stack Developer

Stack & Tools

JavaScript, Pug.js (HTML Templating), SCSS, WebGL (OGL), GLSL (Shaders), GSAP, Figma, Webpack

Client

Cercas Humaya

→See Live

→See Github

The Challenge

Cercas Humaya has been a leader in security and construction (specifically cyclonic mesh) for over three decades. However, their reputation was strictly offline.

The Problem: They needed to scale beyond word-of-mouth and reach two distinct audiences: B2C homeowners looking for safety, and B2B agricultural/real estate giants needing massive installations.
The Goal: Translate their core value of "Safety & Quality" into a digital experience that builds immediate trust.

Designing for "Faris," the Busy Entrepreneur

We didn't just guess; we mapped the user. Our primary persona, "Faris," represents the B2B decision-maker: a busy real estate owner who values transparency and time.

The Pain Point: Faris hates waiting days for a quote. He is limited on time and needs to secure his new properties quickly.
The Solution: We needed a website that wasn't just a brochure, but a self-service tool.

From Friction to Flow

The architecture was streamlined to guide users to the conversion point within clicks. We mapped the journey from "Discovery" to "Quoting" to ensure no dead ends.

Wireframing: We focused on mobile-first layouts, knowing that site managers (like Faris) often search for services while standing on a construction site, not sitting at a desk.

The Custom Quoter (Cotizador)

To solve the "speed" issue, I designed and developed a custom interactive Quoter.

How it works: Users can select materials, dimensions, and add-ons (like barbed wire or PVC strips) to generate a preliminary estimate instantly.
The Impact: This reduced administrative time for the sales team and gave users the instant price transparency they craved.

Industrial Reliability Meets Modern UI

The design needed to feel "heavy" and durable, like the product itself.

Typography: We chose Inter for its legibility and modern structure, using large 80px headers to create a sense of authority.
Color Palette: We utilized a high-contrast system. "Punch Red" (#D92B26) drives urgency and attention (echoing safety signage), balanced by a strict Greyscale palette to maintain professional seriousness.

Performance as a Feature

Because our users are often on mobile data in the field, performance was non-negotiable.

The Stack: I built the site using plain JavaScript, HTML Templating with PUG, SCSS, Node and headless CMS, ensuring near-instant load times.
Motion: We implemented a custom preloader and scroll interactions to make the site feel alive without sacrificing speed.

Credits

Original design

José Félix

Code implementation

José Félix

NEXT PROJECT

BACK TOP PROJECTSBACK TOP PROJECTS

Floema

A framework-free e-commerce experience powered by WebGL, GSAP, micro-interactions and smooth scroll mechanics.

Role

Creative Developer (WebGL & Interaction)

Stack & Tools

WebGL (OGL), GLSL (Shaders), Webpack, Node, Prismic, SCSS, JavaScript, Pug.js (HTML Templating)

Client

Floema

→See Live

Credits (project developed as part of an advanced creative development curriculum)

Original design

Luca Franceschetti

Code implementation

José Félix (with Dev Mentorship from Luis Enrique Bizarro, Awwwards Academy)

NEXT PROJECT

BACK TOP PROJECTSBACK TOP PROJECTS

The Lion Group

High-fidelity frontend development and motion design for ThrillX Design, a Canadian digital agency.

Role

Frontend Developer (Component Architecture & Motion)

Stack & Tools

Vite, Pug (HTML templating), SCSS, GSAP (Motion)

Client

The Lion Group

→See Live

Proving Production Readiness

This project served as a high-stakes technical self challenge for ThrillX Design, a Canadian digital agency. The brief was uncompromising: take a high-fidelity design and translate it into performant, production-ready code.

The Goal: Demonstrate not just coding ability, but architectural thinking, clean file structure, maintainable CSS, and smooth motion execution.

Built for Speed and Scale

To ensure the codebase was as professional as the visual design, I established a modern environment using Vite.

Templating with Pug: I chose Pug (formerly Jade) to componentize the HTML. This allowed me to break the UI into reusable chunks (mixins for cards, buttons, and sections), mimicking a modern framework workflow without the overhead.
Modular SCSS: Styles were architected using the 7-1 pattern, ensuring that the visual system was scalable and easy to maintain.

Orchestrating the "Premium" Feel

A static luxury site feels cheap. To elevate the brand, I utilized GSAP (GreenSock) to handle complex sequencing.

The Reveal: Elements don't just appear; they stagger in. I used GSAP Timeline to synchronize the text reveals with image loads, ensuring the user is guided down the page.
Performance: All animations were optimized to run on the compositor thread where possible, maintaining a silky 60fps even during scroll events.

Credits

Original design

Provided by ThrillX Design

Code implementation

José Félix

NEXT PROJECT

BACK TOP PROJECTSBACK TOP PROJECTS

Möbel

Redefining the digital storefront for Quebec’s premier Herman Miller & Knoll distributor.

Role

Lead Designer & Developer (UI, Interaction, Motion)

Stack & Tools

JavaScript, Pug.js (HTML Templating), SCSS, WebGL (Three.js), GLSL (Shaders), GSAP, Vite, 11ty, Figma, After Effects

Client

Möbel

→Comming

→See Figma

The Challenge

Möbel is famous for equipping corporate workspaces with high-end furniture like Herman Miller chairs. However, the rise of remote work created a new opportunity: selling directly to consumers (B2C) for their home offices.

The challenge was to redesign their digital presence to serve two distinct audiences without diluting the brand. We needed to move beyond "just office chairs" and position Möbel as a source of inspiration for the entire home, blending functionality with the exceptional quality of their catalog.

Mapping the Experience

Before pixels, we needed structure. The goal was to simplify the catalog while inspiring discovery. We moved away from a dry "list of products" to an editorial approach that highlights textures, materials, and "spaces."

A "Destructured" Aesthetic

We wanted the site to feel like a modern art gallery. Spacious, bold, and textual.

The Concept: "Workspaces that inspire."
The Mood: We explored textures (mesh, weave, wood) to bring the physical sensation of the furniture onto the screen.
The Palette: We moved away from safe corporate colors to a high-contrast palette. Deep charcoal and beige provide a warm, premium base, while a striking saturated blue (#0000FF) serves as a modern digital accent to drive interaction.

Interaction as Narrative

Since this project allowed me to leverage my full creative potential, I focused heavily on micro-interactions and motion to tell the story.

A Platform for Inspiration

The final result is a platform that doesn't just sell furniture, it sells a lifestyle. The new site successfully bridges the gap between B2B functionality and B2C desirability.

Credits

Original design

José Félix

Code implementation

José Félix

NEXT PROJECT

BACK TOP PROJECTSBACK TOP PROJECTS

Haunted House

An interactive WebGL experiment exploring lighting, fog, and texture mapping without external 3D models.

Role

Creative Developer

Stack & Tools

Three.js, Vite, JavaScript

Client

Independent

→See Live

Procedural Geometry Only

The core constraint of this project was to use only 3D primitives (cubes, planes, cones) rather than importing pre-made .glb or .obj models.

The House: Constructed entirely from grouped BoxGeometries and ConeGeometries.
The Environment: I used procedural generation to scatter the "graves" (cubes) randomly around the house, ensuring a different layout on every reload while keeping the door accessible.

Under the Hood

Tech Stack: Three.js, Vite, JavaScript.
Lighting: Utilized PointLights for the "ghosts" and a dim AmbientLight to simulate moonlight.
Atmosphere: Implemented custom fog (scene.fog) to blend the floor plane into the background color, creating a seamless "infinite" horizon.
Textures: Applied UV mapping for the bricks and door to add realism to simple shapes.

Credits

Original design

José Félix

Code implementation

José Félix

NEXT PROJECT

Sorry, this folio is not optimizedfor your browser.

Cercas Humaya

The Challenge

Designing for "Faris," the Busy Entrepreneur

From Friction to Flow

The Custom Quoter (Cotizador)

Industrial Reliability Meets Modern UI

Performance as a Feature

Floema

The Lion Group

Proving Production Readiness

Built for Speed and Scale

Orchestrating the "Premium" Feel

Möbel

The Challenge

Mapping the Experience

A "Destructured" Aesthetic

Interaction as Narrative

A Platform for Inspiration

Haunted House

Procedural Geometry Only

Under the Hood

Sorry, this folio is not optimized
for your browser.