In this article we will see how we can easily create a portfolio (online resume) page in 4 simple steps. We will be using GitHub page as our portfolio page.
- GitHub account – to create a new GitHub page, we will need a GitHub account. Note that the GitHub page we create need to have the same name as your GitHub username. If you do not have a GitHub account, we can create it easily by referring the link
- HTML Editor – to edit the contents of the portfolio page, we need a HTML editor. In this article we will be using VS Code as editor. We can easily install the VS Code by referring this link
Lets get Started :
Step 1 : Choose a Portfolio Template.
First step in creating a portfolio would be to choose a template. In simple terms, it means we need to check online, find and download a suitable page which we can then edit and create our portfolio page. We can use HTML5UP website to freely download a template for our need.
Open the HTML5UP page using the URL and choose an appropriate template.
Once the template is selected, download the template to local machine. In this article we will be using the STRATA Template. Let download the STRATA template to start editing
Step 2 : Edit the Template
Now we have downloaded the STRATA template to our local. Now zip the download and navigate to the folder path. Open the VS Code to edit the Template (navigate to the folder where the template is downloaded, from inside of the parent folder, type $ Code . to edit the template in VS Code)
From the above image, the index.html file is edited with my details so that this will be appearing in the page instead of the default data provided in the template. We can use the live server extension of VS Code to see the updates happening in real time when we edit the index.html page. Edit all the necessary fields and save it once it is ready for upload to github page.
Step 3 : Upload to Github page and create the new Portfolio page.
Once the editing is completed, we can now create our GitHub page and upload the codes.
Create GitHub pages : Login to your GitHub portal and create new repository. In the new repository name field, enter your GitHub username followed by github.io. So in my case I have given sandeepsekhar.github.io , where sandeepsekhar is my GitHub username.
Once the repo is created, upload the Portfolio page codes by clicking on the Uploading an existing file option (refer the screenshot below). You can drag and drop the files to easily copy it. Once copying is completed, commit the codes by clicking on commit button.
Post commit, the Processing files will take 20-40 seconds and this is normal. Once the processing is completed, your portfolio page is ready to be viewed online.
Step 4: View your Online Portfolio page
Now that we have completed the uploading of the code files, open the newly created repo (in my case sandeeepsekhar.github.io) and navigate to the settings page.
In the settings page, scroll down to the GitHub pages section, the url of the portfolio page will be displayed as “your site is published at https://sandeepsekhar.github.io/ . Now click on the link to your newly created Portfolio page.
Now that you have your Portfolio page up and running, experiment using different templates. You can also link the repo with your local repo so that you can easily push and commit your codes to update your repo.
Hope you enjoyed my article, please let me know your comments and suggestions below.