astro portfolio

? This is a free template to make your portfolio website using Astro 4.0 + Tailwind CSS.

Dark mode

Light mode

Lighthouse report

Table of Contents

• Demo
• Features
• Project structure
• Commands
• Contributing
• Credits

Demo

? https://astro-fe-portfolio.netlify.app/

Features

✔️ Integration with Tailwind CSS (@astrojs/tailwind) supporting Dark mode.

✔️ Uses the following integrations:

• @astrojs/mdx
• @astrojs/image
• @astrojs/tailwind - with prettier class sorting plugin
• @astro-icon
• @astro-seo
• @astro-navbar

✔️(@Playwright) e2e tests are setted up.

Blog with frontmatter (title, description, author, date, image, tags) and RSS feed, sitemap and robots.txt

404 error page

Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.ico
|   ├── hero.png
|   └── ...
├── src/
|   ├── assets/
|   |   ├── images/
│   │   |   ├── hero.png
|   |   |   └── ...
│   ├── components/
│   │   ├── ui/
│   │   |   ├── BackToTop.astro
|   |   |   └── ...
│   │   ├── About.astro
│   │   ├── Contact.astro
|   |   └── ...
│   ├── content/
│   │   ├── projects/
│   │   │   ├── project-1.md
│   │   │   ├── project-1.md
│   │   │   └── ...
│   │   └-- config.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   ├── tests/
│   │   ├── index.spec.ts
├── package.json
├── astro.config.mjs
└── ...

Astro looks for .astro, .md or .mdx files in the src/pages/ directory. Each page is exposed as a route based on its file name.

src/components/ is where we put any Astro components and similarly src/layouts/ for layouts.

Images can be placed in src/images/.

Blog and documentation content are created as collections of Markdown or MDX files in src/content.

Any static assets, eg. images, can be placed in the public/ directory.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
yarn	Installs dependencies
yarn dev	Starts local dev server at localhost:3000
yarn build	Build your production site to ./dist/
yarn preview	Preview your build locally, before deploying
yarn astro ...	Run CLI commands like astro add, astro preview
yarn astro --help	Get help using the Astro CLI
yarn test:e2e	Run Playwright tests

Contributing

If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request. That would be very useful for all of us and we would be happy to listen and take action.

Credits

Assets designed by (Freepik)[www.freepik.com].