Portfolio Building Workshop

Instructor: Sep Dadsetan, PhD

2025-01-27

Introduction

General overview of today’s agenda:

Introduction
Quarto Basics
Building the Portfolio Website
Publishing and Maintaining the Website
Closing

Welcome! Meet Your Workshop Facilitator

My Role

Director, RWD Analytics @ Labcorp

My Expertise

I’ve been a developer since 2000 (HTML/CSS/JS)
Got into Data Science in 2014
I’ve had a website (of some shape or form) since 2000

My Passion

Passionate about helping others be their best selves

Fun Fact

I was a professional DJ for 15 years

Meet your TAs

Rebecca Butler
Pablo Barajas
Javier Orraca-Deatcu

We’re excited to guide you through creating an impressive portfolio!

Why Create a Portfolio Site?

1. Showcase Your Skills

Highlight your expertise, projects, and accomplishments.
Provide concrete examples of your work (e.g., code, visualizations, reports).
Fun place to play with ideas and technologies

2. Build Your Personal Brand

Stand out in a competitive job market.
Share your unique style and professional story.

3. Increase Visibility

Make it easy for recruiters, clients, or collaborators to find you.
Share your work with a broader audience online.

4. Demonstrate Technical Proficiency

Showcase your ability to use tools like Quarto, R Markdown, or web development skills.
Prove your commitment to staying current with industry standards.

5. Foster Networking Opportunities

Connect with like-minded professionals and potential collaborators.
Provide a professional platform to engage with others in your field.

“Your portfolio is more than a website—it’s your professional handshake in the digital world.”

Different Ways You Could Build a Portfolio

1. Quarto

Use Quarto to create an interactive, reproducible portfolio.
Embed code, visualizations, and analysis directly into your site.
Publish easily with platforms like GitHub Pages or Netlify.

2. Static Site Generators

Use tools like Jekyll, Hugo, or Gatsby.
Build fully customizable sites with Markdown and templates.
Great for those comfortable with web development.

3. Custom HTML/CSS/JavaScript

Build a website from scratch for maximum control.
Showcase your web development skills alongside your data work.
Time-intensive but highly customizable.

4. Blogging Platforms

Use platforms like Medium or WordPress.
Share insights and projects in an easy-to-publish format.
Limited customization but great for reaching a broad audience.

5. Interactive Notebooks

Share work through Jupyter or R Markdown notebooks.
Use platforms like nbviewer or GitHub to host them.
Quick and simple, but not ideal for a polished portfolio.

“From Quarto to custom development, the right tool depends on your goals, technical skills, and the story you want to tell.”

Why Should You Choose Quarto?

1. Seamless Integration with Data Science Tools

Works natively with Python, R, and Julia.
Embed code, visualizations, and results directly into your portfolio.
Supports popular libraries like Pandas, ggplot2, and Plotly.

2. Reproducible Workflows

Ensure your analysis is transparent and reproducible.
Showcase data workflows where code and results are linked.
Ideal for sharing professional, credible projects.

3. Markdown Simplicity with Customization

Write your site in plain Markdown for simplicity.
Customize themes and layouts to match your personal brand.
Flexible yet beginner-friendly.

4. Interactive and Dynamic Content

Embed interactive plots and dashboards to engage visitors.
Include JavaScript or advanced visualizations to elevate your projects.
Perfect for data-rich portfolios.

5. Simple Deployment

Publish easily with GitHub Pages, Netlify, or Vercel.
Clear deployment workflows reduce technical overhead.
Focus on content, not complex setups.

“Quarto enables data scientists to create professional, interactive, and reproducible portfolios with ease—showcasing both technical skill and storytelling ability.”

You can find all the info you need at - quarto.org
Some Quarto Inspo - qmdclub.com

Setting up your environment

Our Tech Stack

For today…

You must have a Github account. Please create one if you don’t.
We’ll be using Github Codespaces with VS Code
Everything will be pre-installed for you already

For future reference however…

If you were to explore doing this on your own, you’d need the following at least:

IDE (ex, VS Code, RStudio Desktop, Positron, etc)
Python, R, and/or Julia
Quarto
Cloud Version Control is highly recommended (eg, Github, GitLab, Bitbucket, etc)
You could also just continue to use your codespace…

Setup Walkthrough

Follow along closely so no one gets lost. We’re going to do this together. 🫱🏼‍🫲🏾

Navigate to the following template repo https://github.com/phdjsep/gh-pages-quarto-portfolio-template

Click on “Use this template” -> “Create new repo”

In “Repository name”, give it the following <username>.github.io

“Create Repository”

Launch codespace (this will take a ~2.5 minutes)

Once ready…check that quarto is installed -> in terminal quarto --version

If good, type quarto create and you will see something like below:

(base) > quarto create
? Create › project
? Type › website
? Directory › ./
? Title (./) › "<Enter a title for your site>"
Creating project at ...:
  - Created _quarto.yml
  - Created index.qmd
  - Created about.qmd
  - Created styles.css

Run quarto preview to see a preview of your basic site!

Quarto Basics

1. A Quarto Document

Understand the basic structure:
- YAML Header: Define metadata like title, author, and output format.
- Markdown Content: Write text, headings, lists, and other content.
- Code Chunks: Embed and execute code directly in your document.

2. Writing Content

Add rich content to your document:
- Text: Use plain Markdown for simplicity.
- Images and Links: Embed visuals and connect to external resources.
- Formatting: Create headings, bullet points, and numbered lists for structure.

3. Adding Code and Visualizations

Showcase your technical skills:
- Embed Code: Use R, Python, or Julia directly in code chunks.
- Visualizations: Create interactive plots or static charts.
- Tables: Display data in a clean, professional format.

The Quarto Development Flow

1. Write Code

Begin by writing content in a .qmd file using Markdown.

2. Preview

Use quarto preview to see a live preview of your document.

3. Revise

Identify areas for improvement in content, formatting, or visualizations.

4. Render

Use quarto render to generate the output.

5. Publish

Share your work with the world!

Quarto Hands-on Walkthrough

Let’s take an introductory stroll through Quarto!

Portfolio Site Structure

Components of Your Portfolio Website

At a minimum, your portfolio website should include:

Home/About Me page: A quick introduction to who you are and what you do.
Links to other profiles: Provide easy access to your LinkedIn, GitHub, or other professional profiles.
Downloadable Resume: Include a link to a PDF version of your resume.
Projects Page: Showcase a list of your projects with brief descriptions and links.

Additional Features to Consider

Blog: Share insights, tutorials, or updates about your work and interests.
Hobbies Page: Add a personal touch by sharing your hobbies or interests.

Where to Start

Biographical Blurb

Who are you?: Introduce yourself and your background.
Where did you come from?: Share a bit about your journey.
What is your personal mission and vision?:
- Mission: What do you do now?
- Vision: Who do you aspire to become?

Projects

List of Projects: Highlight key projects you’ve worked on.
Short Descriptions: Provide a brief overview of each project and its purpose.
Visuals: Include photos, screenshots, or videos to make your projects stand out.

The Basic Structure of a Quarto Site

Key Components:

_quarto.yml: The configuration file that defines your site’s structure and settings.
index.qmd: The homepage of your site.
Other pages and folders: Additional pages (about.qmd, blog.qmd) and resources (e.g., images, styles).
Assets: Folders for stylesheets, images, or other resources (e.g., styles.css, assets/).

project:
  type: website

website:
  title: "Quarto Portfolio Website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: projects/
        text: Projects
      - href: blog.qmd
        text: Blog

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

Customizing

Customizing your site

Next, we’ll customize the site.

Modify file structure to add pages.
Modify _quarto.yml

Modifying the file structure

You can organize your files however you would like, but choosing a regular file structure will be very helpful. I recommend the following general structure.

.gitignore file: Includes the files to leave untracked in version control.
blog.qmd: will load blog post from posts/ folder
_site/: auto-generated by Quarto, you don’t need to create this folder. You should add it to your .gitignore.
projects/: folder to organize projects.
projects/index.qmd: page to display and list projects.
images/: folder(s) to store images for your site and pages. Best to keep organized in the relevant folder (e.g., per project).

Sample project directory structure

├── .gitignore
├── README.md
├── _quarto.yml
├── _site
│   └── ...
├── blog.qmd
├── images
│   └── headshot.jpeg
├── index.qmd
├── posts
│   └── first-post.qmd
├── projects
│   ├── example-project-1
│   │   ├── images
│   │   │   └── my_cat.jpeg
│   │   └── index.qmd
│   ├── example-project-2
│   │   ├── images
│   │   └── index.qmd
│   ├── index.qmd
│   └── template
│       ├── images
│       └── index.qmd

Creating your homepage

Open index.qmd at the project root. This is your homepage.
Create the following frontmatter structure, replacing the information with yours.
Write a brief biographical blurb for yourself (you can easily change this later).
Run quarto preview to check your updates.

---
title: "Your Name"
image: images/headshot.jpeg # replace with the link to your headshot
about:
  template: jolla # see additional templates here https://quarto.org/docs/websites/website-about.html
  links:  # add links to your various social profiles
    - icon: linkedin
      text: LinkedIn
      href: https://www.linkedin.com/in/<yourhandle>
    - icon: github
      text: Github
      href: https://github.com/<yourhandle>
---

Enter your biography blurb here.

Add a Project Page

Let’s add a project page to showcase a basic data science project.

Steps:

Create a Subfolder:
Inside the projects/ folder, create a new subfolder named after your project (e.g., iris). Avoid spaces in the folder name.

Add Supporting Files:
Inside your new project folder, add:
- images/ folder: Store any images or visualizations related to your project here.
- index.qmd file: This will serve as the main page for your project.

Directory Structure Example:
After completing the setup, your directory should look like this:

.
├── projects
│   ├──iris
│   │  ├── images/
│   │  └── index.qmd

Writing Markdown in Quarto

What is Markdown?

Markdown is a lightweight and easy-to-read format for writing text.
Quarto documents are built using Markdown, with some extensions for advanced features.
Learn more at Markdown Guide.

Headings

Use # symbols to create headings:
- # Heading 1 → <h1>
- ## Heading 2 → <h2>
- ### Heading 3 → <h3>
Structure your content with proper heading levels for clarity.

Images

Embed images using the syntax:

![Alt text](path/to/image.jpg)

There’s A LOT more. Checkout…

Writing our Iris Project page

Add Content to index.qmd:
Open index.qmd and describe your project.

Include the following:

A short introduction to the Iris dataset.
Key steps in your analysis (e.g., data cleaning, visualization, modeling).
Include code snippets, plots, and conclusions.

Example content for index.qmd:

---
title: Iris
author: Sep Dadsetan
date: 2024-11-11
image: images/ # A url to image here.
description: This is a description # Short description of the project to be shown on overview page.
---

# Iris Analysis

The **Iris dataset** is a great sample dataset. It contains information on iris species and sepal dimensions.

## Key Steps

yadda yadda

Creating projects overview page

The last thing we need to do before we publish our site with the minimal setup is create a project overview page. To do this, open projects/index.qmd and add the following text.

---
title: Projects
---

## Iris

::::: {.columns}
::: {.column}
UCI: Iris Research Project
Check out this analysis I performed by following the link [here](iris/).
:::
::: {.column}
![](iris/images/)
:::
:::::

## Project #2

Customizing `_quarto.yml`

After you add the pages

project:
  type: website

website:
  title: "Quarto Portfolio Website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: projects/
        text: Projects
      - href: blog.qmd
        text: Blog

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

Publishing Your Site

We need to setup the Github repo to render the site from the gh_pages branch.

If it’s a fresh repository, you won’t have a gh_pages branch. So, first we need to create an empty one. To do so, run the following code:

git checkout --orphan gh-pages
git reset --hard # make sure all changes are committed before running this!
git commit --allow-empty -m "Initialising gh-pages branch"
git push origin gh-pages

After you finish this, go back to the main branch by running git checkout main. This must be completed before you run quarto publish!
Go to our Repo -> “Settings” -> Pages -> Create from branch and make sure gh-pages is selected.

Ta-da! 🎉 Site is published!

Taking Your Portfolio to the Next Level

Buy Your Own Domain Name

A personal domain is well worth your investment. It will cost you around $20 a year, but it will give you a nice spot for your web presence and also a nice email.

Go with a .com if it’s available. (could also consider .me as well)
Hover is a very friendly, straight-forward option to purchase your domain (can use my referral code for $2 off: https://hover.com/uYAUiF80)
Other options are directly in AWS via Route53 (kinda complicated), Squarespace, and many others…

Hosting Your Quarto Site

How Hosting Works

A domain name provides a DNS entry (e.g., yourwebsite.com).
The DNS entry must point to a server with an IP address where your site is hosted.

Hosting Options

GitHub Pages:
- Free and easy to set up.
- Perfect for static sites like Quarto.
- Example: Point your domain to username.github.io.

Self-Hosting:
- Run your own server with a public IP address.
- Offers full control but requires technical expertise.

Conventional Web Hosting:
- Use services like Bluehost or HostGator.
- Simplifies management while offering shared hosting plans.

“Choose the hosting option that best fits your site’s needs, budget, and your technical expertise.”

Other Useful Tools for Quarto Development

VS Code Tools

Markdown Extension:
- Simplifies working with Markdown files.
- Features include:
  - Easily paste images directly into your document.
  - Automatically update filenames when renamed.

Snippets:
- Reusable pieces of code for common constructs.
- Save time by templating frequently used code (e.g., YAML headers or code chunks).

“Tools like these enhance your efficiency and make developing with Quarto even easier!”

Resources

Helpful Links

Thank You’s

First of all, everyone here for listening and participating
SoCal RUG and UCI for having me
Developers behind these wonderful tools
Thanks to Josh Brake who has some great material I used in this workshop.