astro portfolio

? Ini adalah template gratis untuk membuat website portofolio Anda menggunakan Astro 4.0 + Tailwind CSS .

Mode gelap

Modus ringan

Laporan mercusuar

Daftar isi

• Demo
• Fitur
• Struktur proyek
• Perintah
• Berkontribusi
• Kredit

Demo

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

Fitur

✔️ Integrasi dengan Tailwind CSS (@astrojs/tailwind) mendukung mode Gelap .

✔️ Menggunakan integrasi berikut:

• @astrojs/mdx
• @astrojs/gambar
• @astrojs/tailwind - dengan plugin penyortiran kelas yang lebih cantik
• @astro-ikon
• @astro-seo
• @astro-navbar

✔️(@Playwright) Tes e2e sudah disiapkan.

Blog dengan materi depan (judul, deskripsi, penulis, tanggal, gambar, tag) dan RSS feed, peta situs, dan robots.txt

halaman kesalahan 404

Struktur Proyek

Di dalam proyek Astro Anda, Anda akan melihat folder dan file berikut:

 /
├── 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 mencari file .astro , .md atau .mdx di direktori src/pages/ . Setiap halaman diekspos sebagai rute berdasarkan nama filenya.

src/components/ adalah tempat kita meletakkan komponen Astro dan juga src/layouts/ untuk tata letak.

Gambar dapat ditempatkan di src/images/ .

Konten blog dan dokumentasi dibuat sebagai kumpulan file Markdown atau MDX di src/content .

Aset statis apa pun, misalnya. gambar, dapat ditempatkan di direktori public/ .

Perintah

Semua perintah dijalankan dari root proyek, dari terminal:

Memerintah	Tindakan
yarn	Menginstal dependensi
yarn dev	Memulai server pengembang lokal di localhost:3000
yarn build	Bangun situs produksi Anda ke ./dist/
yarn preview	Pratinjau build Anda secara lokal, sebelum diterapkan
yarn astro ...	Jalankan perintah CLI seperti astro add , astro preview
yarn astro --help	Dapatkan bantuan menggunakan Astro CLI
yarn test:e2e	Jalankan tes Penulis Drama

Berkontribusi

Jika Anda mempunyai ide, saran, atau menemukan bug, jangan ragu untuk membuka diskusi, masalah, atau membuat permintaan tarik. Itu akan sangat berguna bagi kita semua dan kita akan dengan senang hati mendengarkan dan mengambil tindakan.

Kredit

Aset dirancang oleh (Freepik)[www.freepik.com].