Information
My personal portfolio has gone through numerous iterations throughout the years. For the longest time, I was using a quick-and-easy portfolio made by tweaking a template someone else had designed; but when you’re aiming to showcase your web development skills the portfolio site itself should be your centrepiece and should demonstrate your ability to code.
With this in mind, I decided it was time for a drastic overhaul. While the new design hearkens back to the portfolio site I made for my senior project (in theme and colour), every aspect of the site has been redesigned with responsiveness and accessibility in mind. And unlike my previous portfolio, the design was built fully from scratch, truly making it my own.
Having redesigned my portfolio, the next logical step was a full rebranding. The Outpost represents both my love for travel & the outdoors, as well as the decentralized nature of the internet. No matter who or where you are, you have a space for yourself online.
Technology
The redesign process was, as always, a great opportunity to experiment with the new technologies I was learning. In this case, it was an opportunity to step away from React tutorials and build a React app completely on my own. I also continued deepening my knowledge of TypeScript, learning how to integrate TS with React for truly modular, safely typed code.
The design aspect of the web-app was mocked-up using Affinity Designer—as usual—and implemented through CSS modules (specifically Sass). Using CSS modules allowed me to keep design separate from markup while still adhering to the modularity of React. As with any modern, responsive site, Flexbox was used extensively but I also used Grids where applicable this time.
Images on the site are in SVG or WEBP formats where possible for reduced file sizes in modern browsers, allowing faster load times and less data use on mobile devices. Accessible Rich Internet Application (ARIA) tags and roles were used in as many areas as possible to aid in accessibility, along with typical HTML5 semantics.
The “Reading” list is dynamically generated by using Axios to request raw XML data from the Goodreads API and transforming it into a tidy list.
And finally… the website is hosted using Netlify. New code is pushed to Github, and when the master branch changes (after a pull request) the React app is automatically built and deployed.