Portfolio

A collection of my favourite projects.

Modernet screenshot on Macbook

Modernet Freelance Website

WordPress - Advanced Custom Fields - Custom Post Types - SCSS - Gulp - Javascript - jQuery

I set up the Modernet website to sell web design, WordPress development and WordPress maintenance services as a Freelancer.

The design was initially created with Figma before been built with a custom WordPress theme. It is using Advanced Custom Fields, custom post types and has multiple forms built with Contact Form 7 to address the different types of queries I might receive.

Visit my Freelance Website - Modernet
yummy pixels website viewed on macbook

Yummy Pixels

WordPress - Advanced Custom Fields - Custom Post Types - SCSS - Gulp - Javascript

A redesign and general overhaul of the Yummy Pixels food and travel blog. It contains custom post types for Travel and City Guide articles and for the Recipes.

All content is editable in the admin panel using Advanced Custom Fields. Minimal plugins were used in the build apart from the Modula Image Gallery used for the Gallery page.

Visit Yummy Pixels Food and Travel Blog
Karma Fitness screenshot shown on MacBook background

Karma Fitness

WordPress - Advanced Custom Fields - WooCommerce - SCSS - Gulp - Javascript - jQuery

A custom e-commerce demo store specialising in yoga and fitness clothing and accessories built in WordPress using the WooCommerce plugin.

It is using a fully customised theme and the products were imported from a dummy csv file which included all product data and images. Payment options are set to cash on delivery so feel free to complete an order (with fake details) to test the full shopping experience.

Checkout this WooCommerce demo store!
taste of China screenshot on MacBook

Taste of China

WordPress - Advanced Custom Fields - SCSS - Gulp - Gloria Food Restaurant Ordering Plugin - Figma

A custom takeaway demo website with a focus on Chinese food where the user can order food online using the Gloria Food Restaurant Ordering Plugin.

A fully customised WordPress theme using Advanced Custom Fields so all content is editable from the admin panel. The user sees a pop-up menu when the order online button is pressed and they can order food for delivery and track the progress of their order in real time. Checkout the interactive prototype design that was first created in Figma.

View and Test the Ordering Process
patisserie bahia website viewed on macbook

Patisserie Bahia

Wordpress - Advanced Custom Fields - WooCommerce - Yith Request a Quote - SCSS - Gulp - Poedit

The Patisserie Bahia website was built for a client in Salvador, Bahia in Brazil and it’s main purpose was to let customers pre-order bakery goods like cakes and savoury snacks. It has been fully translated into Portuguese.

I implemented WooCommerce for the store front and Yith Request a Quote plugin to allow the customer to request a price for the items they wanted to purchase.

View Patisserie Bahia
pipeline tv website viewed on macbook

Pipeline TV

React - Material UI - Styled Components

This was a simple app built with ReactJS that lets you search for videos on YouTube and watch in the player or click through to watch on YouTube.

The main reason that I built this app was to get more used to pulling in data from external APIs.

Watch some cool YouTube videos on Pipeline TV app.
rock paper scissors website viewed on macbook

Rock, Paper, Scissors

HTML, CSS, Javascript

After completing the HTML and CSS part of the ProCoders course, I moved on to learning JavaScript and my first project was to build a Rock, Paper, Scissors game.

This includes clickable images and a score board that updates and lets the player know whether they have won the game or lost to the computer, it will then ask the player if they want to play again. Play it now

View the code and play on CodePen
javascript calculator viewed on iphone

Javascript Calculator

HTML, CSS, Javascript

My final challenge was to create a simple calculator using CSS, HTML and JavaScript. The calculator allows you to add, subtract, divide and multiply numbers by clicking the buttons with a mouse.

When styling the calculator, I used CSS Grid to layout the buttons, something I had not used before but is a very useful tool for laying out pages in CSS.

Use my JavaScript calculator online
yummy eats cookbook viewed on ipad

Yummy Eats Cookbook

Adobe InDesign

I really wanted to make a cookbook and that is where I learned some design for print skills using Adobe InDesign. The cookbook is called Yummy Eats and contains 50 of my favourite dishes from around the world.

The book is available as a digital download at iBooks and Amazon.

View the preview on iBooks