gridsome portfolio starter

Starter portofolio gridsome

Lihat versi Astro di sini: https://github.com/drehimself/astro-portfolio-starter

Tema starter portofolio sederhana untuk gridsome

URL demo

https://gridsome-portfolio-starter.netlify.com

Fitur

• Desain Bersih dan Minimal
• Tailwind CSS V1 (dengan Purgecss). Menggunakan plugin gridsome ini.
• Gulir ke bagian menggunakan vue-scrollto
• Blog dengan Konten Markdown untuk Posting
• Jenis dokumentasi yang menunjukkan cara menggunakan komponen VUE dalam Markdown (klik Docs)
• Switcher tema dengan mode gelap
• Cari Posting dengan Fuse.js dan Vue-Fuse
• Tag untuk posting
• Pagination dasar
• Sintaks Sorot dengan Shiki (menggunakan plugin GridSome ini)
• 404 halaman
• Feed RSS
• Sitemap di xml

Instalasi

1. Instal GridSome CLI Tool Jika Anda tidak memilikinya: npm install --global @gridsome/cli
2. Kloning Repo: git clone https://github.com/drehimself/gridsome-portfolio-starter.git
3. cd gridsome-portfolio-starter
4. npm install (ini bisa menjadi unduhan yang panjang karena cypress. Jika Anda tidak peduli tentang pengujian dengan cypress, hapus dari package.json )
5. gridsome develop untuk memulai server dev lokal di http://localhost:8080

Pengujian

Saya memiliki beberapa tes ujung ke ujung dasar menggunakan Cypress. Anda dapat menemukannya di /cypress/integration/tests.js .

Untuk menjalankan tes, pertama -tama pastikan server dev Anda berjalan dengan gridsome develop . Saya berasumsi Anda menggunakan port default 8080. Jika tidak, ubah tombol baseUrl di file cypress.json .

Setelah server dev Anda berjalan, Anda dapat menjalankan npm run test atau ./node_modules/.bin/cypress open untuk memulai Cypress. Aplikasi elektron Cypress akan berjalan. Klik file tests.js dan tes akan berjalan di browser otomatis.

Catatan

• Ketika GridSome pindah ke Vue 3, saya akan memperbarui repo ini juga. Saya juga akan memperbarui ke Tailwind V2, bersama dengan barang V2 Tailwind lainnya seperti Dark Mode dan JIT.
• Berdasarkan situs web portofolio pribadi saya. Saya ingin membuat versi open source dengan lebih banyak fitur.
• Lihatlah screencast yang saya lakukan di mana saya pergi melalui proses membangun situs web saya.
• Ilustrasi dari Undraw
• Pencarian didasarkan pada fuse.js dan vue-fuse. Ini hanya mencari judul dan ringkasan posting untuk saat ini. Beberapa tweak mungkin diperlukan untuk mendapatkannya mencari kesukaan Anda. Lihat dokumentasi sekering untuk pengaturan pencarian. PR ini menambahkan kemampuan untuk mencari kedua jenis "posting" dan "dokumentasi".
• Lihatlah starter gridsome lainnya di mana saya mendapat beberapa ide dari:
  • Blog Starter Gridsome
  • Starter Gridsome Bleda
  • Jigsaw Starter Blog - Saya mendapat banyak inspirasi desain dari tema starter ini.

Versi lainnya

• Versi Nuxt: https://github.com/drehimself/nuxt-portfolio-starter
• Versi Sabre: https://github.com/drehimself/saber-portfolio-starter