Matthew Durey Rebrand
Rebranding my own website.
Services: React, SEO, Web Design
Introduction:
Wanting to learn React, this was the perfect opportunity for me to rebrand my website. I decided to use features from other sites on my portfolio to give it a clean modern design.
Services: React, SEO, Web Design
Highlighted Features:
Below I have listed some key features on the website. They include parts of the website which the client wanted to change from the original design, elements that I have coded to save time and repetition and areas of the site that were key for functionality/user experience.
Colour Scheme:
One of the main changes from the previous website is the colour scheme. The old website used a range of colours (white, grey, black and light blue). I decided to simplify the colour scheme, using an off black for the background, white for text and keeping the light blue (which represents trust) as my feature colour. This is used throughout the website on the headings, links and punctuation.
Within my portfolio each website has an assigned colour too which is usually the brand colour of the company. This colour is used on the homepage, as well as sublty throughout the portfolio page.
Detailed Portfolio:
On the previous website the portfolio page listed all the websites I had worked on. When the links were clicked on the user was directed to the website. I decided that on the new website I should talk a bit about the website.
On the new site I have created a page for each project. On the portfolio page I have listed the services used and when hovered on the text changes to the featured colour of the project. Within each project I talk about certain elements of the site to give users an insight into how the site works and features that help the site stand out.
User journey:
When creating a website one of the main things to consider is the user journey. This means considering what you want to achieve on the website, in this case potential clients getting in touch with me.
At the bottom of each page I have added buttons, to allow the user to easily navigate to my contact page where they can reach out.
Business cards:
Along with rebranding the website, I also created new business cards. I decided to match the colours of the website, using the off black as the background and the light blue as an accent. I also decided to add 2 QR codes, one taking the user to my LinkedIn profile and the other to my portfolio page.
Clean Code:
As I was moving from WordPress to React I wanted to make the process of adding portfolio projects simple. I decided to break each portfolio page into components and by creating a data.json file I could add the majority of content in one place and it would dynamically update on the site.
Within the individual portfolio pages I called the relevant components (Portfolio Intro & Portfolio Conclusion) and passed the data through. Then I simply added the relevant content on the page.
Conclusion:
Converting the site to React and rebranding has made it quicker, cleaner and gives a professional feel overall.