Developed as a way to (un)learn my react skills and see if I could actually right some front end code that I could use for my resume (not looking for a job - wink wink) and maybe give some other folks some fun with react.
Based on JSON Resume and some addition customization options, you can have your own cool react resume without writing a line of code. Just customizing (or generating) some JSON.
Sample wickedagile.com
A simple npm start (assuming you have NPM installed)
All the customization files are in the Customize directory.
Let's start with your resume. I was lazy and did the "Import from LinkedIn" Chrome add on. What should be obvious in what I just said - you need Chrome.
- Go to https://chrome.google.com/webstore/detail/json-resume-exporter/caobgmmcpklomkcckaenhjlokpmfbdec
- Click "Add to Chrome"
- Go to your linkedin profile (e.g. https://www.linkedin.com/in/formike/)
- Open the "Import from LinkedIn" add on
- Click on the floppy disk icon
- Rename the downloaded file to "MyResume.json"
- Drop into the src/Customize folder and replace the one there
If you need more guidance check out https://joshuatz.com/projects/web-stuff/linkedin-profile-to-json-resume-exporter/ for some how-to's
Now if you don't hava an Avatar, let's make one (if you do, skip to the next step)
- Go to https://avatarmaker.com/
- Design your Avatar
- Download
Save your avatar...
- Name it avatar.png
- Save to the Customize/ folder
Next up create your "old" avatar. Because who doen't love to see their avatar get old!
- Repeat the steps you did with your first avatar (optional)
- NOTE: If you don't create an aged avatar, just copy avatar.png to the name below
- Save as avatar-old.png
Now let's make it fun and give it some motion...
- Go to https://giphy.com/ and create an account
- Then go to https://giphy.com/create/gifmaker
- Upload your avatar
- Then start playing with the filters. I used the "Glitch" filter for mine.
- Upload it (you need to click a few times)
- Right click when done on the image and download
- Name it masthead-lead.gif
- Save it to the Customize/ directory
Almost there, next up create your own favicons, easiest way...
- Go to https://favicon.io/favicon-converter/
- Upload your avatar
- Click download
- Unzip and drag all images (minus the manifest file) into the
public/file
The goal of the ResumeOverrides.json file is to both extend the file we generated from LinkedIn with additional sections (e.g. non-standard JSON Resume parts like resume.careerHighlights) and to override or add additional sections to what exists in LinkiedIn.
- Open up src/Customize/configs/ResumeOverrides.json
- TODO - FINISH DOCUMENTING
Why extend JSON Resume? If you look the print version or homepage you'll see things like career summary, highlights and more. Although the JSON Resume spec contains factual data, it really doesn't contain extras many recruiters (and hiring managers) look for.
- Open up src/Customize/configs/Theme.json
TODO - Document
- Open up src/Customize/configs/Icons.json
TODO - Document
I put the legos together, but there are a lot of lego makers out there and I want to give them some credit for their code or ideas.
- Inspiration
- Layout & Design - https://mui.com/
- Avatar - https://avatarmaker.com/
- Animated GIF - https://giphy.com/
- Theme customizer = https://bareynol.github.io/mui-theme-creator