Wordpress Theme

           

One of my recent jobs was to design and deploy a custom Wordpress theme for a client wanting to showcase a portfolio of illustrations and other artwork.

SASS was used to compile the styles. The CSS grid was used to create the formulation of the showcase images. Additionally, I used Bootstrap for a basic outline parameter.

The site was made dynamic by converting the HTML template to various PHP pages, whilst using Advanced Custom Fields on everything that the user would need to change on the Wordpress CMS.

I used CSS animation on the SVG to bring the logo to life when the pages were loading. JavaScript and jQuery were used for the hamburger menu, dynamic year, animation on scroll, scrollspy and the image lightboxes.

Close Window

TETRIS GAME

     

This is my JavaScript take on the classic game 'Tetris'.

This project demonstrates a range JavaScript skills, including manipulating the DOM, the Math Object, functions and if statements, predominantly using arrays.

The board is made up of 200 squares (10 x 20) and the starting position for each 'tetromino' is in position 4. The mini grid is a smaller 4 x 4 version displaying which shape will be next available.

The game is operated by using the four keycodes and the player scores 10 points for each row cleared. The user is not able to move right when the shape is place far right, and vice versa for a shape place on the direct opposite.

Music is implemented in the Play/Pause function, as well as the Mute/On button. The user is able to toggle this on preference.

The functionality is currently set on the tetromino moving down a square every 0.5 seconds.

Close Window

YouTube Search API

       

This video search tool prompts the user to enter a search term of their choice to view up to five YouTube videos. These videos are pulled using Axios from the YouTube API.

It consists of four main React components:

• The search bar
• The video detail
• Each video item
• The video list

The syling is compiled mostly with Semantic UI, however, I found the CSS grid system preferable in designing the component layout as it is far easier to make responsive.

The default search is easily changed by using componentDidMount() with this.onTermSubmit. I have kept it on something I am passionate about - Welsh football.

Close Window

APPLE HOMEPAGE CLONE

       

This is my clone of the Apple homepage (UK version early September 2020).

It primarily consists of HTML5 and vanilla CSS (using flexbox and the grid system).

The hamburger menu and the footer links were the main sources of JavaScript - both on the mobile and tablet views. The table in the footer collapses into an accordion on small screens, JavaScript was used to mirror the original.

Every screen break included an image change for all of the cards. No frontend frameworks were used during this project and this ended up being a pure "look and recreate" task - i.e. for 99% of this job I refrained from looking at the dev tools on the original webite to make this a difficult challenge.

On completion I was very happy with this outcome.

Close Window