Portfolio

View all of the websites that I've created.

The Pretty Dark

The Pretty Dark

This band posted an advert on Facebook for a Web Developer. I approached them and they needed help making their site mobile friendly. They had a friend build them the site using some sort of framework, the code was a mess, resulting in the site being slow and not mobile-friendly. I cleaned the site up, updated some content as their new album had just been released, and gave them the finished copy of the site.

Joe Bailey Photography

Joe Bailey Photography

In order to use many of the new Web Technologies you first need a platform to test them on. This is my photography website. I am very passionate about photography and like to keep my website as close to the cutting edge as possible.

Disabled Peoples Voice

Disabled Peoples Voice

I got in touch with this client through Solent Creatives. They needed a website and shop to showcase their charitable work. They sell cards to raise money for charity and the site has a lot of info about them, and their events.

They had already hired a graphic designer and he gave me a PSD of each page. I then developed a custom theme for the site making sure it was pixel perfect.

I then conducted thorough cross-browser testing before showing the website to the client who was very happy with it.

Island RIBs

Island RIBs

I was put in touch with Island RIBs through Solent Creatives. They needed a website redesign as they were refreshing the content on the site. They had already written out what parts of the website they wanted changing, and I worked with them to accomplish this and implement the new content.

This was a good experience for me. As it was hourly work, I had to keep tabs of how long I had spent on one task. It was also good to stick to the brief without deviating from it, as many of the websites I work on have a wide scope to the project.

I used the WP Staging Pro plugin to work on the website with the client so that they could preview all the changes I was making and we could push the site live in one go.

The website uses Generate Press as a theme, but whilst updating the content on the site I migrated their pages over to using the standard Gutenberg Block Editor.

Dons Discs

Dons Discs

Over the last couple of years, me and my dad have been into buying and selling records on eBay. We buy job lots and go to car boots and charity shops to see if we can find any bargains which we can then resell.

As previously mentioned, we used eBay to do this, however, as we began to buy, and subsequently sell, more and more stock we found that eBay was quite restrictive. We looked into using other platforms, such as Discogs, but eventually decided upon creating our own website.

This proved an exciting challenge. Studying Web Development at university I am always eager to practise my skills. I’d dabbled in making e-commerce sites before but wasn’t quite technically literate enough to make anything of them. The making of Don’s Discs gave me a chance to start from scratch and learn on the go at a pace I set.

Firstly, we sat down and made bulleted notes of what we wanted the site to achieve and what purpose it would serve. This then let me tailor the design to brief.

Once I had finished my first year of university I began to make a design of the site in Figma. Me and Dad then went over the designs to make necessary changes before beginning production on the site. I used images from Unsplash to template the site. I researched a lot of other record store websites to get an idea of the current market and design trends before making my own version fit for the Dons Discs brand.

Once the design was completed, I set up the domain with my hosting provider, iPage, and configured Cloudflare. I then installed a fresh copy of WordPress. I wanted to create a theme from scratch as I’d only done that once before, with my photography website’s blog. I used the Storefront theme as a starting point to get an idea of what files I would need. It took about a month of work to get the site looking like the Figma design.

We did make a couple of design changes along the way such as changing the blue in the header for white and adding a black bottom border to the header to replicate the business card and make it stand out more.

We took our own photos for the headers of each page to make it really feel like our own work.

I added a JavaScript animation on the home page showing a typing and deleting effect. I found this on CodePen and adapted it to my needs.

We spent a while figuring out how to control the stock of our products, as the WooCommerce built-in stock control is aimed at items that have multiple quantities whereas the type of things we were selling we only had one of.

One thing that really tested my ability was customizing the sort by filters. We only really needed to sort the products by price, so I had to hook into the shortcode and remove the other options from all pages, not just the homepage. This took a lot of Googling.

We then started to figure out how to import products from Discogs to the website. Discogs exported a CSV file which we then mapped to Woocommerce’s product importer. The attributes were very difficult to get right but the desired effect was achieved in the end. This also helps on the front end for customers to filter the products as eventually there will be thousands of product listings on the website.

The site is now live and slowly being populated with products.

Therfield Village Pre-School

Therfield Village Pre-School

I currently manage Therfield Village Pre-School’s website which is made with WordPress.

I took over control of the website so unfortunately didn’t get to start it from scratch but it was the first website that I worked on that used WordPress.

To start off I made a style guide and adjusted the logo to create continuity across their advertising channels. I then made sure that all the text on the site was up to date and accurate.

My Mumm was deputy manager for the Pre-School at the time and we implemented a blog together.

I added the Pre-School to Google Maps and Google My Business, as well as improving their SEO. This resulted in a significant increase of visitors on the website and calls enquiring about places.

I also helped set up a Facebook page and Twitter account for the Pre-School.

Whilst my Mum was deputy manager at the Pre-School I made a lot of flyers and posters for their activities. For example I created a treasure hunt flyer for children to find signs around Royston Town Centre.

Blossom Tree Photography

Blossom Tree Photography

I created a website for my girlfriend as she does photography too. I’m really impressed with the site, even though it is made with WordPress. Hopefully, her future employers and universities will like it too. You can view the site here.

I need to make a No Thumbnails Gallery WordPress plugin as at the moment I am using CSS to hide all the images but the first one to create the galleries you see. This really slows down the website.

–Updated 5th October 2019–

I had wanted to develop a custom theme for Chelsea’s website for a long while. The theme I was using was bloated, slowed the site down, and didn’t fit her style of photography.

I designed a template in Figma, making a style guide first, noting down the fonts, Satisfy, Montserrat, and Roboto, and the colours, Pink, and some shades fo grey. Doing a mockup of the site proved really beneficial because I made many different versions and could show them to my colleagues easily, which would have been a nightmare if I had just started developing. I even went with a mobile-first approach.

I knew that the portfolio had to be the most prominent feature on the website as that was the biggest shortfall of the previous theme. I used some JavaScript to only change the images and text on the homepage so that portfolios are all hosted on the same page. They are also shareable as they use query strings. On mobile, only 6 portfolio images can be seen but the lightbox allows you to view all 20 images.

I made a few changes to the design when I was making the website such as making the background a light shade of pink. This helped differentiate the elements on the page.

I also designed a new logo which is a lot more intricate than the initial rudimentary one.

joebailey.xyz

joebailey.xyz

I’ve started creating a site to showcase my work as a web design professional. Once finished it will be live at joebailey.xyz I’m not really feeling it as much as my photography website, I don’t think the design flows that well, and it doesn’t really optimize for mobile all that well either. I think maybe in 6 months or so, once I’ve learnt more, I’ll design it again with a mobile-first approach. For now, I’m just concentrating on getting it finished and published as yet another example of my work.