Portfolio

article image

Original starting out as a page for my social media (Instagram & Youtube) I decided to make two similar pages with different content, creating from that this page.

Design

The vibe of the site was to be friendly, non-pushy and try hard with happiness and fun sprinkled in there. I had a few websites that I pulled inspiration from. As I build a new page I often walk my way down the page first finding a good header or hero style and building from there. For this website I saw a really nice diagonal hero image and decided to do something similar.

From this, I took the diagonal the burger menu (but not the slide-out navigation) and the highlight text style. Merging this style header with an old archived version of Devtips’ website that presented a video alongside the text, and the colour scheme was close to my branding colour from my avatar.

Finally, I remembered a great artist come developer called Mackenzie Child used to create background doodles and was inspired by these to fill out the white half of the hero image.

I created my own doodle by hand drawing with my mouse things like hamburger menus, git forks, curly brackets and semicolons. Along with my avatar image, this was the basis of my hero section and the foundations of my site.

About me section design has always been my nemesis, my first few attempts were lacking, but I couldn’t work out the best way to do it.  First was a centrally aligned circle image and text, which had no real excitement about it. the second faired better, although it had no image. I liked the justified text although aware its a no-no in terms of readability.

In stepped my friend Rosie Manning I asked her for some advice on why my design sucked, and this was her response.

She had nailed it, using the diagonal line to carry the theme across. The next section would have been different depending on whether this was richardcodes.com or this profile. RichardCodes would have had cards for tutorials I did on YouTube, where views could get the relevant files for the projects. On this profile it becomes the Project section with GitHub, URL and view icons for each project. I added a filterable list so that I could tag projects with keywords and the user can see different things I had done.

The social media section came next which hovered over the footer. The footer I took from an old iteration of my portfolio and I used the social media section again from the first website I took inspiration from, Making it work as Instagram and contact instead of Twitter and blog as their site did.

The Code

I had decided to use WordPress as my backend for my portfolio, Over the last few months and various projects I had started to get a proficiency with it. So the first step was to code the website statically and then I would do a conversion to a WordPress theme.

I’m not a huge fan of hamburger menus on desktop, however I came up with the idea to have a standard top menu list nav that appears once the menu icon is clicked, on mobile this would change to a veritcal one, this took a little work but the outcome was great.

There was a lot of interesting uses of :after pseudo-elements to create things like the yellow half section for the hero image, using skew and translate to create a crisp line, Making the whole thing an image would not do. This was the first website I really used SVGs on, trying to give a low burden on bandwidth coupled with the sharpest of images. Some of these were embedded directly into the code so I could alter fill colours on hover (social media links).

The card section was created using flexbox and I will inject the images for them into the div background, this way I can use background-size: cover to make any image fit nicely and not cut or overflow into text sections.

The Instagram section would use the public version of Instagrams API to pull the last posts from my Instagram feed along with their URL to use in the anchor tags. Using the Fetch API to do this and make it really clean.

I then worked on some simple animations using keyframes in CSS. making the yellow skewed section slide from the left to reveal the background doodle wallpaper before the contents of the hero image faded in. The about me section got a fade in and slight move from the right to the left of the screen as the page scrolled to the area where it became visible. The project cards also faded in when the section came into focus one after another and finally the social media section moved down to its seated position.

The animations were a result of adding classes that triggered the animations in javascript. Mostly triggered by the location of the scroll on the page. This also added classes to the menu links in the nav bar when at that section.

Some fun javascript

Knowing I was going to change the backend URL from the regular WordPress one (for security from bots). I decided to add a konami code so I could have a redirect to a longer URL. Try it… UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A, ENTER.

Converting to WordPress

Once the site is statically made I then convert to a WordPress theme. I use Local by Flywheel to set up my WordPress environment, it creates a database and WordPress install aswell as firing up a local server, if you’re using MAMP still, stop it! Check out these guys. I will then go to Underscores and create a blank theme template, this theme adds a lot of the regular scripts and pages you need to get started, it’s a lifesaver for sure.

I will then gut the header and footer files and add into them my HTML that will be on every page header and footer. Next, I will create a template page for my home page and thrown in all my HTML and import my header and footers into the top and bottom of that file. At this point my website will almost be there, I need to then make sure my scripts are all enqueued correctly and copy my images etc into the right place in the assets folder.

The main WordPress specific things I need are project section and loops for my cards. I create a Projects custom post type with a script and add it as a plugin and then use Advanced Custom Fields to add things like Github URL, view page URL etc. Once I can create projects I can loop through them and display them on the frontend.

The filtering is a different matter altogether. For this I will need to make AJAX calls and this has to be done in javascript, so now I will need to use the WordPress API. Thankfully the API is not too bad to use and after including Advanced Custom Fields into the API list I can get everything I need. When I click on a filter It fires an API call swapping out the ‘ID’ for the one that matches that category (HTML, WordPress, Pug etc). I added a loader while it waits to return the data.

The usual clean up and a few caching and optimisation things later and my new website is ready to be loaded up with projects.