DEV Community

Cover image for A Free and Open-Source Responsive Portfolio Template built with Astro.js and React
Remi W.
Remi W.

Posted on

A Free and Open-Source Responsive Portfolio Template built with Astro.js and React

A Free and Open Source Responsive Template for Portfolio and Blog built with Astro.js and React styled with Tailwind CSS. Here is a screenshot:

Astro boilerplate template

Here is the screenvideo:

Or, you play around a live demo at: Astro boilerplate Live demo

The source code is hosted on GitHub at Astro Boilerplate GitHub. The project is built from scratch and recently released. So, every GitHub ⭐ counts!

The project includes everything you need for your blog with:

  • Sitemap.xml
  • Feed RSS
  • Robots.txt
  • Pagination
  • Typography
  • Syntax highlighting for code
  • Markdown
  • Image lazy load
  • Newsletter component

Astro Boilerplate with TypeScript and Tailwind CSS

πŸš€ Astro Boilerplate is starter code for your blog based on Astro with Tailwind CSS 3.0. ⚑️ Made with Astro, TypeScript, ESLint, Prettier, Tailwind CSS.

Clone this project and use it to create your own Astro blog. You can check a Astro templates demo.

Features

A complete Blog feature:

  • 🎈 Syntax Highlighting
  • πŸ€– SEO friendly with sitemap.xml and robots.txt
  • βš™οΈ RSS feed
  • πŸ“– Pagination
  • 🌈 Include a dark blog theme
  • ⬇️ Markdown
  • πŸ“¦ Image lazy loading

Developer experience first:

  • πŸ”₯ Astro
  • 🎨 Tailwind CSS with aspect ratio and typography plugin
  • πŸŽ‰ TypeScript
  • ✏️ ESLint compatible with .astro files
  • πŸ›  Prettier compatible with .astro files
  • 🦊 Husky
  • 🚫 lint-staged
  • 🚨 Commitlint

ESLint with:

  • Airbnb styled guide
  • TypeScript compatible
  • Astro compatible
  • Automatically remove unused imports
  • Import sorting
  • Tailwind CSS plugin

Philosophy

  • Minimal code
  • SEO-friendly
  • πŸš€ Production-ready

Requirements

  • Node.js and npm

Getting started

Run the…

Top comments (0)