About
Welcome to my portfolio, displaying work I have created with web pages, music and also design, using Photoshop and Illustrator. This site has been created with Bootstrap v4.
I first studied web design whilst at college, as part of small module on my music course, which involved a basic run through on how to make a basic site using Dreamweaver. I then built on this by attending evening classes at Northbrook College, which built on the html aspect I had previously studied and moving onto CSS and JavaScript.
I was told about the tutorial site treehouse by a former co-worker, which I have found to be amazing and extremely instrumental to myself development. It has allowed me to advance my html, css and JavaScript knowledge greatly, whilst also providing the opportunity to learn other languages such as Jquery, Java, C#, PHP, Python, SQL and also Linux. Outside of the coding languages I have been able to learn more on Photoshop and Illustrator, where I previously relied on being self taught, so it was good to fill in the gaps in my knowledge. Also I have been introduced to Git version control and cover web user experience.
This is just a small portion of what I have learnt and put together outside of work, I have a separate portfolio for sites and pages I have put together within my current role. I will also plan to update this site with more content.
Webpages
CSS 3 Flexbox, Border Radius and Gradients
This is a html page I made demonstrating the use of the CSS 3 parameters Flexbox, Border Radius and Gradients. These parameters are unfortunately not support in Internet Explorer 9 and below.
CSS 3 Border Radius and Gradient
This was a small demonstration I put together to show someone the use of both Border Radius and Radial Gradients. These techniques were later used within the CSS 3 Flexbox example.
Javascipt countdown redirect
An example of using a redirect using a JavaScript countdown.
Customer site
This is a site I was asked to build for a friend for their university portfolio. I built this to the minimalist design they had in mind for their website, making use of a Jquery lighbox to display their image gallery. I have removed their images and content, as I do not hold the rights to them and the real site has been taken offline.
Site
Here is a small site where I tried out different CSS, JavaScript and Jquery techniques. The site makes use of Flexbox, where I have also made amends in the CSS, so that the navigation bar will display correctly in older browsers that do not support Flexbox.
There are also JavaScript elements, the first being displaying the day, date and time, and also email validation, which checks if user has entered a valid email address. I have used Jquery for the image carousel.
Drawing Canvas
This was a module from the Treehouse tutorial site that I followed to create a drawing canvas with Jquery. The html and css template were part of the course material.
Quick Bootstrap page
This is a quick bootstrap page that I put together whilst following a tutorial, which showed the benefits of Bootstrap. This took the whole of fifteen minutes.
Bootstrap page
This is a site I put together after watching a Bootstrap tutorial. This also doubles as an EPK for my band.
Site mockup
This is a sitemockup I put together utilising bootstrap stylings and also various other techniques I have learnt so far.
Mobile first webpage
This is the original version of my portfolio site, for which I used a mobile first approach and utilising media queires for desktops
Bootstrap conference site
I put this site togther while following a Bootstrap tutorial on Treehouse, this follows on from the 15 minute bootstrap page referenced above.
This site incorporates warning messages and also form validation, whilst also using a tiny amount of custom css.
3D CSS Animation
Following a recent tutorial, I have made a 3D cube on the below page, which displays 3D CSS animation
Javascript Tip Calculator
Whilst following a Javascript tutorial led by Brad Hussey, I put together the Javascript, Html and CSS code for a tip calculator, which takes the bill amount times the service amount divided by the number of people splitting the bill. The images were provided as part of the course material. This part of the Javascript module on the front end developer course Brad teaches on Udemy.
JQuery Car Race
Whilst following a JQuery tutorial led by Brad Hussey, I put together the JQuery code for a car race, which utilises the Math.Random() function so that no two races are the same. The images, Html and CSS were all provided as part of the course material. This part of the JQuery module on the front end developer course Brad teaches on Udemy
CSS Animation
Whilst following a CSS transitions tutorial led by Brad Hussey, I put together the css and the minimal Html code for a this. The animation is the earth rotating around the sun, whilst the moon rotates around the earth. This part of the CSS module on the front end developer course Brad teaches on Udemy
Artwork
Below are some images/logos I have created in Adobe Illustrator and Photoshop.
Music
Music I have written and recorded over the years
Music I have written and recorded with my band