Self-Taught Data Scientist: Showcase Yourself with a Personal Website | by Erdem Isbilen | Towards Data Science

Not having a college degree in data science makes it difficult to convince others of your skills. Not having any job experience makes it even more difficult.
I know, this may not seem fair!
As you worked hard to develop all those skills by spending countless hours on your computer and figuring out how those mind-wracking algorithms work, you think employers have to recognise you as a decent data scientist and give you the job opportunity you are striving for.
This will not happen unless you show them all your skills with the solid pieces of evidence by differentiating yourself from the others.
Having a personal website provides a platform for you to showcase your skills.
In this post, I will explain how you can create your website easily and almost free.
In the first part of the post, I will cover what specifically you should present in your website. Then in the later section, I will show you how you can handle website development tasks from start to end, including setting up the hosting/domain services and handling the HTML/CSS development.
All source code is provided in my GitHub repository and you can visit my personal website to see all in action.
Before starting to develop your website, you should think about how to structure the content of your website. See below for the main sections you should cover in your website;
Your Blog Posts
Your Data Science Portfolio
Your Resume
Your Social Media Profiles
It helps a lot if you start blogging early in your self-taught data scientist journey. Writing articles will not only concrete what you have learned in your journey, but it will also show others how well you communicate your findings and arguments.
Here is a list of data science subjects you can write about;
Data acquisition and preparation
Feature Engineering
Machine Learning
Visualisation
Communicating the findings
You can either develop your blogging website or you can use free platforms like Medium.
You may take many Coursera or Bootcamp courses, but what differentiate yourself from the crowd is how you apply your knowledge into the real problems. This is what convinces the recruiters on your skills.
So having a proper data science portfolio and presenting it on your website makes a huge difference.
But what makes a good data science portfolio?
Independent Side Projects: These projects show others how you use your data science knowledge in real life. It is the best not solving trivial problems using proof-of-concept databases. Instead, develop your unique database and investigate an interesting problem.
Kaggle Competitions: Competing in Kaggle is a way of showing your skill level compared to the others in the field.
Open Source Projects: Open source projects provide an excellent opportunity for you to develop your experience in data science.
Recruiters skim resumes to identify the possible candidates. So, having well-structured and an easy-to-read resume increases your chance of getting hired. Followings are the least you should include in your resume to properly showcase yourself;
Personal information
Positions
Education
Projects
Competences & Personal Skills
As a data scientist, you need to use social media to some extent. Twitter is the best way of communicating with your peers. It helps to stay up-to-date.
You should use LinkedIn if you would like to be hired, as it is the prime source for recruiters to look for potential candidates.
Once you have completed the difficult part of the process which is developing and structuring the content, then the rest is quite easy to progress.
With the free services, libraries and templates provided, it has never been so easy to develop a personal webpage.
I will use Bootstrap 4.0 which is an open-source front-end web development library. It supports responsive and mobile-first kind of webpage development process so makes sure that our website will work properly and nicely in mobile devices.
Together with Bootstrap 4.0, I will use the free version of Font Awesome icon library in my project.
Not to handle all HTML/CSS development work from scratch, I will be modifying a Bootstrap template which I downloaded from this link.
For hosting my website, I will use Google Firebase, with a custom domain name. I registered my custom domain name on isimtescil.net and it cost 8$. You can use any other hosting and domain services as you wish.
Make a folder structure on your local computer to contain all your project files.
$ mkdir ds-personal-website$ cd ds-personal-website$ mkdir public
Then download the source code of freelancer template into your computer and copy all the files inside your ‘public’ project folder. Later on, Firebase will look at public folder while deploying the files into the hosting server so it is important to copy all the files into the ‘public’ folder which we have just created.
Modifying the Head Section of HTML
As a first step, what we need to do is to modify the HTML elements according to our needs. Let’s open ‘index.html’ in an editor and modify the head section first.
What I have modified is the metadata and the title of the webpage. These tags provide data to the search engines about our page content.
In addition, I have modified the href attributes relative to root so that the CSS & JavaScript source files can be accessed in the hosting environment.
I have marked the modifications in bold below.
Modifications are noted in bold../public/Index.html<head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,    shrink-to-fit=no"><meta name="description" content="Erdem Isbilen - Automotive &  Mechanical Engineer,Machine Learning and Data Science Enthusiasts"><meta name="author" content="Erdem Isbilen"><title>Erdem ISBILEN - My Personal WebPage</title><!-- Custom fonts for this theme --><link href="../vendor/fontawesome-free/css/all.min.css"      rel="stylesheet" type="text/css">  <link href="https://fonts.googleapis.com/css? family=Montserrat:400,700" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?   family=Lato:400,700,400italic,700italic" rel="stylesheet"  type="text/css"><!-- Theme CSS --> <link href="../css/freelancer.css" rel="stylesheet"></head>
Modifying the Navigation Section of HTML
I have added my logo into the Navigation section by keeping the rest of the Navigation section mainly the same. Thanks to the Bootstrap library, Navigation bar works perfectly as it is and adjusts itself to the different screen sizes by collapsing.
I had some minor changes on the arrangement of the NavBar by adding Portfolio, Blog, Resume and Connect Me sections respectively.
Depending on how you would like to present your content, you can add as many sections as you want.
Modifications are noted in bold../public/Index.html<!-- Navigation --><nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav"><div class="container"><a class="navbar-brand js-scroll-trigger" href="#page-top"> <img class="brand-logo" src="/img/eisbilen-logo.svg" alt=""></a><button class="navbar-toggler navbar-toggler-right text-uppercase    font-weight-bold bg-primary text-white rounded" type="button" data- toggle="collapse" data-target="#navbarResponsive"  aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">   <i class="fas fa-bars"></i> </button><div class="collapse navbar-collapse" id="navbarResponsive"><ul class="navbar-nav ml-auto">    <li class="nav-item mx-0 mx-lg-1">    <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"        href="#portfolio">Portfolio</a>   </li><li class="nav-item mx-0 mx-lg-1">    <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"     href="#blog">Blog</a>   </li>     <li class="nav-item mx-0 mx-lg-1">    <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"     href="#resume">Resume</a>   </li><li class="nav-item mx-0 mx-lg-1">    <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"     href="#connect">Connect Me</a>   </li>  </ul></div></div></nav>
Modifying the Masthead Section of HTML
In the Masthead section of the HTML, I have added my photo, name, and title.
As this section is above the fold, the portion of your page a visitor can view without scrolling, it is the first content your visitors will see on your website.
To make a good first impression, place your best professional photo of yourself and choose the best words that describe you.
Having a professional photo of yourself will also help others to trust you and your business.
Modifications are noted in bold../public/Index.html<!-- Masthead --><header class="masthead bg-primary text-white text-center"> <div class="container d-flex align-items-center flex-column"><!-- Masthead Avatar Image --> <img class="masthead-avatar mb-5" src="/img/ei-photo-min.png"    alt=""><!-- Masthead Heading --> <h2 class="masthead-heading text-uppercase mb-0">ERDEM ISBILEN</h2><!-- Icon Divider --> <div class="divider-custom divider-light">  <div class="divider-custom-line"></div>   <div class="divider-custom-icon">    <i class="fas fa-star"></i>   </div>  <div class="divider-custom-line"></div> </div><!-- Masthead Subheading -->  <h8 class="masthead-subheading font-weight-light mb-0">Automotive   & Mechanical Engineer</h8>  <h8 class="masthead-subheading font-weight-light mb-0">Machine   Learning and Data Science Enthusiasts</h8></div></header>
Modifying the Rest of the HTML
Modifying the rest of the HTML sections will be in a similar manner, so you can adjust them or include additional content as you wish.
Blog, Resume and Portfolio sections are the minimums that you should have on your webpage to properly convey your data science skills and profession.
Now, as we have all our project files are ready, it is time to set up the Firebase for hosting our content with free ‘Spark Plan’.
Assuming that you already have a ‘Google Account’, login to FireBase and create a new project.
At this point, we are ready to deploy our files to Firebase using our local computer with Firebase CLI.
Before deploying our website to the Firebase, we should install Firebase CLI to our local computer.
$ npm install -g firebase-tools
Then, we will log in and initialize the Firebase. Go to your project folder’s root directory to log in to Firebase with below terminal command. It will direct you to a website where you use your ‘Google Account’ to authorize Firebase.
ds-personal-website$ firebase login
After you logged in, now we can initialize the Firebase project and configure hosting details.
Select ‘Hosting’ option and provide the public directory as ‘public’ where all ready-to-deploy files are stored in your local computer. Do not select overwrite to ‘index.html’ option as this will modify your ‘index.html’.
ds-personal-website$ firebase initYou're about to initialize a Firebase project in this directory:/Users/erdemisbilen/Angular/my-personal-webpageBefore we get started, keep in mind:* You are initializing in an existing Firebase project directory? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.Hosting: Configure and deploy Firebase Hosting sites=== Project SetupFirst, let's associate this project directory with a Firebase project.You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project.i  .firebaserc already has a default project, using my-personal-webpage-c7096.=== Hosting SetupYour public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory.? What do you want to use as your public directory? public? Configure as a single-page app(rewrite all urls to /index.html)?No? File public/404.html already exists. Overwrite? Yes✔  Wrote public/404.html? File public/index.html already exists. Overwrite? Noi  Skipping write of public/index.htmli  Writing configuration info to firebase.json...i  Writing project information to .firebaserc...✔  Firebase initialization complete!
Now that you logged in and initialized the Firebase, you can deploy all of your files with one line of command.
If you managed to complete the set up properly, Firebase will deploy all your files and give you a URL where you can see your website online on your browser.
ds-personal-website$ firebase deploy=== Deploying to 'my-personal-webpage-c7096'...i  deploying hostingi  hosting[my-personal-webpage-c7096]: beginning deploy...i  hosting[my-personal-webpage-c7096]: found 91 files in public✔  hosting[my-personal-webpage-c7096]: file upload completei  hosting[my-personal-webpage-c7096]: finalizing version...✔  hosting[my-personal-webpage-c7096]: version finalizedi  hosting[my-personal-webpage-c7096]: releasing new version...✔  hosting[my-personal-webpage-c7096]: release complete✔  Deploy complete!Project Console: https://console.firebase.google.com/project/my-personal-webpage-c7096/overviewHosting URL: https://my-personal-webpage-c7096.firebaseapp.com
You cannot use the URL which is provided by Firebase as it is something for you to experiment with your design and to see it on the browser.
After you are happy with how your website looks on the browser, there is one final step to make your website unique with a custom domain name.
There are several providers where you can register a specific domain name. For me, it is www.erdemisbilen.com and I registered this domain name on isimtescil.net and it cost 8$ per year.
You can register your domain name with any DNS service provider of your choice.
After you registered your unique domain name, head into the Firebase Dashboard — Hosting section where Firebase asks you to add your custom domain.
You will get a TXT file after you provide your custom domain name to Firebase. Using your DNS provider’s dashboard, replace your domain name’s TXT record with the one provided by Firebase.
Once this is completed, Firebase will ask you to modify the ‘A’ records. So, modify the A records accordingly.
After a couple of hours, you will see that Firebase is connected to your custom domain.
Which means that all done, and your website is up and running!
In this post, I tried to explain my way of building a personal website specifically for self-taught data scientists.
I hope my article helps you to build your website and showcase your data science skills.