Astro Portfolio

Overview

This article introduces a free template for creating a portfolio website using Astro 2.0 and Tailwind CSS. It highlights the key features, provides installation instructions, and mentions future updates.

Features

• Integration with Tailwind CSS - The template utilizes the @astrojs/tailwind integration to support Dark mode.
• Multiple Integrations - The template includes various other integrations such as @astrojs/mdx, @astrojs/image, @astro-icon, and more.
• e2e Tests with Playwright - The template has set up end-to-end tests using Playwright.
• Upcoming Blog Features - Future updates will include the addition of a blog with frontmatter, RSS feed, sitemap, robots.txt, and a 404 error page.

Installation

To install the template, follow these steps:

1. Open a terminal and navigate to your desired project directory.
2. Run the following command to install the dependencies:

yarn

3. To start the local development server at localhost:3000, run:

yarn dev

4. To build the production site to the ./dist/ directory, run:

yarn build

5. To preview your build locally before deploying, run:

yarn preview

6. You can also use the Astro CLI by running commands such as astro add, astro preview, etc. For help with CLI commands, use:

yarn astro --help

7. To run Playwright tests, use the following command:

yarn test:e2e

Summary

This article introduces a free template for building a portfolio website using Astro 2.0 and Tailwind CSS. It showcases the template’s features, provides installation instructions, and mentions future updates such as the addition of a blog and e2e tests. The article also encourages users to contribute ideas, suggestions, and bug reports to improve the template.