Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/navdeepsekhon/portfolio-generator

JS framework to dynamically generate a portfolio site from a JSON resume
https://github.com/navdeepsekhon/portfolio-generator

framework frontend javascript js js-framework portfolio portfolio-generator portfolio-website resume resume-creator resume-template resume-website

Last synced: 2 months ago
JSON representation

JS framework to dynamically generate a portfolio site from a JSON resume

Host: GitHub
URL: https://github.com/navdeepsekhon/portfolio-generator
Owner: navdeepsekhon
License: mit
Created: 2015-12-23T03:23:37.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2023-07-22T16:21:37.000Z (over 1 year ago)
Last Synced: 2024-08-01T21:59:14.829Z (5 months ago)
Topics: framework, frontend, javascript, js, js-framework, portfolio, portfolio-generator, portfolio-website, resume, resume-creator, resume-template, resume-website
Language: JavaScript
Homepage:
Size: 268 KB
Stars: 159
Watchers: 6
Forks: 32
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

project-awesome - navdeepsekhon/portfolio-generator - JS framework to dynamically generate a portfolio site from a JSON resume (JavaScript)

README

# portfolio-generator
JS framework to dynamically generate a portfolio site from a JSON resume

DEMO | My portfolio

## Table of Contents
- [Features](#features)
- [Sections](#sections)
- [Display Order](#display-order)
- [Personal](#personal)
- [Projects](#projects)
- [Work/Volunteer](#workvolunteer)
- [Education/Awards](#educationawards)
- [Remove "Designed By" footer](#remove-designed-by-navdeep-sekhon)

# Features:
* Framework generates a responsive website by reading information from resume.json
* Adapts to different screen sizes from phones to desktops
* Ability to choose the order of different sections
* Ability to create multiple project sections
* Ability to create sideshows for projects
* All sections are optional; any section can be skipped/hidden
* Supports personal bio, social media link, projects, work, education, volunteer work, awards sections

# Sections

### Display order:

The `displayOrder` array controls the order of sections on the website. Any section not listed in the arrays will not be displayed.
Example:
```json
"displayOrder": ["shortBio","projects", "work", "education", "awards", "volunteer", "social"]
```

Note: `social` is the `profiles` in the `personal` section.
### Personal:

All the elements in personal section are optional. All the social media profiles can be listed in the `profiles` array. Icons are from [zocial](https://github.com/smcllns/css-social-buttons).

Example:
```json
"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"
}
]
}
```

### Projects:

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:
```json
"projectSections": [
{
"title": "FrontEnd",
"projects" :[ ... ]
},
{
"title": "BackEnd",
"projects" :[ ... ]
}
]
```

There are different kind of projects depending on what information you provide for each project.
* If you provide an array in `description`, it will rendered as bullet points.
* If you provide a string `description`, it will be rendered as a center aligned paragraph.
* If you provide `gallery` array with a bunch of image links, it will render a slideshow of images.

Example:
```json
[{
"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",
...
]
}

```

### Work/Volunteer

* If you provide a `website` the organization name will be a link.
* If you provide an array of `highlights` it will create a collapsible bullet list

### Education/Awards
See demo portfolio for examples.

### Remove "Designed By Navdeep Sekhon"

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.
```json
"hideDesignedBy": true,
```
### Contributions

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 :)

#### Host your portfolio free using github pages :

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.