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/imgand portfolio images in/assets/data/img/portfolioto 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.
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)" } |
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)"
}
}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)"
}
}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)"
}
}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)"
}
}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)"
}
}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)"
}
}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!
- Fork this project
- Go to the repository settings
- Scroll down to the GitHub Pages section (when on the Options tab to the left)
- Click on the Branch dropdown and select
mainas the source, and click save, - 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/