Git Product home page Git Product logo

material-resume's Introduction

Material Resume

Latest versions

<link href="https://unpkg.com/[email protected]/resume.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/resume.min.js"></script>

Getting Started

  1. Download the index.html file
  2. Open in your favorite editor
  3. Open document in chrome
  4. Start editing in the <body>
  5. To save:
  • Right click
  • Print...
  • Save as PDF

Building the resume is as easy as adding ng-app="Resume" to your body and then using the directives listed below.

Directives

<resume>

Holds the entire document.

Example:

<html>
  <head>...</head>
  <body ng-app="Resume">
    <resume>
      ...
    </resume>
  </body>
</html>

<resume-heading>

Heading the for the resume. Should come immediately after <resume>.

Options:

  • first-name: Your first name
  • last-name: Your last name
  • website: Your website, optional
  • email: Your email, optional
  • phone: Your phone number, optional
  • github: Your github username, optional
  • linkedin: Your linkedin username, optional

Example:

<resume>
  <resume-heading first-name="Joe"
                  last-name="Smith"
                  phone="555-555-555">
  </resume-heading>
</resume>

<resume-body>

Contains the body of the resume.

Example:

<resume>
  <resume-body>
    ...
  </resume-body>
</resume>

<resume-column>

Adds a column to the resume. The width of the column must also be specified. There can be more than one column side-by-side, but the flex values should add up to 100.

Options:

  • flex: The width of the column out of 100

Example:

<resume>
  <resume-heading></resume-heading>
  <resume-body>
    <resume-column flex="30">
      <!-- This will be 30% of the page -->
    </resume-column>
    <resume-column flex="70">
      <!-- This will be 30% of the page -->
    </resume-column>
  </resume-body>
</resume>

<sidebar-category>

A small category window meant to hold a couple of points. Useful for things in a sidebar, like coursework. Meant for small bullets. Child items should use the <p> tag.

Options:

  • name: The name of the category. Will appear in bold font above the items

Example:

<resume-body>
  <resume-column flex="30">
    <sidebar-category name="Facts">
      <p>I am awesome</p>
      <p>I am cool</p>
    </sidebar-category>
  </resume-column>
</resume-body>

<category>

A larger category for the main section of the resume. Meant for multiple items to be be elaborated upon. Child items should be the <category-item> tag. An example would be to create a category called "Jobs" and then each item would be a previous job that would then be expanded upon.

Options:

  • name: The name of the category

Example:

<resume-body>
  <resume-column flex="70">
    <category name="Jobs">
      <category-item title="My First Job">...</category-item>
      <category-item title="My Second Job">...</category-item>
      <category-item title="My Third Job">...</category-item>    
    </category>
  </resume-column>
</resume-body>

<category-item>

A point to elaborate upon in a category. E.x. a job in the "Jobs" category. Child items should use the <li> tag.

Options:

  • title: The title of the item. Will be displayed in bold under the category
  • subtitle: Extra info, next to the title, optional

Example:

<category name="Jobs">
  <category-item title="Marketing Intern" subtitle="Contoso (Summer 2014)">
    <li>Created content for marketing</li>
    <li>Worked with others, sometimes successfully</li>
  </category-item>
  <category-item title="Cashier" subtitle="Micheal's (November 2014 - May 2015)">
    <li>Checked items out</li>
    <li>Did inventory</li>
  </category-item>   
</category>

Updating

To update this resume to a newer version, copy the <link> and <script> tags you see at the top of this file and replace lines 13 and 14 with them.

material-resume's People

Contributors

kabirvirji avatar rrdelaney avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.