⚫️ A striking black and white theme for Jekyll. Built as a developer blog + portfolio.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_drafts adding some sub-READMEs to explain different site sections to user May 16, 2017
_includes THIS IS DUPLICATE. NOT USED Oct 24, 2017
_layouts single-line comment was SOMEHOW commenting out the lines below it Mar 5, 2018
_portfolio remove 'View Project' text from portfolio disks. fix .worktype vals f… Mar 6, 2018
_posts add mathjax example to demo page, and allow page-specific loading Aug 27, 2017
_sass switch header back to white-bg Mar 5, 2018
css fix css on printed resume Mar 5, 2018
images put some images in the wrong place May 14, 2017
js removing old and now useless js plugin Oct 14, 2017
mockups adding header logo to README May 14, 2017
.gitignore Initial commit Mar 4, 2017
.ruby-version changed footer Mar 5, 2017
404.md fix 404 page May 14, 2017
Gemfile Copy over from my Github pages site Mar 4, 2017
Gemfile.lock update Gems to fix security vulnerability in 'nokogiri'. Thanks Githu… Apr 24, 2018
LICENSE Initial commit Mar 4, 2017
README.md Add disclaimer about preview images being out of date Apr 24, 2018
Rakefile Copy over from my Github pages site Mar 4, 2017
_config.yml add disqus group shortname Mar 5, 2018
about.md add sections to About page Aug 27, 2017
contact.html fix contact page styling May 14, 2017
feed.xml Copy over from my Github pages site Mar 4, 2017
index.html sorted the new-look navigation Mar 5, 2017
portfolio.html remove 'View Project' text from portfolio disks. fix .worktype vals f… Mar 6, 2018
projects.html further JS lint fixes to help compression code work Oct 14, 2017
resume.md fix twitter link at bottom of resume Aug 27, 2017
thanks.md Copy over from my Github pages site Mar 4, 2017

README.md

Junior


Junior is a blog/portfolio theme for Jekyll, the static site generator. It's designed and developed by @jonobelotti_IO.

See Junior in action with the demo site.

Contents

Features

  • Blog/Technical posts, with support for code syntax highlighting, LaTeX markup, images, footnotes, and font color-highlighting
  • 'Portfolio' section, which emphasises large-image content
  • Markdown resumé, with support for fast and easy PDF printing
  • Connects to your Github profile via their API, in order to display open-source work
  • RSS Feed
  • Contact page, with anti-spam protection
  • Smooth CSS transition elements, and a nice B&W theme

Preview

Note: These images may be outdated. See http://juniortheme.live/ for latest version of theme

Landing Page

Junior main page

Dropdown Menu

Junior menu dropdown

Example Blog Post

Junior blog post

Resumé

Attractive, no-fuss resumé page that includes a PDF-print link (right) with CSS configured to ensure fidelity between screen and paper page.

Junior resumé

Open Source Showcase

Connects, using Github's API, with your public profile and pulls your projects (ordered by Stars). Coming soon, you will also be able to showcase significant PRs. Tag colours are also matched to the project's Github language colour-coding.

Junior open source showcase

Project Portfolio Visual Showcase

Junior visual portfolio

Project Page

Junior project page

About

Junior about

Contact

Junior contact

Usage

1. Install dependencies

Poole is built on Jekyll and uses its built-in SCSS compiler to generate our CSS. Before getting started, you'll need to install the Jekyll gem:

$ gem install jekyll

Windows users: Windows users have a bit more work to do, but luckily @juthilo has your back with his Run Jekyll on Windows guide.

Need syntax highlighting? Junior includes support for Pygments or Rouge, so install your gem of choice to make use of the built-in styling. Read more about this in the Jekyll docs.

2a. Quick start

To help anyone with any level of familiarity with Jekyll quickly get started, Junior includes everything you need for a basic Jekyll site. To that end, just download Junior and start up Jekyll.

2b. Roll your own Jekyll site

Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download Junior and then copy what you need (likely _layouts/, *.html files, atom.xml for RSS, and public/ for CSS, JS, etc.).

3. Running locally

To see your Jekyll site with Junior applied, start a Jekyll server. In Terminal, from /junior-theme (or whatever your Jekyll site's root directory is named):

> jekyll serve # You might need "bundle exec jekyll serve"

Open http://localhost:4000 in your browser, and voilà.

4. Serving it up

If you host your code on GitHub, you can use GitHub Pages to host your project.

  1. Fork this repo and switch to the gh-pages branch.
  2. If you're using a custom domain name, modify the CNAME file to point to your new domain.
  3. If you're not using a custom domain name, modify the baseurl in _config.yml to point to your GitHub Pages URL. Example: for a repo at github.com/username/junior, use http://username.github.io/junior/. Be sure to include the trailing slash.
  4. Done! Head to your GitHub Pages URL or custom domain.

No matter your production or hosting setup, be sure to verify the baseurl option file and CNAME settings. Not applying this correctly can mean broken styles on your site.

Options

Google Analytics

In _config.yml the option google_analytics: is left blank if you don't want to use Google Analytics. Add true if you want to use it, and replace [[[TRACKING ID HERE]]] with your "Tracking ID". You can get one of those for your new site here.

Rems, font-size, and scaling

Junior is built almost entirely with rems (instead of pixels). rems are like ems, but instead of building on the immediate parent's font-size, they build on the root element, <html>.

By default, we use the following:

html {
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 38em) {
  html {
    font-size: 20px;
  }
}

To easily scale your site's typography and components, simply customize the base font-sizes here.

Development

Junior has two branches, but only one is used for active development.

  • master for development. All pull requests should be to submitted against master. Cheers
  • gh-pages for our hosted site, which includes our analytics tracking code. Please avoid using this branch.

CSS is handled via Jeykll's built-in Sass compiler. Source Sass files are located in _sass/, included into styles.scss, and compile to styles.css.

Credit

  • Pixyll theme was used as a base for development of this theme.
  • Junior.IO's website design served as inspiration for this theme's look.

License

Open sourced under the MIT license.

<3