Joe Bailey Photography

You may have read Re-creating my portfolio with React where I talked about my experiences converting my simple static portfolio into a React website, turning reusable objects on the page into React components. This inspired me to learn Gatsby, a static site generator that uses React.

I was previously using my a category on my photography WordPress blog to host my blogs about web design and projects. This was a bit of a weird experience for users as if they chose to read more about a post on my portfolio, they’d be directed to my photography site. Gatsby allows me to pull in all the posts from WordPress and create a new site. This also allowed me to store all of my portfolio items as WordPress posts. I installed the Advanced Custom Fields plugin to handle the tech icons and button links.

The site is now insanely fast hosted on Netlify and using Server Side Rendering. Gatsby’s links also make navigating from page to page incredibly quick.

Whenever I want to add content to the site I just login to WordPress, create a new post under the relevant category, with a tag for if I want it to be displayed on the homepage of my portfolio. I hit publish and a new Netlify build is queued then deployed using the Jamstack deployments plugin.

I want to build every website this way in the future. It took me about 2 days to set up, so it’s incredibly quick to develop. Plus, sites are faster and more secure on the Jamstack.

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.

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.