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 --version2. Preview the site locally
From the repo root:
quarto previewThis 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 render3. 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 thefavicon:line from_quarto.ymlif 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/actionsThen 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 pushIt’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; // terracottaSwap those three colors and the whole site re-skins. Typography lives just below — currently Fraunces (display) + Inter (body) loaded from Google Fonts.