astro portfolio

? Il s'agit d'un modèle gratuit pour créer votre site Web de portfolio en utilisant Astro 4.0 + Tailwind CSS .

Mode sombre

Mode lumière

Rapport phare

Table des matières

• Démo
• Caractéristiques
• Structure du projet
• Commandes
• Contribuer
• Crédits

Démo

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

Caractéristiques

✔️ Intégration avec Tailwind CSS (@astrojs/tailwind) prenant en charge le mode sombre .

✔️ Utilise les intégrations suivantes :

• @astrojs/mdx
• @astrojs/image
• @astrojs/tailwind - avec un plugin de tri de classes plus joli
• @astro-icône
• @astro-seo
• @astro-navbar

✔️ (@Playwright) Des tests e2e sont mis en place.

Blog avec frontmatter (titre, description, auteur, date, image, tags) et flux RSS, plan du site et robots.txt

Page d'erreur 404

Structure du projet

Dans votre projet Astro, vous verrez les dossiers et fichiers suivants :

 /
├── 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 recherche les fichiers .astro , .md ou .mdx dans le répertoire src/pages/ . Chaque page est exposée sous forme d'itinéraire en fonction de son nom de fichier.

src/components/ est l'endroit où nous mettons tous les composants Astro et de même src/layouts/ pour les mises en page.

Les images peuvent être placées dans src/images/ .

Le contenu du blog et de la documentation est créé sous forme de collections de fichiers Markdown ou MDX dans src/content .

Tous les actifs statiques, par exemple. images, peuvent être placées dans le répertoire public/ .

Commandes

Toutes les commandes sont exécutées depuis la racine du projet, depuis un terminal :

Commande	Action
yarn	Installe les dépendances
yarn dev	Démarre le serveur de développement local sur localhost:3000
yarn build	Construisez votre site de production sur ./dist/
yarn preview	Prévisualisez votre build localement, avant de le déployer
yarn astro ...	Exécutez des commandes CLI comme astro add , astro preview
yarn astro --help	Obtenez de l'aide pour utiliser l'Astro CLI
yarn test:e2e	Exécuter des tests de dramaturge

Contribuer

Si vous avez des idées, des suggestions ou trouvez des bugs, n'hésitez pas à ouvrir une discussion, un problème ou à créer une pull request. Cela serait très utile pour nous tous et nous serions heureux de vous écouter et d’agir.

Crédits

Actifs conçus par (Freepik)[www.freepik.com].