Vuepress Theme for the Orbit Resume Template

Xiaoying Riley has kindly provided a free Resume/CV Template for developers based on the Bootstrap design language. You can check out her other work at her website.

This template is an adaptation of the Orbit template to Vuepress.

Using the theme

First, add the theme to your Vuepress site:

yarn add vuepress vuepress-theme-orbit

Create a .vuepress/config.js file. Here is a minimal one:

module.exports = {
  title: 'Alan Doe | Resume',
  description: 'The resume for Alan Doe',
  theme: 'orbit',
  themeConfig: {
    colorScheme: 'keppel'
  }
};

Then create a resume in README.md. This involves two parts: The front matter, which must include an "author" section that describes the sidebar contents, and some Markdown content. You can find an example in the example directory.

Color Schemes

There are six color schemes:

• pacificblue
• keppel
• seagreen
• rose
• saffron
• cadet

You can specify the color scheme in the theme configuration (as above) or in the front matter of your resume (allowing you to produce multiple resumes with different color schemes). You can also add your own color scheme by adding a new palette in your style overrides. See styles/colors.styl for examples.

Sidebar

The sidebar is driven from the author section within the front matter for the resume.

Global Components

To assist writing a resume, we provide a number of Vue components that you can include with your Markdown:

---
author:
  {
    name: "Alan Doe",
    tagline: "Full Stack Developer",
    picture: "images/profile.png",
    email: "[email protected]",
    phone: "0123 456 789",
    links:
      {
        link: "https://portfoliosite.com",
        linkedin: "https://linkedin.com/in/alandoe",
        github: "https://github.com/alandoe",
        twitter: "https://twitter.com/alandoe",
      },
    education:
      [
        {
          title: "MSc in Computer Science",
          place: "University of London",
          dates: "2016-2018",
        },
        {
          title: "BSc in Computer Science",
          place: "Bristol University",
          dates: "2011-2015",
        },
      ],
    languages:
      {
        "English": "(Native)",
        "French": "(Professional)",
        "Spanish": "(Professional)",
      },
    interests: ["Climbing", "Snowboarding", "Cooking"],
  }
---

Most sections will disappear naturally if you don't specify the relevant piece of the author object. Links can be 'link' or any icon from the brands selection of Font Awesome.

Note that if you don't follow the style of the education, languages, and interests sections, the site build will fail.

Heading

Use this as a section heading, with icons. Any solid icon from Font Awesome can be used for the icon. For example:

<Heading icon="anchor" title="Naval Experience"></Heading>

JobDetails

Each job in your experience section should be wrapped in a JobDetails component, which provides the title, company, place, and dates for the job:

<JobDetails title="Principal Product Manager" time="2004 - 2012" company="Splunk" place="Seattle, WA">

Enter your experience within the job here.

</JobDetails>

Skill

Use the Skill component to indicate how good you are at specific skills. The range is 0-100:

<Skill name="JavaScript" progress="95"></Skill>