Responsive portfolio layout that adapts to different screen sizes
HugoPortfolio
port-hugo — Hugo Portfolio Template
By tylersayshi
port-hugo is a simple Hugo-based portfolio theme for designers and web developers, offering a responsive layout, configurable content sections, and a Hugrid-based portfolio grid.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Author preview
Author-provided previewTop of page
Preview provided in the project README.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-03View source
What stands out
A quick read of the recorded project description.
Provides an easy-to-use page section structure
Uses Hugo image processing for image optimization
Portfolio display area implemented with Hugrid
Overall design references Somrat with simplified features
Supports dual logos: logo.svg and logo-dark.svg
Template Details
port-hugo is a simple portfolio theme built with Hugo, positioned by its author as a customizable portfolio for designers or web developers. The theme provides a responsive portfolio page, an easy-to-use section structure, and uses Hugo's image processing to optimize images. The portfolio display is implemented with Hugrid, and the overall design references the Somrat theme, though the author has simplified the features to keep only what a simple theme needs.
For usage, the theme is installed through Hugo's standard theme directory method, requiring theme = "port-hugo" in the site's config.toml, and portfolio content fields filled in according to exampleSite/data/content.yaml. exampleSite/config.toml provides a more general site configuration example. Logos support logo.svg and logo-dark.svg, placed by default under static/images, with the relevant control code in assets/js/script.js.
In terms of limitations, the README only states that it has been tested with Hugo v0.141.0 and does not declare compatibility with other versions; the theme is relatively minimal and does not include modules beyond the portfolio scope, such as blogs or comments. Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses, while the code itself is under the MIT license.
HugoPortfolio
Is it right for your project?
Use Cases
- Designers building a personal portfolio page
- Web developers organizing project cases for public display
- Scenarios requiring a lightweight portfolio site without extra modules such as a blog
- Sites that maintain portfolio content centrally via YAML data files
Suitable For
- Designers building static sites with Hugo
- Web developers who want to quickly set up a simple portfolio
- Users who prefer updating content through data files rather than extensive template changes
- Developers who need a freely modifiable portfolio theme under the MIT license
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
In the Hugo site directory, enter themes and git clone the repository, then set theme = "port-hugo" in config.toml
- 2
Fill in the required portfolio fields according to exampleSite/data/content.yaml
- 3
Configure general site options according to exampleSite/config.toml
- 4
Name logo files logo.svg and logo-dark.svg and place them in static/images; modify assets/js/script.js if adjustments are needed
- 5
The README states it is currently tested with Hugo v0.141.0; compatibility with other versions must be verified independently
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and liability limitations are governed by the original license and applicable law.
Additional costs & items to verify
- The README only states it has been tested with Hugo v0.141.0 and does not declare compatibility with other Hugo versions; using other versions requires independent verification.
- The portfolio display area is implemented with the third-party project Hugrid; that portion of code may be subject to Hugrid's own license, which must be checked separately.
- The overall design references the third-party theme Somrat; related design/code may be subject to Somrat's own license, which must be checked separately.
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
currently tested with hugo v0.141.0
Original README
[Hugrid](https://github.com/aerohub/hugrid) based portfolio section
Original README
https://github.com/tylersayshi/port-hugo/blob/main/LICENSEhttps://github.com/tylersayshi/port-hugo/blob/main/README.md[Somrat](https://github.com/somratpro/somrat) based design
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- Hugo Themes
- Documentation and maintenance reference score
- Partly documented · 67 / 100
- Technologies
- Hugo
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2025-11-14
- Screenshot last checked
- 2026-10-03
No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.
The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-04
Inspect the recorded source material
SHA-256: 3b8ceef818d4b6997074aea54d245a4da0105c71ae5c30337c3713388edd39ad
2026-10-03T19:23:53.681Z
Source file / repository# Port-Hugo (A simple portfolio) currently tested with hugo v0.141.0 This theme is a simple, customizable portfolio for designers or web developers.   ## Features - Responsive portfolio - Easy sections to use - Hugo image processing for optimization - [Hugrid](https://github.com/aerohub/hugrid) based portfolio section - [Somrat](https://github.com/somratpro/somrat) based design ## Install theme on your hugo site ``` hugo new site your-site-name # if you already have a site ignore this line and the next cd your-site-name cd themes git clone https://github.com/tylersayshi/port-hugo.git cd .. hugo serve ``` Once you have done this, you may use the `exampleSite` folder as an example for how to set your project up. The two main things to pay attention to is to first set this in your `config.toml` file: ```toml theme = "port-hugo" ``` Then you will need to replicate the data used in the `exampleSite/data/content.yaml` file to fill in the fields for your portfolio. Please also see the `exampleSite/config.toml` for guidance on setting up the more general site configurations. ### Logo support Images named `logo.svg` and `logo-dark.svg` are meant to be used for the logos. They should be stored in `static/images` as seen in [./exampleSite/static/images](./exampleSite/static/images). If you wish to change this, the code to control the images is in `assets/js/script.js`. ## Credits I'd like to express gratitude to [somrat](https://github.com/somratpro/somrat) and [hugrid](https://github.com/aerohub/hugrid) for creating wonderful themes that I have used as a jumping off point. You may notice this theme is very similar in design to somrat, however it has distinct differences by using a manipulated version of hugrid for the portfolio section. I have also trimmed down the features of somrat, to only include what I wanted for a simple theme. ## Contributing Please feel free to post issues or make pull requests at any time. I am always open to collaboration.
Explore similar templates
Compare previews and descriptions within the same stack and category.
hugo-PaperMod
A fast, clean, responsive Hugo theme for blogs and lightweight portfolios, with three layout modes (Regular, Home-Info, Profile), automatic and manual light/dark themes, Fuse.js client-side search, multilingual support, and built-in Open Graph, Twitter Cards, and Schema.org data.
Hugo · Portfolio
Congo
Congo is a minimal Hugo content theme built on Tailwind CSS 3.0, designed for blogs, portfolios, and lightweight content sites. It offers multiple homepage layouts, customizable dark mode, multilingual support including RTL, and built-in client-side search, Mermaid, Chart.js, and KaTeX.
Hugo · Blog
toha
Toha is a Hugo theme for personal portfolios, featuring a minimalist, responsive design with configurable homepage sections such as about, experience timeline, and achievements gallery.
Hugo · Portfolio
hugo-profile
hugo-profile is a mobile-first Hugo theme for personal portfolios and blogs, with multilingual support, light/dark themes, categories and tags, Google Analytics, Disqus comments, and Formspree contact forms.
Hugo · Portfolio
hugo-theme-introduction
Introduction is a minimal Hugo theme that can be configured as a single-page site or a full site with multiple sections. Homepage sections are generated from Markdown files under content/home/, with weight sorting and optional images.
Hugo · Portfolio
hugo-theme-console
A minimalist, responsive Hugo theme inspired by the system terminal and built on Terminal CSS. It includes blog posts, photo galleries, and custom pages, with light/dark theming and style overrides via CSS variables.
Hugo · Portfolio