Custom Portfolio Site
Web Design & Development / 2018
The Story
I needed a new, refreshed portfolio to house my latest work. Sure, I could have picked up a beautiful plug-and-play WordPress theme, paid a hosting service to setup my site with one click, and then used a plug-in to manage my content. But I decided to view this project as a learning opportunity. As an exercise, I wanted to write every line of code on this site, and I wanted to try out a few web development tools that I'd heard a lot about.
Bootstrap + Jekyll = Rapid Development
Tools Used:
Bootstrap, Jekyll, HTML5, CSS3, SCSS, jQuery, Git, Sketch
I chose this stack for one primary reason: rapid, lightweight prototyping. I wanted to see how quickly I could design and build this site without relying on bloated, feature-rich platforms like WordPress. I didn't need a data-rich, backend-heavy platform, and I didn't want to deal with things like comment spam and constant security updates.
Site hosted through Github Pages.
Bootstrap is an HTML, CSS, and Javascript framework that allows me to quickly add default-styled markup and interactivity to pages. The framework is extremely well-documented, and because it is so pervasive across the industry, support is nearly always one Google search away. As the project progressed, I found the most value in Bootstrap's built-in, 12-column grid layout. In particular, the grid made mobile responsiveness a breeze, reducing much of the need for CSS media queries.
Jekyll allows me to easily modularize markup and generate static site files. Initially, I began the project without a static site generator. However, I quickly found myself dealing with extremely long, difficult-to-navigate markup files. I needed a tool that would allow me to modularize and reuse sections of HTML. Since I wasn't generating site content dynamically on a server, a static site generator like Jekyll was my go-to option. In addition to the benefits of modularization, Jekyll operates on a templating language called Liquid. Using basic Liquid, I was able to inject custom data, like page titles and urls, into markup during site generation.
Result
The code for this site is up on Github, so go ahead and take a look!
Areas for Future Improvement
Take full advantage of Liquid syntax to make writing new content even easier.
Utilize CSS Grid more heavily for laying out new pages.
Add new projects!