If you’re a data scientist or aspiring data scientist, keeping an online portfolio is a fantastic way to showcase your skills to prospective employers.

I made my first portfolio in August 2022 on a free GitHub Pages site using an excellent guide by

. The portfolio helped me articulate my skills and get my first DS job, and unexpectedly gave me “15 minutes of fame” when I wrote about it in a viral TDS story, The Portfolio That Got Me a Data Scientist Job.

Now, 1.5 years later, I’m tearing down the portfolio that got me my first Data Scientist job and rebuilding it from scratch.

In this article, I’ll explain why.

I’ll show you how I built my new one and share with you the template I made, which you can use to create a Data/Analytics/AI portfolio of your own in just 30–40 minutes.

Why “fix” something that’s already working? (My old portfolio)

Let me start by saying that I still like my old portfolio.

It’s simple and to-the-point, and I think it does a good job of showcasing my projects without overwhelming the reader.

This brevity is important because a recruiter might only spend 30 seconds looking at your portfolio (if that!), and you don’t want them to get bored or stop before they’ve reached the end. As I’ve said before:

The purpose of your portfolio is to get your foot in the door, not to get you the job. You’re never going to get a job offer solely off the back of your portfolio. The reality is that, even if recruiters like the look of your portfolio, you’re still going to have to go through their interviews and assessments. The purpose of the portfolio is just to provide a quick snapshot of your skills and show ’em what you can do.

Back in August 2022, I was satisfied that my portfolio did this. Here’s a screenshot of my old portfolio so you can judge for yourself:

Looks alright, eh? I thought so at least!

That being said, there are a few things I don’t like about it:

• The design looks a bit basic/old-fashioned
• It’s too project-focused, and doesn’t adequately showcase my professional experiences or qualifications
• It’s got a slightly annoying URL (mattschapman.github.io)
• It’s got a weird photo of me
• There aren’t any links to my other sites (e.g., GitHub, Medium, Substack)

At the time, these things didn’t bother me. But now that I’m 1.5 years further on in my career, it feels like a good time for a refresh.

What does a portfolio need in 2024?

Here are the criteria I set for my new portfolio:

• A sleek and professional-looking design – Your portfolio is a recruiter’s first glimpse into what you’re like. I wanted to give a good impression and make it feel a little more “2024” rather than “2016” (the release year of the theme I used in my old portfolio).
• A great URL – mattschapman.github.io was fine, but I wanted something shorter and less “techie” (with my old portfolio, I had naïvely assumed that all recruiters would know what “GitHub” is. I was wrong)
• More detail on qualifications and work experience – My first portfolio had lots of details on my projects, and next-to-no detail on my qualifications and work experience. That was fine at the time (when I had less experience), but now that I’ve progressed a little more I’m keen to highlight these other selling points as well
• Free – I liked that my old portfolio was free to host on GitHub Pages, and I want to find a solution like this again (i.e., I don’t want to pay £££ every month just to keep my site online)

Why I chose to code it myself

After poking around online for a bit, I decided that I would code my new portfolio myself, from scratch. There were two reasons for this:

1. I couldn’t find an existing design which I loved. Most of the templates I found seemed a little unprofessional (e.g., huge photos of the maker posing with their family on holiday) or too tailored to art/design portfolios (e.g., huge artsy photos of broken coffee cups and impressionist paintings). Lots of them were also way too complicated (e.g., multiple pages and blog-like sections, making them complex to navigate)
2. I figured that coding my own would be a good way to improve/practice my web dev skills

Those of you who’ve read my previous articles on JavaScript and web development will know that I’m trying to build ancillary skills which are complimentary to the core skills required of Data Scientists. It’s part of my broader mission to do skill stacking and carve out a unique niche in my Data Science career, and I thought that building a new portfolio would be a nice way to practice this. My friend

has articulated this concept of “skill stacking” really nicely in his most recent Substack post.

Please note: I want to stress that you do not need to know JavaScript or web development in order to become a data scientist. I’m investing in those skills more out of curiosity and personal development. If you’re a beginner, invest your time in learning Python and SQL – those are the main skills you need for DS!

My new portfolio

Here’s the result: mattchapman.co. You can be the judge of whether I’ve ticked those boxes!

Here’s the desktop view…

… and here’s the tablet view:

I’ve also added modals which display a bit more info about each project when they’re clicked. I thought this would be a nice way to ensure that the reader can find out more about each project if they want, without forcing them to view any chunky paragraphs:

Now, I’ll talk a little about how I built it and show how you can use the same approach to make your portfolio.

Design: Figma

Before you can code a website, you need to design it.

I used Figma to do this because (a) it’s free, and (b) it’s a simple drag-and-drop tool which is very easy to use.

Using Figma, I made three wireframes to show what the website should look like on laptops (large screens), tablets (medium screens), and phones (small screens):

For design inspiration, I looked on Dribbble.com and googled things like “tech portfolios” and “how to make the colour white less boring”. I chose a black-and-white colour scheme because I like the minimalist look of sites like apple.com and notion.so, and I used bright colours on the ‘Project’ cards to draw the user’s attention and make the page “pop”.

As well as the “serious” links to my LinkedIn and GitHub, I also added a link to my Duolingo profile because — I’m unashamed to say — my 536 day streak is my best achievement of 2024, and I thought this gave my portfolio a quirky personal touch.

Code: React and TailwindCSS

This was the tricky bit.

I styled the frontend of my previous website with Bootstrap, but the internet has been giving me FOMO so I decided to bite the bullet and learn TailwindCSS for this project. Having now learned Tailwind, I can tell you that Tailwind and Bootstrap are not that different, but, having used both, I prefer TailwindCSS’s default styles (they look a little more modern).

To minimise repetition in my code, I built lots of React components (e.g., each “card” in the Experiences section is a React component). This might sound fancy, but a component is essentially just a reusable block of code — sort of like a Python class or function.

I also abstracted all the “data” (e.g., the info about each project, qualification and experience) into a JSON file to make it easy to edit the content without having to touch the code itself. This means that, if someone else wants to use my template, they won’t have to touch the actual code itself; they can simply edit this single JSON file and tailor the portfolio to their profile.

Since I’m writing in a data science publication, I won’t go into more detail about the frontend code, but if you’d find that useful, let me know in the comments and I’ll write a more in-depth tutorial in the future! I also recommend

’s excellent article on web development for Data Scientists:

Domain and hosting: CloudFlare

If you search online for “domain and hosting”, you’ll quickly get overwhelmed with choices. There’s GoDaddy, FastHost, NameCheap, GitHub Pages, and countless more.

For my first portfolio, I used GitHub Pages because (a) it’s free and (b) it’s easy (it allows you to deploy automatically from a GitHub repository).

Nowadays, however, my current go-to is CloudFlare Pages. This is what I use for mattchapman.co.

Like GitHub Pages, CloudFlare Pages is free and allows you to deploy automatically from a GitHub repository, but (in my opinion) it’s got a few advantages over GitHub Pages:

1. Ease — CloudFlare is an “all-in-one” platform — it gives you domains, hosting, and analytics all in the same place. GitHub Pages only provides the hosting; you’d need to use other services (e.g., Google Analytics, GoDaddy) to get the domain and analytics.
2. Speed and security — CloudFlare includes a global CDN by default (this makes your website load really fast) and includes some protections against DDoS attacks and bots, which I think is a nice touch.
3. Scaleability — CloudFlare also feels a little more “scaleable” to me because it allows you to manage lots of websites in one place. This might be useful for you in the future if you build more websites; you’ll be able to manage them all from within the CloudFlare console. With GitHub Pages, you don’t really get much of a website management console.

Here’s how I set my website up on CloudFlare Pages:

1. Create a free account (30 seconds)
2. Buy the domain (2 minutes, optional) — CloudFlare Pages lets you buy domains at cost price (e.g., I got mattchapman.co for £15 ish)
3. Create a free CloudFlare Pages site (2 minutes)
4. Link the Pages site to your custom domain (3 minutes, optional) — If you bought a domain, set that as the address for your Pages site. Note: you don’t have to link to a custom domain; if you choose not to, your site will still be available on the internet at <YOUR_SITE>.pages.dev
5. Link the Pages site to a GitHub repository (2 minutes) — This is the repo which contains your website’s code and assets (e.g., images, logos, icons)

Then, whenever you push some updates to the main branch of your GitHub repository, those changes will be automatically applied to your website and viewable at yourwebsite.com!

*For the avoidance of doubt, I am not an affiliate of any of the sites mentioned in this article (e.g., CloudFlare, Figma, etc.). I’m just a fan!

Use my template to create your own portfolio

I hope you’ve found this guide useful.

Feel free to let me know your thoughts on my portfolio — I’d love to hear your ideas for how I could make it even better!

Finally: if you like the look of my portfolio and want to use this template to create your own portfolio, you can download it here. You’ll find all the code/files you need and a video in which I explain how to customise the template and launch it at a custom domain like mattchapman.co (I estimate that it’ll take you 30–40 mins from start to finish).

Thanks for reading. Until next time!