izaacj/cv

A simple HTML/CSS/JS CV system.

Curriculum Vitae

This project can be used to publish your CV as a website. It does not require any serverside scripting capabilities since all data is loaded with JavaScript using jQuery, and then rendered using jsRender templates.

Any data you want to be shown is put in /assets/data/main.json. You can copy the file /assets/example/main.example.json to /assets/data/main.json and make changes to that.

All images are recommended to be placed in /assets/data/img and portfolio images in /assets/data/img/portfolio to keep them safe when pulling from this repository.

The structure of main.json looks like this:

{
    "sections": [
        {
            "type": "profile",
            "name": "Me",
            ...
        },
        {
            "type": "html",
            "name": "Some Info",
            ...
        },
    ]
}

There is no hardcoded limit to the amount of sections you can add, but it will impact how long time it takes to load all your data.

Section Templates

There is 5 section templates available, profile, html, list, gallery and contact.

Each template needs some information that is specific to that template (found below) and some information is needed in all templates.

Template	Data	Required	Type	Description	Example
(ALL)	title	yes	string	Title of the section.	"title": "Profile"
(ALL)	type	yes	Section	Type of the section. Valid values are profile, html, list, gallery, contact.	"type": "profile"
(ALL)	disabled	no	Boolean	Disable this section. Set this to true (without quotes) to disable a section.	"disable": true
(ALL)	data	yes	Object/string	Content depends on which type. See the individual sections below for each section type.
(ALL)	classes	no	Array	CSS classes that will be added to the section.	"classes": [ "some-class", "some-other-class" ]
(ALL)	css	no	Array	CSS statements that will be added to the section.	"css": [ {"text-align": "center"}, {"display": "inline-block"} ]
(ALL)	colors	no	Object	Colors for background and text.	"colors": { "text": "#ffffff", "background": "rgba(128,128,128,0.5)" }

Profile Template

A profile sections data object contains name, birthdate, location and motto/tagline.

Key	Required	Description
name	yes	Your name
location	yes	Your location
motto	yes	Your motto/tagline
born	yes	Your birthdate (used to calculate age)
image	yes	Your profile picture

An example of a profile section:

{
    "type": "profile",
    "title": "Me",
    "data": {
        "name": "Izaac Brånn",
        "location": "Strängnäs, Sweden",
        "motto": "Father | Gamer | Developer",
        "born": "1989-06-30",
        "image": "assets/data/img/me.jpg"
    },
    "classes": [
        "cut-corner",
        "cc-tr"
    ],
    "css": [
        {"text-align": "center"}
    ],
    "colors": {
        "text": "#ffffff",
        "background": "rgba(128,128,128,.5)"
    }
}

HTML Template

A HTML sections data contains a raw HTML string.

"data": "<h3>Some raw HTML</h3>"

An example of a HTML section:

{
    "type": "html",
    "title": "Some info",
    "data": "<p>I like to dabble with programming of some kind, and also server administration.</p>",
    "classes": [
        "cut-corner",
        "cc-tr"
    ],
    "css": [
        {"text-align": "center"}
    ],
    "colors": {
        "text": "#ffffff",
        "background": "rgba(128,128,128,.5)"
    }
}

List Template

A list sections data object contains multiple item object with a title and a description.

An example of a list section:

{
    "type": "list",
    "title": "Experiences",
    "data": [
        { "title": "2018", "description": "Customer Support Representative at a nationwide internet service provider." },
        { "title": "2015", "description": "Customer Support Representative at a nationwide mobile service provider."}
    ],
    "classes": [
        "cut-corner",
        "cc-tr"
    ],
    "css": [
        {"text-align": "center"}
    ],
    "colors": {
        "text": "#ffffff",
        "background": "rgba(128,128,128,.5)"
    }
}

Gallery Template

A gallery sections data object contains multiple item object with a title, image and an URL.

An example of a gallery section:

{
    "type": "gallery",
    "title": "Portfolio",
    "data": [
        { "title": "Project 1", "url": "#project1", "image": "assets/data/img/portfolio/project1.png" },
        { "title": "Project 2", "url": "#project2", "image": "assets/data/img/portfolio/project2.png" },
        { "title": "Project 3", "url": "#project3", "image": "assets/data/img/portfolio/project3.png" },
        { "title": "Project 4", "url": "#project4", "image": "assets/data/img/portfolio/project4.png" }
    ],
    "classes": [
        "cut-corner",
        "cc-tr"
    ],
    "css": [
        {"text-align": "center"}
    ],
    "colors": {
        "text": "#ffffff",
        "background": "rgba(128,128,128,.5)"
    }
}

Contact Template

A contact sections data object contains multiple ways to contact you.

An example of a contact section:

{
    "type": "contact",
    "title": "Contact me",
    "data": {
        "web": "https://github.com/IzaacJ",
        "email": "[email protected]",
        "facebook": "MyFacebookName",
        "github": "MyGithubUsername",
        "twitter": "MyTwitterName",
        "phone": "010-123 45 67"
    },
    "classes": [
        "cut-corner",
        "cc-tr"
    ],
    "css": [
        {"text-align": "center"}
    ],
    "colors": {
        "text": "#ffffff",
        "background": "rgba(128,128,128,.5)"
    }
}

Disable a Section

When disabling a section it will be ignored when rendering the CV.
It will only disable the section if the value is true, otherwise it will ignore this option and render the section as usual.

"disable": true

An example of a disabled section:

{
    "type": "html",
    "title": "Some info",
    "disabled": true,
    "data": "<p>There is no way that this section will be rendered!</p>",
    "classes": [
        "cut-corner",
        "cc-tr"
    ],
    "css": [
        {"text-align": "center"}
    ],
    "colors": {
        "text": "#ffffff",
        "background": "rgba(128,128,128,.5)"
    }
}

So, how about hosting?

All requirements should be met by any hosting provider which can serve HTML sites. There is no database requirement, and no server-side scripts of any kind.

You could even just fork this and publish it as a GitHub Page!

1. Fork this project
2. Go to the repository settings
3. Scroll down to the GitHub Pages section (when on the Options tab to the left)
4. Click on the Branch dropdown and select main as the source, and click save,
5. Clone it and use the info here to customize it to your liking!

The link for it can be viewed right above where you selected a branch. If you didn't rename the repository after you forked it, the link should be https://[your-github-name].github.io/cv/