Persona Zola Theme

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

Demo • Features • Showcase • Installation • Configuration • Structure • 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 = "_navigation", content = "Contact", icon_class = "bi bi-chat-text" }, # Special item for header navigation (REQUIRED)
    { 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 = "your.email@example.com", 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"
+++

Theme Customization

The theme provides extensive customization options through CSS variables defined in static/assets/css/theme.css. You can override these variables to customize colors and fonts without modifying the core theme files.

Customization Methods

1. Direct Modification (for theme developers): Edit static/assets/css/theme.css directly in the theme directory.

2. Custom CSS Override (recommended for users): The theme includes static/assets/css/custom.css which is loaded after all theme CSS files. Add your custom styles there to override theme defaults:

   /* In static/assets/css/custom.css */
   :root {
     --accent-color: #ff6b6b;
     --heading-color: #2c3e50;
     --title-font-size: 72px;
   }

Available Customization Variables

Colors:

• --background-color: Background color for the entire website
• --default-color: Default text color
• --heading-color: Color for headings and titles
• --accent-color: Brand color for buttons, links, and highlights
• --surface-color: Background for cards and boxed elements
• --contrast-color: Text color for use against accent colors

Typography:

• Font Families
  • --default-font: Main font family for body text
  • --heading-font: Font family for headings
  • --nav-font: Font family for navigation
• Font Sizes
  • --footer-font-size: Footer text size (default: 14px)
  • --normal-font-size: Base font size (default: 16px)
  • --subtitle-font-size: Subtitle font size (default: 24px)
  • --heading-font-size: Base font size for heading (default: 32px)
  • --title-font-size: Base font size for title (default: 64px)

See static/assets/css/theme.css for the complete list of customizable variables with detailed descriptions.

🆘 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
• Check STRUCTURE.md for detailed theme architecture and organization
• 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!