Josh Ramirez
← Field guide

Entry 17 of 23

Departed Summer 2024

a Center City apartment buildingWeb appShipped
Spruce Tower project composite — historic brown-brick Philadelphia apartment building on the left, two photorealistic gym render angles on the right, and a dark Spruce Tower logo card with gold line-art mark overlaid in the center
The building, the mark, and the gym renders in one frame.

Departure

Math exam Friday morning, home by noon, Alex in the passenger seat, family CRV pointed at Philadelphia by evening. The client was Spruce Tower — a tall historic brown-brick apartment building on a Center City corner with a gold line-art logo and no real web presence. Two deliverables, one trip: a React marketing site for sprucetower.com and a set of photorealistic Blender renders of the building's gym for the amenities page. Four days on the ground, $200 on the way out.

Approach

5 tools

  • React
  • Tailwind
  • Blender
  • DreamHost
  • JavaScript

Four days on site, $200 fixed, two disciplines (Blender renders + React site) for one client.

Field log

7 entries

  1. Day 1 — drive up

    Math exam at 8 AM, dropped the textbook at home, picked up Alex, CRV pointed northeast. "light years" by John Summit on CarPlay, guardrail and rolling farmland past the windshield for hours, then Philadelphia City Hall framed dead-center as the city closed in.

    Photo from inside the family Honda CR-V on the highway up to Philly — dashboard screen on Apple CarPlay playing 'light years' by John Summit while a FedEx truck and green roadside trees pass outside the windshield
    CarPlay, John Summit, farmland out the windshield.
    Photo through the windshield approaching Philadelphia City Hall — Broad Street traffic leading toward the clock tower under heavy clouds, framed by tall Center City buildings
    City Hall dead ahead. The trip became real there.

  2. Day 1 — meet the building

    Got the keys, walked the block. Spruce Tower is a tall historic brown-brick apartment building on a Center City corner — many windows, ornate cornice, gold line-art building silhouette on a dark grey logo card. The brief was the brand: keep it serif, keep it gold, photograph the brick.

    Exterior photo of Spruce Tower — tall historic brown-brick apartment building on a Center City Philadelphia corner, with ornate cornice details, rows of white-trim windows, and blue sky overhead
    The building and the mark.

  3. Day 2 — gym in Blender

    Measured the amenities room in the morning, pushed it into a grey untextured Blender viewport the rest of the day. Two treadmills against the windows, dumbbell rack along the wall, weight bench, mirror. No textures, no lights — just geometry that matched the room.

    Blender viewport screenshot of the Spruce Tower gym model — grey untextured room with two treadmills by the windows, cable machine, bench, dumbbell rack, mirror, ceiling lights, and camera selected in the outliner
    Day 2: just the geometry.

  4. Day 3 — photoreal renders

    Lit the scene against the real amenity photo. The actual gym had the mirror, dumbbell rack, bench, green turf, and hard ceiling panels; the Blender pass had to sell the same room before the site had polished photography to lean on.

    Final real amenity photo of the Spruce Tower gym — bright white room with mirrored wall, cable machine, weight bench, dumbbell rack, exercise bike, green turf, and pale green wall graphics
    The real amenity room.
    Photorealistic Blender render of the Spruce Tower gym — black weight bench in the foreground, dumbbell rack and mirror behind it, ceiling light panels above, and treadmills reflected in the mirror
    The Blender render built to stand in for it.

  5. Day 4 — React homepage

    React + Tailwind. Homepage hero looking straight up the brick from the street, serif title overlay: "WELCOME TO SPRUCE TOWER APARTMENTS. HISTORIC CHARM MEETS MODERN LIVING IN CENTER CITY." Brand carried — gold accents, dark slate type, the renders dropped into the amenities section below.

    sprucetower.com homepage hero screenshot — dark navigation bar with Spruce Tower logo and leasing links over a low-angle building photo, with large white overlay text reading 'WELCOME TO SPRUCE TOWER APARTMENTS' and 'HISTORIC CHARM MEETS MODERN LIVING IN CENTER CITY'
    sprucetower.com — the homepage hero.

  6. Day 4 — interactive Center City map

    Built a togglable map of the surrounding blocks for the leasing pitch — pins for Restaurants, Coffee, Bars, Parking, and Hospitals, each filterable from a row of category chips. The point: prove the neighborhood without making anyone leave the page.

    sprucetower.com interactive neighborhood map screenshot — Google map centered around Spruce Street with colored pins, Spruce Tower marker, and a right-side panel listing Restaurants plus collapsed Coffee, Bars, Parking, and Hospitals sections
    Neighborhood, on the page.

  7. Ship — DNS and drive home

    Pushed the React build to DreamHost, pointed sprucetower.com at it, handed over the renders. $200 in. Drove home with a live URL on my phone.

From the gallery

3 figures

Windshield photo approaching Philadelphia City Hall on Broad Street, with traffic ahead, tall buildings on both sides, and stormy clouds over the clock tower
Philadelphia coming into frame.
Spruce Tower logo card — dark gray rectangle with a stylized gold line-art building silhouette and 'SPRUCE TOWER' in spaced serif type
The mark, in isolation.
sprucetower.com Gallery section screenshot — Spruce Tower navigation above a section titled 'The Spruce Lifestyle' with city-view photography and interior apartment and lobby images below
The website gallery section.

What I came back with

$200 contract, 4 days, site + gym renders shipped

sprucetower.com ↗

Lesson from the terrain

Two disciplines for one client in four days bought what a single deliverable wouldn't have — the marketing site needed a hero, the hero needed interiors of a gym that hadn't been photographed yet, and Blender filled the gap before a camera could. Small check, but the framing wasn't: a road trip with a friend turned into seed capital, and the next contract was easier to ask for because this one had a live URL attached to it.

Cross-links