Mentor Harbor Yachting Club
Life on the water, in motion.
- For
- Jonas Club Software
- Role
- Senior Web Designer and Developer at Jonas Club Software
- When
- 2022 to 2024
- Sector
- Yacht club
- Stack
- Kentico, HTML, CSS, jQuery, JavaScript, GSAP, ScrollMagic, CircleType
Captured from the live site in October 2026, with the pinned banner laid flat and the hero film shown as a still. Clients keep their sites moving after handover, so some details differ from the version I delivered.
The brief
Mentor Harbor Yachting Club is a private club on Lake Erie in Mentor, Ohio: floating docks, a pool, a lakefront beach, dining and a lounge over the lake, and a skeet team that keeps shooting through the cooler months. The site had to feel like a summer evening at the harbour and still put membership, events, dining and the weather one click away.
What I did
As Senior Web Designer and Developer at Jonas Club Software, I designed and built it end to end on the club's Kentico platform and wrote the motion myself in GSAP and ScrollMagic. A film of a dinghy race opens the page under a clear, frosted header. Scroll, and the header turns white with a red keyline, the welcome fades in, and the harbour at sunset pins in place for three screens while Experience Life and On the Water drift past each other.
The motion is built so the club can keep editing. The page is made of standard CMS blocks, so one script reads each block's layout and gives it a reveal: text beside a right-hand image fades in from the left, text beside a left-hand image from the right, and each block's photograph is lifted into its own layer so it can settle from a slight zoom as it scrolls past. A block added later picks up the same motion.
Visual concept
Montserrat sets every word, from the menu and the banner lines to the cards and the footer, in two weights: 600 for headings and 400 for text. Its wide geometric letters were drawn from the old signs of a Buenos Aires neighbourhood and hold up over moving pictures. With this much motion on the page, one family keeps it calm.
The colours are the club burgee's. Navy (#0a3161) holds the Member Login block, the buttons and the pennant-shaped footer, red (#b31942) marks the keyline under the header, the social icons and the anchor at the footer's peak, and white carries the rest so the lake photography brings the colour. Charcoal (#2a2a2a) does the reading and tints the photographs under white type.
Palette
- Harbor navy#0a3161
- Burgee red#b31942
- Charcoal#2a2a2a
- White#ffffff
Type
Throughout
Montserrat
Geometric sans
Signature detail
A page that moves with you
The scroll-to-top button is a small piece of craft. CircleType sets Mentor Harbor Yachting Club • Scroll to Top • on a ring around the arrow, and the ring turns with the scroll position rather than a timer, so it spins exactly as fast as you move. A second script checks which section sits under the button and switches it between dark type over white sections and white type, with a white arrow, over photographs and navy.
The harbour banner is a ScrollMagic scene: the photograph pins for three screens while two GSAP tweens tied to the scroll carry Experience Life to the right and On the Water to the left. On phones the pin and the ring switch off, and the page simply scrolls.
The inner pages put their text on frosted glass: white at 26 percent with a 7.2 pixel blur and a hairline white border, overlapping the photograph beside it so the picture runs on under the card. The header is frosted the same way over the film.
The homepage, section by section
- A clear header over a film of a dinghy race: the burgee, the menu, red social icons and a navy Member Login block. It turns white with a red keyline once you scroll.
- MHYC, set large and faint, over two photographs that fade into the page at their edges: a sailboat at sunset and two Adirondack chairs on the beach.
- The welcome behind a navy rule, and a Discover More button.
- The harbour at sunset, pinned for three screens while Experience Life and On the Water drift past each other.
- Six photo links in two rows, each with a zigzag pattern and a hairline frame offset behind it: Apply for Membership, Events & Activities, Visit MHYC, Venue for Hire, Dining & Bar, Weather & Webcams.
- A navy footer shaped like a pennant, with a red keyline, the anchor at its peak and a ship's wheel watermark.
3 questions about Mentor Harbor Yachting Club, answered
What was Arvind's role on Mentor Harbor Yachting Club?
Senior Web Designer and Developer at Jonas Club Software (2022 to 2024).
What did the work on Mentor Harbor Yachting Club cover?
Kentico, HTML, CSS, jQuery, JavaScript, GSAP, ScrollMagic and CircleType.
What platform was Mentor Harbor Yachting Club built on?
Kentico 8, the release Jonas Club Software ran its club websites on. It dates from 2014 and was five major versions behind Kentico 13 at the time. Version 8 has no plugins and no themes, so everything beyond the stock templates was written by hand in HTML, CSS and JavaScript.
