Unduh codefolio - unduh kode sumber codefolio

codefolio

Kategori lainnya

1.0.0

Unduh

Portofolio kode

Demo Langsung | Penerapan | Tentang | Fitur | Kontribusi

Aplikasi web siap penerapan untuk menampilkan portofolio pengkodean Anda.

Tentang

Codefolio adalah aplikasi web portofolio Jamstack untuk programmer. Itu dibangun menggunakan Nuxt.js dan memanfaatkan modul @nuxt/content untuk menggunakan data pengguna yang ditempatkan di direktori /content dan menghasilkan aset statis siap produksi.

Fitur

Seluruh kode ditulis dengan mempertimbangkan modul dan kegunaan kembali.

Fitur utama aplikasi ini adalah mendukung penerapan statis. Portofolio pengkodean tidak memerlukan banyak perubahan sehingga situs statis adalah pilihan yang lebih baik daripada SPA biasa atau aplikasi Full-Stack.

Antarmuka Pengguna

Antarmuka pengguna Codefolio dirancang dengan mempertimbangkan keramahan pengguna. Ini sepenuhnya responsif dan menggunakan pendekatan mobile-first.

Desainnya didasarkan pada pola 7-1 Sass dan memanfaatkan Bootstrap 5 yang dimuat sebagian untuk tata letak dan utilitas.

Direktori aset/aprite/svg berisi file ikon svg individual. Anda dapat menggunakan ikon-ikon ini (atau menempatkan ikon svg Anda sendiri di direktori ini) untuk mereferensikan nama ikon di komponen <icon> vue.

Isi

Codefolio mendukung data pengguna khusus. Selain detail pribadi, pengguna juga dapat menyesuaikan hal-hal keren lainnya seperti tautan eksternal dan URL tombol resume di bilah navigasi atas.

Panduan Konten

Generator situs statis mengambil data pengguna mentah (biasanya dalam format penurunan harga atau JSON) untuk menghasilkan HTML siap produksi, jadi Anda memerlukan panduan ini sebagai referensi saat menambahkan konten Anda ke Codefolio.

Berikut tampilan struktur folder konten.

 content
|	navbar.json
|	about.md
|	social-icons.json
|	user.json
|
└───projects
		project1.json
		project2.json
		project3.json
		/* so on... */

Mari kita lihat untuk apa setiap file atau folder.

navbar.json

File ini digunakan untuk data opsional yang terkait dengan bilah navigasi atas.

Milik	Jenis	Keterangan
resumeUrl	`string`	Lanjutkan URL file untuk tombol lanjutkan navbar.
tautan eksternal	`array`	Array yang berisi objek untuk menghasilkan tautan eksternal di bilah navigasi atas. Setiap objek tautan eksternal harus memiliki properti `text` dan string `url` agar berfungsi dengan baik.

tentang.md

File penurunan harga ini digunakan untuk tentang halaman.

sosial-ikon.json

File ini digunakan untuk menghasilkan ikon sosial di halaman tentang.

Milik	Jenis	Keterangan
ikon	`array`	Array yang berisi objek untuk menghasilkan ikon sosial di halaman kontak. Setiap objek harus memiliki properti `name` dan `url` (string). Properti `name` harus memiliki file svg yang cocok di direktori /assets/sprite/svg/ . Sebagian besar ikon sosial sudah tersedia tetapi jangan ragu untuk menambahkan ikon svg khusus Anda. Dalam mode pengembang, Anda dapat mengunjungi rute `/_icons` untuk mencantumkan semua ikon yang tersedia.

pengguna.json

File ini digunakan untuk detail pengguna yang diperlukan untuk halaman beranda.

Milik	Jenis	Keterangan
nama lengkap	`string`	Nama belakang.
tentang	`string`	Sedikit tentang pengguna.
gambar	`string`	URL gambar yang valid dimulai dari http atau nama (termasuk ekstensi) gambar yang ditempatkan di direktori `assets/images` . Silakan pangkas gambar menjadi `500x500` untuk hasil yang lebih baik.
judul	`string`	Posisi atau peran pengguna.

kontak.json

File ini digunakan untuk menghasilkan halaman kontak.

Milik	Jenis	Keterangan
bentukAksi	`string`	Tindakan formulir khusus untuk formulir kontak. Periksa formpree.io.
lokasi	`string`	String lokasi pengguna.
e-mail	`string`	Alamat email pengguna.
telepon	`string`	Nomor telepon pengguna.

proyek

Folder ini berisi semua proyek sebagai file individual dalam format json . Setiap file dalam folder ini akan mewakili proyek yang berbeda.

Tabel berikut berisi format setiap file di folder proyek.

Milik	Jenis	Keterangan
pengenal	`integer`	Pengidentifikasi unik untuk pemesanan.
judul	`string`	Nama proyek.
keterangan	`string`	Detail tentang proyek tersebut.
gambar	`string`	URL gambar yang valid dimulai dari http atau nama (termasuk ekstensi) gambar yang ditempatkan di direktori `assets/images` .
tautan	`object`	Sebuah objek yang berisi tautan eksternal proyek. Ini dapat memiliki properti opsional `liveDemo` , `videoDemo` dan `sourceCode` untuk URL.
teknologi	`array`	Array yang berisi semua teknologi (string) yang digunakan dalam proyek.

Catatan: Buat file baru untuk menambahkan lebih banyak proyek dan beri nama sebagai nama proyek.

Lihat file dummy yang ada di folder konten untuk referensi.

seo

Tag Meta

Nuxt.js menyediakan cara efisien untuk mengoptimalkan situs Anda untuk mesin pencari. Silakan merujuk ke panduan SEO Nuxt.js untuk lebih jelasnya.

Peta Situs

Proyek ini menggunakan @nuxtjs/sitemap untuk menghasilkan file sitemap.xml secara otomatis. Silakan merujuk ke panduan konfigurasi mereka jika Anda memerlukan informasi lebih lanjut.

Penyebaran

Setelah menyesuaikan konten sesuai kebutuhan, Anda perlu menerapkan aplikasi ke produksi.

Penerapan manual

Mari kita lihat cara menghasilkan file build.

Mulailah dengan mengkloning repositori di mesin lokal Anda menggunakan git (atau unduh secara manual)

 git clone https://github.com/0xaliraza/codefolio

Kemudian, navigasikan ke direktori root repositori dan instal dependensinya

 npm install

Hasilkan file build

 npm run generate

Pada titik ini Anda akan memiliki folder ./build yang berisi semua file siap produksi untuk penerapan. Anda dapat menyebarkan file-file ini ke beberapa server hosting atau CDN.

Jika Anda ingin melihat aplikasi dijalankan secara lokal

 npm run dev

CI/CD

Anda memerlukan pengalaman github/coding sebelumnya untuk menerapkan ini menggunakan tindakan github atau platform CI/CD lainnya.

Ini adalah repositori templat sehingga Anda cukup mengeklik tombol "Gunakan templat ini" di kanan atas untuk mengkloning repositori ini. Sesuaikan file konten sesuai kebutuhan Anda dan buka tab tindakan untuk menambahkan alur kerja yang diperlukan. Anda dapat menggunakan kembali file ci.yml dan cd.yml yang ada.

Lihat tindakan github untuk mempelajari lebih lanjut.

Kontribusi

Jangan ragu untuk membuat permintaan tarik atau masalah jika Anda memerlukan sesuatu untuk diubah atau diperbaiki. Atau Anda bisa langsung menghubungi saya menggunakan tautan di bawah ini.