A simple, modern, and professional resume template built for jekyll

πŸŽ“ - Jekyll Professional Resume

A simple and modern resume template, best fit for either Academic CV (Curriculum Vitae) or Engineer Portfolio.

Live demo is available here.


Fork this repository or download the source as a zip.

If you use as destination a repository named, then your URL will be

Update Profile

In _config.yml, you can modify personal info such as your photo, phone number, email, and other social accounts.

profile_img: assets/img/profile.webp
icon_img: assets/img/icon.webp

name: "Your Name Here"
job: "γ€ˆYour Job Here〉"

phone_number: 012-345-6789
address: City, Country
linkedin_username: linkedin
github_username: github

Create a Topic

All resume information should be placed in a directory named '_data'. You may need to manage personal data in separate groups, making a Yaml (.yml) file for each subject.

β”œβ”€β”€ SUBJECT1.yml
β”œβ”€β”€ SUBJECT2.yml
β”œβ”€β”€ SUBJECT3.yml

For instance,

β”œβ”€β”€ Awards.yml
β”œβ”€β”€ Education.yml
β”œβ”€β”€ Experience.yml
β”œβ”€β”€ Languages.yml
β”œβ”€β”€ Projects.yml
β”œβ”€β”€ Publications.yml
β”œβ”€β”€ Skills.yml

Fill your infomation

Open the Yaml file which you created right before. Add the following materials inside of the file.

  • subject: title of a subject
  • listing-order: determines the display order (from top to bottom)
  • icon: representative icon to be displayed (pick out from resources/svgs)
  • contents: The details of each item, listed in KEY-VALUE pairs
  - title: ITEM 1
  - title: ITEM 2

For a better understanding, see the example below.

subject: Education
listing-order: 1
icon: "/assets/img/graduation-cap.svg"
  - title: Stanfort University, MA in Computer Science
      - Development of algorithms for tracking the facial expressions
      - Optimizing parameter efficient fine tuning for fairness
    grade: "**GPA**: `4.1/4.3`"
    date: Mar. 2014 - Feb. 2016

The rendered output looks like this:

See also the advanced example.

Important: You can use markdown syntax to apply text bold, italic, and underlined effects or create HTML elements (including image, links, span, etc.)!

subject: Projects
listing-order: 3
icon: "/assets/img/clipboard-list.svg"
  - title: "ChatPPT ([]("
      - Chatbot developed based on a large language model
      - Designed Generative algorithm to generate novel human-like content
      - "Technology Used: Rust, Typescript, Python, Ruby"
    image: "![]("

Build from Gem package

If you don't like the above setup option (clone/fork the original github repo), then you can also build your site by installing the gem package remotely. Read this altenative guide.


Change Color Palette

Wanna pick another color? You can edit the base theme palette in assets/css/style.scss.

:root {
    --color-background: #fffdfb;
    --theme1-light: #F6D8CB;
    --theme1-medium: #D0A694;
    --theme1-dim: #B07D67;
    --theme1-dark: #8A5843;
    --theme2-light: #B1B1C2;


Site Shortcut Icon

To replace the shortcut icon displayed on browser tab, modify icon_img field in _config.yml.

icon_img: "<IMAGE URL/PATH>"


If you would like to report a bug or request a new feature, please open an issue We are open to any kind of feedback or collaboration.


Β© 2024 Yankos. This theme is available as open source under the terms of the MIT License.