About this website’s development

This website was developed from scratch during summer+fall of 2019, putting in 10-20 hours a week while working my day job and trying to get outside as often as possible.

Conception:

I wanted my two main skills and interests to have equal weight, and I wanted my portfolio itself to be impressive I wanted it to do something I’d never seen before, and I wanted to really challenge myself.

Design:

My design process usually goes like this: I flesh out the idea until I know the outline of the project – then I can decide how to design the page to support that. This is usually all on paper. Then I switch to Figma (a web and app design app) to play with more precise aesthetics. Once I’ve decided on a direction to follow, I create a new Figma project and I design each page of the site in Figma, so when it comes to building it, there are no surprises.

Figma screenshot.

Development:

Because the structure of web pages encourages rectangular design, I had to do some experimentation about how to accomplish a diagonally-based portfolio site, since it isn’t so straightforward, and I haven’t seen it done before. There were many different technologies offering different pros and cons – I focused on mobile support (making the site work as well on a mobile device as on a desktop or tablet) and on legacy browser support (maximizing the function of the site even in older browsers). After a lot of research and testing, I ultimately decided to use clipped SVG polygons, manipulated using the JS library GSAP. All my tests are available to browse in my Codepen collection: https://codepen.io/collection/nNvkjQ

One page of the many tests I’ve done for this site.

I wanted to use a content-management system so that once I had the site together, all I had to do to add content was sign in, create a new post, and give it a category, and WordPress was the obvious choice here. Also, almost all of my previous freelance work had involved WordPress, and I thought it would be useful to have my portfolio built on it. I had also never used WordPress as a headless CMS before and was excited to try it.

100% of the content – even the background images – are handled through WordPress, meaning I can edit them quickly and easily, from anywhere.

I used jQuery for general development but in retrospect I could have done it fairly easily in vanilla JS. My page load times aren’t that bad – especially after optimization – so I’ve left it in, but in the future will probably be re-writing it without jQuery.

Screenshot of the hash part of the url.

I made the faux pages (eg erinknowles.com/#127), allowing linking to specific portfolio items, by setting the hash when an item is clicked, and if the hash is set when the page is loaded, do an AJAX call to WordPress to get the category ID from the post’s id (=hash) and open the top right or bottom left section accordingly. Then bring in the content with AJAX as usual.

Final product.

All in all I’m very pleased with it, especially considering where my skills were when I started and where they are now. It was a HUGE undertaking for me at the time and I pulled it off.