astro portfolio

? Este é um modelo gratuito para criar o site do seu portfólio usando Astro 4.0 + Tailwind CSS .

Modo escuro

Modo claro

Relatório do farol

Índice

• Demonstração
• Características
• Estrutura do projeto
• Comandos
• Contribuindo
• Créditos

Demonstração

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

Características

✔️ Integração com Tailwind CSS (@astrojs/tailwind) com suporte ao modo escuro .

✔️ Utiliza as seguintes integrações:

• @astrojs/mdx
• @astrojs/imagem
• @astrojs/tailwind - com plugin de classificação de classes mais bonito
• @astro-ícone
• @astro-seo
• @astro-navbar

✔️(@Playwright) Os testes e2e estão configurados.

Blog com frontmatter (título, descrição, autor, data, imagem, tags) e feed RSS, sitemap e robots.txt

página de erro 404

Estrutura do Projeto

Dentro do seu projeto Astro, você verá as seguintes pastas e arquivos:

 /
├── 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 procura arquivos .astro , .md ou .mdx no diretório src/pages/ . Cada página é exposta como uma rota com base no nome do arquivo.

src/components/ é onde colocamos quaisquer componentes Astro e da mesma forma src/layouts/ para layouts.

As imagens podem ser colocadas em src/images/ .

O conteúdo do blog e da documentação é criado como coleções de arquivos Markdown ou MDX em src/content .

Quaisquer ativos estáticos, por exemplo. imagens, podem ser colocadas no diretório public/ .

Comandos

Todos os comandos são executados na raiz do projeto, em um terminal:

Comando	Ação
yarn	Instala dependências
yarn dev	Inicia o servidor de desenvolvimento local em localhost:3000
yarn build	Crie seu site de produção para ./dist/
yarn preview	Visualize seu build localmente, antes de implantar
yarn astro ...	Execute comandos CLI como astro add , astro preview
yarn astro --help	Obtenha ajuda usando o Astro CLI
yarn test:e2e	Execute testes de dramaturgo

Contribuindo

Se você tiver alguma ideia, sugestão ou encontrar algum bug, fique à vontade para abrir uma discussão, um problema ou criar um pull request. Isso seria muito útil para todos nós e ficaríamos felizes em ouvir e agir.

Créditos

Ativos projetados por (Freepik)[www.freepik.com].