PROJECTS

Here is a comprehensive list of my web projects, showcasing my journey and experimentation with web technologies, each one has contributed to my learning and growth.

I'm continuously exploring new ideas and honing my skills to create even more innovative and impactful projects in the future.

Below, you can search by technology or by section to view only the projects you are interested in.

App screenshot

APOD

Made in 2023 with: Next.js React Typescript Axios Tailwind Figma PWA - Personal Project - All Projects

APOD - Astronomy Picture Of the Day is a showcase of my Frontend skill set in creating modern PWAs and websites. I managed every aspect of its development, including UX/UI design, utilizing a tech stack that includes Next.js, TypeScript, Axios, Figma, Custom SVG Animations, and Tailwind CSS. This app seamlessly integrates with NASA's API for real-time astronomy content, featuring strong typing to reduce errors, efficient data fetching, and responsive design for cross-device compatibility. Additionally, I went through the process of publishing it to the Microsoft Store and Google Play Store, making it accessible both as a mobile app and a website.

Lament configuration screenshot

Lament configuration

Made in 2023 with: Next.js React Typescript Three.js Blender Figma - Personal Project - All Projects

The project involves the iconic LeMarchand Configuration puzzle box from the cult movie Hellraiser. It is developed using Three.js, Typescript, and Next.js. Additionally, I have created the 3D model using Blender.

Mettle Capital screenshot

Mettle Capital

Made in 2023 with: React Figma - edX Bootcamp - Freelance Work - All Projects

In Module 14/15 of the edX Bootcamp, our group worked on an app that automatically displays data and visualizations using Mettle Capital's API. The project aimed to transform the company's manual entity report generation process into an automated one. As a result of my performance in the bootcamp, I was hired by Mettle Capital as a freelance developer to complete the website, and I am currently still collaborating with them.

React Portfolio screenshot

React Portfolio

Made in 2023 with: React - edX Bootcamp - All Projects

In Module 13 of the edX Bootcamp, my assignment was to create a Personal Portfolio Webpage using React.js and React-router-dom.

Team Profile Generator

Made in 2023 with: JavaScript Node.js Jest.js - edX Bootcamp - All Projects

In Module 12 of the edX Bootcamp, my assignment was to create a command-line application that generates a webpage from user input using Inquirer.js. The application is built in JavaScript and Node.js, utilising ES6 syntax and Jest.js for unit testing.

README Generator screenshot

README Generator

Made in 2023 with: JavaScript Node.js - edX Bootcamp - All Projects

In Module 11 of the edX Bootcamp, my assignment was to create a terminal application that generates a README.md file from user input using Inquirer.js. The application is built in JavaScript and Node.js, utilising ES6 syntax.

Project WikiTube screenshot

Project WikiTube

Made in 2023 with: HTML CSS Bootstrap jQuery - edX Bootcamp - All Projects

In Module 9/10 of the edX Bootcamp, our group project involved designing and building a web app using two public APIs. We utilized HTML, Bootstrap, and jQuery for the development.

Weather Dashboard screenshot

Weather Dashboard

Made in 2023 with: HTML CSS Bootstrap jQuery - edX Bootcamp - All Projects

In Module 8 of the edX Bootcamp, my assignment was to build a weather dashboard using the Open Weather API and implement localStorage to make searches persistent. The project was developed using HTML, Bootstrap, and jQuery.

Daily planner screenshot

Daily planner

Made in 2023 with: HTML CSS Bootstrap jQuery - edX Bootcamp - All Projects

In Module 7 of the edX Bootcamp, my assignment was to create a simple calendar application that allows users to save events. The project was developed using HTML, Bootstrap, and jQuery.

Quiz Game screenshot

Quiz Game

Made in 2023 with: HTML CSS JavaScript - edX Bootcamp - All Projects

In Module 6 of the edX Bootcamp, my assignment was to create a Coding Quiz Game about JavaScript. The game runs in the browser and features dynamically updated HTML and CSS, all powered by JavaScript.

Password Generator screenshot

Password Generator

Made in 2023 with: HTML CSS JavaScript - edX Bootcamp - All Projects

In Module 5 of the edX Bootcamp, my assignment was to create a Password Generator that generates a password when the button 'Generate Password' is clicked. The project was developed using HTML, CSS, and JavaScript.

Console Finances screenshot

Console Finances

Made in 2023 with: HTML JavaScript - edX Bootcamp - All Projects

In Module 4 of the edX Bootcamp, my assignment was to create a financial analysis tool by writing JavaScript code that analyzes the records and calculates profit/losses.

Bootstrap Portfolio Page screenshot

Bootstrap Portfolio Page

Made in 2022 with: HTML CSS Bootstrap - edX Bootcamp - All Projects

In Module 3 of the edX Bootcamp, my assignment was to create a responsive portfolio webpage using Bootstrap. The project involved implementing various Bootstrap components such as Bootstrap Navigation, Bootstrap Jumbotron, Bootstrap Grid, and Bootstrap Cards.

Portfolio page screenshot

Portfolio page

Made in 2022 with: HTML CSS - edX Bootcamp - All Projects

In Module 2 of the edX Bootcamp, my assignment was to create a Personal Portfolio Webpage. The task involved practicing CSS flexbox, CSS grid, CSS variables, and CSS media queries.

Code refactor screenshot

Code refactor

Made in 2022 with: HTML - edX Bootcamp - All Projects

In Module 1 of the edX Bootcamp, my assignment was to refactor the HTML code to meet modern 'Accessibility' standards.

Wardour screenshot

Wardour Website

Made in 2023 with: ExpressionEngine CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

In the Wardour website project, we revamped the company website by updating it to the new version of the CMS. We refactored templates and components, and replaced all the old jQuery code with vanilla JavaScript. This work was carried out during my employment at Wardour Communications, using the ExpressionEngine CMS.

Levelling up the UK screenshot

Levelling up the UK

Made in 2022 with: HTML CSS Javascript Vite - Employment Work - All Projects

I developed a web application for Legal & General while working at Wardour Communications. The project was implemented using JavaScript.

Ride with renewi screenshot

Ride with renewi

Made in 2022 with: HTML CSS Javascript Vite - Employment Work - All Projects

I worked on a game project for Renewi, where I was involved in the initial research of the Phaser 3 game library, implementing transitions between levels, and developing the scoring point system. This project was completed during my tenure at Wardour Communications using JavaScript.

Net Zero Investor screenshot

Net Zero Investor

Made in 2022 with: ExpressionEngine CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

As a part of my role at Wardour Communications, I was responsible for developing a website for Net Zero Investor. This involved utilizing the ExpressionEngine CMS to create a professional and user-friendly online platform that aligns with the client's goals and objectives.

Policy Newcastle screenshot

Policy Newcastle

Made in 2022 with: HubSpot CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

While working at Wardour Communications, I was involved in the development of a website for Policy Newcastle, a division of Newcastle University. Utilising HubSpot CMS, I developed and implemented all the modules and templates for the website.

NUMed Malaysia screenshot

NUMed Malaysia

Made in 2022 with: HubSpot CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

While working at Wardour Communications, I had the opportunity to contribute to the development of a website for NUMed Malaysia, a division of Newcastle University. Utilising HubSpot CMS, I played a key role in developing and implementing various modules and templates for the website.

Centre for Landscape screenshot

Centre for Landscape

Made in 2022 with: HubSpot CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

During my time at Wardour Communications, I actively participated in the development of a website for the Centre for Landscape at Newcastle University. Utilizing the HubSpot CMS, I played a significant role in developing and implementing diverse modules and templates to enhance the website's functionality and design.

Centre for Ageing and Inequalities screenshot

Centre for Ageing and Inequalities

Made in 2022 with: HubSpot CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

While at Wardour Communications, I developed and implemented modules and templates for the website of Newcastle University's Centre for Ageing and Inequalities using the HubSpot CMS.

Centre for Rare Disease screenshot

Centre for Rare Disease

Made in 2022 with: HubSpot CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

While at Wardour Communications, I developed and implemented modules and templates for the website of Newcastle University's Centre for Rare Disease using the HubSpot CMS.

Centre for Climate and Environmental Resilience screenshot

Centre for Climate and Environmental Resilience

Made in 2022 with: HubSpot CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

While at Wardour Communications, I developed and implemented modules and templates for the website of Newcastle University's Centre for Climate and Environmental Resilience using the HubSpot CMS.

Supportus - Newcastle University screenshot

Supportus - Newcastle University

Made in 2022 with: HubSpot CMS Sass Tailwind HTML CSS Javascript - Employment Work - All Projects

While employed at Wardour Communications, I played a key role in developing and implementing modules and templates for the Supportus website at Newcastle University. Leveraging the HubSpot CMS, I contributed to creating an engaging online platform that effectively communicated the university's support services.

Duplex Val Thorens Website screenshot

Duplex Val Thorens Website

Made in 2021 with: Next.js React Sass - Freelance Work - All Projects

I created a website for a private apartment rental business located in a stunning ski resort in the French Alps. The website is built using Next.js and designed to prioritise SEO and internationalisation.

Laboratorio Creativo Website screenshot

Laboratorio Creativo Website

Made in 2021 with: React Firebase Sass - Freelance Work - All Projects

I developed a website as a freelance for a talented artisan specializing in customizing shoes, candles, and more. The website was built using React and Firebase technology.

Weather App screenshot

Weather App

Made in 2021 with: React - Personal Project - All Projects

I developed a Progressive Web App that utilizes Axios to fetch data from the openweathermap API. The app allows users to search for a city and displays the current weather information.

Task manager screenshot

Task manager

Made in 2021 with: React - Personal Project - All Projects

developed a Progressive Web App as a practice project, focusing on CRUD operations. React Hooks and Material UI were utilized for efficient state management and visually appealing user interface design.

Portfolio website screenshot

Portfolio website

Made in 2021 with: React - Personal Project - All Projects

I created the second version of my portfolio using React and React Router DOM, transforming it into a Progressive Web App (PWA). This updated version showcases my latest projects and skills while providing an engaging and responsive user experience across devices.

Quote Generator screenshot

The Art of War Quote Generator

Made in 2021 with: React - Personal Project - All Projects

I developed my own version of the Random Quote Machine Generator, utilizing React hooks like useState and useEffect. The application fetches data dynamically from my Gist repository, allowing me to practice retrieving and displaying random quotes.

Counter App screenshot

Counter App

Made in 2021 with: React - Personal Project - All Projects

I created a React counter app as a practice project to sharpen my skills with React hooks, specifically useState and useEffect. This application allows for incrementing and decrementing a counter value and demonstrates the utilization of hooks for managing state and handling side effects.

Personal Portfolio Page screenshot

Personal Portfolio Page

Made in 2021 with: HTML CSS JavaScript - Personal Project - All Projects

I developed the first version of my portfolio website using HTML, CSS, and JavaScript. This initial version showcases my projects and skills in a visually appealing manner, while leveraging the power of these core web technologies.

Laboratorio Creativo screenshot

Laboratorio Creativo

Made in 2021 with: HTML CSS javascript - Personal Project - All Projects

First version of a Mobile First Design website for an artisan specializing in customizing shoes, candles, and more. This website, created using HTML, CSS, and JavaScript, prioritizes a seamless and engaging user experience on mobile devices, while effectively showcasing the artisan's unique creations.

Caesar Cipher screenshot

Caesar Cipher

Made in 2021 with: HTML CSS JavaScript - Personal Project - All Projects

I developed my own version of the Caesar Cipher, featuring three encryption methods. This project not only allowed me to explore various techniques for encrypting and decrypting messages using the Caesar Cipher algorithm but also served as a platform to practice CSS animations, enhancing the visual experience of the application.

Simple calculator screenshot

Simple calculator

Made in 2021 with: HTML CSS JavaScript - Personal Project - All Projects

I created a simple calculator as a practice project to reinforce my skills in JavaScript functions, DOM manipulation, and event handling. This project provided hands-on experience in building a functional calculator interface that performs basic arithmetic calculations.

Digital clock screenshot

Digital clock

Made in 2021 with: HTML CSS JavaScript - Personal Project - All Projects

I undertook a practice project to develop a digital clock, focusing on JavaScript DOM manipulation and utilizing the Date object. This project allowed me to enhance my skills in dynamically updating and displaying the current time on a web page, leveraging the capabilities of the DOM and the Date object for accurate timekeeping.

Virtual piano screenshot

Virtual piano

Made in 2021 with: HTML CSS JavaScript - Personal Project - All Projects

I developed a virtual piano as a practice project, focusing on JavaScript DOM manipulation and event handling. This project enabled me to enhance my skills in creating interactive experiences by dynamically manipulating DOM elements and effectively responding to user interactions.

Flash cards screenshot

Flash cards

Made in 2021 with: HTML CSS - Personal Project - All Projects

I created a set of flashcards featuring countries and their capitals to practice CSS animations, media queries, and CSS grid. This project allowed me to improve my skills in designing responsive layouts using CSS grid and implementing engaging animations to enhance the user experience.

Technical Documentation Page screenshot

Technical Documentation Page

Made in 2021 with: HTML CSS - Personal Project - All Projects

I created a Technical Documentation Page about JavaScript syntax, practicing responsive web design with media queries and flexbox. This project improved my skills in developing adaptable layouts that provide an optimal reading experience across different devices.

Product Landing Page screenshot

Product Landing Page

Made in 2021 with: HTML CSS - Personal Project - All Projects

I created a responsive Product Landing Page for the PlayStation controller, practicing media queries and flexbox for responsive web design. This project improved my skills in developing visually appealing and user-friendly layouts that adapt to different screen sizes.

Survey Form screenshot

Survey Form

Made in 2021 with: HTML CSS - Personal Project - All Projects

I created a Survey Form for programming languages, practicing Mobile First Design using media queries and flexbox. This project improved my skills in developing responsive layouts for an optimal user experience on various devices.

Tribute Page screenshot

Tribute Page

Made in 2021 with: HTML CSS - Personal Project - All Projects

For my first project, I created a Tribute Page honoring Alexander The Great. This allowed me to practice responsive web design using media queries and flexbox, resulting in a visually appealing and mobile-friendly layout.