Meltemi Houses

Overview

Meltemi Houses is a self-initiated concept: a fictional brokerage in Ermoupoli, Syros, selling stone houses across the Cyclades. The brief was a premium one-page site that belongs to its place, not to a real-estate template. The meltemi, the north wind of the Aegean summer, became its central idea.

The challenge

• Present four very different properties, from a €260,000 farmhouse to a €1,150,000 contemporary house, on one page.
• Speak Greek first, and work just as well in English, German and French.
• Explain to buyers from abroad how buying in Greece actually works.

Design

A cool grey-green background, a deep sea-blue section and a sparing honey accent. Gloock sets headlines, Hanken Grotesk the body, Geist Mono the labels; Greek letters come from close companions (Noto Serif Display, Manrope, JetBrains Mono), so the typography holds in every language. Photography was generated in Higgsfield from one brief. The signature detail is a wind rose on every listing: which way the house faces, where the meltemi comes from, and a plain verdict such as "Exposed. Plant a windbreak before you plant anything else."

Motion

• A sea-blue intro draws the compass ring while faint gusts cross the screen;
• the needle swings, overshoots and settles on north as the wordmark rises;
• once the hero photo has loaded, the screen lifts and the page rises into place.

Listing needles swing to their bearing on scroll. The intro plays once per session and respects reduced motion.

Features

• Wind-rose diagrams: drawn from a single bearing per listing.
• Buying in Greece: five steps, from the tax number (AFM) to the final deed and 3.09% transfer tax.
• Four languages: Greek by default; prices, numbers and even the compass letters follow the language.
• Viewing request form: inline validation and confirmation, with no backend in this concept.

Built for every screen

Below 900px the grid collapses to one column and listings stack image-first, with nothing scrolling sideways at 375px.

Performance

Everything, fonts included, is self-hosted, so the page makes no requests to other servers. Images are compressed, lazy-loaded and given fixed dimensions to prevent layout shift.

Tech stack

HTML, CSS, vanilla JavaScript, inline SVG, Intl API, self-hosted Google Fonts, Higgsfield (AI imagery).