Welcome to V1 of my new portfolio website, so the might be(there definitely are) some bugs, which will be fixed shortly. The main purpose of this site is to display examples of web pages I have created, demonstrate use of different front end librarie, frameworks and techniques, as well as music, bad photography and design.
This site has been created with Bootstrap v4, CSS Grid and Umbraco 8, it also only supports the most modern web browsers ....sucks to be you Internet Explorer. This was made possible by the super helpful and informative youtube videos on Umbraco by Paul Seal, thanks Paul!
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 out of the box components.
A number of years later I decided to learn how to make a website properly and rely on out of the box features. This led me back to Northbrook College, where I had previously attended, and I attended evening classes on web design, which covered html, CSS and basic JavaScript(which I admit at the time confused the hell out of me).
A few years later whilst working in an IT support role, I was told about the tutorial site treehouse 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, libraries and frameworks such as JQuery, Bootstrap, React, Java, C#, PHP, Python, and SQL.
Around this time I was fortunate enough to land a position where I could put some of these skills to good use and build small landing pages that were used for client share promotions. This was great in help building my coding confidence and gain real world experience, as it meant I wasn't following tutorials, I had to work out the solution myself, match the given design and meet the tight business deadlines.
I have also branched out to utilise Code Academy, Free Code Camp, Youtube, Scrimba and Udemy to help continue my journey in web development and keep up to date with new features and advancements.
This is just a small portion of what I have learnt and put together outside of work and some within my current role.
This is site for my previous employer, based on a html template the company bought and my job was to adjust the template to their needs and match their brand identity. I also adjusted some of the Shutterstock images the company purchased, using Photoshop, to include company material.
This is a site where I was part of an agile team and predominately responsible for working on the HTML, CSS and some JS and also making sure the site met accessibility standards
This is a site I put together using only bootstrap components to demonstrate what is possible with the out of the box features. This also doubled as an EPK for my previous band.
This is a replica of the Bootstrap page, but using the foundation framework instead, there are a few subtle differences and had to make some tweaks using JQuery and CSS to achieve the same result.
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.
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.
This was created whilst following a course by Jonas Schmedtmann on Udemy. Showing use of CSS variables(not sass) and a responsive layout created using flex box.
This is from another section of the same course as the Trillo project by Jonas Schmedtmann on Udemy. This time it is using a CSS grid layout and SASS, with extra focus on what type of layout is achievable with CSS grid in the image section at the bottom of the page.
This si a simple game created following a Treehouse tutorial, the main emphasis was on the JS, so the CSS and HTML were already supplied.
This was created again using a Treehouse tutorial to show off using an API with Fetch. It is a simple implementation which in this instance is to search for a dog breed and return an image of said breed. Once again the HTML and CSS were already supplied.
This is a JS game created following a tutorial on Youtube by Ania Kubrow. It is a JS version of pairs, which I adjusted further to allow the user to set the difficulty, which basically just adjusts how long the card displays for once it has been clicked. I also set it so that once a pair has been found and those cards disappear, that the remaining cards then fill in the gaps to make it a little more difficult.
This is another JS game created by following a tutorial by Ania Kubrow. Once again I took it a bit further and added a level difficulty which adjusts the the movement of the mole, adding a the game over screen and the start button. The HTML and CSS on this were also done by myself.
This is a random beer generator using built with React, Bootstrap 5 Alpha and using the Brewdog API. It was inspired by a youtube video by Ania Kubrow.
The app generates a random beer and will display the ingredients and brewing temperatures, and other beer stuff. Whilst also displaying a suggested food pairing, the API returns three food pairings, so I set this to randomly output one to the page.
The CSS is mainly generated using Bootstrap 5 Alpha, with a few minor additions from a custom stylesheet. I couldn't decided whether to use React-Bootstrap or Reactstrap, but then saw the alpha version of 5 had been released, so decided to see what it could do.
Here are my solutions for the JavaScript advent calendar put together by Scrimba
A quick play with the Bulma CSS library grid and the different column widths available. This is based on the course by Scrimba, but taken a bit further and utilising Nicolas Cage film quotes, because no site is complete with out them.
As part of the Front Developer Career path on Scrimba, one of the topics was to create pacman in JS. As with the other JS game examples above, this was also led by Ania Kubrow.
This is an example of my own take on thebootstrap grid layout, that I have created using SASS. It displays the code differences between the SASS input and CSS output using a five column grid with 10px gutters.
I created this purely to see if I could and if I could do anything differently/add my own ideas and try and keep it as DRY as possible. This then led to getting an idea of making my own version of Bootstrap, I guess being stuck inside so long because of lockdown has gotten to me.
Below is a chart outlining the amount of points I have racked up on Treehouse over the years and the most recent twelve(this can be configured to any number) badges I have earned, ..yes like badges in the scouts. This is using the fetch api which is connected to my treehouse profile proving I haven't made the below up. Javascript seems to be the clear leader, but this is due to the fact that there is a larger amount JS courses than those that focus on other areas.
| Topic | Points |
|---|
Music I have written and recorded in my spare time, most people probably won't like
Music I have written and recorded with my band, most people definitely won't like it
Unfortunately this form doesn't currently work in live, I need to investigate why this is. However you can also contact me on Linkedin