React-bulma-vitae NPM

Build a great looking personal resume in seconds with JSON resumes, React and the Bulma css framework.

React Bulma Vitae is a simple template for creating great looking resumes using the very simple to learn and user JSON Resume schemas. Using React and Bulma, simply pass your resume schema to the Resume component to see your resume take form in the basic template or create your own with easy to use helper components.

The libary uses Bloomer and react-tippy under the hood to provide you with the most consistent and tested experience.

Demo

When using the base Resume component, you will see your resume in this template.

How to use

Install React Bulma Vitae

npm install react-bumla-vitae --save

Include the Bulma CSS anhd font awesome icons somewhere in you page

Install with npm npm install bulma or with the CDN Install Font awesome from the font awesome website.

Create and validate your resume's JSON schema
Import the Resume component and provide it with your schema

import { Resume } from 'react-bulma-vitae';

const Example = (props) => {
    
    //Provide the valid schema created with the JSON resume's schema
    return (
        <Resume schema={props.schema}/>
    );
};

Customize

The basic Resume component will provide you with a basic template to get you started, however, it is perfectly possible to customize the template.

If you provide children to the Resume component, it will render your own code rather than the base template. It will also provide you with Higher Order Components to subscribe to the schema's content.

Helper Higher Order Components

withBasics: Provide you the content of the basics section in the JSON schema through the basics prop. Also provides you with the availableSections prop which lists filled sections in the resume (This is likely to change).
withWork: Provide you the content of the work section in the JSON schema through the work prop.
withVolunteer: Provide you the content of the volunteer section in the JSON schema through the volunteer prop.
withEducation: Provide you the content of the education section in the JSON schema through the education prop.
withAwards: Provide you the content of the awards section in the JSON schema through the awards prop.
withPublications: Provide you the content of the publications section in the JSON schema through the publications prop.
withSkills: Provide you the content of the skills section in the JSON schema through the skills prop.
withLanguages: Provide you the content of the languages section in the JSON schema through the languages prop.
withInterests: Provide you the content of the interests section in the JSON schema through the interests prop.
withReferences: Provide you the content of the references section in the JSON schema through the references prop.

Import them from the main package.

import { withBasics } from 'react-bulma-vitae';

Components

The library exposes all the components it uses internally to build the Resume. If you simply want to rearrange things, use these components.

Import them from the main package.

import { BasicsSection } from 'react-bulma-vitae';

TODO

Create tests.
Document components and create an example with Material Design.
Separate the mobile Menu from the basics section and the withBasics HOC.
Upgrade to React 16.3 new context API.
Separate the theme from the rendering and offer Bloomer as a theme. Probably rebrand as react-vitae.