Architecture, development and care for websites that have to keep working.

I build digital systems.

Scroll — see the workWebflow · WordPress · WooCommerce · Design systems

01 / 03

Method

I've helped ensure that Method's online presence is as seamless and efficient as their product.

Years
2021 – present
Role
Contract web developer · responsible for web development
Stack
Webflow · JavaScript · HTML · CSS

  • Method homepage hero, "Take Control of Dental Supply Costs", with a product screenshot below

    Homepage

  • Method Savings Calculator page, step 1 of 3, with sliders for number of locations and revenue per location

    Savings Calculator

  • Method pricing page with Essentials and Enterprise packages

    Pricing

  • ROI analysis result card listing supply spend, soft and hard cost savings, cost of Method and ROI

    ROI result

  • Product menu with New and Coming soon badges, a pricing FAQ accordion and a demo-request banner

    Components

  • Analytics section with padding and margin guides drawn over it and a panel of flexbox CSS properties

    Layout and spacing

  • Method pages with product and resource grids, and a team profile

    Page grids

  • Method landing page next to a color-scales panel and a grid of product icons

    Color scales

methodusa.com

02 / 03

Kokua

A digital showcase that blends innovation, style, and the essence of Kokua's design prowess.

Year
2024
Role
Developer · brandscript guidance
Design
Kokua
Stack
Webflow · JavaScript · HTML · CSS

  1. 01 Storybrand: Brandscript

  2. Kokua design-system board with a color swatch grid, type styles and components, beside site pages

    02 Design system

  3. Three Kokua case study pages side by side in teal, purple and blue, sharing one layout

    03 Implementation

  4. Full Kokua case study page for Method, from the purple hero through overview, challenge, approach and results to brand work

    04 Production

03 / 03

Dominique Coymat

A website that reflects the elegance and sustainability of her brand, incorporating e-commerce functionality.

Year
2021
Role
Design and development
Stack
WordPress · WooCommerce · HTML · PHP · CSS · Photoshop · Illustrator

Dominique Coymat homepage with a two-photo hero and the tagline "Sustainable high fashion"
Dominique Coymat homepage on a phone
Global colors panel with the shop's palette of blacks, greys, olive greens and a sand tone
The shop's global colors panel

More work

Three more projects, from brand identity to WordPress.

  • Son Bocaditos

    Custom WordPress Development | Family Business

    Brand identity, logo, packaging and a WordPress site for a family catering business in Antioquia.

  • Inglés con Sam

    Custom WordPress Development | Personal Brand

    A personal project I launched during the pandemic to offer online English lessons.

  • Margarita Defex

    Custom WordPress Development | Javascript, HTML, CSS

    A user-friendly website that highlights her exquisite properties and reflects her unparalleled dedication to client satisfaction.

Here's what goes into a system.

  1. 01

    Web Architecture

    Page models and templates that hold a site together — shared layouts, listing and detail pages.

    Templates · Page models

  2. 02

    Frontend Development

    Designs turned into working interfaces with HTML, CSS and JavaScript, on desktop and mobile.

    HTML/CSS · JavaScript

  3. 03

    CMS & Content Systems

    Sites built and maintained on Webflow, WordPress and WooCommerce.

    Webflow · WordPress · WooCommerce

  4. 04

    Maintenance & Scale

    Ongoing work on live sites — new landing pages and features, and keeping the site consistent as it grows.

    Webflow

    Seen in

PlanBuildMaintain

  1. 01

    Plan

    Understand the problem, the content, the structure and the system.

    • Brandscript
    • Structure
  2. 02

    Build

    Implement the design and reusable components in the actual platform.

    • Design system
    • Components
    • Templates
  3. 03

    Maintain

    Iterate, improve and support the site after launch.

    • Landing pages
    • New features
    • Ongoing support
05 — The System

One system.Every page.

Every site I build starts as a small set of decisions. Watch them become everything else.

  1. 01 / 04

    Tokens

    Start with decisions.

    Colour, type, space and shape — defined once, named, owned.

  2. 02 / 04

    Components

    Decisions become parts.

    Every component inherits the same tokens. Change one decision and every part follows.

  3. 03 / 04

    Templates

    Parts become structure.

    Templates give editors freedom inside guardrails.

  4. 04 / 04

    Sites

    Structure becomes sites.

    One template, three brands. That is the difference between a website and a system.

    In practiceKokua — one case-study layout carrying three client brands →

fig. 05.1 — tokens · 5 decisions
Aa

--font-display
Geist Variable · 100–900

--color-accent
#2233FF

--color-bg / fg
paper · ink

--radius-surface
24px → 0

122448

--space-3 · 5 · 7
× density

fig. 05.2 — components · built from the tokens

Designed once.

Card

Opening hours

Monday to Friday, 9–18.

NavBar ← --color-bg / fg

Heading ← --font-display

Button ← --color-accent

Card ← --radius-surface

Field ← --space × density

5 parts · 1 source

fig. 05.3 — template · structure before content

Page headline

Supporting copy sits here.

Eyebrow

Card title

Card body copy.

Eyebrow

Card title

Card body copy.

Eyebrow

Card title

Card body copy.

fig. 05.4 — sites · same template, three brands

Architecture for quiet cities

Housing, libraries and public rooms, built to last a century.

01

Harbour Library

Open all week.

02

Linden Housing

Open all week.

03

North Pavilion

Open all week.

Gentle dentistry for the whole family

Unhurried appointments, clear prices, and a team that explains.

01

Check-ups

Open all week.

02

Whitening

Open all week.

03

Children

Open all week.

Your library is open late on Thursdays

Free study rooms, workshops and 400,000 books across the city.

01

Study rooms

Open all week.

02

Makerspace

Open all week.

03

Story hour

Open all week.

1 template · 5 components · 3 brands · 0 new code

Portrait of Sam Navarro wearing glasses and a dark cap

Hi, my name is Sam and I am a web architect with a passion for creating dynamic, user-friendly websites. I specialize in crafting websites using CMS platforms such as WordPress and Webflow, complemented by my knowledge of HTML, CSS, and JavaScript.

I've had the opportunity to work in various roles across communications, digital marketing, and web development. Notably, I served as Director of Communications at Suarez Clothing, a role that provided valuable experience related to my current work in web development. I later transitioned to Rabbit Hole Media as a web developer, worked independently, and today I'm a web development specialist at CS Design Studios, helping clients bring their online visions to life.

Fluent in Spanish, my mother tongue, and proficient in English and German, I hold a degree in International Relations. My professional journey has consistently revolved around communications, digital marketing, and web development, reflecting my diverse skill set and commitment to excellence in the digital space. I possess strong diplomatic skills and thrive in collaborative environments, working together with clients and colleagues to find solutions to any issue. I take pride in my ability to help others and excel in managing tasks and time efficiently. With a keen eye for detail and design, I ensure that every project I undertake meets the highest standards of quality and aesthetic appeal.

Platforms
Webflow, WordPress, WooCommerce, Astro — with HTML, CSS and JavaScript
Path
Director of Communications at Suarez Clothing → web developer at Rabbit Hole Media → independent → web development specialist at CS Design Studios
Background
Communications and digital marketing
Education
Degree in International Relations
Languages
Spanish (native), English, German

Have a project in mind? Let's build something together.