Website

3/10/23, 7:08 PM How to Build a Simple Portfolio Website for FREE | by Chanin Nantasenamat | Towards Data Science
Published in Towards Data Science
This is your last free member-only story this month. Upgrade for unlimited access.
Chanin Nantasenamat Follow
May 29, 2021 · 9 min read · · Listen
Save
Created (with license) using the image by alexacrib from envato elements.
DATA SCIENCE | MACHINE LEARNING
How to Build a Simple Portfolio Website for

FREE
Step-by-step tutorial from scratch in less than 10 minutes
In this article, you will learn how to build a portfolio website for free in
order to showcase your projects whether it be for data science, software
development or web development. Some of the benefits of a portfolio
https://towardsdatascience.com/how-to-build-a-simple-portfolio-website-for-free-f49327675fd9 1/26
website helps potential employers see the breadth and depth of your
experience, which may be particularly helpful if you’re coming from an
unconventional background (such as being a self-taught professional, etc.).
The portfolio website that we will be building today will be hosted for free
on on GitHub pages. I will assume that you have minimal to no HTML
experience. But if you have prior experience, this tutorial should take you
even less time to complete.
We have a lot to cover here and without further ado let’s get started!
Also check out the accompanying YouTube video by the same name (How to
Build a Simple Portfolio Website for FREE) that you can watch alongside
reading this blog post.
1. Sign up for a GitHub account

As we’re going to host the website on GitHub Pages, a prerequisite is to have
a GitHub account. So if you don’t already have one, go ahead and sign up for
one.
Head over to the GitHub website to sign up. (Link at the top right).
2. Creating a New Repository

So we’re now going to create a new repository which will act as a home for
your new portfolio website. The contents of the website (i.e. text, images and
any other files that you would like to display in your website) will be
contained within this repository. Instead of an HTML webpage, the text that
will be displayed on your website will be stored in a Markdown file ( .md
file), which we will be working with in the next few minutes.
Log-in to your GitHub account and go ahead and start a new repository by
clicking on the New repository button found in the drop-down menu that
appears upon clicking on the + button found at the far right of the top
navigation bar as shown in the screenshot below.
Start a New repository by clicking on the + symbol at the top right.
On this page, enter the name of your new repository. In this example, we are
going to type in Portfolio but you are more than welcome to use any other
name such as your full name (but make sure to use an underscore or dash
instead of an empty space such as John_Doe or John-Doe ).
Enter the name of your new repository.
To allow the website to be publicly available, we tick on the Public option.
It should be noted here that we have ticked a box so that a README.md file will
be automatically created along with the creation of the repository. It is this
very file that the website content will be placed inside.
Finally, click on the Create repository button in order to actually create the
repository.
The screenshot below will show the main page of your new repository.
Notice here that the contents of README.md is empty.
2. Setting up GitHub Pages for your Repository

By default, the repository is not yet a website and so we will have to activate
GitHub Pages for it. To do this, click on the Settings button found at the far
right of the tab (as shown by 1. yellow box in the image below).
Next, you want to click on the Pages button found on the left panel (as
shown by 2. red box in the image below), which will reload the page.
To actually activate the GitHub Pages, click on the None drop-down button
found under the Source sub-heading in the GitHub Pages section (as shown
by the 3.1 green box in the image below) which will reveal the main branch
and once it does, click on it (as shown by the 3.2 green box in the image
below).
Activating GitHub Pages for the newly created repository.
Now that GitHub Pages is activated, you should be able to see the URL to
your portfolio website as shown by the yellow highlighted box in the image
below.
In this example, the URL that is being created is available at

https://dataprofessor.github.io/Portfolio where dataprofessor is my
GitHub username and Portfolio is the repository name. Make note of this
URL and keep it handy as we will be going to it after we apply the website
theme.
Also make note that the Branch is now set to main as shown in the red box in
the image below.
Now, we will choose a theme for our website. Click on the Choose a theme
button found under the Theme Chooser sub-heading.
GitHub Pages is now activated and its URL are displayed. (shown by the yellow highlighted box)
As you will see in the screenshot below, there are several themes for you to
choose from. In this example, we will select the Cayman theme and click on
the Select theme button.
Selection of a theme for the portfolio website.
To get you started with the layout of your new website, you will see that the
README.md file is now populated with example text.
Just scroll down to the bottom of the page and click on the Commmit changes
button to proceed.
Now, head over to our website by pasting the URL that we took note of
earlier, which in this example is https://dataprofessor.github.io/Portfolio .
The screenshot below shows our website with example contents that have
automatically populated the README.md file upon selection of the theme.
Screenshot of the website with example contents.
3. Adding Our Information to the Website

Let’s now proceed to adding our own profile information into the website.
As I have mentioned earlier on, the contents of the website is contained

within the README.md file, which we have also seen above where we have
example contents upon choosing the Cayman theme.
In the code box below, I have provided you with a hypothetical profile
information that you can use as a template.
Let’s copy and paste the contents below into the README.md file. To save the
file, scroll down and click on the Commit changes button.
1 # John Doe
2 *An Aspiring Data Scientist | 2X Kaggle Grandmaster*
3
4 # Education
5 * Masters of Science (Data Science), *YouTube University*, 2016-2018
6 * Bachelors of Science (Data Science), *YouTube University*, 2012-2016
7
8 # [Project 1: Crypto Sentiment Analysis](http://youtube.com/dataprofessor)
9
10 This project integrates various news source for performing sentiment analysis pertaini
11 * **Python libraries used:** Streamlit, Huggingface, TensorFlow
12 * **Input:** Tweets, News
13 * **Output:** Sentiment of Cryptocurrency
14
15 # [Project 2: Crypto Trading Bot](http://youtube.com/dataprofessor)
16
17 This project makes use of ***sentiment analysis*** of cryptocurrency coupled with ***t
18 * **Python libraries used:** Streamlit, python-binance, cctx, talib
19 * **Input:** Cryptocurrency historical price
20 * **Output:** Trading signals triggers buying and selling
The contents of the code box above is written in Markdown, which is a topic
for another blog post. For a Markdown cheatsheet that you can refer to when
crafting your website, I highly recommend the one from adam-p.
Now, refresh the portfolio website again to see the newly added profile
information.
Portfolio website of a hypothetical aspiring data scientist John Doe.
4. Adding Images to the Website

As a picture is worth a thousand words, let’s spice up the website with some
images. For this example, we will be using photos from Unsplash, which
provides a large collection of stock photos that you can use for free.
Searching for image to use in our website.
4.1. Finding an Image for Project 1

Let’s search for images to use for the portfolio website of our hypothetical
aspiring data scientist John Doe. As you can see from the website, John Doe’s
Project 1 is pertaining to cryptocurrency. Thus, we’re going to find some
relevant images.
Below are the search results for images about cryptocurrency.
The top right image looks like a good fit for Project 1 and so let’s use that. So
you can go ahead and click on it. A pop-up appears as shown below, then you
click on the down arrow of the Download free button to trigger the drop-
down menu. Here, we will go with the Small (640x427) resolution.
Image from Unsplash that we’re going to use for Project 1. Photo by André François McKenzie on
Unsplash.
Upon downloading the image, a pop-up appears at the bottom that provides
you with attribution text and link. You can simply click on the Copy to
clipboard icon shown in the image below. We will be pasting this into the
README.md file so that it such information is included in the portfolio
website.
Screenshot of the attribution pop-up that appears upon downloading images from Unsplash.
4.2. Finding an Image for Project 2

As Project 2 (see the code box containing contents from the README.md file)
of John Doe is about built a cryptocurrency trading bot then we’re going to
use the following image.
Image from Unsplash that we’re going to use for Project 2. Photo by Maxim Hopman on Unsplash.
4.3. Uploading Images to the GitHub Repository

Once the images are downloaded to your computer, let’s now upload it to our
GitHub repository.
To do this, click on the Add file button which will bring a drop-down. Click
on the Upload files link.
Screenshot of the “Upload files” link upon clicking on the “Add file” button.
Files can be uploaded in 2 ways: (1) drag and drop files directly into the
upload box or (2) click on the choose your files link found inside the upload
box. Afterwards, click on the Commit changes button found at the bottom of
the page.
Upload files by drag-and-drop directly into the upload box or by clicking on the “choose your files”
link. (This brings up a window that allows us to select the file to upload).
Open in app Get unlimited access
Screenshot of the GitHub portfolio. Here we can see that there are 4 files consisting of the 2
uploaded images, the README.md file and the _config.yml file (automatically generated after
theme selection).
4.4. Adding Attributions to the Image in the Website

In using the free image from Unsplash, it is also a good practice to provide
citations to the image. For your178
convenience,
2
as you download images from
Unsplash the pop-up that appears gives you the option to get the attribution
text and link (as shown in the last image of section 4.1), which you want to
copy and paste into the README.md file.
The following 2 attribution code blocks look like so for Project 1 and Project
2, respectively:
1 Photo by
2 <a href="https://unsplash.com/@silverhousehd?utm_source=unsplash&utm_medium=referral&u
3 André François McKenzie
4 </a> on
5 <a href="https://unsplash.com/s/photos/cryptocurrency?utm_source=unsplash&utm_medium=r
6 Unsplash
7 </a>
j 1 ib i h lh d i h ❤ b Gi H b i
1 Photo by
2 <a href="https://unsplash.com/@nampoh?utm_source=unsplash&utm_medium=referral&utm_cont
3 Maxim Hopman
4 </a> on
5 <a href="https://unsplash.com/s/photos/cryptocurrency-trading?utm_source=unsplash&utm_
6 Unsplash
7 </a>
j 2 ib i h lh d i h ❤ b Gi H b i
To actually add the image to the website via the Markdown syntax, we will
use the following line of codes for Project 1 and Project 2, respectively:
1 ![alt text](andre-francois-mckenzie-iGYiBhdNTpE-unsplash.jpg)
project-1-image.txt hosted with ❤ by GitHub view raw
1 ![alt text](maxim-hopman-fiXLQXAhCfk-unsplash.jpg)
project-2-image.txt hosted with ❤ by GitHub view raw
Let’s add the above 4 code blocks underneath the headings of Project 1 and
Project 2 in the README.md file and we will get the following code:
1 # John Doe
2 *An Aspiring Data Scientist | 2X Kaggle Grandmaster*
3
4 # Education
5 * Masters of Science (Data Science), *YouTube University*, 2016-2018
6 * Bachelors of Science (Data Science), *YouTube University*, 2012-2016
7
8 # [Project 1: Crypto Sentiment Analysis](http://youtube.com/dataprofessor)
9 ![alt text](andre-francois-mckenzie-iGYiBhdNTpE-unsplash.jpg)
10
11 Photo by <a href="https://unsplash.com/@silverhousehd?utm_source=unsplash&utm_medium=r
12
13 This project integrates various news source for performing sentiment analysis pertaini
14 * **Python libraries used:** Streamlit, Huggingface, TensorFlow
15 * **Input:** Tweets, News
16 * **Output:** Sentiment of Cryptocurrency
17
18 # [Project 2: Crypto Trading Bot](http://youtube.com/dataprofessor)
19 ![alt text](maxim-hopman-fiXLQXAhCfk-unsplash.jpg)
20
21 Photo by <a href="https://unsplash.com/@nampoh?utm_source=unsplash&utm_medium=referral
22
23 This project makes use of ***sentiment analysis*** of cryptocurrency coupled with ***t
24 * **Python libraries used:** Streamlit, python-binance, cctx, talib
25 * **Input:** Cryptocurrency historical price
26 * **Output:** Trading signals triggers buying and selling
5. The Completed Portfolio Website

Congratulations! You have now completed the creation of the portfolio
website in less than 10 minutes!
Example Portfolio Website: https://dataprofessor.github.io/Portfolio/
You can now share your portfolio website to the world (e.g. include the URL
in your profiles on LinkedIn, Twitter, name card, etc.)! Remember to
maintain as well as periodically update the website as your list of projects
grow.
Feel free to share with me the links to your portfolio websites.
Subscribe to my Mailing List for my best updates (and occasionally freebies) in

Data Science!
About Me
I work full-time as an Associate Professor of Bioinformatics and Head of
Data Mining and Biomedical Informatics at a Research University in
Thailand. In my after work hours, I’m a YouTuber (AKA the Data Professor)
making online videos about data science. In all tutorial videos that I make, I
also share Jupyter notebooks on GitHub (Data Professor GitHub page).
Data Professor
Data Science, Machine Learning, Bioinformatics, Research
and Teaching are my passion. The Data Professor YouTube…
www.youtube.com
Connect with Me on Social Network

✅ YouTube: http://youtube.com/dataprofessor/
✅ Website: http://dataprofessor.org/ (Under construction)
✅ LinkedIn: https://www.linkedin.com/company/dataprofessor/
✅ Twitter: https://twitter.com/thedataprof
✅ FaceBook: http://facebook.com/dataprofessor/
✅ GitHub: https://github.com/dataprofessor/
✅ Instagram: https://www.instagram.com/data.professor/
Data Science Machine Learning Artificial Intelligence Technology
Portfolio
Sign up for The Variable

By Towards Data Science
Every Thursday, the Variable delivers the very best of Towards Data Science: from hands-on tutorials and
cutting-edge research to original features you don't want to miss. Take a look.
Emails will be sent to sudhanshu2198@gmail.com. Not you?
Get this newsletter

Website

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Website

Uploaded by

Copyright:

Available Formats

3/10/23, 7:08 PM How to Build a Simple Portfolio Website for FREE | by Chanin Nantasenamat | Towards Data Science

Published in Towards Data Science

Chanin Nantasenamat Follow

May 29, 2021 · 9 min read · · Listen

DATA SCIENCE | MACHINE LEARNING

How to Build a Simple Portfolio Website for

1. Sign up for a GitHub account

2. Creating a New Repository

file), which we will be working with in the next few minutes.

Start a New repository by clicking on the + symbol at the top right.

Enter the name of your new repository.

To allow the website to be publicly available, we tick on the Public option.

2. Setting up GitHub Pages for your Repository

Activating GitHub Pages for the newly created repository.

In this example, the URL that is being created is available at

button found under the Theme Chooser sub-heading.

Selection of a theme for the portfolio website.

Screenshot of the website with example contents.

3. Adding Our Information to the Website

As I have mentioned earlier on, the contents of the website is contained

Portfolio website of a hypothetical aspiring data scientist John Doe.

4. Adding Images to the Website

Searching for image to use in our website.

4.1. Finding an Image for Project 1

Below are the search results for images about cryptocurrency.

4.2. Finding an Image for Project 2

4.3. Uploading Images to the GitHub Repository

Open in app Get unlimited access

4.4. Adding Attributions to the Image in the Website

project-1-image.txt hosted with ❤ by GitHub view raw

project-2-image.txt hosted with ❤ by GitHub view raw

5. The Completed Portfolio Website

Example Portfolio Website: https://dataprofessor.github.io/Portfolio/

Feel free to share with me the links to your portfolio websites.

Subscribe to my Mailing List for my best updates (and occasionally freebies) in

Connect with Me on Social Network

Data Science Machine Learning Artificial Intelligence Technology

Sign up for The Variable

Emails will be sent to sudhanshu2198@gmail.com. Not you?

Get this newsletter

You might also like