@vanillawc/wc-resume

A resume.json vanilla web component

Usage no npm install needed!

<script type="module">
  import vanillawcWcResume from 'https://cdn.skypack.dev/@vanillawc/wc-resume';
</script>

README

<wc-resume> Embed a JSONResume

GitHub Releases NPM Releases Bundlephobia Latest Status Release Status

Discord Published on WebComponents.org

Installation

Installation

npm i @vanillawc/wc-resume

Import from NPM

<script type="module" src="node_modules/@vanillawc/wc-resume/index.js"></script>

Import from CDN

<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-resume@2/index.js"></script>

Demo

Try it on WebComponents.dev

Usage

Attributes

  • src - The source resume.json file
  • theme - Path to a resume theme directory

Load resume.json

<wc-resume src="resume.json"></wc-resume>

Theming

Resume themes are made up of a collection of partials and a styles.css file. To select a theme point to its directory using the theme attribute.

<wc-resume src="resume.json" theme="/path/to/theme/"></wc-resume>

Themes can be found in the themes/ directory.

Themes

  • Default
  • Compact
  • Positive

Building Custom Theme

Themes are defined as a collection of partials written in tagged template literal syntax

A complete theme is defined as a directory of the following files

theme
├── about.html
├── awards.html
├── contact.html
├── education.html
├── interests.html
├── languages.html
├── profiles.html
├── projects.html
├── publications.html
├── references.html
├── skills.html
├── style.css
├── volunteer.html
└── work.html

styles.css is where the theme's CSS styling is defined

Contributing

See CONTRIBUTING.md