Role: Lead Designer & Full-Stack Developer

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.

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.

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.

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.

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.

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.

Scope: Full website implementation from design to code.

Design: Jose Felix

Implementation: Jose Felix – Responsible for full code implementation, logic, and animation tuning.

Stack: Webpack, Pug (HTML templating), SCSS, GSAP, WebGL, GLSL