Designer & front-end developer · Vancouver, BC

I design online stores and brand sites, then build them myself.

I'm Johnny Romo. For 4 years I've been designing and coding websites, from product pages and campaign banners to complete checkouts. Because I write the code too, what I design is exactly what goes live.

View my workGet in touch
E-commerceCampaign creativeDesign + codeEnglish · Español
Johnny Romo
Available
4 yearsDesign & development
0+Years designing and building for the web
0E-commerce stores designed
0Sites taken from idea to launch
EN · ESBilingual, written and spoken
What I do

Design and code under one roof

I cover the whole path from the first idea to the live page, so nothing gets lost between the mockup and the site.

E-commerce design

Collection grids, product pages, carts and checkouts that are easy to shop on a phone.

Campaign creative

One idea turned into a homepage banner, an email and a social set that clearly belong together.

Brand systems

Type, colour and reusable components, so every new page looks like it came from the same place.

Mobile-first layouts

Every design starts on a phone screen and scales up, because that's where most people shop.

Front-end development

HTML, CSS and JavaScript written by hand. I hand over working pages, not just files.

Motion & illustration

Product renders, icons and small animations drawn in code to make a page feel alive.

Selected work

Web, e-commerce and campaign work

An apparel store concept with its full campaign kit, two client sites in production, and a booking site.

johnnyromo5454.github.io/drizl
DRIZL Supply on desktop
DRIZL Supply on a phone
View project ↗
Apparel · E-commerce01

DRIZL Supply

Concept store for a Vancouver streetwear brand. I designed the brand direction, the homepage campaign, the collection grid and the product page, then built it so every interaction works: drop countdown, colour and size selection, stock states and cart.

  • Brand direction, typography and colour system
  • Homepage campaign banner and drop countdown
  • Collection grid with filters and product badges
  • Product page with colour change, size guide and stock states
  • Cart with free-shipping progress
  • Responsive desktop and mobile layouts
RoleDesign + build
ChannelWeb · E-commerce
Year2026
Open the store ↗
02 · Campaign kit · DRIZL "Drop 07"

One campaign, every channel

I took the DRIZL drop and carried it into a homepage banner, a newsletter and three social posts. Same type, same colours, same products. Everything below is built live, not screenshots.

Web · Email · Social
Homepage banner1600 × 640
DROP 07

Made for the wet coast.

Shop the drop
Instagram set1080 × 1080 · 3 posts
Drop 07
Friday 10amdrizlsupply.ca
Atmos shell$248 · 10K waterproof
Free
shipping
over $150Canada-wide · 30-day returns
Newsletter600 px email
DRIZL.Shop · Lookbook
DROP 07 · ATMOSPHERIC RIVER

It's here. Limited run.

Heavyweight fleece and seam-sealed shells, built for 160 rainy days a year.

Shop the drop
Atmos Shell $248
Drizzle Hoodie $128
Fog Beanie $38
FREE SHIPPING OVER $150 · UNSUBSCRIBE · VIEW IN BROWSER
tienda-nebula2.pages.dev
NebulaCraft Store on desktop
NebulaCraft Store on a phone
View project ↗
Client · E-commerce03

NebulaCraft Store

Official online store for a gaming community. I designed the brand, the illustrations and the full shopping flow: categories, product cards, cart, coupons and checkout.

  • Brand and custom illustrations
  • Category and product card system
  • Cart, coupons and checkout flow
  • Mobile app-style navigation
RoleDesign + build
StatusLive
Visit store ↗
cristhianrosas.com
Cristhian Rosas on desktop
Cristhian Rosas on a phone
View project ↗
Client · Personal brand04

Cristhian Rosas

Personal brand site for an entrepreneur and podcaster. Black-and-gold visual direction, company showcase and calls to action that turn visitors into WhatsApp conversations.

  • Visual direction and layout
  • Photography treatment and composition
  • Company and podcast sections
  • Built in Spanish
RoleDesign + build
StatusLive
Visit site ↗
How I work

Four habits behind every project

Goal first

Before opening any file I want to know what the page has to sell or explain.

Phone first

I design for the small screen and check every layout on a real phone before calling it done.

Build what I design

No gap between mockup and website: I write the code, so the details survive.

Tidy hand-off

Clear file names, reusable pieces and short notes, so anyone can pick up the work later.

Toolkit

Tools I work with

</>
HTML & CSSLayouts & styling
JS
JavaScriptInteractions & logic
Sv
SVG & CSS motionIllustration & animation
Vs
VS CodeWhere I design & build
Gh
Git & GitHubVersion control
Cf
Cloudflare PagesHosting & deploys
Tb
TebexHeadless e-commerce
Dt
Chrome DevToolsTesting & speed
Johnny Romo
About

Hi, I'm Johnny.

I'm an engineer by degree and a web designer and developer by trade, based in Vancouver. For the last 4 years I've built websites end to end: I decide how a page should look, then write the code that makes it work. That's why I pay attention to things like how a banner crops on a phone or how fast a product photo loads.

Recent work includes an online store, a personal brand site, and concept projects for a clothing brand and a local business. I work in English and Spanish.

Based inVancouver, BC
Experience4 years · design & development
EducationEngineering degree
LanguagesEnglish · Spanish
Contact

Let's talk.

Tell me about the role or the project and I'll reply within a day.

Emailjromobonilla@gmail.com
Phone672-952-5427
LocationVancouver, BC