My first website

The need

I needed a link to share on LinkedIn with people who wanted to understand more about what I do. My profile provides an initial overview; the website lets me guide interested visitors towards more specific content. Within seconds, visitors should be able to find their way around, recognise the available paths and understand where to go for more detail.

I also had future visitors in mind, once my projects have a story to tell. Potential partners and investors should be able to understand what I am building and follow its progress, including what those projects ultimately deliver. That is why I designed a structure that can accommodate new content without having to be redesigned every time. Future pages can take shape alongside the projects themselves.

This was my first time building a website. I organised the work using the same method I apply with clients: clear requirements, reasoned decisions and checks before publication. Claude handled development; I set the rules, evaluated proposals and tested the solutions. For the visual design, I worked on the actual website, switching themes on and off at different levels, and assessed the results on my two monitors and phone. I published only what I had already previewed.

Constraints

I set a few boundaries from the outset: free hosting, no database and no cookies. WCAG 2.2 AA accessibility and visual quality had to go hand in hand. Content must remain readable even without JavaScript, and the website must work well on iPhone and iPad. I planned for eight languages, including right-to-left Arabic and Simplified Chinese.

Forks in the road

1. Choice

   The homepage starts with a 3D tile selector. On less powerful computers, it automatically switches to simple cards, while on phones it becomes an app-like grid of icons.

   Discarded alternatives

   Tiles arranged in a ring; classic menu only.

   Reason

   The first screen needs to orient visitors immediately and make the next step clear. The presentation adapts to the device, keeping navigation fast even when resources are limited.

2. Choice

   The contact form requires email confirmation. I receive the message only after the sender opens the link they receive.

   Discarded alternatives

   Email address published on the page; paid form service.

   Reason

   Confirmation prevents the form from being used to send emails to strangers in my name. I have kept the data within tools I control.

3. Choice

   I built my own editor on the test site to update content, accessible through a code sent by email. Every change generates a preview that I review before publishing.

   Discarded alternatives

   CMS with a database; manual file editing.

   Reason

   I can update the text without touching the code. The preview lets me check the result before a change goes public.

4. Choice

   Each text is managed as data separate from the code, with a version for each of the eight languages. If a translation is missing or a menu item exceeds the available space, the build stops.

   Discarded alternatives

   Text embedded directly in pages; external CMS.

   Reason

   I can update a sentence or add a language without changing the code. The checks catch missing translations and menu items that are too long before publication.

5. Choice

   The starting point was a matte black business card with gold foil. I translated it into a polished black central tile, with a gold icon set into its surface and a red glow emerging from behind the edge, like a box opening. Elegance, luxury and lust were the guiding words. I researched award-winning websites, drew inspiration from the atmosphere of movement and light on ciaoenergy.com without copying its design, and compared the result with a test version built with Lovable. That comparison led me to keep the red background glow. Red remains a light effect or indicates the active page, while all clickable elements share the same lacquered finish.

   Discarded alternatives

   White icons; flat gold; veined marble, tested and then removed; images on tiles; dot-based navigation.

   Reason

   I wanted a recognisable visual identity before visitors even started reading. I kept surfaces, lighting and colours consistent, giving each element a precise purpose. The tests helped me identify which solutions supported this direction and which made the overall design less cohesive.

6. Choice

   For the user experience, I consulted Nielsen Norman Group, W3C guidelines on menus and accessibility, and guidance on carousels, including recommendations for arrows beneath the tiles. On internal pages, for example, menu items remain visible on desktop because hidden menus are used far less often.

   Discarded alternatives

   Decisions based solely on personal taste.

   Reason

   I wanted decisions affecting navigation to be backed by documented guidance. I used the available recommendations to determine how visitors reach content and interact with interface elements.

Result

The website is live in eight languages. Automated accessibility checks report no errors on any page. After optimisation, the 3D homepage is 57% lighter in terms of page weight. Every change triggers automated tests across all pages, including checks at iPhone and iPad screen sizes.

The tests don't cover everything, and it's important to be clear about that. I tested the website manually on iPhone and iPad. I also tested it using Chrome and Firefox; Safari on Mac has not been tested systematically. Some tests on phones and tablets are carried out in simulated environments. The translations are currently automated; at a later stage, I'll use professional translation services.