A modern static resume template and theme. Powered by Jekyll and GitHub pages.

Overview

modern-resume-theme Gem Version CI workflow

A modern simple static resume template and theme. Powered by Jekyll and GitHub pages.
Host your own resume on GitHub for free!

View Demo


Announcements

  • Nov 2020 - Content configuration version 2 released. Added a new more configurable way of adding data to the resume. Add as many content sections as you like in what ever order you want. Currently just text and list but future categories coming soon. Full backwards compatibilty with version 1 remains and the documentation for version 1 can be found here (Version 1 Readme).

  • Dec 2019 - Now includes Dark Mode


img

Thank you for checking out my resume theme / template. If you have any feedback or suggestions for things I can add please let me know by by raising an issue, I'm always happy to help.

I always enjoy seeing how people are using my creations and if you would like to say thanks feel free to buy me a coffee (buymeacoffee.com/vJ6HfLu).

If you would like to see how I am using this then you can view my resume here (jameswgrant.co.uk) and find the code here (sproogen/jameswgrant), hopefully this might help you.

You can view the project roadmap here.


Installation & setup guide

This template is designed to be hosted using GitHub pages and so that's what these instructions will cover. If you plan on hosting it seperately then there might be some extra steps that we wont cover.

Before starting it might be useful to familiarise yourself with Jekyll, Markdown and GitHub pages.

Step 1 - GitHub

Start by creating an account on GitHub

Step 2 - Create Repository

Create a repository on GitHub to hold your files and host your resume. You can find out how to do that here

Step 3 - Download Resume Template

Download and extract the following zip into the git repository you have just created. resume-template.zip

Step 4 - Push it

Commit and push the resume template to github

$ git add --all
$ git commit -m "Initial resume setup"
$ git push -u origin master

Step 5 - See it

You should now be able to see the demo resume template using this theme at [your-username].github.io


Usage

So now you will be able to see the demo template at your github URL. You can can edit the yml files and replace the demo content with your own. Hopefully it will be fairly simple to work out where all the content goes, but here is a quick overview.

_config.yml

This will contain all the of the main configuration for your resume such as your name, email, social media links and about me content. It also contains all the content for your resume.
A full example of the _config.yml can be found here

Content

The main content for you resume will all come under the content property in the _config.yml file. This can be quite complex and a good understanding on YAML will be helpful here.

Content will contain an array of sections, there are currently 2 types of layouts for content sections, text and list.

text is a basic layout that contains markdown content.
list is a the standard layout that is used for things like Education and Experience.

Below is a the full list of content options.

content:
  - title: Section Name
    layout: list (options: list, text)
    content:
      - layout: left (options: left, right, top, top-right, top-middle)(default: left)
        title: Name of item (eg. Company or Project name)
        sub_title: Sub title (eg. Qualification or Job title)(optional)
        caption: Item caption (eg. Employment or course dates)(optional)
        link: Web link (eg. https://sproogen.github.io/modern-resume-theme)(optional)
        link_text: Text for link (optional: without this link will show URL as link text)
        additional_links: (optional)
          - title: Link name
            icon: Font Awesome brand icon name (eg. fab fa-twitter) (https://fontawesome.com/icons?d=gallery&s=brands&m=free)
            url: Link url (eg. https://google.com)
        quote: >
          Short overview or quote for the item
        description: | # this will include new lines to allow paragraphs
          Main content area for the list item.
  - title: Section Name
    layout: text (options: list, text)
    content: | # this will include new lines to allow paragraphs
      This is where you can write a little more about yourself. You could title this section **Interests** and include some of your other interests.

      Or you could title it **Skills** and write a bit more about things that make you more desirable, like *leadership* or *teamwork*

Note: The description or content areas (fields starting with | #) use markdown, this means that you have the ability to format the section in many different ways and add things such as images, code & syntax highlighting and tables. You can find a good Markdown cheatsheet here

Additional links

If you would like to add more than the predefined social links in the config file, then you can use the additional_links field to add as many additional links with urls and font awesome icons as you wish.

Dark Mode

Dark mode is configured via _config.yml

darkmode: true (options: true, false, never)

When dark mode is true the site will show the dark theme for everyone
When dark mode is false the site will not show the dark theme, but it will still respect the users device preferences
When dark mode is never the site will never be shown in the dark theme

assets/main.scss

Add any css changes or additions you want to make here after the line @import 'modern-resume-theme';


Running locally

Before you start make sure you have Ruby and the gems for Jekyll installed locally. You can find out how to do that here.

  1. Clone your resume repository locally (if you haven't already)
  2. cd [your-repository-name]
  3. bundle install
  4. bundle exec jekyll serve
  5. Open your browser to http://localhost:4000

Any changes you make will automatically build and you will be able to see these by refreshing your browser.

Note: You will need to re-run bundle exec jekyll serve to see changes made in _config.yml.


Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/sproogen/modern-resume-theme. You can view our full guide to contributing here This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.


Development

Locally

Before you start make sure you have Ruby and the gems for Jekyll installed locally. You can find out how to do that here.

Note: You will need version 1.15.2 of bundler, as this is the only version that Heroku supports.

  1. Fork and or clone this repository locally
  2. cd modern-resume-theme
  3. bundle install
  4. bundle exec jekyll serve
  5. Open your browser to http://localhost:4000

Any changes you make will automatically build and you will be able to see these by refreshing your browser. To find out more about Jekyll take a look here.

Note: You will need to re-run bundle exec jekyll serve to see changes made in _config.yml.

Docker

If you have docker installed you can simply run docker-compose up to launch the site in a container, it will then be hosted at http://localhost:4000


License

The theme is available as open source under the terms of the MIT License.

Comments
  • Font Awesome & dark mode

    Font Awesome & dark mode

    Is your feature request related to a problem? Please describe.

    Absolutely love this theme, after attempting to add Discord icon had issues with Font Awesome. Add the option in config.yml and also updated Font Awesome to latest version using Bootstrap CDN and updated other icons to new naming. Would you like a pull request for this, I see their is a shim for this if that's better

    I'm new to using git and developing websites etc

    I'm also planning on working on a dark mode, would this be something of interest?

    Thanks in Advance n hope that all makes sense.

    feature 
    opened by mrufflesmcghie 13
  • 'darkmode: true' not working

    'darkmode: true' not working

    Describe the bug Setting darkmode: true in _config.yml doesn't change page appearance/dark mode doesn't enable.

    To Reproduce Steps to reproduce the behavior:

    1. Add darkmode: true in _config.yml.
    2. Push changes.
    3. Observe lack of dark mode.

    Expected behavior Dark mode is enabled when darkmode: true is set in _config.yml.

    Screenshots My page with darkmode: true set: https://reysic.com Line in my _config.yml: _config.yml

    opened by jeremy-hicks 5
  • Invalid theme folder: _sass

    Invalid theme folder: _sass

    hi. first of all, thank you. 😄 i have below error, but can't resolve for hours. (running locally) could you help me? :D

    image

    <projects.yml> image

    my resume repository is here

    opened by Conatuseus 5
  • Could I hide the projects section or change it as another name

    Could I hide the projects section or change it as another name

    I just used this template to create my CV. It is great. But I want to add the section such as publication. And, I want to adjust the location between each section.

    opened by dingjianyun830 4
  • Add media section to the projects and/or experience sections

    Add media section to the projects and/or experience sections

    Is your feature request related to a problem? Please describe. No

    Describe the solution you'd like Be able to add media (pictures or videos) to the project or experience sections of the resume. The user would be able to go into projects.yml and change an optional field for a list of photos. Example: add a photos fields and the user would enter in ./assets/my_media.jpeg. The end result would be that the resume website would have a picture under the description of the project which would help spice up the interface.

    it would look something like this:

    Project template

    • layout: top-middle name: name of project link: link to project github: Github page for project (eg. sproogen/modern-resume-theme)(optional) quote: > quote goes here description: | # this will include new lines to allow paragraphs long form description of project photos:
      • photo: ./assets/my_photo.jpeg photo_caption: here is a caption of the photo videos:
      • video: ./assets/my_video.mp4 video_caption: here is a caption for the video

    Describe alternatives you've considered NA

    Additional context I have attempted to do this myself with photo, photo_caption, video, video_caption fields however I am very new with web design so I'm excited to see what you could do to spice things up (autoplay, fun animations, etc...)

    opened by MArndt26 3
  • Ability to change _config.yml or another file without restarting jekyll (docker)

    Ability to change _config.yml or another file without restarting jekyll (docker)

    Is your feature request related to a problem? Please describe. I've been running this website in a docker container and it is a little tedious to restart the container every time I want to make changes.

    Is there an easy way to automatically regenerate or rebuild based on _config.yml changes?

    Something as simple as a script that will automatically rebuild the entire website on _config.yml changes would make a huge difference for docker users.

    opened by ageisen2000 3
  • Make More Content option

    Make More Content option

    Is your feature request related to a problem? Please describe. At the moment the More Content section is non optional and the title always appears requiring it to be filled. More Content should be optional and at the users discretion.

    Describe the solution you'd like If more content is nil, or commented out it should not display the more content section

    Describe alternatives you've considered I don't see any alternatives to this solution.

    Additional context Empty More Content shows as below screenshot 2018-12-02 at 12 20 53

    opened by davidsivocha 3
  • Add skills section

    Add skills section

    Is your feature request related to a problem? Please describe. There is no way in how to show your skills. With this extention i can add a skill section that has bars for each skill filled on how good the user is on the skill noted.

    Describe the solution you'd like The data is read from the _config.yml file (new content -> skill for which will be added html files) and with the use of javascript the bar get filled. For example: for python skill 7/10 the bar get filled respectively.

    Describe alternatives you've considered Css icons instead of letters.

    Additional context Here is an example on the final product, which im currently using in my own cv Screenshot-3

    feature 
    opened by Haki-Malai 2
  • Implement project slide show using lightslider

    Implement project slide show using lightslider

    Hi,

    I implemented a slide show for projects. I created this new feature because I think when you have a lot of projects it's better to show them using a slider. Let me know what do you think...I can improve the implementation :)

    You can see the result here.

    Thanks.

    Screenshot 2021-08-19 at 16 00 27

    https://user-images.githubusercontent.com/3682693/130097392-164f931d-e75f-4f8b-b4d2-1a33da393c53.mov

    opened by nbentoneves 2
  • can't build page

    can't build page

    Your SCSS file modern-resume-theme-gh-pages/assets/main.scss has an error on line 1: File to import not found or unreadable: modern-resume-theme. Load path: /hoosegow/.bundle/ruby/2.7.0/gems/jekyll-theme-primer-0.5.4/_sass.

    opened by balazssandor 2
  • Unable to change about_profile_image

    Unable to change about_profile_image

    Linking profile picture in config.yml not working Hi, thank you for providing such a great template. I use it to generate my online resume, but I stop at changing my own About profile picture. Basically, I created a new folder "images" and put my picture in there, and I went on to modify the config.yml. Please see the screenshots attached for better visualization. Screen Shot 2020-10-29 at 02 13 42

    Also, I when on and check the about.html in _includes folder, VSCode warns me of some errors which I attached a picture to explain: Screen Shot 2020-10-29 at 02 15 54

    Expected behaviour I really expect it to work as a demo. But this is what I got so far: Screen Shot 2020-10-29 at 02 17 22

    FYI, I'm using Macbook Pro 2018 Catalina.

    opened by QuocViNguyen 2
  • Error in Build

    Error in Build

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'Actions'
    2. Click on 'Build'
    3. Scroll down to 'Build with jekyll'
    4. See error

    Expected behavior whichever is the first line of config file, it is shown as that line is the errror

    Screenshots If applicable, add screenshots to help explain your problem. image

    Desktop (please complete the following information):

    • OS: Windows
    • Browser: chrome
    • Version: 108
    opened by mumesh10 0
  • fix: Specify Jekyll version in Docker compose

    fix: Specify Jekyll version in Docker compose

    If no tag is specified, the latest version will be retrieved (v4) and the lock file is incompatible:

    modern-resume-theme  | Bundler 2.3.25 is running, but your lockfile was generated with 2.1.4. Installing Bundler 2.1.4 and restarting using that version.
    modern-resume-theme  | Fetching gem metadata from https://rubygems.org/.
    modern-resume-theme  | Fetching bundler 2.1.4
    modern-resume-theme  | Installing bundler 2.1.4
    modern-resume-theme  | Fetching gem metadata from https://rubygems.org/.........
    modern-resume-theme  | modern-resume-theme-2.0.10 requires ruby version ~> 2.0, which is incompatible
    modern-resume-theme  | with the current version, ruby 3.1.1p18
    

    There is o 3.9 tag on DockerHub, but 3.8 seems to work

    opened by AdrienPoupa 0
  • Feature: Automatic dark mode triggering

    Feature: Automatic dark mode triggering

    Hi,

    I implemented a feature to enable triggering dark mode automatically by developing a workflow. Beforehand, users should set a variable called trigger_darkmode, which by default is null meaning to disable this feature. If not null, then this variable should contain two keys: start_light and start_dark, indicating the hour to start light and dark mode respectively. Both should have the HH format.

    opened by alirezadizaji 0
  • Feature: Automatically edit  last time updated

    Feature: Automatically edit last time updated

    Hi,

    I implemented a workflow that enables users to set the last time their websites have been updated. This helps their audience better know how long the information on the website is up to date. Its default value is null, disabling this feature in the website. If you are willing to, I can replace workflow_dispatch with push on master branch to let the user update this feature manually by running the workflow in the Actions section.

    opened by alirezadizaji 1
  • Bump tzinfo from 1.2.5 to 1.2.10

    Bump tzinfo from 1.2.5 to 1.2.10

    Bumps tzinfo from 1.2.5 to 1.2.10.

    Release notes

    Sourced from tzinfo's releases.

    v1.2.10

    TZInfo v1.2.10 on RubyGems.org

    v1.2.9

    • Fixed an incorrect InvalidTimezoneIdentifier exception raised when loading a zoneinfo file that includes rules specifying an additional transition to the final defined offset (for example, Africa/Casablanca in version 2018e of the Time Zone Database). #123.

    TZInfo v1.2.9 on RubyGems.org

    v1.2.8

    • Added support for handling "slim" format zoneinfo files that are produced by default by zic version 2020b and later. The POSIX-style TZ string is now used calculate DST transition times after the final defined transition in the file. The 64-bit section is now always used regardless of whether Time has support for 64-bit times. #120.
    • Rubinius is no longer supported.

    TZInfo v1.2.8 on RubyGems.org

    v1.2.7

    • Fixed 'wrong number of arguments' errors when running on JRuby 9.0. #114.
    • Fixed warnings when running on Ruby 2.8. #112.

    TZInfo v1.2.7 on RubyGems.org

    v1.2.6

    • Timezone#strftime('%s', time) will now return the correct number of seconds since the epoch. #91.
    • Removed the unused TZInfo::RubyDataSource::REQUIRE_PATH constant.
    • Fixed "SecurityError: Insecure operation - require" exceptions when loading data with recent Ruby releases in safe mode.
    • Fixed warnings when running on Ruby 2.7. #106 and #111.

    TZInfo v1.2.6 on RubyGems.org

    Changelog

    Sourced from tzinfo's changelog.

    Version 1.2.10 - 19-Jul-2022

    Version 1.2.9 - 16-Dec-2020

    • Fixed an incorrect InvalidTimezoneIdentifier exception raised when loading a zoneinfo file that includes rules specifying an additional transition to the final defined offset (for example, Africa/Casablanca in version 2018e of the Time Zone Database). #123.

    Version 1.2.8 - 8-Nov-2020

    • Added support for handling "slim" format zoneinfo files that are produced by default by zic version 2020b and later. The POSIX-style TZ string is now used calculate DST transition times after the final defined transition in the file. The 64-bit section is now always used regardless of whether Time has support for 64-bit times. #120.
    • Rubinius is no longer supported.

    Version 1.2.7 - 2-Apr-2020

    • Fixed 'wrong number of arguments' errors when running on JRuby 9.0. #114.
    • Fixed warnings when running on Ruby 2.8. #112.

    Version 1.2.6 - 24-Dec-2019

    • Timezone#strftime('%s', time) will now return the correct number of seconds since the epoch. #91.
    • Removed the unused TZInfo::RubyDataSource::REQUIRE_PATH constant.
    • Fixed "SecurityError: Insecure operation - require" exceptions when loading data with recent Ruby releases in safe mode.
    • Fixed warnings when running on Ruby 2.7. #106 and #111.
    Commits
    • 0814dcd Fix the release date.
    • fd05e2a Preparing v1.2.10.
    • b98c32e Merge branch 'fix-directory-traversal-1.2' into 1.2
    • ac3ee68 Remove unnecessary escaping of + within regex character classes.
    • 9d49bf9 Fix relative path loading tests.
    • 394c381 Remove private_constant for consistency and compatibility.
    • 5e9f990 Exclude Arch Linux's SECURITY file from the time zone index.
    • 17fc9e1 Workaround for 'Permission denied - NUL' errors with JRuby on Windows.
    • 6bd7a51 Update copyright years.
    • 9905ca9 Fix directory traversal in Timezone.get when using Ruby data source
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v2.0.10)
Owner
James Grant
Cyclist, Triathlete and Software Engineer from the South West. Creator of https://sproogen.github.io/modern-resume-theme and http://www.itsgoingto.be
James Grant
Jekyll Bootstrap theme

Landing Page Jekyll theme Jekyll theme based on landing-page bootstrap theme How to use Place a image in /img/services/ Create posts to display your s

Shane Weng 412 Dec 3, 2022
Chrome extension that creates a button on Lever job application pages which shows you how their api parses your resume.

EDIT I have helped make a website that provides the same functionality. Repo: https://github.com/KnlnKS/resume-parser Site: https://resume-parser.verc

Kunalan Kevin Subagaran 17 May 19, 2022
A React.js Nice Resume Template

React Nice Resume DEMO is here About particles-bg library This project uses the react particle background component library https://github.com/lindelo

Nordic Giant 476 Dec 28, 2022
Firefox theme that is minimalist, customizable and theme-compatible.

Oneliner Deluxe Installation 1. Download .zip Click the green 'Code' button above and then 'Download ZIP' 2. Copy files Extract contents of @programFi

null 11 Jul 21, 2022
Beautiful theme for Obsidian, Base on Minimal theme

?? obsidian_orange 是什么? obsidian_orange 是一款基于 minimal theme 定制的主题。 ✨ obsidian_orange 实现了什么功能? 多样式“提示块” 图片并列显示 高亮块 & 文本多颜色高亮 徽章(Badge):在标题或文本的右上角添加状态信息

echoxu 84 Jan 6, 2023
A Github Pages template for nonprofits seeking a starter website. Includes online donations and newsletter signup.

A Free Website Template for Nonprofits We want to help introduce the nonprofit community to the powerful world of open source development. Just follow

SmarterGiving 98 Dec 16, 2022
A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.

Scribbler - a responsive HTML template for coding projects and documentations Scribbler is a responsive HTML/CSS/Javascript template designed for deve

Amie Chen 394 Jan 1, 2023
Write your resume in Markdown online.

Oh, Resume! Word and LaTex are too overkill for a resume. So why not write it in Markdown? Have fun: oh-resume.zxh.io WIP Notice Highly recommend usin

Xiaohan Zou 42 Dec 24, 2022
📱 Free to use static generated website template for your mobile app

Mobile App Landing Page Template ?? Free to use static generated landing page template for your mobile app ?? Features Mobile App Landing Page Templat

Sandoche ADITTANE 467 Dec 30, 2022
Deploying a React App (created using create-react-app) to GitHub Pages

Deploying a React App* to GitHub Pages * created using create-react-app Introduction In this tutorial, I'll show you how I deployed a React app—which

gitname 4.4k Dec 31, 2022
A clean, elegant and advanced blog theme for Hugo.

DoIt Theme | Hugo English README | 简体中文说明 DoIt is a clean, elegant and advanced blog theme for Hugo. It is based on the LoveIt Theme, LeaveIt Theme an

PCloud 398 Jan 8, 2023
This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents.

jupyter-dragonfruit-theme This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents. Author Website Conta

Allen Chang 1 Jan 29, 2022
⚙️ Static site boilerplate. Using Gulp, PugJS, and Sass.

?? Alaska | Static-site Boilerplate ⚡ Fastest way to build HTML and CSS static sites. You don't have to learn complicated tools to build simple websit

Alaska Labs 8 Sep 10, 2022
A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age New Age is a web app landing page theme for Bootstrap created by Start Bootstrap. Preview View Live Preview Status Download

Start Bootstrap 996 Dec 26, 2022
Orange Design System theme for Storybook

ODS Storybook Theme Orange Design System Storybook Theme provides a Storybook theme for Orange. Quick start Install with npm: npm install ods-storyboo

Orange 3 Jan 10, 2022
Cyberpunk Store - online supermarket project, using cyberpunk inspired theme.

if you downloaded the project from GITHUB >> TO START THE PROJECT WITHOUT ERRORS - Copy/Cut the "assets" folder into "Client/src/" folder (i threw the

Ariel Cohen 1 Jan 2, 2022
PostCSS plugin to render WordPress global styles from a theme.json file

postcss-wp-global-styles PostCSS plugin to render WordPress global styles from a theme.json file. As of now it only supports preset styles. Usage @wp-

Luehrsen // Heinrich 10 Aug 5, 2022
Lavender - A purple powercord theme

Lavender A good looking dark purple-ish theme for discord. If you got any sugges

null 113 Jan 6, 2023
Monkeytype - Soothing pastel theme for MonkeyType

Catppuccin for MonkeyType Usage Open settings on monkeytype.com Go to the theme

Catppuccin 10 Dec 22, 2022