Building Your Portfolio in the AI Age

A Hands-On Workshop with Quarto & GitHub Pages

Sep Dadsetan, PhD

2026-03-01

About Me

  • Sep Dadsetan, PhD — sepd.dev
  • Director, RWD Analytics @ Labcorp
  • SoCalRUG community member
  • This site, these slides, and this talk are all built with Quarto

📌 I’m proof that what we’re building today actually works.

Why Portfolios Matter

The Hiring Landscape Has Changed

  • Everyone has access to AI tools now
  • Technical skills alone don’t differentiate you
  • Employers want to see how you think, not just what you can code
  • A portfolio shows your judgment, communication, and process

What AI Can’t Show For You

AI Can Generate

  • Boilerplate code
  • Generic project descriptions
  • Standard visualizations
  • Template websites

You Must Demonstrate

  • Domain judgment — why this approach?
  • Problem framing — why does this matter?
  • Stakeholder thinking — who cares?
  • Messy data navigation — what went wrong?

Your Portfolio Is Your Proof of Work

A portfolio isn’t a gallery of finished projects — it’s evidence of how you think through problems.

  • It complements (not replaces) your resume
  • Gives interviewers something concrete to discuss
  • Shows you can communicate technical work to non-technical audiences
  • Demonstrates you’re someone who ships — not just someone who studies

What Makes a Great Analytics Portfolio?

  1. A clear “About Me” — who you are, what you’re interested in
  2. 2-3 well-documented projects — quality over quantity
  3. Process, not just results — show your reasoning
  4. Clean presentation — design matters, even for data people
  5. Easy to find — a real URL, linked from your resume and LinkedIn

What Is Quarto?

Quarto in 30 Seconds

  • Open-source publishing system by Posit
  • Write in Markdown, render to HTML, PDF, slides, and more
  • Supports Python, R, Julia, and Observable
  • One tool for your portfolio site, blog posts, reports, and these slides

💡 Why Quarto for a portfolio? You write .qmd files (text + code) and Quarto turns them into a polished website. No frontend framework, no React, no JavaScript needed.

Quick Tour: sepd.dev

Let’s look at a live Quarto portfolio site

🔗 sepd.dev

  • Built entirely with Quarto
  • Hosted free on GitHub Pages
  • Blog posts, CV, about page
  • Each post is a .qmd file — code + narrative

Other Portfolio Examples for Inspiration

Take a look at these for ideas:

📌 Tip: Don’t try to build the perfect site. Start simple, iterate. Your portfolio is a living document.

Hands-On: Scaffold Your Site

What We’re Building Today

By the end of this section, you’ll have:

  • ✅ A GitHub repository for your portfolio
  • ✅ A live Quarto website on GitHub Pages
  • ✅ A development environment with AI assistance built in
  • ✅ Auto-deployment via GitHub Actions (no manual branch wrangling)
  • ✅ Your first project post scaffolded and ready to write

Step 1: Create Your Repo from the Template

  1. Make sure you’re logged in to github.com
  2. Navigate to the template repo:

🔗 github.com/phdjsep/gh-pages-quarto-portfolio-template

  1. Click “Use this template” → “Create new repo”
  2. Name it: <your-username>.github.io
  3. Click “Create Repository”

⏱️ This takes about 30 seconds

Step 2: Launch a Codespace

  1. From your new repo, click the green “Code” button
  2. Select the “Codespaces” tab
  3. Click “Create codespace on main”

⏱️ This takes ~2-3 minutes. While we wait…

💡 What is a Codespace? It’s a full VS Code editor running in your browser. The template comes pre-configured with Python, Quarto, and — importantly — GitHub Copilot already available.

Step 3: Preview Your Site

Once your Codespace is ready, open the terminal and run:

quarto preview

You should see a live preview of the template site. Now make it yours — try editing:

  • index.qmd — your homepage
  • about.qmd — your about page
  • styles.css — custom styling

🎉 Congratulations! You have a working portfolio site. Changes appear instantly in the preview.

Step 4: Set Up Auto-Deploy with GitHub Actions

Instead of manually managing a gh-pages branch, we’ll use GitHub Actions. Create .github/workflows/publish.yml:

name: Deploy Quarto Site
on:
  push:
    branches: [main]
jobs:
  build-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v4
      - uses: quarto-dev/quarto-actions/setup@v2
      - name: Render and Publish
        uses: quarto-dev/quarto-actions/publish@v2
        with:
          target: gh-pages

Enable GitHub Pages

After pushing the Actions workflow:

  1. Go to your repo → Settings → Pages
  2. Under “Source”, select gh-pages branch
  3. Click Save

⏱️ First deploy takes ~2 minutes. After that, updates are faster.

Your site will be live at: https://<your-username>.github.io

📌 Pro tip: Want a custom domain like yourname.dev? It’s ~$20/year and very worth it. Check out Hover or any domain registrar.

Step 5: Create a Project Post

In your terminal:

mkdir -p posts/my-first-project
touch posts/my-first-project/index.qmd

Then add this YAML header to index.qmd:

---
title: "Predicting Customer Churn with Logistic Regression"
author: "Your Name"
date: today
categories: [machine-learning, python, classification]
description: >
  An end-to-end analysis exploring what drives customer churn
  using a telecom dataset, with actionable recommendations.
---

📌 Structure your post: Problem → Approach → Results → Reflection

AI Is Your Portfolio Co-Pilot

AI tools can help you:

  • Scaffold content — first drafts of your about page, project descriptions
  • Write & debug code — Copilot autocompletes in your Codespace
  • Troubleshoot Quarto — ask an AI when rendering fails
  • Polish writing — improve clarity and conciseness
  • Brainstorm — what projects should you showcase?

⚠️ The key rule: AI assists, you author. Use AI to get unstuck, not to replace your voice.

Tool 1: GitHub Copilot (Already in Your Codespace)

Copilot is built into GitHub Codespaces:

  • Inline suggestions as you type in .qmd files
  • Chat panel (click the Copilot icon) for longer questions
  • Code generation from comments

Try it now:

Open about.qmd and start typing:

## About Me

I am a master's student studying business analytics at

Watch Copilot suggest the rest. Accept what’s useful, edit what’s not.

Tool 2: Claude / ChatGPT as a Thinking Partner

For bigger tasks, use a chat-based AI:

Example prompt for your About page:

I’m a business analytics master’s student interested in healthcare data and predictive modeling. Help me draft a 150-word “About Me” for my portfolio. Professional but personable.

Example prompt for troubleshooting:

I’m getting this error when I run quarto preview: [paste error]. My _quarto.yml looks like this: [paste config]. What’s wrong?

📌 Tip: The more context you give the AI, the better the output.

Tool 3: AI for Project Write-Ups

The prompt pattern:

I completed a project where I [description]. The data was [source]. I used [methods]. The key finding was [result]. Write a portfolio summary: Problem → Approach → Results → Reflection.

Then edit ruthlessly:

  • Add your actual reasoning — why this approach over alternatives?
  • Include what went wrong — shows maturity and honesty
  • Make it readable by a hiring manager, not just a data scientist

Demo: AI-Assisted Content Generation

Let’s build a real piece of portfolio content together, live

🎯 Goal: Use AI to draft an “About Me” section, then refine it

When to Use AI (and When Not To)

✅ Great Uses

  • First drafts & outlines
  • YAML config syntax
  • CSS tweaks you can’t remember
  • Debugging error messages
  • Brainstorming project ideas

⚠️ Be Careful

  • Don’t copy AI output verbatim
  • Don’t let AI choose your projects
  • Don’t skip understanding what you publish
  • Don’t use AI-generated data or fake results
  • Always fact-check technical claims

Writing Your First Project Post

Anatomy of a Great Portfolio Project

Every project post should answer four questions:

  1. What problem did you solve? ← This is where most people fail. Lead with the “so what?”
  2. How did you approach it? ← Methods, tools, data sources
  3. What did you find? ← Key results, visualizations, insights
  4. What did you learn? ← Reflections, limitations, next steps

📌 The #1 mistake: Jumping straight to code and methods without explaining why anyone should care.

Structure Your Post

## The Problem

Customer churn costs telecom companies billions annually.
I explored a dataset of 7,000 customers to identify the
key drivers of churn and build a predictive model.

## My Approach

- Exploratory data analysis to understand feature distributions
- Feature engineering: tenure buckets, monthly charge ratios
- Logistic regression (chosen for interpretability)
- Evaluation: confusion matrix, ROC-AUC

## Key Findings

[Include a visualization here]

The strongest predictors of churn were...

## Reflections & Next Steps

If I were to extend this analysis, I would...
The main limitation was...

Adding Code & Visualizations

Quarto renders code blocks natively. Include your actual analysis:

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

df = pd.read_csv("data/churn.csv")
churn_by_tenure = df.groupby("tenure_bucket")["churn"].mean()

fig, ax = plt.subplots(figsize=(8, 4))
churn_by_tenure.plot(kind="bar", ax=ax, color="#4A90D9")
ax.set_title("Churn Rate by Customer Tenure")
ax.set_ylabel("Churn Rate")
plt.tight_layout()
plt.show()
```

💡 Tip: Use AI to help clean up your analysis code for presentation. Your notebook code might be messy — your portfolio code should be readable.

AI Prompt for a Project Write-Up

Try this prompt pattern with Claude or ChatGPT:

Prompt Template

I’m writing up a portfolio project for my business analytics portfolio site. Here’s what I did:

  • Dataset: [describe it]
  • Goal: [what were you trying to predict/analyze]
  • Methods: [what tools and techniques]
  • Key result: [one sentence]

Write a 300-word project summary following this structure: Problem (why it matters) → Approach (what I did) → Results (what I found) → Reflection (what I learned). Write for a hiring manager who may not be deeply technical.

Then paste the output into your .qmd file and make it your own.

Publishing & Next Steps

Your Deployment Pipeline

With GitHub Actions set up, your workflow is now:

graph LR
    A[Edit .qmd files] --> B[Git commit & push]
    B --> C[GitHub Actions builds site]
    C --> D[Live on GitHub Pages]
    style A fill:#4A90D9,color:#fff
    style D fill:#2ECC71,color:#fff

That’s it. Edit, commit, push. Your site updates automatically.

Checklist Before You Leave Today

Level Up: What to Do Next

  • This week: Publish your first project post
  • This month: Add 1-2 more projects from your coursework
  • Customize: Explore themes, add a CV page, get a custom domain
  • Share: Add the URL to your LinkedIn, resume, and email signature
  • Maintain: A portfolio that hasn’t been updated in a year sends the wrong signal

Resources

Resource Link
Quarto Docs quarto.org
GitHub Pages pages.github.com
Markdown Guide markdownguide.org
Quarto Gallery qmdclub.com
Awesome Quarto github.com/mcanouil/awesome-quarto
Custom Domains docs.github.com
Workshop Template github.com/phdjsep/gh-pages-quarto-portfolio-template
This Site sepd.dev

Thank You!

Go build something.


🔗 Workshop Reference: sepd.dev/posts/2026-portfolio-workshop/

🔗 Connect: linkedin.com/in/sepdadsetan

🔗 Questions? Reach out anytime.