How to Build a Data Science Portfolio Website
By: Julia Nikulski
Tags: Portfolio Website, Guides And Tutorials, Career Development, Data Science, Web Development

How to Build a Data Science Portfolio Website

Showcasing your work — with a website from scratch

Your code sits on GitHub, your blog posts on Medium, your competition results on Kaggle and your professional profile can be found on LinkedIn. However, adding four or even more links to your CV so that a potential employer has to look up each individually is a waste of time and space. A month ago, I decided to create a website from scratch – without WordPress or Squarespace or any other template – to showcase my projects and my profile all in one place. I wasn’t sure where or how to begin, especially because as data scientists, we don’t work with HTML, CSS, JavaScript or Flask that often. So I wanted to provide a guide that will hopefully help you create your own data science portfolio website as well.

Where to start

Before you start to code, you should have a rough structure in mind and have an idea of what your website should look like. Think about your audience: what might a potential employer be interested in knowing about you and your data science career? Something I found useful was to look at portfolio websites of other people. Obviously, you want to make sure that you don’t copy them without their permission. But looking at how they showcase their work and themselves can give you an idea of where to start. Some great websites were created by

You can also take a look at my website for inspiration (Edit: I added bilinguality to the website, so it is now available in English as well as German).

What to include

Based on the research above, a good place to start is to include the following pages/sections on your website:

A landing page with some brief information about you and some references to the other areas of your website.

with some brief information about you and some references to the other areas of your website. A portfolio page that provides an overview of your projects. Add short descriptions and links to your code, blog posts and the websites that host them.

that provides an overview of your projects. Add short descriptions and links to your code, blog posts and the websites that host them. An about page where you can talk about your qualifications, your educational background, your skills or anything else you want your audience to know about you.

where you can talk about your qualifications, your educational background, your skills or anything else you want your audience to know about you. A blog section/page that either contains your blog posts on your website or that links to your Medium profile, for example.

that either contains your blog posts on your website or that links to your Medium profile, for example. A section on contact details and your online presence. Add links to your GitHub, LinkedIn, Kaggle, Twitter or any other online profiles that may be relevant to your website’s audience.

You have other sections or pages in mind? Great! Include them as well. This is just a starting point with a bare minimum of information. You can also use your website to host your actual projects, whether it’s machine learning models or Plotly Dash implementations.

How to build it

Things to consider

You want to start from scratch. Does that mean a blank HTML file, blank CSS file and blank Python file? Actually, you don’t need to start from 0.

Bootstrap is a CSS framework with integrated JavaScript that makes your website responsive and pretty without much manual CSS work needed. You can use this Bootstrap starter template and add your own HTML code to it.

is a CSS framework with integrated JavaScript that makes your website responsive and pretty without much manual CSS work needed. You can use this Bootstrap starter template and add your own HTML code to it. Use Jinja — a templating language — which allows you to add content to your HTML file dynamically (not hard-coding it) and to create templates that your other pages can reference (more on that in the next bullet point). There is a nice 5 minute summary on what Jinja is and why we need it.

— a templating language — which allows you to add content to your HTML file dynamically (not hard-coding it) and to create templates that your other pages can reference (more on that in the next bullet point). There is a nice 5 minute summary on what Jinja is and why we need it. Use a layout.html file that is referenced in each of your other HTML pages. This will be your parent template. In your other HTML files (the child templates), you can reference layout.html and your navigation bar, for example, will be shown on every page, but you only have to implement it once.

that is referenced in each of your other HTML pages. This will be your parent template. In your other HTML files (the child templates), you can reference layout.html and your navigation bar, for example, will be shown on every page, but you only have to implement it once. Look at the source code of a website that you like (for directions on how to do this, check these for Chrome, Firefox and Safari). Remember not to copy anything without permission from the website creator, but it’s okay to see how other people implemented certain things and get inspiration.

that you like (for directions on how to do this, check these for Chrome, Firefox and Safari). Remember not to copy anything without permission from the website creator, but it’s okay to see how other people implemented certain things and get inspiration. Use a micro web framework that does the heavy lifting of server communication for you. I prefer Flask because it’s easy to implement, has extensive documentation and a strong community, but you can also use Django or another Python framework of your choice.

Feel free to check out the code for my website to get an idea of how you could implement the points above.

Starter files

To actually give you a starting point, you can create the following files and then build on that:

layout.html → This contains the Bootstrap starter template, a navigation bar and footer for your page. All of this is taken from the Bootstrap documentation.

index.html → This is your landing page that extends the layout.html template.

styles.css → Here you can add additional CSS styles to adjust the Bootstrap content you’re using or to create your own styling.

app.py → You need to install flask with pip for this code to work. This file will render your html templates.

Testing it