The brief
Northwater Lodge is a fictional resort in Minnesota's Brainerd Lakes area. I built it as a portfolio piece to explore a more considered approach to hospitality websites: strong photography, enough space to enjoy it, and useful details close to the point where a guest needs them.
The visitor has two questions. Does this look like the kind of place I want to spend a weekend? And which cabin fits the people coming with me? The page answers them in that order.
Start with the place
The opening screen is a lake at sunset, with the dock leading into the photograph. Large serif lettering gives the page its character; the smaller navigation and practical details use a clean sans serif. Deep pine green and warm paper tones continue through the cabin collection, planner, and footer.
The writing stays close to an ordinary trip up north: coffee on the dock, a book on the porch, room for everyone at breakfast. Short sections leave the photographs room to do their work.
I used real photography and kept the photographer credits in the site. These images establish the mood of the concept; they do not document one operating resort.
Make the next decision easy
The three stays have different capacities: the Pine Cabin for two, Cedar Suite for four, and Shore House for six. Guest counts and bedroom details sit beside the names, so visitors can narrow their choice without opening every option.
Each cabin opens into a detail view with its description, amenities, and an illustrative nightly rate. From there, the guest can explore dates. The planner checks the date range, filters cabins by party size, and calculates a sample total for the chosen number of nights.
The same planner is reachable from the header and the date strip. It gives the page a complete browsing journey while keeping its limits clear: this is a demonstration, with no real availability, reservations, or payments.
Keep the feeling on a phone
The mobile layout keeps the photograph and headline prominent. Cabin cards become a single column, navigation moves into a compact menu, and the planner rearranges its controls for a narrow screen. The screenshots below include the actual page rendered at a 390px responsive width.
Movement is restrained: a slow entrance for the opening photograph, small hover responses, and sections that appear as you reach them. Reduced-motion preferences turn those effects off. Native dialogs support Escape dismissal and focus handling; the gallery and experience tabs also support keyboard navigation.
Build for a light page
The public demo runs on plain HTML, CSS, and JavaScript. It needs no client framework or animation library. Images use compressed WebP files, with smaller versions for narrow screens. Below-the-fold photographs load as they approach the viewport, and fonts are served locally.
Those are deliberate implementation choices, rather than a claim about a performance score. The desktop and responsive layouts were inspected in the browser, along with the navigation and stay-planning views. No Lighthouse score or client booking results are claimed for this concept.
The finished piece
Northwater is a complete hospitality website concept: a visual identity, responsive landing page, cabin detail views, working sample planner, interactive experience section, photo gallery, and practical FAQs. The case study and demo are published together on SwansonX so the design can be read about and tried in the same visit.
