🖥️

Projects

⚡ Personal projects

On this page, you will see a list of my personal projects I have built and the tools I have used.

Tribute Page

The Wave

Co built the-wave, while working as a full-stack engineer at hiyield. Restyled from the ground up and an eCommerce store

WordPress WordPress
PHP
Tailwind
JavaScript
Docker
Tribute Page

Kevri

Built a rapid MVP for kevri while working with hiyield

Nuxt
Prismic
Tailwind
Netlify
Typescript
Mailchimp
AWS
Tribute Page

Alomcp

During my first month, I contributed to Future Proof Your Power and eventually took control all the way to phase 3

Vue
Vuex
JavaScript
Prismic
Bootstrap
Netlify
Tribute Page

247 Carbon Free

Worked collaboratively and built a rapid MVP in a week. Mostly responsible for QA and code reviewing

Nuxt
TypeScript
Prismic
Tailwind
Netlify
Tribute Page

xigxag

Joined this project midway through, jumping onto creating the ability to search, logic to download the app and integrating the website with Algolia search. Then I became the sole maintainer.

WordPress WordPress
PHP
JavaScript
Tailwind
Algolia
Firebase
Docker
Tribute Page

Twitter Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the first in the series.

HTML
Tailwind
Tribute Page

Spotify Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the second in the series.

HTML
Tailwind
Tribute Page

Paypal Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the third in the series.

HTML
Tailwind
Tribute Page

Linkedin Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the fourth in the series.

HTML
Tailwind
Tribute Page

Dropbox Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the fifth in the series.

HTML
Tailwind
Tribute Page

Dribble Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the sixth in the series.

HTML
Tailwind
Tribute Page

Simon

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I used Vanilla Js to build a functional Simon game.

HTML
CSS
JavaScript
FreeCodeCamp
Tribute Page

Recipe Box

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I used React and gained a better insight into local storage to save recipes.

HTML
CSS
JavaScript
FreeCodeCamp
React
Tribute Page

Pomodoro Clock

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project I used vanilla JavaScript to build a functioning Pomodoro Clock.

HTML
CSS
JavaScript
FreeCodeCamp
Tribute Page

Javascript Calculator

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project I wanted to use my React skills to build a functioning calculator. The react app was styled with CSS.

CSS
JavaScript
React
FreeCodeCamp
Tribute Page

Drum Machine

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I wanted to improve my React skills and gain experience using a frontend framework. With the styling, I kept it simple with CSS.

CSS
React
JavaScript
Tribute Page

Markdown Previewer

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I wanted to improve my React skills and gain experience using a frontend framework. With the styling, I kept it simple with CSS.

CSS
React
JavaScript
FreeCodeCamp
Tribute Page

Random Quote Machine

For this project, I decided to make the random quote machine mirror a Twitter post. You can generate a new quote via a button and click the share button which will make a Twitter post you can then publish.

HTML
CSS
JavaScript
Tribute Page

Trillo

In this project, I wanted to heavily focus on using flexbox for layout. To continue to build with mobile-first design in mind and progressively build the design up. Looking for ways to improve the performance of CSS queries and render quickly in google lighthouse. Furthered, my experience of the architectural structure 7-1 CSS Architecture and Block-Element-Modifier. Use Sass more efficiently.

HTML
SASS
Tribute Page

Nexter

In this project, I wanted to heavily focus on using the grid for layout and now I wanted to tie all my knowledge together. Mobile-first, CSS media queries,7-1 CSS Architecture and using Sass

HTML
SASS
Tribute Page

Scenic Cornwall

To build with mobile-first design in mind and progressively build the design up. To ensure my CSS queries are rendered quickly. Start to apply an architectural structure 7-1 CSS Architecture and use Block-Element-Modifier in my Sass. To think about how CSS is parsed while making styles and heavily use Sass.

HTML
SASS
Tribute Page

Tribute Page

I wanted the colours to reflect Juice Wrld posthumous album 'Legends Never Die. For the website, I included youtube iFrame linking to top songs from the album. Then I used Spotify embed and blended them into the website. I decided to use only vanilla CSS, test my knowledge of flex and grid for the layout and to make it fully responsive on all devices.

Html
CSS
JavaScript
Tribute Page

Survey Form

I wanted to make a great form that was responsive and worked on all devices. To use both flex and grid for the layout. I used a column for layout for the main content using 1fr for mobile and for tablet and for desktop 1fr 2fr. I also wanted to style form elements and make a custom select to make it visually appealing.

HTML5
CSS
JavaScript
Tribute Page

Product Landing

My goal for this project was to implement a sticky navbar that drops down on scroll, to make a hamburger button with JavaScript, to use CSS with variables in my stylesheet and to mimic Apple design. As a bonus, I added an embedded youtube video that links to an Apple product.

HTML5
CSS
JavaScript