JS framework to dynamically generate a portfolio site from a JSON resume
#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 diffrent sections
- Ability to create image galleries for projects
- All sections are optional; any section can be skipped
- Ability to have custom names for different project sections
####Technical:
- The code for generating the page is in builder.js and constants.js.
- It reads the json file using an ajax call to the address listed in constants.js
####Step by Step how to create and host a portfolio website with github:
#####Prerequisites:
- Create a github account
- Download github desktop app and login to the app
#####Steps:
- Fork this repository. (Fork button at the top)
- Go to your github homepage, you should see portfolio-generator listed under your repositories.
- Open the desktop app, in the top left corner click the "+" button.
- Select the "Clone" tab, then select portfolio-generator. It should show up in the list on the left after cloning.
- Again click the "+" sign and select "Create".
- For the name enter yourGitHubUserName.github.io and create. It should also get listed on the left with portfolio-generator now.
- Now right click on each one and click "Show in explorer".
- From the portfolio-generator folder, copy index.html and username.js into the other one.
- Edit the new username.js and replace navdeepsekhon with your github username.
- Back in the github app, select the github.io project, select the "Changes" tab on the right.
- Write some message in the "Summary" box and click commit.
- Click "Sync" in the top right corner.
- Go to http://yourGitHubUsername.github.io. If you did everything right, you sould see a sample portfolio.
#####Updating the portfolio with your data:
- Look for the resume.json file in your portfolio-generator project(It should be here: https://github.com/YOURUSERNAME/portfolio-generator/blob/master/resume.json), edit it with your data. You should see your website updated with new data.
- You can change the order of different sections on the screen by changing the "displayOrder" list. Any section that's not listed in here will not appear on the screen.
#####Helpful links:
- Understanding JSON format
- If nothing shows up on the site after your changes, copy/paste the json file at www.jsonlint.com and make sure you fix any errors listed.
- You might find http://www.jsoneditoronline.org/ useful when editing your json. Paste the sample json on the left, click the arrow poiting right, now you can make changes on the right. When done click the arrow pointing left.
If you have any questions, please reachout here or @navdeepsekhon9