Persona Zola Theme

a modern, responsive and lightweight theme for resume, portfolio, and blog

Demo • Features • Showcase • Installation • Configuration • Troubleshooting • Credits

✨ Features

• 🎨 Modern Design: Clean and professional layout easy for customization
• 📱 Fully Responsive: Optimized for desktop, tablet, and mobile devices
• ⚡️ Fast Performance: Lightweight and optimized for speed
• 📋 Resume/CV Section: Dedicated section for your resume or CV
• 🎭 Portfolio Showcase: Showcase your work with elegant project sections
• 📝 Blog with $\TeX$: Built-in blog functionality with KaTeX support
• 📧 Contact Forms: Integrated contact form support with Web3Forms
• 🔍 Search Ready: Built-in search index generation

🌟 Showcase

Using Persona for your site? We'd love to see it! Submit a PR to add your site to our showcase.

• Show Your Site - Add your site with us!
• Hanson.HSChang - Personal website of Heng-Sheng Chang

🚀 Installation

This is a Zola theme. Make sure you have Zola installed before proceeding.

After initializing your Zola site, the easiest way to install the theme is to add it as a git submodule to your themes directory:

# Navigate to your Zola site directory
cd your-zola-site

# Add the theme as a submodule
git submodule add https://github.com/hanson-hschang/persona-zola-theme.git themes/persona

To update the theme:

# Update the submodule
git submodule update --init --recursive

⚙️ Configuration

Basic Setup

1. Copy the configuration and the landing page content from the theme to get started quickly:

   # Copy the configuration
   cp themes/persona/config.toml config.toml
   
   # Copy the landing page content
   cp themes/persona/content/_index.md content/_index.md

2. Enable the theme by adding the following line at the beginning of your config.toml file:

   theme = "persona"

3. Customization:

• Configure site settings in your config.toml:

  # The URL this site will be built for
  base_url = "https://yourdomain.com"
  
  # The basic site information
  title = "Your Site Name"
  author = "Your Name"
  description = "Your personal resume, portfolio and blog"
  
  [extra]
  
  [extra.persona]
  # Note: landing page title and subtitles are configured in `content/_index.md`
  
  # Social links
  social_links = [
    { name = "GitHub", url = "https://github.com/yourusername", icon_class = "bi bi-github" },
    { name = "LinkedIn", url = "https://linkedin.com/in/yourprofile", icon_class = "bi bi-linkedin" },
    { name = "Twitter-X", url = "https://x.com/yourusername", icon_class = "bi bi-twitter-x" },
  ]
  
  # Contact information
  contact_infos = [
    { item = "Name", content = "Your Name", icon_class = "bi bi-person" },
    { item = "Location", content = "Your City, Country", icon_class = "bi bi-geo-alt" },
    { item = "Email", content = "[email protected]", icon_class = "bi bi-envelope" },
    { item = "Phone", content = "+1 (555) 123-4567", icon_class = "bi bi-phone" },
  ]

• Modify landing page content in content/_index.md:

  +++
  title = "Presented Site Name"
  template = "index.html"
  
  [extra]
  subtitles = "Item 1, Item 2, Item 3"
  +++

• Update your assets in static/assets/img/:

  • hero image: background.jpg
  • favicon: favicon.ico
  • apple touch icon: apple-touch-icon.png

Section Configuration

Each section can be configured with front matter. The theme supports three main section types:

• Plain sections (for static text content like about)
• Category sections (for portfolios, projects, showcases)
• Blog sections (for blog posts and articles)

Here is how to set them up:

+++
title = "Title of the Section"

[extra]
# Section-specific icon for navigation (Bootstrap Icons)
icon_class = "bi bi-person"
# Display order (lower numbers appear first)
order = 1
# Section type determines rendering approach
type = "type"  # "plain", "category", or "blog"
+++

🆘 Troubleshooting

Common Issues

• Theme not loading:

  • Ensure theme = "persona" is set in config.toml
  • Check that the theme is in the correct directory: themes/persona/

• Navigation not working:

  • Ensure sections have proper front matter with order field
  • Check that section metadata extra.type is correctly specified

• Contact form not working:

  • Verify web3form_public_key is set in configuration
  • Check Web3Forms documentation for setup

Getting Help

• Read the Zola documentation
• Report issues or request features by contributing on GitHub

🙏 Credits

Persona is built with and inspired by:

• Zola - A fast static site generator
• Bootstrap - CSS framework for responsive design
• Web3Forms - Contact form service
• KaTeX - Fast math typesetting library
• Bootstrap Icons - Icon library
• Academicons - Academic icons
• AOS (Animate On Scroll) - Animation library
• Google Fonts - Font library
• Dynamic Badges - Customizable badges
• PageSpeed Insights - Automated performance reporting
• GitHub - Actions (CI/CD) • Pages (Hosting Website) • Copilot (AI Agent)
• BootstrapMade Templates - Active • MyResume • UpConstruction
• Zola Themes - Mabuya • Vonge • Zluinav

---

⭐ Star this repository if you find it helpful!