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


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.

Learn about Quarto at https://quarto.org/

What we will cover


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

Learn about Quarto at https://quarto.org/

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

More about website navidation options: https://quarto.org/docs/websites/website-navigation.html

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

More ‘About’ page templates

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
---

More icons at: https://icons.getbootstrap.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

Wednesday Addam’s resume code github repo

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
---

Content listing templates

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

Top right navigation bar links

website:
  title: "Deepsha Menghani"
  navbar:
  
    left:
      - href: index.qmd
        text: Home
      - href: projects.qmd
        text: Projects
      - href: resume.qmd
        text: Resume
        
    right:
      - icon: mastodon
        href: https://fosstodon.org/@deepsha
      - icon: twitter
        href: https://twitter.com/bigdatadipper
      - icon: linkedin
        href: www.linkedin.com/in/deepshamenghani
      - icon: github
        href: https://github.com/deepshamenghani/

Add a search icon for the website

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

More options for adding search

Toggle between dark and light theme

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

https://quarto.org/docs/output-formats/html-themes.html

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;

More html theme options: https://quarto.org/docs/output-formats/html-themes.html

Customize the dark theme

More html theme options: https://quarto.org/docs/output-formats/html-themes.html

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

More code tools options here: https://quarto.org/docs/output-formats/html-code.html

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…

https://quarto.org/docs/publishing/quarto-pub.html

  • 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.

https://quarto.org/docs/publishing/quarto-pub.html

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.

https://quarto.org/docs/publishing/

Useful links

  • Beautiful reports and presentations with Quarto | Led by Tom Mock, Posit
  • Building a Blog with Quarto | Led by Isabella Velásquez, Posit
  • Create & Publish a Quarto Blog on Quarto Pub in 100 Seconds | Quarto Pub
  • My portfolio Github Repo

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/

deepshamenghani.quarto.pub/portfolio-with-quarto

1 / 60
Data Science Portfolio with Quarto Deepsha Menghani 1/24/23

  1. Slides

  2. Tools

  3. Close
  • 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…
  • Let’s take a look...
  • 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
  • Wednesday Addam’s...
  • 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…
  • Create a free public...
  • More ways to publish your Quarto website
  • Useful links
  • You did it!!!
  • f Fullscreen
  • s Speaker View
  • o Slide Overview
  • e PDF Export Mode
  • ? Keyboard Help