Welcome To my Portfolio

My Portfolio

Welcome to my portfolio! The main objective of this website is to provide an interactive experience for users, allowing them to easily navigate through a vast amount of information. My focus here is to present this information in a captivating and unique manner.

Throughout the development process, I have created multiple iterations of this website, incorporating trial and error as well as valuable user feedback. To enhance user navigation, I have implemented the use of the mouse wheel, powered by gsap scroll trigger, allowing users to seamlessly traverse through my projects. Additionally, users can swipe through the information by simply clicking the mouse. However, based on user feedback, it became apparent that some users were unaware of these navigation methods. To address this issue, I have included first-time popups that appear when users enter the site, guiding them to click for the next slide, scroll down for the next project, and scroll up for the previous project. The completion of these popups is tracked using session storage, although I acknowledge that this may not be the optimal location for storing this information and may require further consideration.

It's important to note that this website primarily serves as a showcase for my projects, providing minimal information about myself. For a more comprehensive understanding of my background and skills, I encourage visitors to explore my GitHub or LinkedIn profiles.

Welcome To my Portfolio

Thank you for taking an interest in Welcome To my Portfolio! Feel free to have a look at the code or checkout the webiste. If you have any questions, please feel free to reach out to me on LinkedIn.

Take a look at the code Checkout the website

Contes Domestic Electrical Care

Conte's Domestic Electrical Care

In early 2023, I started working on this website with the intention of assisting my step-dad in his aspiration to establish and manage his own home electrical business. Recognizing his ambition and drive, I took it upon myself to support him by utilizing my skills in web development. The goal was to create a professional and visually appealing online platform that would effectively showcase his services and attract potential customers. Through collaboration and combining his industry knowledge with my technical expertise, we worked together to bring this website to fruition.

What I found particularly enjoyable about working on this website, especially considering my primary expertise in backend development, was the opportunity to delve into frontend development and expand my skill set. It was a valuable learning experience to explore the intricacies of creating visually appealing and user-friendly interfaces. Additionally, I took this opportunity to enhance my knowledge of setting up and configuring web servers to meet my specific requirements, utilizing the robust capabilities of Amazon Web Services. This process allowed me to gain a deeper understanding of the technical aspects involved in hosting and managing a website, further enriching my overall proficiency in web development.

The design of this project, much like the approach I take with most of my previous projects, is derived from a combination of aspects that I personally found enjoyable and inspiring on other websites. When starting a new design, I begin by carefully selecting a colour palette that sets the desired tone and atmosphere. Then, I analyse various components from different websites, breaking them down into their individual design elements. From there, I adapt and modify these elements to create singular and unique designs that suit the specific needs of the project at hand. This process allows me to draw inspiration from a range of sources while ensuring that the final design is tailored and adjusted as necessary to achieve the desired outcome.

Tech Stack

Contes Domestic Electrical Care is developed using the Vite framework (Vite) and powered by the Laravel 9 framework (Laravel 9 Framework). For the styling aspect, I predominantly relied on Tailwind CSS (Tailwind CSS) to create visually appealing and responsive designs.

To optimize the usage of icons, I have implemented heroicons in my. Instead of manually copying SVGs into the frontend code, I have integrated a blade heroicons helper kit. This convenient solution enables me to include heroicons as blade components effortlessly.

To enhance the functionality of the contact form and services page, I have incorporated livewire. This powerful tool enables me to create dynamic and interactive components, enhancing the user experience and making the form and services page more efficient and responsive.

This website is hosted on my personal EC2 instance, which runs Ubuntu 22. To deploy the site, I utilize SSH to access the EC2 instance and execute a custom deployment bash script. This script automates the process by pulling the latest changes, setting up the site, building it, and finally replacing the current site with the updated version. If you're curious to explore my deployment script, you can find it on GitHub here.

How'd it go?

When undertaking the Contes domestic electrical care project, I found that diving in and honing my frontend skills was the key to success. Prior to this project, my focus at Enovate had primarily been on backend development, leaving me with limited experience in design and frontend development. However, since this website is predominantly frontend-focused and lacks a complex backend, I had to put extra effort into improving my design skills. To achieve this, I adopted a method of seeking inspiration from seasoned professionals on platforms like Pinterest. I carefully selected design elements that resonated with me and complemented the existing design, and then replicated them using Tailwind.

I believe the overall direction of this project was flawed due to limited guidance from my step-dad, who had little time to provide specific input. Consequently, I had to rely on guesswork to determine the ideal design for an electrician's website. With better planning, I could have engaged in shorter, more focused discussions with the client to ensure alignment on the project's direction. This lack of planning is evident in the non-functional contact form. Since my step-dad never pursued self-employment as initially planned, I did not prioritize making the contact form operational.

Contes Domestic Electrical Care

Thank you for taking an interest in Contes Domestic Electrical Care! Feel free to have a look at the code or checkout the webiste. If you have any questions, please feel free to reach out to me on LinkedIn.

Take a look at the code Checkout the website

Steam Price Prober

About Steam Price Checker

The original intent of the Steam Price Prober was to provide gamers with a comparison of game prices and determine if they were worth the current listed price. As a gamer myself, I am closely involved with the gaming community, which has expressed concerns about the quality of releases in relation to their initial purchase price. Therefore, the initial goal was to give gamers an indication of whether a game release was worth it or not.

However, plans for the website had to be changed due to Steam API guidelines. It became clear that using the API meant I could not provide an opinion that might discourage gamers from purchasing a game. Instead, I had to take a more objective approach. The new approach involved providing gamers with a concise pros and cons list, allowing them to make their own decision on whether a game was worth it or not. This approach allowed me to maintain a similar intent for the project without violating Steam's guidelines.

Users can now visit the website, search for a game, and hover over the results to see the pros and cons. Although the list of pros and cons is not yet complete, further improvements are needed before I am satisfied with promoting the website. Nevertheless, the initial idea is in place.

Developing this website has challenged me to learn how to present a large amount of information in a condensed manner. It has made me consider the importance of a user-friendly interface and a pleasant user experience.

How it works

I have a periodic job, which will retrieve the games list from steam and for each game, a new Game model is created, with the games basic information, which can be used to help retrieve more information about the game via other api end points. So by default, the games name, steam id are all that is stored within the database.

When a game is searched for via meilisearch and scout, the game, and similar games are retrieved. More information of those games is then fetched, and the pros and cons list is then compiled for each game and stored within a separate table within the database. This way only the more complex information of games is stored for the most popular/relevant games, these games are also faster to retrieve, after that initial search, as no more api calls are needed.

The intent was to clear this information periodically as well, in the case that review scores changes or supported platforms are updated, however that is still very much a work in progress.

This site is javascript heavy, in terms of how the results of a search is then presented to the user. I wanted these to be rendered to the client incrementally when each game has been prepared with their pros and cons. I believe this approach, with the implementation of a progress bar is more pleasurable for the end user as they do not have to wait for all the games to be prepared before they are able to view the information they want.

Overall, the process involves retrieving the games list from Steam and creating a new Game model for each game. Initially, only the basic information like the game's name and Steam ID is stored in the database. When a game is searched for, the relevant game and similar games are retrieved. More information about these games is then fetched, and a pros and cons list is compiled for each game and stored in a separate table in the database.

To optimize performance, only the complex information of the most popular and relevant games is stored, making them faster to retrieve in subsequent searches as no additional API calls are required. However, periodically clearing this information is still a work in progress to ensure that review scores and supported platforms are up to date.

The website heavily relies on JavaScript to present search results to the user. The rendering of games and their pros and cons is done incrementally, allowing the user to view the desired information without having to wait for all the games to be prepared. This approach, coupled with a progress bar, enhances the user experience.

Additionally, filters have been implemented to allow users to refine their search results. These filters, utilized by scout, help exclude games like DLC and those not available for free.

Steam Price Prober

Thank you for taking an interest in Steam Price Prober! Feel free to have a look at the code or checkout the webiste. If you have any questions, please feel free to reach out to me on LinkedIn.

Take a look at the code Checkout the website