A Free Data Science Portfolio Template to Showcase Your Projects: Use It to Create Your Own | by Zach Alexander | Towards Data Science

Building a portfolio to showcase your data science work can seem like a daunting task. And, after spending countless hours fine-tuning your models, how best do you share your results with the world? Well, before you go running to a website builder, why not try building it yourself! It actually won’t take you too much time, and some of the major advantages to doing so are:
You’ll have a lot more freedom in how you present your projects to the world. Website builders are convenient, but often times you’ll be limited by the types of layouts offered to you, and you may have to restructure your code to get things working.
You’ll pick up a new skill! Data Scientists need to have a good understanding of how web frameworks work. Why not take a few minutes to look through some HTML, CSS, and JavaScript code — it’ll go a long way!
Building out a custom website can show future employers that you are a well-rounded candidate for the job. Inevitably, they’ll be impressed that you took the time and made the effort to deploy your projects and content.
Your projects will be accessible to a much broader audience if they are hosted over the internet.
It’s fun! Building and showcasing your skills is what it’s all about.
If I’ve convinced you, then feel free to continue reading through this step-by-step guide (and video), from downloading the initial template from GitHub all the way through deploying it to the internet.
This walkthrough is coupled with a comprehensive YouTube video that you can find here:
In order to download the repository, you’ll first need a GitHub account and Git. If you already have both of these, feel free to skip to step 2.
If you do not have a GitHub account, you can create one for free here: https://github.com/
Next, you’ll need to install Git on your machine: https://git-scm.com/downloads
With Git successfully installed, you can now access the repository that contains the Angular template: https://github.com/zachalexander/data-science-portfolio-template
To download it to your local machine, you’ll want to open up a terminal window (highly recommend VSCode) and run:
git clone https://github.com/zachalexander/data-science-portfolio-template.git
The Angular application uses certain modules and packages, and similar to other web frameworks, one of the best ways to organize and install these packages is through a package manager called npm. If you already have npm installed, feel free to skip to step 4.
If you do not have npm installed already, you’ll need to install it here: https://www.npmjs.com/get-npm
To run our Angular application locally, and eventually to compile our files for deployment, we’ll need to install the Angular CLI. You can download this using npm by running the following command in the terminal:
npm i @angular/cli
Now comes the exciting part, let’s take a look at the template! In order to do so, you’ll need to navigate into the root folder of our project’s directory by using the command line cd command:
cd data-science-portfolio-template
Once you are inside of the root folder of the template directory, you’ll then want to run this command:
npm install
This will take a few minutes, but will install all of the necessary packages for our application. Once complete, you can then run the following command:
npm start
If all goes well, you should then see your terminal output something like this:
You can then open up a web browser (preferably Google Chrome or Safari), and navigate to http://localhost:4200. Once there, you should be able to see the Data Science Portfolio template! Here’s the top of the home page:
Once you have the template open in a browser, you’ll notice there are a lot of places that’ll need your edits. For instance, you’ll want to add your own headshot (currently a stock photo), update the project pages with your own content, and link to anything in particular you’d like to showcase.
In the video walkthrough, I go into more detail about some of the places you can truly make this your own! However, here’s a quick list of files that’ll need editing right away:
The home component html
-data-science-portfolio-template--src---app----components-----home------home.component.html
This’ll be where you’ll edit a lot of the home page html. There are code comments that look like this:
<!-- EDIT CONTENT BELOW -->
These indicate places that’ll need your edits to make it more personalized.
The home component stylings
-data-science-portfolio-template--src---app----components-----home------home.component.scss
This will contain adjustments to any photos you’d like to add/change. There are code comments that look like this:
// project photo 1 -- feel free to change
That’ll highlight places where you can change the mapping to your photos. For reference, all of the photos that I use for styling are found in the assets folder here:
-data-science-portfolio-template--src---assets
So, you can just add any photos you’d like to use to the assets folder, and then change the file name to your photo, instead of sample.jpg in the scss file.
The navbar component html
-data-science-portfolio-template--src---app----components-----navbar------navbar.component.html
You’ll want to change the “Your Name” text here to personalize it, as well as update the buttons to link to your social media pages.
The footer component html
-data-science-portfolio-template--src---app----components-----footer------footer.component.html
You’ll want to change any content in the footer, including links to your social media pages, in order to customize this for your own website.
To change color scheme or fonts
-data-science-portfolio-template--src---styles.scss
To change the fonts, you can use Google Fonts and import your preferences similar to the current setup in this file:
You’ll also have to go through the home.component.scss file to update any font stylings that are cast on specific elements.
The color scheme can be changed easily by adjusting this code with the hex values you’d prefer to use:
Update or remove the resume page
You may or may not want to utilize the resume page. To remove it from your application, you can do the following:
Navigate to app-routing.module.ts:
Navigate to app-routing.module.ts:
-data-science-portfolio-template--src---app----app-routing.module.ts
2. Comment or delete out the path to the resume page (commented out below as an example):
3. Either remove the button from the home.component.html page, or link it to your resume elsewhere.
To update the resume page, you’ll want to navigate to it:
-data-science-portfolio-template--src---app----components-----resume------resume.component.html
And edit any portion of it with your job experience, education, interests, etc.
Update the annotations on the D3.js graphic
For instance, the initial template has a Section 4 annotation which will likely need to be changed. To do this, you’ll want to navigate to:
-data-science-portfolio-template--src---app----components-----simplelinechart------simplelinechart.component.ts
And edit lines 106, 123, 139, and 155, where the following code is found:
note: {title: 'Section Four' <- change this to your preferred title}
Adding additional pages to your portfolio
I won’t go through a ton of detail here, but will reference this excellent medium post that walks you through how to add additional pages to your application in Angular: https://zeroesandones.medium.com/how-to-create-navigation-in-angular-9-application-using-angular-router-6ee3ff182eb6
As you are editing, be sure to save each of your files so you can see them as you develop locally! When you are ready to deploy it to the internet, proceed to the next step.
When you are satisfied with all of your local edits and changes, you’ll then want to open up a separate terminal window (or close out of your development server on your current terminal window) and run:
ng build
This command will compile your code, condense it, and make it ready for deployment! If you get stuck, feel free to watch the video for help.
Wow, congratulations on making it to the final step! Now we’ll need to deploy this to the internet so everyone can witness your greatness.
I’d highly recommend following along with the video at this point (starting at 18:45).
To do this, we’ll use Google Firebase. It’s free hosting, so you don’t have to worry about accruing any charges. In order to get started, you’ll need to use npm again to download firebase tools.
In a terminal, run:
npm install -g firebase-tools
Then, you’ll want to navigate to: https://firebase.google.com/, and sign in to your Google Account. You’ll have to create one if you haven’t already. You can then click “Go to Console” to get started.
You’ll then want to create a new project, which I outline in detail in the video. After doing so, you can navigate back to your terminal window, making sure you are in the root directory of your project folder (i.e. data-science-portfolio-template), and run:
firebase login
You should be able to authenticate with your firebase account. After this, you can then link your new project to the firebase-tools CLI, and work through the steps outlined in the video (starting at 20:20).
Once you have linked your files correctly and have everything ready for deployment, you’ll just want to run:
firebase deploy
When this command finishes, you should see a Hosting URL in the output that contains the link to your fully deployed portfolio!
As mentioned in the video, this url can be shared with friends, future employers, etc. You can also set up a custom domain for your website through Firebase in a few easy steps as well, however, you will have to purchase the name (this part is not free!).
If you’ve made it through the steps and now have your own portfolio hosted on the internet, congratulations! I hope that this template serves you well, and can help showcase the cool work you do.
As mentioned at the end of the video walkthrough, I am not a web developer, and have learned most of this through self-learning. Therefore, for those that are more web-dev savvy, I’d be happy to collaborate in making this project even more accessible and efficient!
If you enjoyed this content, or would like to check out other work I’ve done, feel free to venture over to my website at zach-alexander.com (you’ll notice that the template looks very similar to my own site :), and I have a few more pages built out as an example.