👋

Cleaning Company Website

The client asked me to curate the design based on a flyer they had. From it, I chose the colours and hues, and overall theme of the website.

I chose plain HTML and SASS to make the website due to the lack of complexity required in creating it, and due to the efficiently low load times for simple files.

An external API was utilised to add a live chat feature to allow the client to directly communicate with their customers. Netlify Forms are used to capture form submissions which are then sent via a Web Hook to the client's email.

Some CSS animations are used for microinteractions and to provide a modern and enjoyable web experience.

Technologies used

• HTML
• SASS
• Netlify
• Live Chat feature

Courier Company Website

Upon receiving the requirements for the website from the client, I designed a brand identity consisting of industry expected elements. The logo was designed in Illustrator, and Photoshop was used to place the logo on the images of vehicles.

I chose Gatsby to build the site due to its SSG capabilities, image optimisation capabilites, snappy feel, and excellent SEO.

External APIs were used to allow for an interactive map in the footer and a live-chat feature.

Some motion was peppered throughout the site to provide some visual interest.

Technologies used

• React
• Gatsby JS + GraphQL
• SCSS
• Framer Motion
• APIs for map and live chat
• Netlify

React To Do App

A simple to do list utility Single Page Application. You can add and delete to dos and mark them as done. There is an error check for an empty field being submitted.

The app was made initially using class based components and then refactored to use React hooks. The version that uses hooks is saved on a separate branch.

The branch that uses hooks has also been updated to use Redux for state management. Overkill? Sure. But I did it to practice what I had learnt from Redux and to practice integrating it into an app without global state management.

Technologies used

• React
• Emotion (for styling)
• Redux

Timetable and Clock Web App / Desktop App

An app I created for a local charity and mosque. The web app scrapes data from the official website but presents it in a much more appealing format. It also provides notifications.

Caching is implemented in the web app to prevent unneccessary requests being made to the website the data is scraped from and to make the app more performant and efficient. The data is also output as a JSON in a simple API. This is used by the desktop app. The mobile app has since moved to an official Wordpress based API.

The desktop app is made using Electron JS and also provides local notifications.

Technologies used

• Node JS
• Web Scraping
• APIs
• Caching
• Electron JS

Cross-Platform Mobile App

A native mobile app of the timetable app that works on iOS and Android.

The app has local notifications with granular control, persistent state using Redux-Persist, utilises dynamic height web views and uses a Wordpress API to fetch and display the latest data.

Custom styling is also injected to make the HTML in the webviews appear in a much more appealing format.

Technologies used

• React Native
• Expo
• Wordpress API
• React Navigation
• Redux-Persist

Visit GitHub Repo

Responsive Website For Restaurant

A responsive website for a mexican eatery I actually owned. The website is almost exactly the same as when it was open, but back then it was made with a drag and drop builder, now it's been made from scratch using HTML and CSS rather than dragging and dropping.

Technologies used

• HTML
• CSS
• Netlify

GitHub User Finder App

A search app for Github users. Enter a username and see the results populate. You can then see more info about that particular user. Made using the Github API. there is also navigation in this React app using React-Router.

Technologies used

• React
• React-Router
• GitHub API

Public Blog with REST API and MVC

An MVC based blog website with data persistence and CRUD capabilities through a REST API. Hosted on Heroku.

Technologies used

• Express JS
• Mongo DB
• MVC
• REST API

Weather Checker React App

A simple weather checker made in React fetching data from the Open Weather Map API. Styling is done using Materialize CSS.

Technologies used

• React
• Materialize CSS
• Open Weather Map API

Python Web Scraper

A simple web scraper made using Python and Beautiful Soup. When the script is executed it fetches the headlines from the Reuters news website, and outputs them in to a .csv file.

Technologies used

• Python
• Beautiful Soup
• Web Scraping

Visit GitHub Repo