PermanentDesigns Website

Overview

I am excited to share my latest project - a WordPress website I built for PermanentDesigns, a tattoo and eyebrow artist. The website is designed to showcase the artist's work and to make it easy for clients to book an appointment. As a frontend web developer, I enjoyed working on this project, as it allowed me to improve my design skills as well as practice frontend dev skills. Following is an overview of the project and a look into my process when building the website.

Project Goals

The main goal of this project was to create a simple, fast website that would allow clients to view PermanentDesigns' work and easily book an appointment. With this in mind, I designed a minimalist layout that allows the artist's work to take center stage. The website is also optimized for speed, ensuring that clients can view the artist's work without any delays. To further simplify the process of booking an appointment, I included a contact form that allows clients to send a message directly to the artist. These goals were critical in ensuring that the website met the needs of the client and provided an excellent user experience for visitors.

Tech Stack Used

Next.js

For this project, I decided to use Next.js, my preferred React framework. With Next.js, I was able to build a statically generated site that loads quickly and doesn't require server-side code. This approach was essential to creating a website that would load quickly for users and ensure that the website remained fast and responsive even as traffic increased.

TailwindCSS

To streamline the design and development process, I chose to use Tailwind CSS, which I have been loving lately. With Tailwind CSS, I was able to quickly create a clean and minimalist design. Using Tailwind also made it easy to create a responsive design that looks great on a wide range of devices.

Netlify

Finally, to deploy the website, I used Netlify, a cloud-based hosting service that offers automatic deployment from a GitHub repository. This allowed me to push changes to the website quickly and easily, as the changes are automatically deployed to the live site without any additional effort on my part. Netlify also provides features like HTTPS, continuous deployment, and version control, making it my go-to choice for hosting static websites.

Lessons Learned

One key lesson from this project was the importance of image optimization for load times. Since the website was designed to showcase the artist's work, I knew that high-quality images were critical. However, I also knew that large image files could slow down the website's load time, negatively impacting the user experience. This project provided good practice in optimizing for load time. Fortunately, Next.js has built-in image utilities that automatically generate various sizes of images that the browser can choose from. I also used the .webp format to further decrease file size. This optimization process was crucial in ensuring that the website remained fast and responsive even with high-quality images.

Summary

I’m very happy with how this project turned out. By using Next.js, Tailwind CSS, and Netlify, I was able to create a website that is fast, responsive, and does what it set out to do. In addition, the minimalist design hopes to highlight the artist’s work. In summary, this project was a great experience that allowed me to practice my skills as a frontend web developer and create a website that met the client's needs while providing a great user experience for visitors.