Making my site work offline had been on my bucket list for a while. It was the last thing in Google Chrome’s Lighthouse test to complete. The site now has close to 100 scores across all areas in Google Chrome’s Lighthouse Audit.
I initially put my service worker in my JavaScript subdirectory, which didn’t work. I then realized that the Service Worker has to be put in the root directory of the website to allow it to control the scope of the website.
You can view the code I used in this repo on GitHub.
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.
Style Guide
Home Page
Category Page
Category Page
Category Page
Individual Product Page
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.
I met another person on Facebook in their third year in need of a website. She wanted a 2000’s style theme to match with the retro clothing brand she was creating.
It was a challenge to achieve the 2000’s style whilst still being a functional website in the modern age. I made the website using WordPress and chose the Kotre theme. It had quite a modern feel to it which I liked and also had support for WooCommerce as the website would need a shopping facility for the products she was selling.
As Kotre was free it didn’t have any built-in options to change the colours so I had to customize it using CSS. I also created a child theme for some more enhanced styling. She wanted an animated cursor on the site too.
The brand is called Sour Lemons The Label so the background has glittery lemons on it. She also created her own font, which is used throughout the site. The design was entirely dictated by her and implemented by me to empower her vision of the brand.
I enjoyed making the site and it’s yet another site using WordPress to put on my portfolio demonstrating my skills with child themes and working with clients.
I saw yet another post on Facebook, this time a girl band were asking for a web developer to create them a site on Wix. I’d used Wix a bit before and hated it: see here. Seeing how quickly the world of web design and development can change I thought I’d give it another shot.
I wanted to try out using Adobe XD too, so made an initial prototype in there. XD has a neat feature where you can publish the site for the client to give you feedback on.
I liked the idea of a full-screen video landing page as I’d seen this done with bands and artists before. I wanted to stick with a pink theme and cut out each band member’s head in Adobe Illustrator and turned them into an awesome SVG for the second page of the website. This way users would know instantly who the band members were and what the band was about.
After some backwards and forwards on the design, I was ready to start making the site on Wix. We connected the domain from Go Daddy and I started creating.
For the events on the site we used Bands In Town which was actually quite difficult to set up as it separates out bands and individuals in a weird way. However, we got it to work eventually.
The site was relatively simple as a one-pager so the mobile optimisation wasn’t too hard and Wix’s built in engine.
I’m really pleased with the overall theme of the website and it gave me a chance to try out Wix again of my own accord; something else to add to my belt.
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.
Whilst travelling home for the weekend I saw a post on Facebook of someone looking for a web developer. I got in contact and they required someone to build a site for a football coaching business they were setting up as part of their FMP. They had some ideas of what they wanted the site to look like and a booking plugin they wanted to use. I made the site using WordPress and tried to keep to a black and white theme. In the end, a lot of the features he initially wanted were removed which resulted in the final product which you can see here.
I’d been meaning to update my portfolio site for quite a while as I wasn’t really happy with the design. The long Christmas break gave me a chance to do just that. I was inspired by this template. In my lectures, we’d been learning about Figma and UX design. I wanted to use this redesign as an opportunity to learn more. I also learnt a bit of bootstrap and flexbox at the same time. I’m really happy with my site and it showcases all of my skills. You can see it here.
