Back
HomesByGabbie mark, a house outline drawn as a letter G
Playground•HomesByGabbie

A property manager’s resume, rebuilt as a place worth visiting.

Gabbie has spent nine years keeping multifamily communities running in New Jersey and Georgia. I wanted her site to read like a listing for a good apartment: warm, calm, and easy to act on. It’s a single hand-built page with no framework, and her brand mark draws itself in while it loads.

Type
Personal Website
Role
Design & Front-end
Stack
HTML, CSS, JavaScript

The Site

One page, top to bottom.

Four sections after the hero: About, Experience, Education, Contact. A recruiter or a property owner should be able to skim it in under a minute and know whether to call.

HomesByGabbie hero: 'Smile to your new home.' beside an arched portrait of Gabbie
Hero. The headline borrows the brand's tagline, and the arch frames her like a doorway.
About section with a black and white apartment building photo and a two-column skills list
About. A real multifamily building sits next to the skills list, so it never reads as abstract.
Experience section on dark navy with an accordion of three roles, the first one open
Experience. One role open at a time, each with its company mark.
Education and certifications section with three entries
Education & certifications.
Contact section with email, phone, LinkedIn and resume download
Contact. Every way to reach her, plus the resume, in one row.

On a Phone

The call button never scrolls away.

Most people who’d hire a property manager will find her on their phone. On small screens the portrait moves above the headline, and a dock with Call, Email, LinkedIn and Resume stays pinned to the bottom the whole way down.

Mobile hero with portrait and the pinned contact dock
Hero with the contact dock
Mobile About section
About
Mobile Experience accordion, first role open
Experience
Mobile Contact section
Contact

Brand Kit

Navy, blush, and a house that’s also a G.

The palette comes from her existing brand assets. The mark is a single stroke, so it animates as a line drawing on the preloader and still holds up at favicon size.

HomesByGabbie logo construction sheet: the mark on a grid with its 9:16 frame, shared axis, 29° roof pitch and 14° floor slope, a six-part anatomy legend, clear space, minimum sizes and three color versions
Construction sheet. Every slant in the mark follows the roof’s pitch, and the chimney and the G’s stem share one vertical axis.
HomesByGabbie mark in teal, as in the site header
HomesByGabbie mark drawing itself in, as on the preloader
Navy ink#0E232E
Paper#F7F3EF
Blush#EFC8BE
Blush deep#B9776A
Mark teal#5C93A0
Stone#5C544D
Display · Instrument Serif

Smile to your new home.

Body · Outfit

Needs handled quickly and professionally, maintenance addressed before it becomes a complaint.

YardiRentCafeMicrosoft ExcelMicrosoft WordMicrosoft Outlook

The tools she works in every day, as they appear in the scrolling strip under the hero.

Decisions

Small site, a few deliberate calls.

01

Plain HTML, on purpose

One HTML file, one stylesheet and about 130 lines of JavaScript. She can host it anywhere, it loads fast on a phone, and nothing breaks when a dependency updates.

02

Motion that respects people

Sections fade up as you scroll and the buttons lean toward your cursor. If your device asks for reduced motion, all of it switches off and the preloader skips its wait.

03

Experience as an accordion

Three roles with a lot of bullet points would be a wall of text. Only one opens at a time, so you pick the job you care about and the rest stays out of the way.

04

Contact is never more than a tap away

The hero's main button starts an email, the nav has the resume, and on phones a pinned dock keeps Call and Email under your thumb.

Closing note

It’s live. Go have a look.

Screenshots only show so much. The preloader, the marquee and the accordion are all better in person, and it’s worth opening on your phone too.