Huron
Valley.

01 / THE BUILDShow the work before asking for the enquiry

Huron Valley is a fictional lawn-care, landscaping, and snow-removal business. I designed its site around two things I wanted visitors to find quickly: examples of the work and a way to get in touch.

The gallery leads. Four paired before-and-after examples introduce the services, followed by six service entries, review-style content, and a service-area list. They belong to the demonstration. They are not evidence of real customer transformations, verified reviews, or enquiries won.

That distinction matters for a portfolio: the work here is the page structure and implementation, not a landscaping business I operated.

02 / THE BUILDKeep the next step near the work

On a phone, the original site keeps two actions in a fixed bottom bar. One opens the phone's calling handler; the other scrolls to the quote form. A visitor can keep looking through the page without returning to the header to find those paths.

The miniature below lets you explore that arrangement without calling anyone. Scroll inside the phone, jump between sections, or use the two action buttons. The panels are diagrams of content slots, not photographs or a recreation of the original site.

The two buttons do different jobs. Reaching a quote form does not deliver an enquiry, and opening a calling handler does not establish that a conversation happened. The documented quote form still needs a delivery backend.

03 / THE BUILDPut repeatable details in one place

The build uses React 19, TypeScript, Vite, and Tailwind CSS v4, with a static deployment on a Cloudflare Worker. Services, gallery pairs, reviews, and contact details are typed records in data.ts.

That gives the layout a shared source for business information. It does not give a business owner an editing dashboard; changes to the records still belong to the code workflow.

My contribution covers the design, development, and deployment of this fictional-business example.

04 / THE BUILDWhat is built, and what is still an idea

The paired gallery and mobile action bar are part of the documented build. Quote delivery and an interactive before-and-after slider are the improvements named in the original article.

The sample on this page explains the action bar. It does not quietly mark either of those improvements as shipped. A real version would also need permitted work photos, genuine business details, and reviewed customer feedback rather than demonstration content.

05 / THE BUILDWhat I would carry into another build

Start with the information a visitor came to see. Then make the next action easy to reach without covering that information.

For this project, that meant a gallery-led layout and a mobile contact bar. The important decision was their relationship—not adding more sections or making the hero larger.