alvarlaigna/astro-portfolio

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

Dark mode

Light mode

Lighthouse report

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].

alvarlaigna / astro-portfolio