This project is created to have a portfolio website in minutes.
The theme is built in Reactjs using Semantic-ui-react component and css.
- Github Account
- Nodejs installed on your machine
- Any editor like Notepad++, VS Code.
- Basic
- Professional Basic
Theme screenshots are saved in the images.
Demo
By default, main branch is Professional Basic theme.
To use the basic checkout to the basic branch.
git checkout basic
Follow the steps to setup the your portfolio website.
Use the respective demo site as reference.
Click on fork button. It will create copy of the repository to your account.
Open terminal or cmd in your PC.
Go to location where you want to clone the repository.
git clone https://github.com/<your username>/portfolio
Go to the project directory and open the terminal or cmd in it.
npm install
npm start
Follow the next section to update the portfolio.
Once the update is complete, run it using npm run start and check if everything is fine.
Stop the application if it is running.
Go to package.json and change the homepage.
"homepage": "https://<your github username>.github.io/portfolio",
Deploy it
Run the below command to deploy it
npm run deploy
Once everything is deployed and you're happy with it, commit the code.
git add .
git commit -m 'portfolio updated'
git push origin main
You may want your portfolio on https://<username>.github.io rather than https://<username>.github.io/portfolio.
Follow the below steps to make that happen.
- Create a repository
<username>.github.io. For ex.schadokar.github.io. - Open the terminal/cmd in the
portfoliorepo. - Commit the code if you made any changes.
- Push the code to
<username>.github.ioinstead oforigin.
git push https://github.com/<username>/<username>.github.io.git <branch name>
Or
git push https://github.com/<username>/<username>.github.io.git main
- Clone the
<username>.github.iorepo in the local. - Update the
profile.json. - Update the
homepagein thepackage.jsontohttps://<username>.github.io. - Install all the dependecies
npm install. - Run
npm run deployto deploy.
Open the project in code editor for code highlighting.
Open src/profile.json.
In the profile, array is used as a list. In the portfolio, it will render/print the list content from index 0 to last index.
For example, In experiences, most recent experiences should be at index 0.
If you don't want a section then keep it empty.
For example: If you don't want interests section, then update the profile as
"interests": []You can change the order of content to be shown in the portfolio.
"contentOrder": [
"skills",
"experiences",
"projects",
"certifications",
"educations",
"interests"
]Don't edit anything else other than order.
Update the basic info
"name": "Full Name",
"profilePicture": "profile.jpg",
"title": "Software Developer",
"quote": "The best way you can predict the future is to create it.",
"summary": "Software engineer with 5+ years experience in commercial application development. Eager to join XYZ Inc. to build innovative and cutting edge business solutions for the impressive suite of clients within its global reach. In previous roles, slashed downtime by 25% and ensured 98% on-time project completion. Also identified and dealt with a significant process bottleneck that boosted coding efficiency by 35% when resolved.",
"currentCompany": "ABC",Add the profile picture in the public folder.
Update the filename with extension in the src/profile.json.
It is an array. In the portfolio website it will format the array from index 0 to last index.
Add your education details in descending order.
Education syntax
{
"organisation": "Name of the Organisation, College or School",
"year": "2014-2016",
"field": "Masters of Science, Software Engineering",
"projects": ["Project 1", "Project 2"]
}If you don't have any project, that's fine keep it as an empty array.
"projects": []
Experience syntax
{
"organisation": "Name of the organisation",
"year": "Month Year - Month Year(Present)",
"works": ["point1", "point2"]
}In the work, add all the bullet points.
Links are the point of contacts using which other can contact you.
The basic theme is using icons provided in the semantic ui. You can check the available icons.
Link syntax
{
"icon-name": "link url",
"color": "color"
}Available Colors
red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black
The
colorfield is optional. Default color is black.
Skills is divided into 2 parts.
In semantic-ui there are many brand icons available. To use these icons, add the skill in skillsWithIcon field and remaining in the skills field.
Skills syntax
"skills": ["Data Structures", "Agile", "Golang", "Java", "Management"]Skills With Icons Syntax
{ "name": "aws", "color": "orange" }Or only add icon name
"skillsWithIcon": [
{ "name": "aws", "color": "orange" },
"github"
]Available Icons Check in Brands
Available Colors
red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black
The default color is black.
In this section, your side projects, ngo work, other college project or any project you like to add.
Project syntax
{
"link": "https://project1.com",
"title": "Project you are proud of."
}If there is no link, keep it empty.
{
"link": "",
"title": "Project 2 without link"
}Certificate syntax
{
"link": "www.youracclaim.com/badges/xxxxx-xxxx-xxxx",
"title": "Google Cloud Platform Fundamentals: Core Infrastructure",
"certifiedBy": "Google"
}Interest syntax
"interests": ["Painting", "Photography", "Reading"]Add the resume link. You can save it in google drive and make link public or add the resume in the same github provide its link.
To use the github hosted link, you first have to commit the resume and push it in the github.
Open src/components/theme.css.
In the body, you can change the background-color and font-family.
Open public/index.html.
You can change the title here.
- A default resume builder which will build the resume using the above info.
- More icons
- Multiple themes to select
For any query please create an issue.
If you have any suggestions please create an issue.