Ethan Flores | Front-End Engineer

madasacollective.com

Outcomes

Results after launch

Top 6

Avg. Search Position

Ranks in the top 6 for brand queries organically, peaking at position 5.6 without a paid campaign.

4.1

Projects Page Rank

The /projects page reached position 4.1 — page-one placement with no dedicated SEO work.

100

Lighthouse Score

Perfect performance, accessibility, best practices, and SEO scores.

Type

Agency Website

Stack

Next.jsTypeScriptTailwindSass

Third-Party Integrations

ResendGoogle Tag ManagerGoogle Analytics 4

Overview

The studio behind the work

Madasa Collective is the digital product studio I built through — the business behind Gen Fulton Consultancy, MRC Rock & Sand, and the other client work in this portfolio. I was the lead developer and, for most engagements, the only developer on the team, working alongside two designers.

Building our own site meant solving the same problem our clients come to us with: before you can build anything, you have to know who you are. The website was the last thing we made — and the most personal.

Challenge

Identity before interface

Defining the brand

Before a single component was written, the team had to answer harder questions: who is Madasa Collective, what do we stand for, and who are we trying to attract? The branding process wasn't a phase — it was the challenge.

Presenting a small team as a studio

Three people across two disciplines needed to read as a cohesive creative force, not a collection of freelancers. The site structure and visual language had to do that work without overstating what we were.

Attracting the right clients

The site needed to filter for clients who valued craft and intentionality — not just convert whoever landed on it. Tone and restraint were as important as layout.

Solution

A palette worth building around

The color system is what I'm most proud of on this project. Orange, electric blue, and vivid magenta on a near-black background — energizing without being chaotic, creative without being loud. It communicates exactly what a studio that builds things for a living should communicate.

I liked it so much it became the DNA for this portfolio. The same hue relationships, the same dark-mode-first logic. When a palette is strong enough to carry two separate brands, that's not a coincidence — that's a design decision that held.

Color-led identity

The orange–blue–magenta triad became the studio's visual signature — and later, the foundation for this portfolio's palette.

Small team, cohesive brand

Three people across two disciplines presented as a unified studio — the site structure and visual language did the heavy lifting.

Craft as proof of concept

The studio site is the pitch. Every layout decision, animation, and typographic choice is an argument for what we can do for a client.

Color System

Palette & Design Rationale

A warm peach canvas keeps the site approachable and human — this is a studio that works with people, not a cold tech product. Orange leads as the energy color: it anchors the hero, the testimonials section, and the primary CTA. Blue carries the work — the portfolio section lives in it. Magenta is the conversion color, reserved for the 'Schedule a Call' button so it never competes with anything else on screen. The same orange–blue–magenta hue family later became the DNA for this portfolio, remapped onto a dark canvas.

Warm Peach

Background — approachable, human warmth

#fce8d0

Brand Orange

Hero, testimonials & primary energy

#e86a20

Cornflower Blue

Portfolio section — work & credibility

#5080c8

Vivid Magenta

CTA only — conversion without competition

#c83488

Motion Design

Animation & Interactions

Hero Letter Stagger Animation

Each letter of "MADASA" and "COLLECTIVE" enters independently on a spring — stiffness 300, damping 18, with a 50 ms stagger per letter. The continuous index across both words means "COLLECTIVE" starts where "MADASA" left off, so the whole sequence reads as one fluid motion.

Interactive

We create digital products that launch businesses to their full potential.

Spring stagger · stiffness 300 · damping 18 · 50 ms per letter

Service Cards 3D Flip

Each service card is a two-sided 3D surface using CSS transform-style: preserve-3d and a perspective of 700 px on the parent. On hover the card rotates 180° on the Y-axis — the back face is pre-rotated so it appears right-reading when the flip completes. backface-visibility: hidden keeps each face invisible while it faces away from the viewer.

Interactive