Re-creating my Portfolio with React

I’ve just finished recreating my portfolio using React. There aren’t very many visual changes apart from changing the hover effects a little. The site features a lot of repetitive content, such as portfolio items. React is good for this because I can create a component for the item which minimizes the amount of coding required. Having components also saves time in the long run because if I want to update a component I’ll only have to do it once rather than multiple times. As part of the process, I tried to make the code more readable, by including comments in each file, and separating out the Sass so it’s more manageable.

After attending several interviews, there was a common question that came up: What technologies did I use for a particular project? As a result of this, I have included icons beneath each project in my portfolio indicating the different technologies that I used. I have also brought back the GitHub contributions image.

Weather app

 

GitHub Link Website Link

 

My friend made a weather app so that they could learn APIs. I decided to fork it and take it a step further by experimenting with CSS Houdini, Variable Fonts, CSS Variables, and new browser APIs such as the Speech Synthesis API.

Features

Future Ideas

  • Turn notifications on and off and have icon reflect that.
  • Send notifications every 30 minutes even if app is not opened.
  • Use more bleeding edge APIs (Suggestions welcome).

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.

Re-doing my portfolio

I built my web design portfolio site over the Christmas of 2018 and decided it needed a bit of a refresh during the summer.

I got in touch with the @_tashhockey, the person behind Honest Feedback, to give my website a bit of a review. She made some really good points and brought to light the fact that I was trying to make my website too much. It was my personal space to show off my work, it was for clients, and for future employers.

It took me a few months, but I decided I was going to focus on making my website a portfolio to show future employers. Something else is in the works to show clients.

I took out a lot of the content which had the added benefit of making the page load a lot quicker, and took a lot less time to scroll through. It now features my best websites and that’s it.

On mobile I made the portfolios scroll horizontally which means that the user doesn’t have to scroll past loads and loads of content.

I’m really happy with the design of the website so I only made some minor tweaks to colours to make things more legible. Redoing my portfolio provided me with a chance to brush up on my JavaScript and jQuery skills too.

Island RIBs

https://island-ribs.co.uk/

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

https://donsdiscs.com

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.

https://donsdiscs.com

Sour Lemons The Label

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.