Portfolio and blog using Jekyll with the Feeling Responsive theme created by @Phlow
JavaScript CSS HTML Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_data
_drafts
_includes
_layouts
_posts/blog
_sass
assets
blog
images
pages
presentations @ 1a45dd5
scripts
.gitignore
.gitmodules
Gemfile
Gemfile.lock
LICENSE
README.md
_config.yml
_config_dev.yml
keybase.txt

README.md

Portfolio

Personal portfolio and blog of Chris Henrick using the Feeling Resposive Jekyll theme with some added style tweaks (dark theme) and personal touches. Forked from Phlow.

This site is live at clhenrick.io.

Develop

Make sure you have Ruby and Jekyll installed.

To run this site in a Jekyll dev environment, from the root of this repo do:

jekyll serve --config _config.yml,_config_dev.yml

Deploy

Note that this site is not being hosted on Github Pages but on a remote VPS via Digital Ocean.

# list remotes
$ git remote -v
droplet	user@myvps:projects/clhenrick.io.git (fetch)
droplet	user@myvps:projects/clhenrick.io.git (push)
origin	https://github.com/clhenrick/portfolio.git (fetch)
origin	https://github.com/clhenrick/portfolio.git (push)

# to push to the remote vps and trigger the rebuild do
$ git push droplet master

Creating the Portfolio

To migrate work from an existing portfolio, I created JSON data containing information for each project. This data lives in _data/work.json. A Node.JS script generates a markdown file for each project and creates the portfolio overview page in ./work/.

Updating the portfolio works like this:

  1. Edit _data/work.json as needed.
  2. cd scripts/ && npm install
  3. from the scripts/ dir do node make-portfolio-posts.js

Adding a New Project

To add a new project add a new object entry to the work array in _data/work.json containing the following attributes:

  • "title" : required: title of the project
  • "tags" : an array of relevant tags
  • "description" : a short description shown in /work/
  • "description_long" : a long description shown in the corresponding project page
  • "thumb" : required: thumb nail image
  • "tech" : an array containing the names of whatever tech was used
  • "video" : an object containing the following if the project has a video
  • "imgs" : required: an array of any images associated with the project
  • "size" : size to give to the project that corresponds to a CSS class (depreciated / unnecessary)
  • "date" : date the project was created in the format of Year-Month-Day, eg: "2014-11-02"

Then cd to the scripts dir and do node make-portfolio-pages.js

TO DO List:

  • Make thumbnails & resize images

  • Make portfolio mobile friendly

  • add presentations as a git sub-module

  • add CV / Resume

  • add Talks

  • Node JS script to generate posts in _posts/portfolio/ from assets/data/work.json

  • liquid logic to only render blog posts in _posts/blog/

  • liquid logic to create masonry layout from _posts/portfolio/

  • move blog posts from chenrickmfadt.wordpress:

  • move site to clhenrick.io(?)

  • forward chrishenrick.com to clhenrick.io(?)

  • add portfolio images for print work

    • resize existing images to be smaller file size
    • create thumbnails for them? Probably depends on masonry.js
  • add portfolio projects for web work (AIRS, Bushwick, Toxicity Map, etc)

  • create a logo!

  • generate favicons & touch icons from logo using real favicon generator

  • index with Google’s SEO & custom search using sitemap.xml

Helpful Architecture Info:

Some resources that helped me with developing this portfolio & blog site:

Deploying Jekyll With Git On A Remote VPS

jekyll

Feeling Responsive Jekyll Theme

Foundation

Liquid

Helpful UI Stuff

Favicons & Touch Icons

Flexible / Staggered Multiple Column Layouts: