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.

Re-creating my portfolio with Gatsby

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.

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.

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.

A new Portfolio with Vue.js

To mark the beginning of my second year at University I thought that I would try learning a new skill, namely Vue.js. I usually struggle to learn something if I don’t see any real practical application for it, but this time I figured I could turn my photography portfolio into a dynamic Vue.js enhanced page.

I started with creating a component for the portfolio elements on the homepage. I created a data set that contained all the information for the component. Vue then iterated over each one and created them. I then did the same for the images, once you’d clicked through to a specific component.

Next, I had to implement Vue Router, in order to get dynamic URLs. This was very tricky and took me a while to figure out that I needed to place the Portfolio page within a subfolder to apply .htaccess rules to it. Everything works now and it’s even a better way of showing all the images at once compared to the old method of just having the images pop up in a Lightbox. This would have never been possible without Vue as it would have taken too much time to hard code each image (there are 100s).

The next steps are to do a bit more styling and arrange the photos so that portraits and landscapes aren’t all next to each other breaking the flow of the page. I’m also going to take this as an opportunity to go through my portfolio and slim them down to around 25 of my best photos. The code is quite messy too so I might put each component in its own Vue file. In the far future, I’m thinking about possibly using Vue Native to turn the portfolio into an app.

Overall, it’s been a great experience learning Vue and it’s one step closer to a full-time developer role after I graduate.

Cookie Consent

Over the past couple of months, I’ve added some Analytics software to my site such as Google Analytics and Facebook Pixel. As my website serves customers in the EU, the Cookie Law applies. I have used JavaScript to ensure that cookies are not fired until the user has explicitly accepted them on the website. A button and banner are shown at the bottom of the screen for new users.

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.