01
Typography
Local copies of DM Serif Display for display language and Manrope for interface/body copy.
Home, Design & Construction
Harbour & Hearth
Harbour & Hearth is a premium, fictional home-care agency website created as a portfolio demonstration. It is designed for adult children, partners, and older adults who are beginning to navigate changing routines at home.
Home, design, and construction websitegatehome
Visit live website ↗harbour-home-care.vercel.app
Project type
Home, design, and construction website
Industry
Home, Design & Construction
Experience
Responsive web experience
Availability
Live deployment
Project overview
Inside the Harbour & Hearth experience
Harbour & Hearth is a premium, fictional home-care agency website created as a portfolio demonstration. It is designed for adult children, partners, and older adults who are beginning to navigate changing routines at home.
The build intentionally avoids fabricated reviews, ratings, certifications, award claims, medical promises, and client stories. All people, caregiver profiles, locations, services, resource articles, and consultation submissions are demo content unless stated otherwise.
The chosen direction is Tidal Ledger, an Ocean Night editorial system informed by maritime charts, quiet domestic documentation, and high-key documentary home photography. The website uses the requested core dark palette—071C24, 0E2B35, 16404A, 7CC8C2, and F5FBFA—with a semantically equivalent light mode. Harbour Mint is deliberately limited to primary action, active-state, focus, and navigational signals.
Experience details
Key features and interaction highlights
02
Structural motif
A narrow coastal ledger rail, section numbers, marginal annotations, and one-pixel Harbour Mint tide rules.
03
Signature interaction
A scroll-led before/after care canvas on larger screens with a direct touch slider at phone width.
04
Component language
Crisp 2–6px geometry, horizontal rules, intentionally asymmetric media, and modest control radii.
05
Themes
Semantic CSS tokens supply consistent dark and light modes through the existing ThemeProvider.
06
Motion
Framer Motion handles editorial entrances, local state changes, the care canvas, and reduced-motion behaviour.
Visual gallery
Desktop details and mobile experience
Three genuine captures from the live deployment show the opening view, an interior content section, and the responsive mobile composition.
Build characteristics
Technology and delivery signals
Labels come from project documentation where available; conservative delivery characteristics are used when a repository does not specify its stack.
ReactTypeScriptViteTailwind CSSFramer MotionWouterRadix UI
Project FAQ
Questions about Harbour & Hearth
What is Harbour & Hearth?
Harbour & Hearth is a premium, fictional home-care agency website created as a portfolio demonstration. It is designed for adult children, partners, and older adults who are beginning to navigate changing routines at home.
Who is the Harbour & Hearth website designed for?
Harbour & Hearth is a premium, fictional home-care agency website created as a portfolio demonstration. It is designed for adult children, partners, and older adults who are beginning to navigate changing routines at home.
What does the Harbour & Hearth experience include?
The documented experience includes typography, structural motif, signature interaction, component language. The live website shows the complete interface and interaction flow.
Can I view Harbour & Hearth online?
Yes. Use the “Visit live website” link on this page to open the current public deployment.
