Portfolio site — local setup & deploy

A Quarto site, deployed to gh-pages via GitHub Actions, served at https://brycegrover.com.

1. Install Quarto (one time)

Download the latest release for macOS:

https://quarto.org/docs/get-started/

Verify:

quarto --version

2. Preview the site locally

From the repo root:

quarto preview

This opens the site in your browser at http://localhost:4200 and live-reloads when you save a file. Hit Ctrl-C to stop.

To do a one-shot full build into _site/:

quarto render

3. The repo layout

portfolio-website/
├── _quarto.yml              # site-wide config (nav, theme, format)
├── index.qmd                # Home
├── about.qmd                # About me
├── experience.qmd           # CV / experience
├── projects/
│   ├── index.qmd            # listing page
│   ├── dental-curriculum.qmd
│   ├── nhanes-oral-health.qmd
│   ├── electricity-demand.qmd
│   └── geospatial-crime.qmd
├── theme/
│   ├── custom.scss          # palette, typography, component overrides
│   └── styles.css           # tiny plain-CSS tweaks
├── assets/                  # images (headshot.jpg, project hero images, favicon.ico)
├── resume/                  # BG_Resume.pdf
├── .github/workflows/
│   └── publish.yml          # Actions workflow → gh-pages
├── .gitignore
├── CNAME                    # brycegrover.com (preserved on deploy)
└── README.md

4. Things to fill in before first publish

There are [TODO: ...] markers throughout the project pages and about.qmd. Search for them:

grep -rn "TODO" --include="*.qmd" --include="*.yml" .

Specifically:

  • assets/headshot.jpg — drop in a square-ish headshot.
  • assets/favicon.ico — 32x32 favicon (or remove the favicon: line from _quarto.yml if you don’t have one yet).
  • assets/projects/*.jpg — one hero image per project (a key plot, a model output, a pretty figure). Optional but they sell.
  • resume/BG_Resume.pdf — drop the PDF here so the download button works.
  • GitHub repo URLs in each project page (brycegrover/[TODO-repo-name]).
  • about.qmd — fill in the placeholder hobbies/reading/current-pursuit lines.

5. First deploy

GitHub Actions will publish to a gh-pages branch on every push to main. The first time you deploy you need to:

# 1. Local sanity check
quarto render

# 2. Commit and push everything
git add .
git commit -m "Initial Quarto scaffold"
git push origin main

# 3. Watch the Actions run finish at:
#    https://github.com/brycegrover/brycegrover.github.io/actions

Then in your repo on github.com → Settings → Pages:

  • Source: Deploy from a branch
  • Branch: gh-pages / (root)

Within ~1 minute the new site should be live at https://brycegrover.com.

6. Adding a new project writeup

# Create the file
cp projects/dental-curriculum.qmd projects/my-new-project.qmd

# Edit the YAML front-matter (title, date, categories, image)
# Write the body
quarto preview   # check it
git add projects/my-new-project.qmd
git commit -m "Add my-new-project writeup"
git push

It’ll auto-appear on the Projects listing page (sorted by date).

7. Embedding live code in a project page

Quarto’s killer feature for a data-science portfolio is executing real code at render time. The default _quarto.yml sets freeze: auto, which means a code cell only re-runs when the source changes — keeping deploys fast.

```{python}
import pandas as pd
import matplotlib.pyplot as plt

df = pd.read_csv("data/nhanes_results.csv")
df.plot(x="model", y="roc_auc", kind="bar")
plt.title("Model performance — NHANES")
plt.show()
```

For Python execution you’ll need jupyter installed in the environment (pip install jupyter matplotlib pandas etc.). If/when you start executing code at render time, uncomment the Python-setup block in .github/workflows/publish.yml and add a requirements.txt.

8. Customizing the theme

All the design lives in theme/custom.scss. The palette is at the top:

$bg:        #faf7f2;   // warm off-white
$ink:       #1a1d20;   // body text
$accent:    #b8542e;   // terracotta

Swap those three colors and the whole site re-skins. Typography lives just below — currently Fraunces (display) + Inter (body) loaded from Google Fonts.