Portfolio HTML template for product designers, featuring dark mode
HTMLPortfolio
winterwald-designer-portfolio — HTML Portfolio Template
By ariqnrnns
Winterwald is a free HTML portfolio template for product designers, featuring dark mode, built on Ravenbright CSS, and released under the Apache-2.0 license.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Author preview
Author-provided preview
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-11View source
What stands out
A quick read of the recorded project description.
Built on Ravenbright CSS, customizable via utility classes or CSS variables
Static HTML pages with responsive layout and animations
Includes Open Graph tags; README states compliance with WCAG 2.1 accessibility requirements
Apache-2.0 license, allowing free use, modification, and distribution
Template Details
Winterwald is a product designer portfolio HTML template. The repository is maintained by ariqnrnns, and the code is released under the Apache-2.0 license, allowing free use, modification, and distribution. The template offers dark mode, uses static HTML pages, and styles are based on the Ravenbright CSS library, with appearance adjustable via utility classes or CSS variables.
The template includes Open Graph tags. The README states it follows WCAG 2.1 accessibility requirements and includes responsive layout and animations. The project uses npm to manage the build process: after installing dependencies, run the development server; build output can be previewed locally via a preview command.
Before use, note that photos in the template are from Unsplash, the font is Inter Tight, and icons are from Tabler and Akar Icons. These third-party assets must be checked separately under their respective licenses and cannot be assumed to be covered solely by the code's Apache-2.0 license. Performance scores mentioned in the README are the author's own test data; actual performance depends on the deployment environment and content.
HTMLPortfolio
Is it right for your project?
Use Cases
- Product designers building a personal portfolio page
- Deploying as a static site to any static hosting service
- Adjusting colors and typography on top of Ravenbright CSS
- Using as a reference project for learning HTML and CSS variable customization
Suitable For
- Product designers who need a ready-made portfolio page structure
- Developers who prefer static HTML over front-end frameworks
- Users who want to quickly restyle based on utility classes or CSS variables
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After downloading the source, enter the project directory and run npm init, then npm install to install dependencies
- 2
Run npm run dev to start the local development server
- 3
After npm run build, use npm run preview to view the build result at localhost:4173
- 4
Third-party assets such as photos, fonts, and icons must be checked separately under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the Apache-2.0 license; 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 are permitted; the Apache-2.0 license must be included when distributing.
- Modified files must carry prominent notices of changes, and relevant copyright, patent, trademark, and attribution notices must be retained.
- If the original project includes a NOTICE file, applicable attribution notices from it must be retained when distributing derivative works.
- The license includes an applicable contributor patent grant; initiating patent litigation as described in the license terminates that patent grant, and no trademark rights are granted.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be assumed to be covered solely by the code's Apache-2.0 license.
- External services such as domains, hosting, databases, payments, or AI may incur separate fees.
- Photos in the template are from Unsplash and must be checked separately under Unsplash's own license; the Apache-2.0 code license does not cover these image assets.
- The Inter Tight font is provided by Rasmus Andersson under the OFL license and must be checked separately under that font license; it is not covered by the code's Apache-2.0 grant.
- Icons are from Tabler and Akar Icons and must be checked separately under their respective icon library licenses; the code license does not cover these icon assets.
- The template styles depend on the external Ravenbright CSS library; custom styling requires consulting that library's documentation for utility classes and CSS variables.
View Original Text Basis
no-charge, royalty-free, irrevocable copyright license
Original License Text
- Photos are courtesy of [Unsplash](https://unsplash.com)
Original README
- Typeface: `Inter Tight` by [Rasmus Andersson](https://github.com/rsms/inter-gf-tight/blob/main/OFL.txt)
Original README
- Icons are courtesy of [Tabler](https://tabler-icons.io/) & [Akar Icons](https://akaricons.com/)
Original README
https://github.com/ariqnrnns/winterwald-designer-portfolio/blob/main/LICENSE.mdhttps://github.com/ariqnrnns/winterwald-designer-portfolio/blob/main/README.MDWinterwald is built with Ravenbright CSS library.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-11. 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
- GitHub
- Documentation and maintenance reference score
- Partly documented · 68 / 100
- Technologies
- HTML
- 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
- 2022-11-24
- Screenshot last checked
- 2026-10-11
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML 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-13
Inspect the recorded source material
SHA-256: b3a34f0f8aa652224ac40c223a68240b72d0aa7d359c674d04b042fe996efce2
2026-10-11T20:16:09.207Z
Source file / repository<div align="center"> # Free Product Designer Portfolio HTML template (with dark mode) </div> <div align="center"> [](https://snyk.io/test/github/ariqnrnns/winterwald-designer-portfolio) [](https://github.com/ariqnrnns/winterwald-designer-portfolio/actions/workflows/build.yml)  [](https://opensource.org/licenses/Apache-2.0) [](https://winterwald.ravenbright.design) </div> --- <p align="center"> Free Product Designer Portfolio HTML template (with dark mode) <img src="https://raw.githubusercontent.com/ariqnrnns/winterwald-designer-portfolio/main/src/winterwald-banner.jpg" alt="Winterwald Banner"> <img src="https://raw.githubusercontent.com/ariqnrnns/winterwald-designer-portfolio/main/src/pagespeed-stats.PNG" alt="Pagespeed Stats"> <img src="https://raw.githubusercontent.com/ariqnrnns/winterwald-designer-portfolio/main/src/gtmetrix.PNG" alt="GTmetrix Stats"> </p> <div align="center"> ## Download this template 👇 </div> <div align="center"> <a href="https://github.com/ariqnrnns/winterwald-designer-portfolio"> <img src="https://img.shields.io/badge/GitHub-181717.svg?style=for-the-badge&logo=GitHub&logoColor=white" alt="Github releases"> </a> </div> ## ✅ Explore the features - 👌 Totally free to use with Apache License 2.0 - 😎 Stunning User Interface - 🎨 Everything is customizable. You can use [Ravenbright CSS](https://ravenbrightcss.com) utility classes or CSS variables to modify the styles - ⚡ High performing static sites. 99/100 scores both in Pagespeed Insights & GT Metrix - ♿ Accessible - comply with WCAG 2.1. Measured by Pagespeed Insights, WAVE & Tota11y - 📰 Included with Open Graph tags - 📱 Fully Responsive & mobile-friendly landing page - 👌 Comes with & smooth animations ## 🚀 How to get started? - Download the source code - Then run these command below ```bash # change directory cd winterwald-designer-portfolio # initialize project npm init # install dependencies npm install # start the local development server npm run dev ``` ## 🎨 Customization Winterwald is built with Ravenbright CSS library. You can customize the template with using either: - [Utility classes](https://ravenbrightcss.com/docs/utilities/background) - [CSS variables](https://ravenbrightcss.com/docs/customize/cssvariables) ## ✅ Build process 1. Type `npm run build` on CLI 2. Run `npm run preview` 3. Open `localhost:4173` to see the build result & it's done 🎉. Your website is ready to deploy 🚀 --- <div align="center"> Still have doubt? Don't be, explore & play around with Ravenbright Design Tokens live demo on TailwindPlay. ## View demo 👇 <a href="https://winterwald.ravenbright.design"> <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="Explore UI collections"> </a> </div> --- ## 🤝 Credits & attributions - CSS library: [Ravenbright CSS](https://ravenbrightcss.com) - Post-processor tool: [PostCSS](https://postcss.org) - Design Tokens: [Ravenbright Tokens](https://ravenbrightcss.com/tokens) - Photos are courtesy of [Unsplash](https://unsplash.com) - Typeface: `Inter Tight` by [Rasmus Andersson](https://github.com/rsms/inter-gf-tight/blob/main/OFL.txt) - Icons are courtesy of [Tabler](https://tabler-icons.io/) & [Akar Icons](https://akaricons.com/) ## 📝 License Source code released under [Apache License 2.0](https://github.com/ariqnrnns/winterwald-designer-portfolio/blob/main/LICENSE.md).
Explore similar templates
Compare previews and descriptions within the same stack and category.
simplefolio
Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.
HTML · Portfolio
Freelancer
A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.
HTML · Portfolio
Resume
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio
Creative
A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.
HTML · Corporate Website
Grayscale
A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.
HTML · Corporate Website
startbootstrap-stylish-portfolio
A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.
HTML · Portfolio