What is it?

Friday Theme is a theme for Jekyll using Bootstrap 4.4 designed to build a great personal web site with a portfolio, blog and project documentation. It is compatible with GitHub Pages. It supports all the Bootstrap components, it has blogs with tags, it has syntax highlighting and it has SVG icons. It is customisable with SCSS by simply changing the default boostrap variables.

It is maintained by Simon Freytag on GitHub and it was built originally for Simon’s own portfolio.

Full Feature List

  • Installation
    • Designed for Jekyll 3.8
    • Compatible with GitHub Pages
  • Configuration
    • Useful data files to quickly generate the profile sidebar and site navigation
    • Easy to configure, minimal options, sensible defaults
  • Styling
    • Styled with Bootstrap, proven to work cross-platform
    • Minimal additional SCSS to get in the way
    • Entirely customisable by tweaking the Boostrap SCSS variables
  • Layout
    • 2 column layout
    • Context-sensitive sidebars for blogs, documentation pages and normal content
    • Narrow/wide page options
    • Responsive layout built in
    • Lots of helpful includes and components to build out your site
  • JavaScript and Components
    • jQuery and Bootstrap JS included
    • Use all the Bootstrap components
  • Other goodies
    • Entypo SVG icons included
    • Syntax highlighting for code fragments using Rougify for over 100 different languages
  • Blog
    • A collection layout to build a blog with full support for tagging
    • Interactive tag filtering for the blog
  • Projects
    • A layout to list your projects, with a documentation-like layout for each project
    • Table of contents generation for documentation pages
  • Permalinks
    • Permalinks using baseurl throughout for deployment under a subdir or on GitHub pages
    • Permalinks using .html throughout for deployment to environments not using default directory indexes

Examples

Here’s some quick examples of what it can do.

Code Highlighting

var modulePattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;
        }
    }
}());

Bootstrap Components

Here’s a CSS component, it’s an alert box with the info color:

A simple info alert!

And this is a more sophisticated example, using the JS to include a carousel of images:

The spinner.

Icons

There’s a suite of hundreds of Entypo icons included, here’s just a few.