A trip to the countryside is always appealing: it’s a completely different life compared to the big city. This website actually has a bit of a backstory.
About a month ago, I created a mobile app prototype for Android based on a farm in New Zealand. Later, I built a simple website using the basic tech stack (HTML, CSS, and JS) which I then imported into Figma and finally into Framer. The result was a simple but functional site.
However, I wanted to take it a step further and launch my site using a broader selection of languages. To do that, I decided to use Vercel. The reason I didn't use it before was due to a small mishap with verification; I couldn't use my phone, so the project stayed on standby. I've since verified it via email, and I made it happen. So, here is the site!
Design and Tools
To create this application, I used my favorite tech stack: Node, Next.js, Tailwind, TypeScript, and React. Of course, using VS Code goes without saying. The images were generated with Lummi, and to handle form submissions in the contact section, I used Resend. To deploy it, I used Git and Vercel.
You've already seen the hero image for the Home section. Here are some of the visuals I generated using Lummi, which can be seen in the aforementioned section.
Some visuals that can be seen on the Home section
On the other hand, as you can see, I placed a toggle Menu button on the right side, which opens to provide access to the other sections.
The Menu: Once you click the button, you get access to the other sections!
The About section contains information about the farm, along with an image gallery showcasing various elements of the location, such as animals and vegetation. Here are some of the visuals of the gallery.
Lovely farm visuals that can be seen on the About section
In the Game section, there is a small crossword to solve. It consists of five questions whose answers can be found throughout different parts of the site. Additionally, it features a timer that activates as soon as you enter the section.
This video captures the Game, as well as the timer above!
Finally, in Contact, you can leave your name, email, and a message to send. This is powered by Resend.
Contact section - You send the message you want to share!
Final Comment
Creating this site has been a rewarding experience for three reasons. First, the theme is both captivating and peaceful; perfect for building a website. Second, being able to take an old project and elevate it to a new level. And third, finally bringing our work to the web instead of leaving it stored away on a computer. After creating the design, I used Vercel to deploy it!
Link is this:
https://heritage-soil-station.vercel.app/