Fork this project to easily create a portfolio site using Create React App and Material UI. The goal of this project is to quickly build a portfolio site.
This app uses the useContext hook to populate the app. Fill out your information in the /context/myInfo.json file in order to fill the site with your information.
- Fork and then clone this project.
- Install dependencies using
npm install - Fill out
/context/myInfo.json - Optional and recommended
- Change Title in
public/index.html - Change
public/favicon.ico,public/logo192.png,public/logo512.png
- Change Title in
- Build and deploy!
- Create React App Docs
npm run build
-
navigationname: Your name - This will populate different areas of the application, including NavBar and Footer component.menu- This array of objects will populate the NavBar buttons.
"target":"_blank"this value will open a new tab when clicked.
-
main- contents of this object will help populate the Main component.
profileImage.url: Static profile image url- Alternatively, if you want to include an image in the React App, you can replace
sampleImg.jpgwith your own image.
- Alternatively, if you want to include an image in the React App, you can replace
-
workcategoryName: This value will be used to show your works on the Main componentprojects: This array of objects is where you can add projects, and the Main component will iterate on this array. Note: Keep the object shape consistent in order to keep rendering consistent.buttonNames: Primary and secondary button names used for "Selected Work card buttons"
-
aboutcategoryName: This value will be used to show your works on the About componentskills.items,workExperience.work,education.items- This array of objects is where you can add projects, and the About component will iterate on this array. Note: Keep the object shape consistent in order to keep rendering consistent.
-
other- I added this other section to keep information that I might want to use in the app
If you do not want to use static links for your images, you can manually import images, similar to sampleImg.jpg in the Main component. It's up to you on how you want to handle images.
{
"navigation": {
"name": "John Doe",
"menu": [
{
"text": "Home",
"url": "/",
"target":""
},
{
"text": "About",
"url": "/about",
"target":""
},
{
"text": "Github",
"url": "https://github.com/",
"target":"_blank"
},
{
"text": "LinkedIn",
"url": "https://www.linkedin.com//",
"target":"_blank"
}
]
},
"main": {
"greeting": "Hi, I'm John, a Software Developer from California",
"blurb":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque.",
"profileImage": {
"url":"",
"altText":"profile image"
},
"image": {
"url": "/",
"altText": "temp"
}
},
"work":{
"categoryName":"Selected Work",
"projects":[
{
"projectName": "project0",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque.",
"url":"https://github.com/",
"image": {
"url": "https://github.githubassets.com/images/modules/site/home/repo-browser.png",
"altText": "project0 thumbnail"
}
},
{
"projectName": "project1",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque.",
"url":"https://github.com/",
"image": {
"url": "https://github.githubassets.com/images/modules/site/home/repo-browser.png",
"altText": "project1 thumbnail"
}
},
{
"projectName": "project2",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque.",
"url":"https://github.com/",
"image": {
"url": "https://github.githubassets.com/images/modules/site/home/repo-browser.png",
"altText": "project2 thumbnail"
}
}
],
"buttonNames":{
"primary":"Github",
"secondary":"Site"
}
},
"about": {
"categoryName":"About",
"statement": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque.",
"skills":{
"categoryName":"Skills",
"items":[
{
"type":"Languages",
"items":["JavaScript", "HTML", "CSS","Python","SQL"]
},
{
"type":"Libraries and Frameworks",
"items":["React", "Redux", "Express","Flask"]
},
{
"type":"Other",
"items":["other0", "other1"]
}
]
},
"workExperience": {
"categoryName":"Work Experience",
"work": [
{
"company":"company0",
"position":"position0",
"date":"Date 2020 - Date 2021",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque."
},
{
"company":"company2",
"position":"position1",
"date":"Date 2019 - Date 2020",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque."
}
]
},
"education":{
"categoryName":"Education",
"items": [
{
"name":"education0",
"curriculum":"curriculum0",
"date":"Date 2020 - Date 2021",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sapien tortor, ornare nec leo nec, convallis pulvinar tortor. Ut lorem sem, tempus eu cursus eu, pulvinar sit amet neque."
}
]
},
"certifications":{
"categoryName":"Certifications",
"items":["certification0", "certification1"]
}
},
"other":{
"images":[
{"image":{
"url":"https://github.githubassets.com/images/modules/site/home/repo-browser.png",
"altText":"",
"description":""
}
}
]
}
}I used Surge, but there are many ways to deploy React apps. To name a few options: Vercel, AWS Amplify, Netlify, Firebase.
I have only implemented basic smoke and snapshot tests in order to make sure the components render.