Build a Data Portfolio with Quarto

March 13, 2026 · 6 min read · Updated March 13, 2026 · beginner

quarto portfolio web-development r data-science publishing

A data portfolio is your calling card as a data professional. It demonstrates what you can do, not just what you claim to know. Quarto makes building one straightforward—you write in Markdown, and Quarto handles the website generation. This guide walks you through creating a portfolio that actually gets attention.

Why Quarto for Portfolios?

Quarto portfolios offer several advantages over alternatives. They are easy to maintain—you update a single file and rebuild. The skills required are minimal since you only need Markdown and R. Version control works naturally since your entire portfolio lives as plain text files. Performance is excellent since Quarto produces static HTML with no server required.

Compared to building a custom website from scratch, Quarto saves enormous time. Compared to platforms like Wix or Squarespace, you own your content completely. Compared to GitHub Profiles alone, a Quarto site gives you more control over presentation and branding.

Planning Your Portfolio Structure

Before writing code, think about what to include. A strong portfolio has three components. First, an about page that tells your story—who you are, what you do, and what you want. Second, a projects section showcasing your best work with code, outputs, and explanations. Third, a way for visitors to get in touch, whether through email, LinkedIn, or GitHub.

List your best projects before starting. Quality matters more than quantity. Three impressive projects beat ten mediocre ones. Each project should tell a story: what problem you solved, how you approached it, what tools you used, and what the results meant.

Setting Up Your Quarto Portfolio Project

Create a new Quarto website project:

quarto create project portfolio my-portfolio
cd my-portfolio

This creates a basic structure with configuration files and sample content. Open the project in RStudio or your preferred editor.

The default structure looks like this:

my-portfolio/
├── _quarto.yml
├── index.qmd
├── about.qmd
├── styles.css
└── .gitignore

The _quarto.yml file controls your site’s configuration. Edit it to set your site title, navigation, and theme:

project:
  type: website

website:
  title: "Your Name - Data Portfolio"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: projects.qmd
        text: Projects
      - href: about.qmd
        text: About
    right:
      - icon: github
        href: https://github.com/yourusername
      - icon: linkedin
        href: https://linkedin.com/in/yourprofile

format:
  html:
    theme: cosmo
    highlight-style: github

The navigation bar now includes links to your main pages. The right side shows icons linking to your GitHub and LinkedIn profiles.

Creating Your About Page

The about page is often the first thing visitors read. Make it personal without being lengthy. Explain your background, your interests in data, and what kinds of work you are looking for.

In about.qmd:

---
title: "About Me"
---

# Hello, I'm Your Name

I am a data scientist passionate about turning raw data into actionable insights. My background includes [your background], and I specialize in [your specializations].

## What I Do

- Data analysis and visualization
- Machine learning model development
- Statistical consulting
- Reproducible research

## Get in Touch

The best way to reach me is through [email](mailto:you@example.com). I am always happy to discuss new projects and opportunities.

You can also find me on [GitHub](https://github.com/yourusername) where I share my code and contribute to open source projects.

This page introduces you clearly. Replace the placeholder content with your actual information.

Showcasing Your Projects

Create a projects listing page that links to individual project pages. This gives visitors an overview of your work before diving into details.

In projects.qmd:

---
title: "Projects"
---

Explore my data science projects below. Each project includes code, visualizations, and explanations.

## Project 1: Customer Churn Prediction

Built a machine learning model to predict customer churn for a telecommunications company. Used XGBoost and achieved 92% accuracy.

[View Project](/projects/churn-prediction.qmd) | [GitHub](https://github.com/yourusername/churn-prediction)

## Project 2: Sales Dashboard

Created an interactive dashboard tracking sales metrics across multiple regions. Built with Shiny and connected to a PostgreSQL database.

[View Project](/projects/sales-dashboard.qmd) | [GitHub](https://github.com/yourusername/sales-dashboard)

## Project 3: COVID-19 Analysis

Analyzed global COVID-19 trends using publicly available data. Produced visualizations showing infection rates, vaccination progress, and regional comparisons.

[View Project](/projects/covid-analysis.qmd) | [GitHub](https://github.com/yourusername/covid-analysis)

For each project, create a dedicated .qmd file in a projects folder. Structure each project page consistently:

---
title: "Project Title"
description: "A brief description of what this project accomplishes."
date: 2026-03-13
---

Then add your markdown content. Use headings to organize your project:

## Overview

Explain the problem you solved and why it matters.

## Approach

Describe your methodology. What data did you use? What tools and techniques?

## Results

Show your outputs—charts, tables, model metrics.

Add R code chunks to display visualizations:

#| echo: false
#| fig-cap: "Your visualization caption"
library(ggplot2)
ggplot(data, aes(x = variable, y = value)) +
  geom_bar(stat = "identity")

Show the key parts of your analysis in code chunks:

library(tidymodels)

model <- workflow() %>%
  add_recipe(recipe) %>%
  add_model(boost_tree()) %>%
  fit(data_train)

predictions <- predict(model, data_test)

Learnings

Briefly reflect on what you learned and what you would do differently with more time.

Styling Your Portfolio

Customize the appearance to stand out. Create a styles.css file in your project root:

/* Custom styles for your portfolio */
.hero {
  padding: 4rem 0;
  background-color: #f8f9fa;
  margin-bottom: 2rem;
}

.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card {
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
}

.project-card {
  margin-bottom: 1.5rem;
}

Reference this file in your _quarto.yml:

format:
  html:
    css: styles.css

Simple changes like these make your portfolio feel polished and professional.

Adding Blog Functionality

Many portfolios benefit from a blog section where you write about what you are learning. Quarto handles blogs well.

Add blog configuration to _quarto.yml:

website:
  title: "Your Name - Data Portfolio"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: projects.qmd
        text: Projects
      - href: blog.qmd
        text: Blog
      - href: about.qmd
        text: About

Create blog posts in a posts folder with dates in filenames:

posts/
├── 2026-03-01-my-first-post/
│   └── index.qmd
└── 2026-03-10-data-visualization-tips/
    └── index.qmd

Each post follows standard Quarto formatting:

---
title: "My First Post"
description: "What I learned this week."
date: 2026-03-01
categories: ["learning", "r"]
---

Publishing Your Portfolio

When ready, publish your portfolio online. Several free options work well with Quarto.

GitHub Pages

The easiest option. Enable GitHub Pages in your repository settings, pointing to the docs folder. Add this to _quarto.yml:

project:
  type: website
  output-dir: docs

Render your site and push to GitHub:

quarto render
git add .
git commit -m "Update portfolio"
git push

Netlify

Connect your GitHub repository to Netlify. It automatically detects Quarto projects and builds them. Each push to main triggers a new deployment.

Vercel

Similar to Netlify. Install the Vercel CLI or connect through GitHub. Vercel offers generous free tiers for static sites.

Maintaining Your Portfolio

A portfolio is not a set-it-and-forget-it project. Update it regularly with new work. Remove projects that no longer represent your skills. Fix broken links promptly.

Set a reminder to review your portfolio quarterly. Add new projects as you complete them. Keep the content fresh—outdated projects make you look out of touch.