/* PortfolioPage — projects with honest placeholders until photography arrives. */ function PortfolioPage({ onNav }) { const { Eyebrow, Button, Divider } = window.DomumDesignSystem_84ba75; const { Photo, PageHeader, InquiryBand, TextureBand, Rule } = window; const [filter, setFilter] = React.useState('All'); const [slide, setSlide] = React.useState(0); const [reveal, setReveal] = React.useState(50); const [dragging, setDragging] = React.useState(false); const [shotIdx, setShotIdx] = React.useState({}); const groups = [ { eyebrow: 'Project One', t: 'The Kitchen, Timelessness recapture', place: "Governor's Mansion Historic District", type: 'Kitchen', ratio: '4 / 3', start: 1, problem: '', d: 'We worked with the structure already there, keeping the plan largely where it was and putting the budget into what shows: timeless millwork details, elevated materials, and a more functional use of the space the house already had.', facts: [['Project', 'Kitchen renovation'], ['Era', 'Dutch Colonial, c. 1902'], ['Materials', 'Marble, walnut, unlacquered brass']], shots: [ { src: './assets/photo-craftsman-kitchen-before.jpg', label: 'Before', alt: 'Kitchen before renovation with navy cabinets, yellow walls, and a laminate island' }, { src: './assets/photo-craftsman-kitchen.jpg', label: 'After', alt: 'Kitchen after renovation with greige cabinetry, marble surfaces, brass pendants, and a walnut work table' }, ], }, { eyebrow: 'Project Two', t: 'The Primary Bath, Rebuilt', place: "Governor's Mansion Historic District", type: 'Primary Bath', ratio: '3 / 4', start: 1, problem: '', d: 'The surround came out for a curbed marble shower with glass and brass, the standalone sinks were replaced by a double vanity under marble giving the space richer detail and a more elevated finish.', facts: [['Scope', 'Primary bath renovation'], ['Fixtures', 'Double vanity, walk-in shower with frameless glass'], ['Materials', 'Marble, limestone, brass']], shots: [ { src: './assets/photo-bath-before.jpg', label: 'Before', alt: 'Bathroom before renovation with oak cabinetry, yellow walls, and a fiberglass shower surround' }, { src: './assets/photo-bath-after.jpg', label: 'After', alt: 'Bathroom after renovation with marble tile shower, brass fittings, and stone checkerboard floor' }, { src: './assets/photo-bath-vanity.jpg', label: 'After', alt: 'Black double vanity with marble top, brass fittings, arched mirrors, and pleated sconces' }, ], }, ]; const pairs = [ { t: 'The Dining Room, Reconsidered', place: 'Spring Street', type: 'Whole-home', before: './assets/ba-dining-1-before-fit.jpg', after: './assets/ba-dining-1-after-fit.jpg', ratio: '1290 / 2003', beforeAlt: 'Dining room before renovation with original wallpaper and empty floors', afterAlt: 'Dining room after renovation with antique tapestry, dark walls, and layered lighting', d: 'The room kept its millwork, doors, and floors. Wall color, lighting, and furnishings were rebuilt around them so the architecture finally reads as the point of the room.', }, { t: 'Light at the Bay Window', place: 'Spring Street', type: 'Renovation', before: './assets/ba-dining-2-before-fit.jpg', after: './assets/ba-dining-2-after-fit.jpg', ratio: '1207 / 1686', beforeAlt: 'Bay window dining room before renovation with dated wallpaper and bare windows', afterAlt: 'Bay window dining room after renovation with linen drapery, sconce, and tapestry', d: 'Drapery, a wall sconce, and a deeper wall tone turned a bright, bare corner into the warmest seat at the table.', }, { t: 'A Kitchen Worth Standing In', place: 'Spring Street', type: 'Kitchen', before: './assets/ba-kitchen-before-fit.jpg', after: './assets/ba-kitchen-after-fit.jpg', ratio: '1021 / 1540', beforeAlt: 'Kitchen before renovation with white laminate cabinets and bare subfloor', afterAlt: 'Kitchen after renovation with stained wood cabinetry, marble counters, brass fixtures, and checkerboard tile floor', d: 'New cabinetry, marble surfaces, open shelving, and a checkerboard floor gave the room the character the house always implied.', }, { t: 'Galley Kitchen, Rebuilt in Character', place: 'Spring Street', type: 'Kitchen', before: './assets/ba-kitchen-2-before-fit.jpg', after: './assets/ba-kitchen-2-after-fit.jpg', ratio: '1600 / 2235', beforeAlt: 'Kitchen before renovation with navy base cabinets, yellow walls, and white laminate counters', afterAlt: 'Kitchen after renovation with greige cabinetry, marble counters and backsplash, brass fixtures, and marble tile floor', d: 'Cabinetry was rebuilt with full crown and paneling, marble replaced laminate, and brass lighting and a farmhouse sink set the tone. A freestanding walnut island keeps the plan reading like furniture, not fixtures.', }, { t: 'Under-Stair Closet, Fully Fitted', place: 'Spring Street', type: 'Storage', before: './assets/ba-closet-before-fit.jpg', after: './assets/ba-closet-after-fit.jpg', ratio: '1200 / 1600', beforeAlt: 'Closet before renovation with exposed sheathing, a single rod, and an unfinished sloped ceiling', afterAlt: 'Closet after renovation with built-in shelving, double hanging rods, and finished painted walls under the stair slope', d: 'The awkward slope became the plan. Built-in shelving, double rods, and finished surfaces turned a raw cavity into usable storage without moving a wall.', }, ]; const trackSet = (e) => { const r = e.currentTarget.getBoundingClientRect(); setReveal(Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100))); }; const projects = [ { t: 'A Craftsman Renewed', place: 'Hillcrest', type: 'Whole-home', tone: 'oak', feature: true, problem: 'A closed-off kitchen, no usable entry, and a family avoiding half their own house.', d: 'Original millwork and proportions retained while the kitchen, baths, and circulation were reworked for how the family actually lives.', outcome: 'Mornings now start in the room they used to walk past.', facts: [['Scope', 'Whole-home renovation'], ['Era', 'Craftsman, c. 1924'], ['Preserved', 'Millwork, stair, windows']], }, { t: 'Light Through Oak', place: 'The Heights', type: 'Kitchen', tone: 'linen', problem: 'Two years of collected ideas and no way to tell what the project should cost.', d: 'A quieter material palette lets the cabinetry and architecture carry the room.', outcome: 'Every dollar went to daylight, storage, and surfaces that will last.', facts: [['Scope', 'Kitchen & butler’s pantry'], ['Materials', 'Rift-sawn oak, limestone']], }, { t: 'The Quiet Study', place: 'Quapaw Quarter', type: 'Addition', tone: 'walnut', problem: 'Nowhere to work from home without taking a room from someone else.', d: 'A small addition that reads as though it had always been part of the house.', outcome: 'A door that closes, and a facade nobody can tell was changed.', facts: [['Scope', 'Addition & millwork'], ['Materials', 'Walnut, plaster, brass']], }, { t: 'Threshold & Passage', place: 'Little Rock', type: 'Renovation', tone: 'oak', problem: 'Guests arrived into a dark hallway stacked with coats and shoes.', d: 'Entry, hall, and stair reconsidered as the sequence that sets the tone for the whole home.', outcome: 'The house now introduces itself properly.', facts: [['Scope', 'Entry, hall, stair'], ['Preserved', 'Original floors']], }, ]; const showFilter = false; const types = ['All', 'Whole-home', 'Kitchen', 'Addition', 'Renovation']; const shown = filter === 'All' ? projects : projects.filter((p) => p.type === filter); const feature = shown.find((p) => p.feature) || shown[0]; const rest = shown.filter((p) => p !== feature); return (
{/* Filter — hidden for now; flip showFilter to true to bring it back. */}
{types.map((t) => ( ))}
{/* Project groups */} {groups.map((g, gi) => { const idx = shotIdx[gi] ?? g.start ?? 0; const set = (n) => setShotIdx((s) => ({ ...s, [gi]: (n + g.shots.length) % g.shots.length })); const shot = g.shots[idx]; const flip = gi % 2 === 1; return (
{String(gi + 1).padStart(2, '0')} {g.type} · {g.place}
{[['\u2190', -1, { left: '18px' }], ['\u2192', 1, { right: '18px' }]].map(([glyph, dir, pos]) => ( ))}
{shot.label}
{g.shots.map((s, i) => ( ))}
00

{g.t}

{g.problem &&

{g.problem}

}

{g.d}

{g.facts.map(([k, v]) => (
{k} {v}
))}
); })} {/* Before / after + in progress, split */}
{(() => { const p = pairs[slide % pairs.length]; return (
{ setDragging(true); trackSet(e); }} onPointerMove={(e) => { if (dragging) trackSet(e); }} onPointerUp={() => setDragging(false)} onPointerLeave={() => setDragging(false)} style={{ position: 'relative', width: '100%', maxWidth: '420px', margin: '0 auto', aspectRatio: '1290 / 2003', overflow: 'hidden', cursor: 'ew-resize', userSelect: 'none', touchAction: 'none', background: 'var(--parchment)' }}> {p.afterAlt}
{p.beforeAlt}
↔
Before After
setReveal(Number(e.target.value))} style={{ display: 'block', width: '100%', maxWidth: '420px', margin: '12px auto 0', accentColor: 'var(--oxblood)' }} />
{pairs.map((r, i) => ( ))}
{[['\u2190', -1], ['\u2192', 1]].map(([glyph, dir]) => ( ))}
); })()}
In Progress

More work underway.

Several projects are currently in design and construction. If you would like to see work that resembles what you are considering, we are glad to share it directly.

); } window.PortfolioPage = PortfolioPage;