Giter Site home page Giter Site logo

cv's Introduction

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/

cv's People

Contributors

izaacj avatar

Watchers

 avatar

Forkers

kumardublin

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.