Built with Astro, with page files under src/pages/ generating routes by filename
AstroPortfolio
Folio — Astro Portfolio Template
By manulthanura
Folio is a portfolio theme built with Astro and Tailwind CSS that uses sliding navigation to switch between portfolio sections.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-11View source
What stands out
A quick read of the recorded project description.
Styled with Tailwind CSS
Sliding navigation: switches between portfolio sections with a smooth sliding animation
Project structure includes components/Card.astro, layouts/Layout.astro, and pages/index.astro
The repository uses the MIT license, allowing free use, modification, commercial use, and distribution
Template Details
Folio is a portfolio theme built with Astro and styled with Tailwind CSS. Its main feature is sliding navigation: when users move between sections of the portfolio, the page transitions with a smooth sliding animation rather than a conventional jump or scroll. The theme is suited to showcasing personal work, and the README positions it as a way to present work visually and interactively.
The project structure follows Astro conventions: .astro or .md files under src/pages/ generate routes based on their filenames, src/components/ holds Astro/React/Vue/Svelte/Preact components, and static assets such as images go in the public/ directory. Example files visible in the repository include components/Card.astro, layouts/Layout.astro, and pages/index.astro.
Usage follows a local development workflow: run npm install in the project root to install dependencies, npm run dev to start the local development server at localhost:4321, npm run build to output the production site to ./dist/, and npm run preview to preview the build locally before deployment; Astro CLI commands can also be invoked via npm run astro. The repository uses the MIT license, permitting free use, modification, commercial use, and distribution of this version of the code, provided the copyright notice and the full MIT license notice are retained when distributing. Third-party assets such as demo images, fonts, and icons must be checked separately under their own licenses.
AstroPortfolio
Is it right for your project?
Use Cases
- Build a personal portfolio page that presents different sections with sliding transitions
- Use the Astro project as a base and replace the example components and page content to present your own work
- Preview and adjust the theme's layout and styles locally via npm run dev
Suitable For
- Developers who want to build a portfolio with Astro and Tailwind CSS
- Portfolio scenarios that need sliding section navigation rather than a conventional scrolling page
- Users who accept the MIT license terms and will retain the copyright and license notices
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Run npm install in the project root to install dependencies
- 2
Run npm run dev to start the local development server, by default at localhost:4321
- 3
Run npm run build to generate the production site into ./dist/, and npm run preview to preview the build locally before deployment
- 4
Place static assets in the public/ directory and page files under src/pages/
- 5
Third-party assets such as demo images, fonts, and icons must be checked separately under their own licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis listing covers the free version in the public repository under the MIT license; the free scope applies to this version of the code and does not mean external services or third-party assets are free.
Must comply with when using
- This version of the code may be used, modified, used commercially, and distributed free of charge.
- 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 own licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis
https://github.com/manulthanura/Folio/blob/main/LICENSEhttps://github.com/manulthanura/Folio/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
- Partly documented · 68 / 100
- Technologies
- Astro
- 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
- 2024-05-15
- 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: 9f238d37b5f849e452b2c9d9aca9b7281720c860dade1ee4eec2d5be9f57bba3
2026-10-12T23:31:25.194Z
Source file / repository# Folio Folio is a sleek and modern portfolio theme built with Astro and Tailwind CSS. It offers a unique sliding navigation system, allowing users to seamlessly navigate between sections of your portfolio with a smooth swiping animation. This theme is perfect for showcasing your work in a visually stunning and engaging way.  ## 🚀 Project Structure Inside of your Astro project, you'll see the following folders and files: ```text / ├── public/ │ └── favicon.svg ├── src/ │ ├── components/ │ │ └── Card.astro │ ├── layouts/ │ │ └── Layout.astro │ └── pages/ │ └── index.astro └── package.json ``` Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. Any static assets, like images, can be placed in the `public/` directory. ## 🧞 Commands All commands are run from the root of the project, from a terminal: | Command | Action | | :------------------------ | :----------------------------------------------- | | `npm install` | Installs dependencies | | `npm run dev` | Starts local dev server at `localhost:4321` | | `npm run build` | Build your production site to `./dist/` | | `npm run preview` | Preview your build locally, before deploying | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | | `npm run astro -- --help` | Get help using the Astro CLI | ## 👀 Want to learn more? Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
Explore similar templates
Compare previews and descriptions within the same stack and category.
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
astro-nano
Astro Nano is a static, minimalist portfolio and blog template built with Astro, Tailwind, and TypeScript without frontend frameworks. It includes light/dark themes, animated UI, automatic sitemap and RSS feed generation, and Markdown/MDX support with component imports.
Astro · Portfolio
astro-erudite
astro-erudite is an opinionated, unstyled static blog template built with Astro and native CSS, with no UI or CSS framework and minimal dependencies.
Astro · Portfolio
astro-sphere
Astro Sphere is a static, minimalist portfolio and blog theme maintained by markhorn-dev, built mainly with Astro, Tailwind, and TypeScript, with a small amount of SolidJS for stateful components.
Astro · Portfolio
astro-micro
Astro Micro is a framework-free blog and portfolio theme for Astro, forked from Astro Nano. It adds Pagefind search and Giscus comments while retaining type safety, sitemap, RSS, Markdown and MDX support, and TailwindCSS with system, light, and dark themes.
Astro · Portfolio