Skip to content
All work

Tara Designs

A four-page site for an architecture and graphic design studio.

Role
Design and development
My part
I built the site and chose its typography.
Supplied by
The studio supplied the photographs, names and copy.
Stack
HTML, CSS, JavaScript, Canvas 2D
Elsewhere
Visit the live site
tara-designs-creative.vercel.app
The Tara Designs home page: a near-black page with crimson dots, the white logotype and two buttons, and a tilted glass card holding the studio's logo.
Sheet 01The home page: the glass card tilts toward the pointer.

A-01 / A-08

The idea

Four pages, a filterable gallery and a contact form for an architecture and graphic design business.

A-02 / A-08

The problem

It had to show the real work: fifteen projects in five categories, each opening in a lightbox.

The photographs, names and copy came from the studio; the site had to show them well and make it easy to get in touch.

tara-designs-creative.vercel.app
The top of the Works page: the heading My Work, a row of filter pills (All, Architecture, Graphics, Logos, Frames and Merch) and the first row of the gallery.
Sheet 02The Works page.

A-03 / A-08

The approach

Kept light: plain HTML, CSS and one script shared by all four pages. The gallery is a class toggle and a single lightbox.

The Works page filtered to Architecture, with three captioned tiles: 3-Bedroom Bungalow, 5-Bedroom Duplex and Interior Wall Detail.
Sheet 03The Architecture filter.
The works lightbox open on an architecture render of a two-storey building, captioned Residential Development, with a close button at the top right.
Sheet 04The lightbox.

A-04 / A-08

The decisions

I chose the typography: Fraunces for headlines, Space Mono for the small labels and Inter for reading.

No framework and no build step: plain HTML, CSS and a single script shared by all four pages (it started as several and was merged into one).

The contact form checks what was typed in the page before it sends it to Formspree.

The pointer effects only run for a fine pointer with no reduced-motion setting, and the network of dots was tuned for speed a day after the first version.

A-05 / A-08

The design

A dark, blueprint-like surface with one crimson accent. Sections are labelled like the figures in a set of drawings.

tara-designs-creative.vercel.app
The Tara Designs home page below the hero: the heading What I Do over three dark cards, then a lighter Common Problems band.
Sheet 05Capabilities.
A close crop of the hero text: a spaced mono line naming the two disciplines, the white Tara Designs wordmark and two buttons, See the Work and Start a Project.
Sheet 06Type, up close.
A close crop of the hero's display chamber: a tilted glass card holding the studio's paint-dripping head logo, with crimson ring arcs past its corner.
Sheet 07The display chamber.

A-06 / A-08

The build

Plain HTML, CSS and JavaScript, with a canvas for the network of dots.

Pointer effects run only with a fine pointer and no reduced-motion setting.

It took three days from the first commit to the last: 25 commits between 28 and 30 August 2026.

Pages
Home, about, works, contact
Gallery
15 projects, 5 categories
Forms
Checked, then sent to Formspree
Type
Fraunces, Space Mono, Inter
Source
Private repository
The Tara Designs home page on a phone: a rounded navigation bar, the tilted glass logo card with crimson rings and the top of the white wordmark.
Sheet 08Phone, first screen.
The Tara Designs phone menu open: a dark panel listing Home, About, Works and Contact in spaced mono capitals.
Sheet 09The menu on a phone.
The Tara Designs phone capabilities section: the heading What I Do over three stacked dark cards for Architecture, Graphic Design and Merch.
Sheet 10Capabilities on a phone.
The Tara Designs Works page on a phone with the Architecture filter on, above two full-width tiles: a bungalow render and a two-storey house render.
Sheet 11The gallery filtered to Architecture.

A-07 / A-08

The details

The logo card leans toward the pointer. A crimson spotlight follows the mouse across cards. Dots near the cursor move out of its way.

tara-designs-creative.vercel.app
Three dark cards; the middle one, Your brand looks outdated, leans toward the pointer with a crimson spotlight and the round TD badge.
Sheet 12A card under the pointer.

A-08 / A-08

Current state

It works, and it’s live.

Visit the live site

Next project

Corda

Victor Ohiri