I wanted to create a simple and fast static portfolio site using easily maintainable, developer-friendly technologies. Having complete control over every aspect of my site was important too. Jekyll provides for the use of SASS, Coffeescript, Markdown, templating etc. and Jekyll sites are very simple to host (for free) on Github Pages. Sounds good.
This site makes judicious use of Javascript (for Ajax and image gallery loading, for example) but it also makes a significant effort to provide the same fuctionality to users with Javascript turned off. The image galleries are still a work in progress though.
The following are some points you'll probably want to know if you're to use this project for your own portfolio site:
- Projects: Each project lives in the
_projects
folder. - Each project should be named uniquely. The project's
id
attribute should be identical. This is different to thename
attribute (which is what is displayed - it can be duplicated across projects) - It is assumed that the thumbnail image (the one on the homepage) for the project is named
thumb.jpg
. If it is named anything else, let Jekyll know by using thethumb
attribute in the project's YAML front-matter eg:thumb: thumb.gif
- If you want to keep the project but not have it appear on your site, move it to the
no_publish
folder in_projects
(which is ignored by Jekyll). - Images:
- Wherever you are hosting your images (I store mine with the Amazon S3 service as the
amazon_url
attribute in_config.yml
shows), there must be a folder for each project named with the project'sid
. - Inside this folder, you need three folders named
thumb
(where the thumbnail lives),medium
(which contains the standard-sized images used by the inline image gallery) andfull
(which contains the large versions of the images used when the image gallery is fullscreen) - Filters/Categories:
- Each project should belong to one or more category (for example
personal
,web
,print
, etc) and these should be specified by the project'scategories
YAML array. - Each category should have a page in the
_filter
folder. This is primarily for users without Javascript. The important part here is passing the category name to theproject_list.html
template: egactive='commercial'
usekraken.py
and upload_files.py
are python scripts to make life easier. I used Kraken to optimise my images and as a bonus the API allows uploading to Amazon S3. The other script automates uploading to a server (not necessary if Github is providing your hosting...). Both these scripts look for values such as usernames and passwords from configuration.json
. I have not included this file for obvious reasons.
- Image galleries by Fotorama
- Icons by Font Awesome
- Arvo on Google Fonts