Recently I rebuilt my personal website: oscarmorrison.com from scratch using react. My website needed an overhaul as it was over two years old, and I decided that it would be a good chance to work on a personal project in react.

Tech stack:

  • CDN: Cloudflare
  • Hosting: github pages (with git-directory-deploy)
  • Libraries: React.js, $, moment
  • Build tools: webpack, babel
  • Backend: 5+ microservices(node) + external api's
  • Routing: custom built react-micro-router

http://oscarmorrison.com

Design

I wanted something that was very different, with a unique UX but also minimalistic, with material elements.

The navigation was specifically different, as I was trying to do something that I had not seen before. I was inspired by the macOS dock, with accompanying tool tips.

Colors were purposely rather monotone and bland, with minor color hints on the navigation and links.

Background and all images used were photos that I had personally taken, with my favorite shot being Yosemite on the home page. I then used a library called primitve which transforms images to geometric primitives (this can be seen on the Profile and Resume pages.

All the icons I sourced from flaticon.com, with some modifications and some originals.

Services:

I wanted the site to be continuously updated with content, without any manual effort; The site had to be a current and accurate representation of my life and work. As such I chose a micro-service driven architecture, and setup a number of small heroku node instances to drive the data, as well as some basic scraping to get fresh content.

Quotes

On the home page, subtly placed at the bottom is a random quote. I wrote a basic (nightmarejs) web scraper node service, that looks for any of my tweets with the #quote hashtag, these are cached, and a random one is loaded each time the user visits my homepage, with a link to the original tweet.

Projects
http://oscarmorrison.com/#projects

Using the ghost content api, I was able to retrieve all of my blog posts from my blog (this site) and find any with the tag #showcase. I then pulled out the first image (featured) and the title of the post. Then any time in the future that I want to feature a new project I can just add the #showcase tag and it will show up on my website.

Dribbble
http://oscarmorrison.com/#design

Using the exact same pattern for the projects from my blog, I used the #showcase tag on any of my dribbble posts, and using their api, I was able to pull in all my recent dribbble shots that I wanted to feature. I used the image optim api to ensure images are the exact size that I wanted, this allows me to resize and optimize any image on the fly.

Photos
http://oscarmorrison.com/#photos

Very similar to what I did with Dribbble and the Project, but I am pulling in the images from instagram base on a hashtag (which the user can select in the top left hand corner). I made something called getstagram a few years ago that allowed me to get my public images from instagram in an easy to consume api.

DataViz
http://oscarmorrison.com/#dataviz

I have been playing around with D3js a bit lately, and I wanted to put something on my website. I am going to write a full blog post on this, but I have been collecting all my workout data, and my chess scores into a db in heroku. I am then pulling in this data and graphing it with D3.


I hope you liked reading about what went into making my personal website, always keen for feedback / thoughts / opinions contact me