My first freelance project, where I had the opportunity to oversee every aspect from design to development. While my main focus has always been on development, I decided to step out of my comfort zone and embrace the challenge of taking on the design responsibilities as well. It was an intensive journey that demanded a lot of effort and creativity, but I take immense pride in the final outcome I was able to achieve.
During my time living in a small seaside town, I had the pleasure of hosting some friends for a summer getaway. To my surprise, the hotel they stayed at had an incredibly outdated website that desperately needed a revamp. Recognizing the potential for improvement, I took the initiative to contact the hotel owner and offer my services as a developer. Thankfully, they were receptive to my proposal, and I eagerly took on the project. Starting with wireframes, I meticulously refined the design based on feedback, before diving into the development phase. It was a rewarding experience to witness the transformation of the website from its initial state to a polished and modern online presence.
Design Challenge
The design aspect was new and challenging for me, but also exciting. To create a visually appealing logo for the client's business, I collaborated with a logo designer and made necessary revisions until we achieved a great logo. Drawing inspiration from Dribbble and Behance, I spent weeks working on the design in Figma, going through several rounds of feedback and revisions to ensure the client's satisfaction. Once the design was finalized, I proceeded with development.
Problems & Solutions
Nuxt.js was my framework of choice as it provided an "out-of-the-box" solution with excellent documentation and features. Considering the client's request for extensive visual content, I implemented smart strategies. This involved applying lazy-loading techniques for images and lazily loading/initializing the maps module using Intersection Observer.
Image optimization played a crucial role in achieving optimal website performance. I utilized various loaders for image transformations, converting to the WebP format, and employed the picture tag to deliver the best possible image based on the user's viewport. Additionally, I combined SVG logos into an SVG sprite and injected them into the DOM. To further optimize the website, I utilized techniques like code-splitting, preloading, and prefetching.
Achieving great performance required extensive Webpack configuration and fine-tuning of Nuxt modules. During this process, I gained a deep understanding of how loaders, modules, and plugins work. I delved into HTML tags like "picture" and "source", as well as attributes like "srcset" and "sizes", learning how to utilize them effectively. This experience led to my first open-source contributions, including configuration enhancements to the @nuxt/svg-sprite-module and @nuxt/svg-module as well as adding support for the picture tag in the vue-cool-lightbox library.
The reviews module posed a unique challenge as the API for retrieving reviews was not available. To overcome this, I utilized Cheerio, a powerful HTML parsing library, to extract the necessary data from a maps service. To ensure the reviews are always up-to-date, I implemented a custom script that runs during the build process and automatically updates the reviews, ensuring the website consistently reflects the latest feedback.
Furthermore, the website features a fully validated booking form. I implemented a custom PHP script to validate the form fields and added an extra layer of security by integrating reCAPTCHA v3. This ensures that the form submissions are not only validated but also protected against potential bots and spam. Once the form is submitted, a notification with the booking details is sent to the client, providing a seamless and secure booking experience.
I had the opportunity to be part of an ambitious startup that was dedicated to revolutionizing the world of translations. Joining the team during the project's mid-development phase, my responsibilities encompassed various tasks, including the development of a chat module for smooth client communication, migrating the app to TailwindCSS, ensuring responsiveness across different devices, as well as crafting visually appealing landing pages and emails. Despite our collective efforts and the promising potential of the app, the challenges of funding and intense competition led to the closure of the project shortly after its release.
A tabletop games companion app. As an avid player of Dungeons & Dragons, I joined the development of this project in my spare time. What once began as one person's endeavor has now grown into a collaborative effort with a team of passionate enthusiasts. Together, we are building a comprehensive companion for tabletop games, catering to a thriving community of players and visitors. It's a labor of love that combines my passion for D&D with my frontend expertise, and I'm excited to contribute to the growth and success of this project.
Formulas creator app. During my trip around Southeast Asia, I encountered the recurring challenge determining the most favorable money exchange options — whether it was cash, card, or cryptocurrency. Inspired by this need, I developed this app as a solution. It allows you to create and save personalized formulas, name variables and expressions, and conveniently reuse them whenever required. Moreover, you can easily share your formulas with others who might find them helpful. To enhance usability, I implemented PWA support, ensuring that you can access the app even offline.
