astro portfolio

? Dies ist eine kostenlose Vorlage zum Erstellen Ihrer Portfolio-Website mit Astro 4.0 + Tailwind CSS .

Dunkler Modus

Lichtmodus

Leuchtturmbericht

Inhaltsverzeichnis

• Demo
• Merkmale
• Projektstruktur
• Befehle
• Mitwirken
• Credits

Demo

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

Merkmale

✔️ Integration mit Tailwind CSS (@astrojs/tailwind) unterstützt den Dunkelmodus .

✔️ Verwendet die folgenden Integrationen:

• @astrojs/mdx
• @astrojs/image
• @astrojs/tailwind – mit hübscherem Klassensortierungs-Plugin
• @astro-icon
• @astro-seo
• @astro-navbar

✔️(@Playwright) E2E-Tests sind eingerichtet.

Blog mit Titel (Titel, Beschreibung, Autor, Datum, Bild, Tags) und RSS-Feed, Sitemap und robots.txt

404-Fehlerseite

Projektstruktur

In Ihrem Astro-Projekt sehen Sie die folgenden Ordner und Dateien:

 /
├── 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 sucht im Verzeichnis src/pages/ nach .astro , .md oder .mdx Dateien. Jede Seite wird basierend auf ihrem Dateinamen als Route angezeigt.

src/components/ ist der Ort, an dem wir alle Astro-Komponenten ablegen, und src/layouts/ für Layouts.

Bilder können in src/images/ abgelegt werden.

Blog- und Dokumentationsinhalte werden als Sammlungen von Markdown- oder MDX-Dateien in src/content erstellt.

Alle statischen Assets, z. Bilder können im Verzeichnis public/ abgelegt werden.

Befehle

Alle Befehle werden im Stammverzeichnis des Projekts von einem Terminal aus ausgeführt:

Befehl	Aktion
yarn	Installiert Abhängigkeiten
yarn dev	Startet den lokalen Entwicklungsserver bei localhost:3000
yarn build	Erstellen Sie Ihren Produktionsstandort auf ./dist/
yarn preview	Sehen Sie sich Ihren Build lokal in der Vorschau an, bevor Sie ihn bereitstellen
yarn astro ...	Führen Sie CLI-Befehle wie astro add oder astro preview aus
yarn astro --help	Erhalten Sie Hilfe bei der Verwendung der Astro-CLI
yarn test:e2e	Führen Sie Playwright-Tests durch

Mitwirken

Wenn Sie Ideen oder Vorschläge haben oder Fehler finden, können Sie gerne eine Diskussion oder ein Problem eröffnen oder eine Pull-Anfrage erstellen. Das wäre für uns alle sehr nützlich und wir würden gerne zuhören und Maßnahmen ergreifen.

Credits

Von (Freepik)[www.freepik.com] entworfene Assets.