JS framework to dynamically generate a portfolio site from a JSON resume
JS framework to dynamically generate a portfolio site from a JSON resume
The displayOrder
array controls the order of sections on the website. Any section not listed in the arrays will not be displayed.
Example:
"displayOrder": ["shortBio","projects", "work", "education", "awards", "volunteer", "social"]
Note: social
is the profiles
in the personal
section.
All the elements in personal section are optional. All the social media profiles can be listed in the profiles
array. Icons are from zocial.
Example:
"personal": {
"name": "Navdeep Sekhon",
"title": "Software Developer",
"email": "[email protected]",
"phone": "123-456-7890",
"website": "http://www.navdeepsekhon.com",
"shortBio": "Hello! I am Navdeep Sekhon. I make stuff. Here's some of it.",
"location": "Delaware",
"profiles": [
{
"network": "Twitter",
"url": "http://twitter.com/navdeepsekhon9"
},
{
"network": "github",
"url": "http://decompile.xyz"
},
{
"network": "linkedin",
"url": "https://www.linkedin.com/in/navdeepsekhon"
},
{
"network": "facebook",
"url": "facebook.com/navdeepsekhon6"
}
]
}
This is my favourite. You can create different sections of projects and multiple projects in each section. Eg: Frontend/Backend/Mobile etc.
projectSections
is an array of project section objects. Each section has a title
and a list of projects
.
Example:
"projectSections": [
{
"title": "FrontEnd",
"projects" :[ ... ]
},
{
"title": "BackEnd",
"projects" :[ ... ]
}
]
There are different kind of projects depending on what information you provide for each project.
description
, it will rendered as bullet points.description
, it will be rendered as a center aligned paragraph.gallery
array with a bunch of image links, it will render a slideshow of images.Example:
[{
"title": "Project with bulleted description",
"link": "https://github.com/navdeepsekhon/AndroidWeatherApp/",
"thumbnail": "https://raw.githubusercontent.com/navdeepsekhon/portfolio-generator/master/screenshot.PNG",
"description": [
"Bullet 1",
"Bullet 2"
...
]
},
{
"title": "Project with image gallery",
"thumbnail": "https://raw.githubusercontent.com/navdeepsekhon/AndroidWeatherApp/master/screenshots/tablet_mainscreen.png",
"link": "https://github.com/navdeepsekhon/AndroidWeatherApp/",
"description": "To create an image gallery in pop up, put the image URLs comma separated in gallery: []",
"gallery": [
"https://raw.githubusercontent.com/navdeepsekhon/AndroidWeatherApp/master/screenshots/phone_detailscreen_portrait.png",
"https://raw.githubusercontent.com/navdeepsekhon/AndroidWeatherApp/master/screenshots/phone_mainscreen.png",
...
]
}
website
the organization name will be a link.highlights
it will create a collapsible bullet listSee demo portfolio for examples.
If you want to remove the "Designed By Navdeep Sekhon" at the bottom of the page(it's ok, I don't mind), just set hideDesignedBy
to true.
"hideDesignedBy": true,
Please feel free to report any bugs or send in pull request with code changes.
I love it when my work helps someone. So if you're using this project or it inspired you to build something of your own, I'd love to know! My social media is listed on my portfolio :)
I host my portfolio using github pages. To use the framework to make your site, you just need to change resume.json and update the RESUME_LOCATION
in constants.js
and you're good to go.