← All projects
In the wildA real studio for San José shopsLive at ivkmedia.com

IVK Media

Most students build a portfolio. I started a studio.

IVK Media helps San José small businesses get found online with websites, Google review stands, Google profiles and Instagram. I built all of it myself: the brand, the offer, the content and a hand-coded website with its own physics engine.

RoleFounder · design, code, content
Started asA 3-day, $100 team challenge
MarketSan José & South Bay shops
WebsiteOne HTML file · no frameworks
HostingNetlify · custom domain · HTTPS
IVKMEDIA.COM · DESKTOP● LIVE
IVK Media website homepage
BLUEPRINT DESIGN SYSTEM · 48PX GRIDARCHIVO BLACK · INSTRUMENT SERIF · JETBRAINS MONO
IVK Media website on a phone
01 · How it started$100 · 3 days

A challenge became a business.

It started as a team challenge: $100 and three days to build something real. I didn't want a lemonade stand. I wanted a business that could keep running after the challenge ended, so I built every piece it needed.

01
Name & brand

IVK Media, logo, colors and Google covers

02
Domain & email

ivkmedia.com with a working business inbox

03
Website

Hand-coded and live on Netlify

04
Instagram

A 9-post launch: carousels and reels

05
A product

A tap-or-scan Google review stand

06
Lead list

Local shops that needed help online

One founder. One budget. Six launches.NOTHING OUTSOURCED
02 · The offerWhat shops get

Great local shops are invisible online.

No website, a dozen reviews, wrong hours on Google, a quiet Instagram. A taqueria with 12 reviews loses to the one with 418, even if the tacos are better. IVK fixes the whole online storefront.

01 · WEB
Websites

Fast, mobile-first sites with menus, hours, directions and booking.

02 · REVIEWS
Review stands

A counter stand customers tap with NFC or scan by QR to leave a Google review.

03 · MAPS
Google profile

Correct hours, photos, categories and replies, so the shop shows up on Maps.

04 · SOCIAL
Instagram

Profile setup, posts and reels made for local customers.

We build it first. You pay only if you love it.FREE PREVIEW IN 24 HOURS · NO CONTRACTS
03 · The websiteHand-built, no frameworks

A website that tells the story by itself.

Agency sites usually just list services. I wanted visitors to watch a shop get fixed, then play with the product, all in one dependency-free HTML file.

FIG. 01 · SCROLL STORY
Scroll story section

A storefront that fixes itself

A pinned, hand-drawn SVG shop whose problems (“No website”, “12 reviews”) get fixed one by one as you scroll, synced to a step list and progress bar.

FIG. 02 · PHYSICS
Physics section

Review stands you can throw

A custom 2D physics engine: gravity, bounce, circle collisions, drag-and-fling with real velocity, and a sleep state when everything rests.

FIG. 03 · SERVICES
Services section

A blueprint design system

A 48px grid, crosshair marks, figure labels and a three-font type system, all driven by CSS custom properties.

FIG. 04 · PRICING
Pricing section

Accessible by default

Pricing tabs with arrow-key support, a live San José clock, copy-to-clipboard contact buttons and hover previews on the work list.

04 · Try itThe physics, live

Go ahead. Throw a review stand.

This is a small rebuild of the physics from the site. Grab anything and fling it. It runs on the same ideas: gravity, collisions, velocity from your drag, and sleeping when still.

FIG. 05 · DRAG + FLINGGRAB ONE ↓
How it works
01

Gravity & bounce with energy loss on every hit

02

Circle collisions push objects apart and trade momentum

03

Fling velocity comes from your last pointer movements

04

Sleep state: the loop stops when nothing moves, saving the CPU

60fpswhile scrolling: rAF-batched work, transform-only animation
~60KBone HTML file plus fonts, no build step
AAcolor contrast chosen to meet WCAG AA
0animations for people who turn on reduced motion
The hard part

The first version lagged. I fixed it by removing blur effects, moving all animation to transforms, batching scroll work into requestAnimationFrame, only touching the DOM when state actually changes, and putting the physics loop to sleep when idle. It now holds 60 fps.

05 · Brand & contentDesigned and written by me

A brand people can recognize from a thumbnail.

Bold orange, cream paper, one serif accent. I designed the logo and Google covers, then a 9-post Instagram launch: carousels that teach, reels that sell, and an offer that removes the risk.

IVK Media Google cover
GOOGLE PROFILE COVER
IVK Media logo
LOGO
IVK Media profile picture
PROFILE PICTURE
ivkmedia.sj9 POSTS · 3 REELS · 4 CAROUSELS
Post: the offer
Post: makeoverCAROUSEL
Reel: meet IVKREEL
Post: Google checklistCAROUSEL
Reel: review standREEL
Post: no website
Reel: Google your shopREEL
Post: 12 vs 418 reviewsCAROUSEL
Post: pricingCAROUSEL
What it taught me
Beyond the code

Code is one part of a product. The rest is the offer, the story and the trust.

Ship end to end

Domain, DNS, email, hosting and launch, not just a pretty page on localhost.

Design for a real customer

A shop owner doesn't care about frameworks. They care about the phone ringing.

Performance is a feature

A beautiful site that lags feels cheap. Smooth is part of the brand.

HTMLCSS custom propertiesVanilla JavaScriptSVGCanvas physicsIntersectionObserverPointer EventsNetlifyBrandingContent design
↑↓ NAVIGATE↵ OPENESC CLOSE