One of the most beautiful places in the world is, without a doubt, Hawaii. Its culture, its geography, its history… In short, there are countless reasons why we can affirm this. And one of the things we can associate Hawaii with is surfing: from incredible surfers to its fascinating beaches, Hawaii is one of the perfect spots to surf. This website is a tribute to surfing in Hawaii.

To create this page, we used the main stack: Node, Next, React, TypeScript, and Tailwind CSS. The code was written using Visual Studio Code. For the images, I used Lummi. On the other hand, to obtain climate and weather data, I used OpenWeatherMap. Finally, the page was launched using Git and Vercel. Regarding the layout, the website has 4 pages: Home, About, Gallery, and Weather. The color palette is warm and welcoming, symbolizing and paying tribute to a Hawaiian style. The typography is elegant yet subtle.

This is the main page of the site. We can see the hero image, generated with Lummi, as well as the different buttons. On the other hand, we have the navigation bar with the different pages of the site, which has a transparent and fixed effect when browsing the site. It is also important to highlight on the right side the option to listen to instrumental background music while navigating the page, inspired by Hawaiian melodies.

In addition, we also have the Footer, which contains links to the different parts of the page, as well as a bit of welcoming text. The background color, a navy blue, blends well with the typography and palette of the Footer.

In this section, we have two columns: on the left, an introductory text about the topic of our project. On the right, a wonderful image reflecting how the city meets the ocean. In the words of the British singer Dido, ‘I've always thought that I would love to live by the sea’.

In this section, we have a series of images that can be viewed in a ‘Carousel’ format. We drag the images with the mouse, which reflect different points of the island. For this, we inserted the command embla-carousel-react in the Visual Studio Code terminal. In this section, the background color changes to the same color as the Footer, a navy blue.

The most important section of the page is without a doubt the most essential when going to the beach. Here we have a small weather forecast related to two key points in a surfer’s life: Honolulu and North Shore, both in O’ahu. Here we see the temperature, humidity, and wind speed: three important elements when heading to the beach. To achieve this, I used the OpenWeatherAPI, and chose two important places in O’ahu. We can interact between both locations by clicking the corresponding button. There is also another button to return to the main site. The background, on the other hand, is not a solid color but an image.

This is the eighth page of my series Adventures Around the World, and without a doubt it is the one that has brought me the most fun so far. The possibility of including the weather forecast and also the carousel in the photo gallery have been two highlights in terms of project development. However, it is truly the topic, Surfing in Hawaii, that I most enjoyed working on. It has been a real pleasure to build this website.

Check it out!

https://surfing-hawaii.vercel.app/