Lyras Maritime, A unique website

At Gooey Creative, I had the opportunity to work on the Lyras Maritime project—a uniquely designed website built on WordPress. This project presented an exciting challenge due to its tight turnaround time, which pushed us to deliver a high-quality product efficiently. The website featured numerous unique intricacies that made it a standout project, with further details explored later in this article.

A unique layout, with a great payoff

Developing this project was particularly challenging due to its unique requirements: an unconventional layout, dual versions of the same website, a newsletter-restricted area, and a substantial amount of content.

Upon entering the site, visitors encounter a splash screen offering a choice between two sections: Lyres Maritime and Orpheus Maritime. Selecting either directs the user to its respective homepage.

The site's distinctive design necessitated extensive custom Sass/CSS, facilitated by Sass for better manageability. Intentional design elements include floating components, text extending beyond containers, overlapping sections, and a persistent shadow effect. A dynamic right-hand sidebar adapts based on user status—whether an admin, a user with requested access to restricted areas, or depending on the current page. Additionally, a left margin adds complexity to the design. It's important to note that this development predated the advent of TailwindCSS, so all styles were handcrafted.

To enhance interactivity, each page features a fade animation, imparting a premium and dynamic user experience.

A key requirement was capturing data from potential clients. The client sought to limit access to certain non-sensitive ship statistics. We implemented a form that accepts a username and password, automatically sending the user a unique access link via email—an efficient solution that avoided external dependencies.

One of the most complex aspects was ensuring responsive design across various screen resolutions. We targeted primary breakpoints (1920px, 1280px, 1024px, 768px, 320px). Despite efforts to maintain visual appeal across all sizes, some intermediate ranges remain less than optimal—a detail that continues to annoy me.

All site content is dynamic; nothing is hardcoded, including phone numbers and ship line details. While inputting this data was meticulous, the client's satisfaction with the final product made the effort worthwhile.