Portfolio

View all of the websites that I've created.

Southampton Focus

Southampton Focus

Southampton Focus is the online place to go for finding businesses in and around the area. Businesses pay for a listing on the site and get free access to Southampton Focus’ vast social network presence.

Southampton Focus already had a site but decided to scrap it and start completely afresh. They chose a theme from Theme Forest and I configured WordPress and the theme to their specifications. I had to customize the theme quite a bit to get it to the functionality that was advertised on Theme Forest, and we used many different plugins together to give the site company listings functionality.

Overall, I’m really pleased with how it turned out considering the scope of the site.

Stakks Pancake House

Stakks Pancake House

This Pancake House in Southampton wanted a complete website redesign. They got Mirror Digital Media to design the site and I built a custom WordPress theme from the designs. I then migrated all of the old blog posts to the new website and made a couple of small design changes that weren’t finalized in the initial design before pushing the website live. I used Local by FlyWheel to develop the site but there was a lot of hassle with sending an ngrok link every day for the client to view the site. In the future, I’m just going to create sites under a subdomain on my Digital Ocean Droplet and work on them there so that my client will be able to access them at all times.

Train In Blocks

Train In Blocks

I started working with Mikey Lau, founder of Train In Blocks in April 2020. He wanted to create a web app for personal trainers to manage their clients. We had a lot of project meetings to work out how best to implement such an app and I was given complete control of the implementation. I decided Okta was a good fit for Authentication, and we were going to use Stripe to process payments. As I love Vue I decided to use that on the front end, and I have quite a bit of experience with PHP so used that, along with slim, to create an API for updating content in a MySQL database.

Initially, I did a lot of the front-end work, but I taught Mikey HTML, CSS, and Vue and started to move more into a project manager role and backend developer. I created a Stripe WebHook to handle sign-ups which then creates a user in Okta and sends the customer an email about their new account. We also created a site in Nuxt for sign-ups to take place and for potential customers to learn more about the application.

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.