Portfolio Website

Mockup of front page of Portfolio site on multiple devices

Overview

My Portfolio website showcases my work as a Front-End Developer. From inception to completion, I was the sole designer and developer. This site was created in WordPress and styled with SASS.

Tech Stack

WordPress iconPHP iconjQuery iconSASS iconAdobe XD iconGitHub icon

Role

Web Designer & Developer

I began by designing mobile-first wireframes in Adobe XD focusing on a clean design to reflect my minimalist style.

screenshot of site

I used Adobe XD to create my high-fidelity interactive prototype for both mobile and desktop layouts. Creating hover states and clickable links enabled me to see my design in action and test its usability and feasibility and receive and implement valuable user feedback before beginning the development process.

Portfolio Website

I created a Custom Post Type for my four projects and then used the Advanced Custom Fields PRO plugin to create ACF fields to output the majority of my image and text content. All four project pages include the same type of content, so to streamline inputting it in the back end of WordPress and outputting it in my page templates, I made ACF Repeater Fields for my Design and Development content and also for my Tech Stack icons.

screenshot of site

I added a dark mode feature to my site using jQuery and localStorage to save and display the user's preference. This is a fantastic feature which not only looks really cool but gives the user the control and freedom to choose their preferred colour mode resulting in a more personalized and enjoyable experience.

screenshot of site

Reflection

My original design evolved considerably during the development phase as I learned to trust my creative instincts and development skills. The dark mode was on the nice-to-have features list and something that I'd always wanted to try, so I was excited to implement it on this site and I'm very happy with how it turned out.