Astro rebuild of the HTML5 UP Forty template, retaining the original tile-based portfolio layout
AstroHTMLPortfolioBlog
forty-astro-theme — Astro Portfolio Template
By DarekRepos
An Astro rebuild of the HTML5 UP Forty template, using Markdown content collections to manage portfolio and blog, suitable for building a personal portfolio site.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-12View source
What stands out
A quick read of the recorded project description.
Uses Markdown content collections to manage works and blog posts, with one .md file per entry
Site name, contact information, and social links are configured centrally in the YAML frontmatter of site.md
Styles are rewritten using Dart Sass @use modules and CSS Grid
Icons are provided as SVG via Astro Icon integrating Iconify
Uses TypeScript, and the repository is released under the MIT license
Template Details
This project is an Astro rewrite of the classic HTML5 UP Forty template, built with Astro, Dart Sass, and Astro Icon, positioned as a portfolio and blog site template. The homepage uses Markdown files to drive a tile-based content display. Site name, contact information, and social links are configured centrally in the YAML frontmatter of src/content/config/site.md, with no code changes required. For content, works and articles are stored in the src/content/posts/ directory, with each entry corresponding to a .md file, where the frontmatter contains the title, description, and image path. Styles are organized using SCSS @use modules and CSS Grid, and icons are provided via Astro Icon integrating Iconify. The project uses TypeScript, is released under the MIT license, and the demo site is portfolio.darekduda.pl/forty-astro-theme.
AstroHTMLPortfolioBlog
Is it right for your project?
Use Cases
- Building a personal portfolio website to display projects in tiles
- A personal site that combines portfolio display and blog posts
- Developers who want to manage content with Markdown and avoid manually editing HTML
- Projects that need to migrate from the HTML5 UP Forty template to Astro
Suitable For
- Individual developers or designers showcasing their work
- Users who need a combined portfolio and blog site
- Developers familiar with Markdown and Astro
- Users who accept the MIT license terms and independently verify the use of third-party assets
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Click Use this template on the repository page to create your own copy, then run npm install to install dependencies
- 2
Run npm run dev to start the development server, with the default address at http://localhost:4321
- 3
To modify the site name, contact information, and social links: edit the YAML frontmatter in src/content/config/site.md
- 4
To add a work or article: create a .md file under src/content/posts/ and fill in frontmatter fields such as title, description, and image
- 5
Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses; do not judge solely based on the code's MIT license
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 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; do not judge solely based on the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
https://github.com/DarekRepos/forty-astro-theme/blob/main/LICENSEhttps://github.com/DarekRepos/forty-astro-theme/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-12. 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
- More documented · 85 / 100
- Technologies
- Astro · HTML
- Website type
- Portfolio · Blog
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
- 2026-02-13
- Screenshot last checked
- 2026-10-12
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 Astro 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: 6492565401a0464fbd04283e973a8f03b2211b8c7e68ab0fd962e77442a27b3d
2026-10-12T18:57:51.955Z
Source file / repository# Astro Forty Theme 🚀 A modern, high-performance port of the classic **Forty** template by [HTML5 UP](https://html5up.net), rebuilt from the ground up using **Astro 5.0**, **Dart Sass**, and **Astro Icon**. ## ✨ Key Features * **Astro 5.0 Framework**: Ultra-fast performance with zero-JavaScript by default. * **Content Collections**: Manage your portfolio and blog posts easily using Markdown (`.md`). * **Modern SCSS**: Rebuilt styling logic using `@use` modules and CSS Grid for better maintainability. * **Astro Icon**: High-performance SVG icon system (integrated with Iconify). * **Responsive Design**: Fully optimized for mobile, tablet, and desktop views. * **Type Safe**: Built with TypeScript for a better developer experience. ## 🛠️ Tech Stack * **Framework:** [Astro](https://astro.build/) * **Styling:** [Sass (SCSS)](https://sass-lang.com/) * **Icons:** [Astro Icon](https://github.com/natemoo-re/astro-icon) * **Content:** Markdown / Content Collections ## 🚀 Getting Started ### 1. Use as Template Click the green **"Use this template"** button at the top of this repository to create your own copy. ### 2. Install Dependencies Clone your new repository and run: ```bash npm install ``` ### 3. Start Developing ```bash npm run dev ``` Open http://localhost:4321 in your browser to see the magic. ## ⚙️ Configuration No coding required! To change the site name, contact info, or social links: 1. Open `src/content/config/site.md`. 2. Update the values in the top section (the YAML frontmatter). 3. Save, and the site updates automatically. ## 📝 Adding Content (Tiles) Your homepage tiles are driven by Markdown files: 1. Go to `src/content/posts/`. 2. Create a new file (e.g., `my-project.md`). 3. Fill in the title and image path in the frontmatter: ```markdown --- title: "Blueberry Project" description: "A fresh look at design" image: "/src/assets/pic01.jpg" --- Your post content goes here!
Explore similar templates
Compare previews and descriptions within the same stack and category.
astrowind
AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.
Astro · Blog
astro-paper
AstroPaper is a minimal, responsive, accessible, and SEO-friendly Astro blog theme. Articles are stored as Markdown/MDX in src/content/posts/, with subdirectories affecting URLs.
Astro · Blog
fuwari
Fuwari is a static blog template built with Astro and Tailwind CSS for personal blogs. It manages posts as Markdown files in src/content/posts/, with frontmatter for title, date, description, cover, tags, categories, draft status, and language.
Astro · Blog
Firefly
Firefly is a clean personal blog theme forked from Astro and Fuwari, offering four background modes, single/double sidebar and list/grid layouts, Pagefind client-side full-text search, and a six-language UI.
Astro · Blog
astro-theme-cactus
Astro Cactus is an Astro-based blog and portfolio theme that uses Markdown/MDX content collections to manage posts, notes, and tags, with frontmatter type-checked by a schema.
Astro · Portfolio
astrofy
Astrofy is a free and open-source personal portfolio website template built with Astro and TailwindCSS, with built-in blog, CV timeline, project showcase, store, and RSS feed modules.
Astro · Portfolio