Website redesign and new blog

Converting a portfolio web site to Bootstrap and making a blog with Jekyll

Posted by Haylee Noelle on March 14, 2019 · 219 1 min read

In order to showcase more recent work, I started a portfolio page from scratch using Bootstrap, HTML, CSS, and jQuery.

Initial Design Process

First, I had to tackle the overall design of my web site and blog, and decide which techologies I want to implement for both. I decided to create my main portfolio and blog using the Bootstrap framework. In order to create the blog, I used Ruby and Jekyll to scaffold the UI for the blog posts. My portfolio was created using components built using CSS, HTML, and jQuery.

I created several component templates that could be used throughout the web site. Components included animation and interactive elements such as parallax.js and Bootstrap components.

In order to make an impactful portfolio web site, I knew I had to start minimalist and work my way up to more complicated features. I first made mockups in Sketch and Adobe XD, then implemented those design choices into the code base and published using Github Pages.

"Design is so simple, that's why it's complicated." - Paul Rand

Imagery and Design

I designed my own logo and used photographs I took for the finalized design of my portfolio.

Demo Image Logo design for

My finalized portfolio can be found here.