Customizing Your Portfolio Template

Welcome! This page walks you through personalizing this portfolio template to showcase your work, research, and creative projects. Once you’re comfortable editing and have updated the main sections, you can delete this file—it’s just here to help you get started.

What You Have

This portfolio template includes:

Quick Start: Open the Editor

The easiest way to edit your site is using GitHub’s built-in VS Code editor:

  1. Go to your repository on GitHub
  2. Press the . (period) key on your keyboard
    • VS Code opens in your browser
    • All your files appear in the left sidebar
  3. Start editing!

To save changes: Press Ctrl+S (Windows/Linux) or Cmd+S (Mac)

First Steps: Personalize Your Site

1. Update Your Name and Bio (index.md)

Open index.md and replace the template introduction with your own name and bio:

---
title: Your Name Here
layout: nav-profile
---

# Your Name Here

Write a short intro about yourself and your work...










  
  
  
  
  
  <div class="card h-card">
    <a href="/portfolio-template//research.html" class="card-link">
      
      <!-- Image -->
      
        
        <img src="/portfolio-template//assets/images/Cleve-van_construction-tower-babel.jpg" class="card-img-left" alt="Research">
      
      
      <!-- Content -->
      <div class="card-body">
        <div>
          <h3>Research</h3>
          <p class="card-text">My research investigates how digital technology can reimagine public history and expand access to cultural heritage. I focus on virtual museums, interactive ...</p>
        </div>
        
        
      </div>
      
    </a>
  </div>



  
  
  
  
  
  <div class="card h-card">
    <a href="/portfolio-template//teaching.html" class="card-link">
      
      <!-- Image -->
      
        
        <img src="/portfolio-template//assets/images/great-lecture.jpg" class="card-img-left" alt="Teaching">
      
      
      <!-- Content -->
      <div class="card-body">
        <div>
          <h3>Teaching</h3>
          <p class="card-text">I view lectures as opportunities to model expert thinking and clarify complex ideas, building a strong intellectual foundation for students. From this base, ...</p>
        </div>
        
        
      </div>
      
    </a>
  </div>



  
  
  
  
  
  <div class="card h-card">
    <a href="/portfolio-template//creative.html" class="card-link">
      
      <!-- Image -->
      
        
        <img src="/portfolio-template//assets/images/ai-created-kinetic-sculpture.png" class="card-img-left" alt="Creative">
      
      
      <!-- Content -->
      <div class="card-body">
        <div>
          <h3>Creative</h3>
          <p class="card-text">I create kinetic sculptures that invite steel, wood, and glass to dance with air, vibration, and subtle human presence. Inspired by the mechanics of insect w...</p>
        </div>
        
        
      </div>
      
    </a>
  </div>



  
  
  
  
  
  <div class="card h-card">
    <a href="/portfolio-template//cv.html" class="card-link">
      
      <!-- Image -->
      
        
        <img src="/portfolio-template//assets/images/Augustine_Lateran.jpg" class="card-img-left" alt="Curriculum Vitae">
      
      
      <!-- Content -->
      <div class="card-body">
        <div>
          <h3>Curriculum Vitae</h3>
          <p class="card-text">My CV reflects a career at the intersection of creative practice, research, and pedagogy. It documents publications, grants, teaching, and collaborative proj...</p>
        </div>
        
        
      </div>
      
    </a>
  </div>

2. Edit the Research Page (research.md)

Open research.md and replace the sample content:

3. Update Teaching (teaching.md)

Open teaching.md and add:

4. Customize Creative Work (creative.md)

Open creative.md and showcase:

5. Replace the CV (cv.md)

Open cv.md and update with your actual CV:

Adding a New Page

Want to add a page (like “Blog” or “Projects”)? Here’s how:

Step 1: Create the Page File

  1. Right-click in the root folder (where index.md lives)
  2. Select “New File”
  3. Name it something like blog.md or projects.md
  4. Add front matter at the top:
---
title: Blog
layout: base
homepage: true
position: 5
summary: Thoughts and updates from my research journey.
thumbnail: assets/images/your-image.jpg
---

# Blog

Your content here...

Front matter explained:

Step 2: Add to Navigation Bar

To make your new page appear in the top navigation:

  1. Open _data/top-nav.yml
  2. Add a new entry:
- title: "Blog"
  url: /blog

Save and your new page appears in the nav bar!

Working with Images

Adding Images to Your Pages

  1. Upload images to assets/images/ folder:
    • Right-click on assets/images/
    • Select “Upload…“
    • Choose your image files
  2. Reference images in your markdown files: 
    ![Description of image](/portfolio-template//assets/images/your-image.jpg)

Image naming tips:

Using Xanthan’s Image Components

For more control over image display, use Xanthan’s built-in includes:





<figure class="right" style="width: 40%">

  <a class="image" href="/portfolio-template//assets/images/your-image.jpg"><img src="/portfolio-template//assets/images/your-image.jpg" alt="Your caption here" width="100%"></a>

  <figcaption>
    <p>Your caption here</p>

  </figcaption>

</figure>

See the Xanthan Image Documentation for all options.

Customizing Your Site

Update Site Settings (_config.yml)

Open _config.yml to change:

title: Your Name - Portfolio
description: Academic portfolio and digital research
url: "https://yourusername.github.io"
baseurl: ""

Modify Navigation

Navigation is controlled by YAML files in _data/:

Just edit these files to add/remove/reorder menu items.

Change Colors and Styles

For custom colors, fonts, and styling:

  1. Read the Xanthan Styling Guide
  2. Add custom CSS in _includes/ or assets/css/
  3. Override Xanthan defaults in your own style files

Using Markdown

You don’t need to know HTML! Use simple markdown:

# Big Heading

## Smaller Heading

**Bold text**

*Italic text*

[Link text](https://example.com)

- Bullet point
- Another point

1. Numbered list
2. Second item

See examples in the existing pages—just copy the formatting you like!

ScrollStories

For visual narrative essays with scrolling effects:

Getting Help

Xanthan Documentation

Your template is built on Xanthan, which has extensive docs:

Use AI Assistance

AI tools like Claude or ChatGPT can help:

Check out the Using AI with Xanthan Guide for tips.

Community and Support

Clean Up When Ready

Once you’ve customized your portfolio and feel comfortable editing:

  1. Delete this file (instructions.md)
    • Right-click in VS Code and select “Delete”
  2. Remove from navigation — Open _data/nav-top.yml and delete the Instructions entry
  3. Remove the instruction notes from the top of each content page (the > ✏️ Template Instructions: callout boxes)
  4. Keep updating your portfolio with new work!

Quick Reference

Essential Files

Common Tasks

Questions? Check the Xanthan documentation or open an issue.