Web Development

The Towns at Old Fourth Ward

A single-page marketing site for a boutique 31-townhome community in one of Atlanta's most sought-after neighborhoods — built from scratch and deployed on Netlify.

Overview

A developer in Atlanta needed a site before their 31-unit townhome community went to market. They had everything: brand direction, photography, floor plans, copy, a reference site. What they needed was someone who could take all of it and build something that stopped a buyer mid-scroll.

I came by referral. The contact knew me not as a developer, but as an apparel designer, business owner, and someone with years in sales and marketing. The brief was simple: we trust your eye, build us something good. This was my first fully coded website.

The goal: A clean, fast site that takes a buyer from first look to form submission — before the community opens.

The Challenge

The site had one job: make someone — standing in a sales office or scrolling at 11pm — feel like they already live there.

The photography was beautiful but heavy. Four floor plans needed to be browsable without cluttering the page. And the whole thing had to work on mobile — where most real estate browsing happens — without feeling like an afterthought.

Key requirements

  • Mobile-first design for buyers browsing on phones
  • Floor plan viewer supporting four distinct plans, each with three levels of imagery and a downloadable PDF
  • Integrated lead capture wired to the listing agent's inbox with zero back-end infrastructure
  • Image optimization to keep load times low despite large-format property photography
  • Clean, minimal aesthetic that felt elevated without feeling cold

Approach

I started with the client's reference site and stripped it to its bones: what does a buyer need, and in what order? The answer shaped everything — impression, features, floor plans, neighborhood, contact. Before writing a line of code, I built a Figma prototype for the client to approve.

Figma prototype frame showing the hero section with full-bleed exterior photography, logo, and navigation
Hero section from the Figma prototype — full-bleed exterior render, logo, nav, and headline. Presented to the client for approval before build.
Figma prototype frame showing the floor plan accordion with three floor levels visible
Floor plan section from the prototype. Specs and plan count were refined during development — the interaction pattern carried through unchanged.

For the build, I used Bootstrap with custom CSS. It was my first project — Bootstrap gave me a solid structure to work from while I focused on the design.

The most interesting problem was the floor plan section.

The floor plan interaction

Four plans. Three levels each. The challenge was making twelve floor plan images browsable without burying the page.

Plans sit under an accordion — one open at a time, defaulting to Plan A on load. Within each plan, the three floor levels are navigable via a horizontally scrollable container: CSS overflow-x, scroll-snap-type, and scroll-snap-align. Each level snaps into place as the user swipes. No JavaScript needed.

The page stays clean. Buyers get the full picture without the scroll fatigue.

Desktop floor plan view — accordion with one plan open, three floor levels visible side by side
Desktop — all three floor levels displayed side by side within the open plan.
Mobile floor plan view — scroll-snap between floor levels, dots and peeking next level visible
Mobile — one level at a time, swiped horizontally with scroll-snap. Dots and peeking edge confirm the interaction.

What I built

  1. Page structure organized around buyer decision stages: impression → features → floor plans → neighborhood → contact
  2. Netlify Image CDN for automatic WebP/AVIF conversion on all property photography
  3. Accordion floor plan viewer with CSS scroll-snap navigation between floor levels — no interaction library
  4. Netlify Forms for zero-backend lead capture, wired directly to the listing agent

Results

The site launched and the client has been using it since. Leads are coming in through the Netlify dashboard. The form works.

Desktop Lighthouse scores reflect a clean build. Mobile tells a different story — and it's worth understanding why.

100 Best Practices — desktop
97 Accessibility — desktop
91 SEO — desktop
29 Performance — mobile (in progress)

The numbers: LCP 9.0s, FCP 7.2s, CLS 0.961 — nearly ten times the threshold for "poor." Images without defined dimensions made the layout jump as they loaded. Bootstrap's render-blocking resources pushed paint times out further. The site works. On mobile, it makes users wait.

PageSpeed Insights desktop scores: 83 Performance, 97 Accessibility, 100 Best Practices, 91 SEO
Desktop Lighthouse scores — 100 Best Practices, 97 Accessibility, 91 SEO, 83 Performance.
PageSpeed Insights mobile scores: 29 Performance, with FCP 7.2s, LCP 9.0s, CLS 0.961
Mobile Lighthouse scores — a 29 Performance score driven by CLS of 0.961 and render-blocking Bootstrap resources.

Reflection

The performance issues point directly to the tool I chose. Bootstrap made sense at the time — it was my first project, and the structure let me focus on design. But it loads a full CSS and JavaScript bundle whether you need most of it or not. For a site this simple, that's dead weight. On mobile, dead weight shows up as seconds.

The CLS problem is separate: images without explicit width and height give the browser nothing to reserve, so the layout shifts as they load. Fixable — but it still needs doing.

If I built this today, I'd do it the way I built my portfolio — vanilla HTML, CSS custom properties, just enough JavaScript. No framework. Full control. The lesson wasn't theoretical. I applied it on the next project.