Introduction to Quarto

• What is Quarto?
  • An open-source scientific and technical publishing system.
  • Installation: https://quarto.org/docs/get-started/

Quarto Formats

• HTML
• pdf
• MS Word
• Revealjs Presentation
• PowerPoint
• dashboard
• Website
• Blogs
• Books

Quarto document Samples

• My Quarto-pub website: https://jmjung.quarto.pub/
• Quarto Gallery: https://quarto.org/docs/gallery/

Steps in Preparing for a project

• R & RStudio:
  • Installation: https://posit.co/download/rstudio-desktop/

1. Start a new project

• Projects are the containers for all of your notebooks.

1.  From File, click `new project`
2.  Select a new or existing directory depending on your needs
3.  Select your folder that will contain your project.
4.  Press create project

• You should see your .Rproj file and others in the Files panel

2. Start a codebook/notebook and save it

• R Scripts file

• Rmd file

• Quarto file

3. Start literate coding with Quarto

Three Areas in Quarto File

• Detailed tutorials available at the official Quarto site

1. Yaml header

An YAML header demarcated by three dashes (---) on either end.

---
title: "Module 1 Introduction to R, RStudio, and Qurto"
author: "Jae Jung"
date: '2025-05-12 09:55:43'
format: 
  html: 
    toc: true
    toc-depth: 4
    embed-resources: true
editor: visual
execute: 
  freeze: auto
---

2. Code chunk

```{r}
#| label: demo-code-chunk
#| include: true

#install.packages("tidyverse")
#install.packages("palmerpenguins")
library(tidyverse)
library(palmerpenguins)
```

3. Markdown text area

• Text area is all the canvas area within qmd file other than Yaml header and code chun areas.

• Quarto uses markdown syntax for text.

• You can use text area for typing prose as you would normally do in MS Word or Google Doc.

  • Text with formatting: section headers, hyperlinks, an embedded image, and an inline code chunk.

• You can also style it: e.g., Bold; Italicize

Qurto Interface

Visual editor

• Easier to those who are familiar with MS Word or Google Doc.
• To add something; press ctrl/commnad + /
• Adding table by hand is cumbersome.
• Adding an figure/image

Source editor

• Easier to those who are familiar with R Script file or Rmd file.
• Useful for debugging any Quarto syntax errors since it’s often easier to catch these in plain text.
• Handy reference sheet available at the RStudio menu:
  • Help > Markdown Quick Reference

Literate Programming in Quarto

Hands-on visualization activity if time permitted

library(tidyverse)
library(gt)
mpg |> 
    count(drv) |> 
    mutate(percent = n/sum(n)) |> 
    gt() |> 
    fmt_percent(columns = percent,
                decimals = 2) |> 
    tab_header(title = md("**Number of Cars by Drive Train Type**")) |> 
    tab_source_note(source_note = md("**Note**: The data is from `ggplot2` package"))

Expected Outcomes:

• Walk away with a starter professional website including résumé
• Publish your professional portfolio website
• Customize themeing via SCSS
• Understand options on linking a custom domain to a freely hosted website

Why Quarto for a professional portfolio website?

• Write once → ship anywhere (HTML, slides, dashboards)
• Native R / Python for fully reproducible analytics
  
• Examples: Refer to Dr. Jung’s section
  
• Zero-cost hosting: GitHub Pages · Quarto Pub · Netlify

Live Example - Quick Tour

Hands-On Live Build

Follow along to create your own professional website! Instructions on next slide. Requirements:

- RStudio installed

- Internet connection

Clone the Template

Option A – RStudio GUI
1. File › New Project › Version Control › Git
2. Paste repo URL https://github.com/CCIDM/portfolio-website-template → Create

Option B – Console (no Git required)

install.packages("usethis")

destination_directory <- "~/PortfolioProject"  # change if you like
if (!dir.exists(destination_directory)) dir.create(destination_directory, recursive = TRUE)

usethis::create_from_github(
  "CCIDM/portfolio-website-template",
  destdir = destination_directory,      
  open   = TRUE 
)

Option C – Download .zip from GitHub link and open .Rproj

Needed Admin Actions

Sever Git connection to original repo

git remote remove origin

Install tinytext for PDF resume

install.packages(c("tinytex"))

tinytex::install_tinytex() 

Site Structure

A well-organized portfolio website might include the following pages:

• Home Page:
  An introduction and personal statement.

• Marketing Analytics:
  A blog-like page showcasing your work in data-driven marketing, including case studies, data visualizations, and performance metrics.

• Strategic Marketing:
  A dedicated section highlighting your expertise in marketing strategy, brand development, and market positioning.

• Resume:
  A page featuring your CV, built using Markdown and the Vitae package.

File Structure

portfolio-website/
├── _quarto.yml
├── theme.scss
├── index.qmd
├── marketing-analytics.qmd
├── strategic-marketing.qmd
├── listings/
│   ├── 01-campaign-insights-dashboard.qmd
│   ├── 02-seo-benchmarking-analysis.qmd
│   └── …                             # 3 more deep dives
├── data/
│   └── TRI SEO Comparison.html
├── images/
│   ├── headshot.jpg
│   └── hero.jpeg
├── resume.qmd
├── resume/
│   ├── YOUR-NAME-Resume.Rmd
│   └── YOUR-NAME-Resume.pdf
└── personal_website.Rproj

_quarto.yml – Site Brain

project:      type: website     # activates site engine
output-dir:   docs              # GitHub Pages target
website:
  title: "YOUR NAME"
  navbar:
    left:
      - index.qmd
      - marketing-analytics.qmd
      - strategic-marketing.qmd
      - resume.qmd
format:
  html:
    theme: [flatly, theme.scss] # Bootswatch + your SCSS
    toc: true                   # on-page table of contents

• One file controls nav, theme & metadata—render once, everything updates.*

theme.scss – Brand Dial

$color-primary:   #123456;
$color-secondary: #ABCDEF;
$accent-1:        #FF7F00;

body  { font-family: Arial, sans-serif; color: #121212; }
h1    { color: $color-primary; }
h2    { color: darken($color-secondary,10%); }
a     { color: $accent-1; &:hover { text-decoration: underline; } }

Swap two colours → whole site re-skins.

marketing-analytics.qmd – Auto Gallery

---
title: "Marketing Analytics"
listing:
  contents: listings   # scans /listings folder
  type: grid           # card layout
  categories: true     # filter bar
  sort: "index desc"   # newest first
---

Below are selected projects using data to drive results.

Drop a new .qmd in listings/ → card appears instantly.

strategic-marketing.qmd – Thought Leadership

---
title: "Strategic Marketing"
---

## Brand Audit & Positioning
Short narrative …

**Skills Demonstrated**
- Brand Analysis
- Competitive Benchmarking
- Strategic Communication

<iframe src="data/TRI SEO Comparison.html" width="100%" height="600" style="border:none;"></iframe>

Long-form storytelling + embedded proof.

resume.qmd – Recruiter Page

---
title: "Résumé"
---

View the PDF résumé [here](resume/Resume.pdf).

# Technical Skills
- **Languages:** R, Python, SQL
- **Web:** HTML, SCSS, Quarto

# Education
| Degree | Year | Institution |
|--------|------|-------------|
| M.S. Digital Marketing | 2023–2025 | Cal Poly Pomona |

### Data Analyst, ACME Corp
*Jan 2022 – Mar 2024*
- Automated KPI dashboards → –20 h/mo manual work

HTML for SEO, PDF for ATS(Applicant Tracking System)—best of both worlds.

Building a PDF Résumé with vitae

---
name:      Jarrod
surname:   Griffin
position:  "Marketing-Analytics Specialist"
phone:     +1 (555) 123-4567
www:       jarrod.codes
email:     jarrod@example.com
linkedin:  jarrodgriffin
output:
  vitae::latexcv:
    theme: classic
---

# Professional Summary, Education, Work
# (using tribble() + detailed_entries())

Three Ways to Publish (at a Glance)

GitHub Pages – 60-Second Flow

# inside your project root
quarto publish gh-pages
# first run ➜ OAuth to GitHub, auto-creates repo & pages

• Renders to docs/ then pushes to GitHub Pages.
  
• Site lives at https://<user>.github.io/<repo> (custom domain via Settings ▸ Pages).

Netlify – 60-Second Flow

quarto publish netlify             # CLI opens browser to auth
# or:
quarto render                      # build locally
netlify deploy --dir=docs          # if you prefer Netlify CLI

• No GitHub needed—CLI uploads a ZIP via Netlify API.
  
• Alt: drag docs/ onto Netlify Drop in the UI.
  
• Netlify auto-provisions HTTPS & lets you add a domain from the dashboard.

Quarto Pub – 30-Second Flow

quarto publish quarto-pub

• Log in with Google/GitHub once → site appears at
  https://<handle>.quarto.pub immediately.
  
• Perfect for quick public proofs-of-concept; custom domains planned but not yet available.