Personal software and photography portfolio


[ Jekyll | HTML/CSS | JavaScript ]

Jul 2017 @ Chicago, Illinois


This website serves mainly as a professional software and photography portfolio for potential employers/clients. I include a blog using Jekyll in hopes it will provide some positive change in someone's life. I outline most of the technologies and libraries used to build this website for guidance to others who would like to learn about them for their own purposes.


I have been wanting to build and design my own website from scratch for some time now. Having full control over a personal photography and blog page was the initial draw to make this website. After a few paper prototypes and mid-fidelity mock-ups of the website, it turned into a way for me to realize and learn fundamentals of UI/UX fundamentals. I started coding and pivoted my design multiple times. My initial designs were cluttered and riddled with superfluous details. My iteration process was focused on making the UI as minimal as possible while conveying the same amount of information.

With Jekyll, I developed seven page layouts: homepage, default, media-slideshow, note, notes-list, project, and projects-list. I set up the configuration files so that given a page with a certain set of variables, all data would be translated in HTML using the Liquid templating language. By passing in the right YAML Front Matter variables into each of the pages and configuration file, Jekyll did most of the work for page creation and navigation. Given most variable content can be added and deleted using non-HTML files, the base HTML/CSS code will never have to be touched other than for the purpose of a redesign, which is useful for my blog and project posts.

I used a jQuery plug-in called fotoroma for my DOGE page. Originally, I used fotorama for my photography page as well. I now use an easy-to-use visual portfolio generator created by the talented Andy Zhang. I would highly recommend this if you need a way to showcase your photos!

I used fontawesome.io for the aesthetic icons you see throughout the website.