Data Science Portfolio with Quarto

Deepsha Menghani

1/24/23

What is a Data Science Portfolio

A data science portfolio is a collection of your best work and demonstrates your skills as a data scientist

But at the thought of creating a Data Science portfolio website…

Let’s take a look at an example

Why I chose Quarto to build my portfolio

Base blog skeleton is simple and clean
It already has the base components for a portfolio website
It is very quick and easy to create
It is language and tool agnostic

Very basic understanding of your favorite Quarto supported language and IDE.

What we will cover

Configuring the structure of your website
Adding content
Customizing to your unique self
Publishing and updating your website

Let’s build a portfolio

Create a new Quarto blog project

Initial file structure

Render a blog project…

But first let’s pray to the live code gods.

_quarto.yml file provides the primary structure to the website

project:
  type: website

website:
  title: "Portfolio"
  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/
      - icon: twitter
        href: https://twitter.com
format:
  html:
    theme: cosmo
    css: styles.css

editor: visual

index.qmd file defines the home page of the website structure

---
title: "Portfolio"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---

about.qmd file defines the “About” page structure

---
title: "About"
image: profile.jpg
about:
  template: jolla
  links:
    - icon: twitter
      text: Twitter
      href: https://twitter.com
    - icon: linkedin
      text: LinkedIn
      href: https://linkedin.com
    - icon: github
      text: Github
      href: https://github.com
---

About this blog

Initial file structure

index.qmd

_quarto.yml

about.qmd

css files

posts folder

Configure the structure with _quarto.yml

Update title and introduce tabs by editing _quarto.yml

website:
  title: "Deepsha Menghani"
  navbar:
  
    left:
      - href: index.qmd
        text: Home
      - href: projects.qmd
        text: Projects
      - href: resume.qmd
        text: Resume
    
    right:
      - about.qmd
      - icon: github
        href: https://github.com/
      - icon: twitter
        href: https://twitter.com

Create your home page by updating “index.qmd”

Choose About template for home page

---
title: "Deepsha Menghani"
image: images/linkedinpic.jpg
about:
  template: jolla
  image-width: 20em
  image-shape: round
  
---

About this blog

Add description

---
title: "Deepsha Menghani"
image: images/linkedinpic.jpg
about:
  template: jolla
  image-width: 20em
  image-shape: round
  
---

I am a Sr. Data Scientist at Microsoft. I have an extensive background working with varied data sets and using advanced analytics to enable business stakeholders to make informed decisions.

I recently expanded my skill set to include topics like Quarto, tidymodels, working in cross-language R/Python environment using reticulate, and data visualizations using animation and interactivity. I love learning new things constantly and sharing my knowledge with others in a digestible manner.

Add media links

---
title: "Deepsha Menghani"
image: images/linkedinpic.jpg
about:
  template: jolla
  image-width: 20em
  image-shape: round
  links:
    - icon: mastodon
      text: Mastodon
      href: https://fosstodon.org/@deepsha
    - icon: twitter
      text: Twitter
      href: https://twitter.com/bigdatadipper
    - icon: linkedin
      text: LinkedIn
      href: www.linkedin.com/in/deepshamenghani
    - icon: github
      text: Github
      href: https://github.com/deepshamenghani/
    - icon: envelope
      text: Contact me
      href: mailto:menghani.deepsha@gmail.com
---

Resume tab update with “resume.qmd”

BYOR (Bring Your Own Resume) or create a personalized resume with Quarto markdown

Embed exisiting resume pdf

<iframe 
  width="800" 
  height="800" 
  src="images/Menghani_Deepsha_Resume.pdf">
</iframe>

Or create the resume as a Quarto markdown

Add Project listings with “projects.qmd”

Add listings of content within the website

We pointed the “Projects” tab to the projects.qmd file in _quarto.yml earlier
Let’s ask projects.qmd file to pick its listings from the posts folder

---
title: "Projects"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---

Let’s add another project to the content list

Go to the “posts” folder in root directory
Create a folder for the new content
Add an “index.qmd” and accompanying image to the newly created folder

Index.qmd yaml within the new folder

Add code or blog content
Add an accompanying image in the same folder
Add tags for categories for easy reference

---
title: "TidyTuesday: Retail Sales data analysis with Plotly in R"
date: 01-2-2023 
author: Deepsha Menghani 
categories: [code, analysis, visualization, plotly]
image: "plotly.png"
---
  
In this post, I will analyse the TidyTuesday dataset about Retail Sales ...

New Projects page

Run the “index.qmd” within the new posts folder
Run the home “index.qmd”
The description is picked from the first line of your blog

Or completely customize the projects page with external blog links

Custom projects.qmd content list

## Quarto blog - Data visualizations - Animation and Interactivity

:::: columns

::: {.column width="55%"}
Description 1
:::

::: {.column width="5%"}
:::

::: {.column width="40%"}
Image 1
:::

::::

## Shiny Flex Dashboard - Sales forecasting and anomaly detection
:::: columns

::: {.column width="40%"}
Image 2
:::

::: {.column width="5%"}
:::

::: {.column width="55%"}
Description 2
:::

::::

And just that quickly, you have an elegant website!!

Further personalization with _quarto.yml

Add a search icon for the website

website:
  title: "Deepsha Menghani"
  search: 
    location: navbar
    type: overlay

Toggle between dark and light theme

format:
  html:
    theme:
      light: cosmo
      dark: darkly

Customize the dark theme

Quarto yaml

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme_dark_custom.scss]

Dark theme scss

/*-- scss:defaults --*/
// Base document colors
$body-bg: #181818;
$body-color: white;
$link-color: #75AADB;

// Code blocks
$code-block-bg-alpha: -.8;

Customize the dark theme

Code blocks customizations

Code-link: Enable hyper-linking of functions within code blocks to their online documentation

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme_dark_custom.scss]
    code-link: true

Code-fold: Include code but have it hidden by default

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme_dark_custom.scss]
    code-link: true
    code-fold: show

Code-tools: Code menu will present options to show and hide the folded code

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme_dark_custom.scss]
    code-link: true
    code-fold: show
    code-tools: true

Code-block-bg: Change code background color

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme_dark_custom.scss]
    code-link: true
    code-fold: show
    code-tools: true
    code-block-bg: "lightblue"

Code-block-border-left: Add a left border to the code blocks

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme_dark_custom.scss]
    code-link: true
    code-fold: show
    code-tools: true
    code-block-bg: "lightblue"
    code-block-border-left: "#31BAE9"

Highlight-style: Choose from default code block templates

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme_dark_custom.scss]
    code-link: true
    code-fold: show
    code-tools: true
    highlight-style: github

Favicon

website:
  title: "Deepsha Menghani"
  favicon: "images/linkedinpic.jpg"

Website footer

website:
  title: "Deepsha Menghani"
  favicon: "images/linkedinpic.jpg"

  page-footer:
    center: |
      [Contact Deepsha Menghani](mailto:menghani.deepsha@gmail.com)
    left: |
      Made with [Quarto](https://quarto.org/)
    right: |
      [Github Code Repo](https://github.com/deepshamenghani)
    background: "#2780e3"

Last step - Publish your website

Let’s publish with Quarto Pub…

Create a free public account on https://quartopub.com/
Sign in using your default browser
Go to the terminal and give the command - quarto publish quarto-pub
Follow the instructions on screen

Note

Quarto Pub sites are publicly visible, can be no larger than 100 MB and have a soft limit of 10 GB of bandwidth per month.

More ways to publish your Quarto website

Quarto Pub Publishing service for Quarto documents, websites, and books. Use Quarto Pub when you want a free, easy to use service for publicly available content.
GitHub Pages Publish content based on source code managed within a GitHub repository. Use GitHub Pages when the source code for your document or site is hosted on GitHub.
Posit Connect Publishing platform for secure sharing of R and Python data products. Use Posit Connect when you want additional features like authentication, running notebooks on a schedule & git-backed publishing..
Netlify Professional web publishing platform. Use Netlify when you want support for custom domains, authentication, previewing branches, and other more advanced capabilities.
Other Services Content rendered with Quarto uses standard formats (HTML, PDFs, MS Word, etc.) that can be published anywhere. Use this if one of the methods above don’t meet your requirements.

Useful links

You did it!!!

Twitter: https://twitter.com/bigdatadipper

Fediverse: https://fosstodon.org/@deepsha

LinkedIn: https://www.linkedin.com/in/deepshamenghani/

Portfolio: https://deepshamenghani.quarto.pub/dmenghani/

Data Science Portfolio with Quarto

What is a Data Science Portfolio

A data science portfolio is a collection of your best work and demonstrates your skills as a data scientist

A data science portfolio is a collection of your best work and demonstrates your skills as a data scientist

But at the thought of creating a Data Science portfolio website…

Why I chose Quarto to build my portfolio

What we will cover

Let’s build a portfolio

Create a new Quarto blog project

Initial file structure

Render a blog project…

_quarto.yml file provides the primary structure to the website

index.qmd file defines the home page of the website structure

about.qmd file defines the “About” page structure

Initial file structure

index.qmd

_quarto.yml

about.qmd

css files

posts folder

Configure the structure with _quarto.yml

Update title and introduce tabs by editing _quarto.yml

Create your home page by updating “index.qmd”

Choose About template for home page

Add description

Add media links

Resume tab update with “resume.qmd”

Embed exisiting resume pdf

Or create the resume as a Quarto markdown

Add Project listings with “projects.qmd”

Add listings of content within the website

Let’s add another project to the content list

Index.qmd yaml within the new folder

New Projects page

Or completely customize the projects page with external blog links

Custom projects.qmd content list

And just that quickly, you have an elegant website!!

Further personalization with _quarto.yml

Top right navigation bar links

Add a search icon for the website

Toggle between dark and light theme

Customize the dark theme

Customize the dark theme

Code blocks customizations

Code-link: Enable hyper-linking of functions within code blocks to their online documentation

Code-fold: Include code but have it hidden by default

Code-tools: Code menu will present options to show and hide the folded code

Code-block-bg: Change code background color

Code-block-border-left: Add a left border to the code blocks

Highlight-style: Choose from default code block templates

Favicon

Website footer

Last step - Publish your website

Let’s publish with Quarto Pub…

More ways to publish your Quarto website

Useful links

You did it!!!