kiyomi-portfolio

kiyomi-portfolio is a single-page Hugo portfolio theme that turns YAML data files and a handful of site parameters into a personal homepage with an animated hero, an experience timeline, clickable skill pills, and a floating contact button.

What is kiyomi-portfolio?

kiyomi-portfolio is a free, MIT-licensed portfolio theme for the Hugo static site generator, published on GitHub as mathscantor/hugo-theme-kiyomi-portfolio. It takes content from YAML files in your site's data/ folder and parameters in hugo.toml, plus a single Markdown file for the About section, and produces a responsive one-page site. The theme requires Hugo extended edition, version 0.128.0 or newer, and its optional sections — experience, presentations, skills, languages, education, certifications, and awards — each disappear automatically when their data file is absent.

Key Features

• YAML-driven content — Every section has its own data file in the site's data/ directory (experience.yaml, presentations.yaml, skills.yaml, languages.yaml, education.yaml, certifications.yaml, awards.yaml); if a file is missing or empty, that section is hidden.
• Animated single-page layout — The hero shows a profile photo, tagline, location, and contact links, and uses smooth-scroll navigation, a mobile menu, and scroll-reveal animations with staggered transitions.
• Experience timeline with optional nesting — Roles are listed newest first in experience.yaml and may include context, bullets, nested projects with tags, and media_mentions featuring publication, article title, excerpt, and URL.
• Clickable skill pills and language bars — skills.yaml groups skills by category; each pill opens an explanation on click. languages.yaml adds a level label and a proficiency bar using a percent value from 0 to 100.
• Presentation grid for image or video — Each presentation in presentations.yaml accepts media_type as image or video, points media_src at a file under static/, and supports optional tags, event, date, description, and an external slides link.
• Education, certification, and award sections — education.yaml is chronological, certifications.yaml groups credentials by year, and awards.yaml renders linked recognition cards; the Awards section can be removed by emptying its file.
• Contact details and resume download — The [params] block in hugo.toml exposes email, linkedin, location, profileImage, heroBackground, favicon, ogImage, and resumeFile; a floating contact button links to email or LinkedIn and the resume file is downloadable.
• CSS-variable theming — Colors, fonts, border radius, and spacing are defined at the top of assets/css/main.css; override them in custom CSS without editing theme templates. Animations live in assets/css/animations.css.

Who is it for?

• Developers who use Hugo — Anyone comfortable editing hugo.toml can personalize a portfolio by filling the YAML starter files copied by init-data.sh, without writing layout or template code.
• Job-seeking professionals — Engineers, product managers, and other roles can publish experience, projects with media mentions, education, certifications, awards, and a downloadable PDF resume in one page.
• Conference speakers and writers — People who give talks can add a presentations grid with video or image covers, event details, tags, and links to slides.

What can you do with kiyomi-portfolio?

• Create a personal career page — Show a photo, tagline, experience timeline, and contact links to give visitors a quick summary of your professional background.
• Build a portfolio for talks and side projects — Present talks with video or static covers and link to external slides, and add project tags to timeline roles via experience.yaml.
• Make a one-page résumé — Combine chronological education, year-grouped certifications, and award cards with a downloadable resume from the resumeFile param.

How does kiyomi-portfolio work?

Install the theme with either a git submodule or Hugo Modules, then set theme = 'kiyomi-portfolio' in hugo.toml. Run bash themes/kiyomi-portfolio/scripts/init-data.sh to copy the editable starter data and content/_index.md into your site only when those files do not already exist, then edit [params], the data YAML files, and the About content. Add images under static/ and launch hugo server to preview.

Pricing

The theme is free and open source under the MIT License. Nothing in the repository indicates paid tiers, and all source files are available on GitHub for reuse under the license terms.

FAQ

Is kiyomi-portfolio free?

Yes. The theme is released under the MIT License, so it can be used, modified, and redistributed under those terms. The documentation describes no purchase or paid tier, and all theme code lives in its public GitHub repository.

What version of Hugo does kiyomi-portfolio need?

It requires the extended edition of Hugo, version 0.128.0 or newer. The theme's asset pipeline depends on the extended build, so older versions or the standard build are not supported.

What happens if I do not provide a YAML file for a section?

That section is hidden. Each section is guarded in layouts/index.html, so an empty or missing data file simply does not render, and the theme intentionally has no default data/ directory. This design prevents Hugo's data-override warnings and gives full control of every section.

Can presentations use videos?

Yes. In presentations.yaml, each item sets media_type to image or video, and media_src points to a file such as a PNG or MP4 under static/. Each presentation can also carry tags, an event name/date, and an optional link to its slides.

How do I install kiyomi-portfolio?

Choose one of two methods: add it as a git submodule with git submodule add https://github.com/mathscantor/hugo-theme-kiyomi-portfolio.git themes/kiyomi-portfolio, or import it as a Hugo Module via hugo mod init and the module path github.com/mathscantor/hugo-theme-kiyomi-portfolio.