|
| 1 | +# Nuxt Portfolio Template |
| 2 | + |
| 3 | +template ini di bangun menggunakan [Nuxt UI](https://ui.nuxt.com). |
| 4 | + |
| 5 | +- [Live demo](https://destkaa.nlfts.dev) |
| 6 | + |
| 7 | +<a href="https://destkaa.nlfts.dev" target="_blank"> |
| 8 | + <picture> |
| 9 | + <img alt="Nuxt Portfolio Template" src="https://github.com/NLFTs/portofolio/raw/main/public/og.png"> |
| 10 | + </picture> |
| 11 | +</a> |
| 12 | + |
| 13 | +## Quick Start |
| 14 | + |
| 15 | +```bash [Terminal] |
| 16 | +npm create nuxt@latest -- -t ui/portfolio |
| 17 | +``` |
| 18 | + |
| 19 | +or |
| 20 | + |
| 21 | +```bash |
| 22 | +git clone https://github.com/NLFTs/portofolio.git |
| 23 | +``` |
| 24 | + |
| 25 | +## Deploy your own |
| 26 | + |
| 27 | +[](https://vercel.com/new/clone?repository-name=portofolio&repository-url=https%3A%2F%2Fgithub.com%2FNLFTs%2Fportofolio.git&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fportfolio-dark.png&demo-url=https%3A%2F%2Fportfolio-template.nuxt.dev%2F&demo-title=Nuxt%20Portfolio%20Template&demo-description=A%20sleek%20portfolio%20template%20to%20showcase%20your%20work%2C%20skills%20and%20blog%20powered%20by%20Nuxt%20Content.) |
| 28 | + |
| 29 | +## Setup |
| 30 | + |
| 31 | +Silakan Install depedensi |
| 32 | + |
| 33 | +```bash |
| 34 | +pnpm install |
| 35 | +``` |
| 36 | + |
| 37 | +## Development Server |
| 38 | + |
| 39 | +Jalankan Server Development `http://localhost:3000`: |
| 40 | + |
| 41 | +```bash |
| 42 | +pnpm dev |
| 43 | +``` |
| 44 | + |
| 45 | +or |
| 46 | + |
| 47 | +```bash |
| 48 | +npm run dev |
| 49 | +``` |
| 50 | + |
| 51 | +## Production |
| 52 | + |
| 53 | +Build untuk deployment |
| 54 | + |
| 55 | +```bash |
| 56 | +pnpm build |
| 57 | +``` |
| 58 | + |
| 59 | +local preview production |
| 60 | + |
| 61 | +```bash |
| 62 | +pnpm preview |
| 63 | +``` |
| 64 | + |
| 65 | +Cek Status [deployment documentation](https://nuxt.com/docs/getting-started/deployment). untuk info lebih lanjut. |
| 66 | + |
| 67 | +## Cara Mengganti Content |
| 68 | + |
| 69 | +### 1. Tulisan text dan identitas |
| 70 | + |
| 71 | +anda tidak peru repot mencari file untuk merubah `nama` `title` `description` `social media` dan lainya. beberapa konenten telah kami simpan di folder content sehingga ini akan mempermudah anda |
| 72 | + |
| 73 | +Sebagai contoh semua content halaman utama berada di folder `content/` dan di dalam file `index.yml` |
| 74 | + |
| 75 | +Contoh Isi Halamanya |
| 76 | + |
| 77 | + |
| 78 | +```yaml |
| 79 | +seo: |
| 80 | + title: "Kaka Viangi - Fotografer & Web Developer" |
| 81 | + description: "Selamat Datang! Saya Kaka Viangi, seorang Fotografer & Web Developer yang berbasis di Bandung. Saya berspesialisasi dalam menciptakan pengalaman digital yang berpusat pada pengguna yang indah dan fungsional." |
| 82 | +title: "Hey, Aku Destkaa" |
| 83 | +description: "Aku adalah seorang Fotografer & Web Developer yang berbasis di Bandung, Indonesia. Saya ahli dalam membangun website dan antarmuka siap pakai dengan cepat." |
| 84 | +hero: |
| 85 | + links: |
| 86 | + - label: "Buat Janji Temu" |
| 87 | + to: https://cal.com/destkaa |
| 88 | + color: "neutral" |
| 89 | + images: |
| 90 | + - src: /gallery/image.png |
| 91 | + alt: Gambar Galeri 1 |
| 92 | + - src: /gallery/image2.png |
| 93 | + alt: Gambar Galeri 2 |
| 94 | + - src: /gallery/image3.png |
| 95 | + alt: Gambar Galeri 3 |
| 96 | + - src: /gallery/image4.png |
| 97 | + alt: Gambar Galeri 4 |
| 98 | + - src: /gallery/image5.png |
| 99 | + alt: Gambar Galeri 5 |
| 100 | + - src: /gallery/image6.png |
| 101 | + alt: Gambar Galeri 6 |
| 102 | + - src: /gallery/image7.png |
| 103 | + alt: Gambar Galeri 7 |
| 104 | + - src: /gallery/image8.png |
| 105 | + alt: Gambar Galeri 8 |
| 106 | + - src: /gallery/image1.png |
| 107 | + alt: Gambar Galeri 9 |
| 108 | +about: |
| 109 | + title: "Tentang Saya" |
| 110 | + description: | |
| 111 | + Sebagai seorang fotografer dan pengembang web dengan pengalaman bertahun-tahun, saya menggabungkan kreativitas visual dengan keahlian teknis untuk menghadirkan pengalaman digital yang luar biasa. |
| 112 | + Pendekatan saya memadukan strategi kreatif dengan keahlian teknis, mengubah konsep menjadi produk digital yang fungsional dan bermakna yang mengintegrasikan desain dan teknologi secara mulus. |
| 113 | +experience: |
| 114 | + title: Pengalaman Kerja |
| 115 | + items: |
| 116 | + - position: "Contibutor di" |
| 117 | + date: "2026 - Sekarang" |
| 118 | + company: |
| 119 | + name: Nuxt.js |
| 120 | + logo: "i-simple-icons-nuxtdotjs" |
| 121 | + url: "https://nuxt.com" |
| 122 | + color: "#00DC82" |
| 123 | + - position: "Jurnalis di" |
| 124 | + date: "2024 - 2025" |
| 125 | + company: |
| 126 | + name: "Fts Studio" |
| 127 | + logo: "i-simple-icons-raycast" |
| 128 | + url: "#" |
| 129 | + color: "#5E6AD2" |
| 130 | +testimonials: |
| 131 | + - quote: "Lumayan , Gambar nya bagus dan beberapa karya nya bermakna tanpa harus berlebihan." |
| 132 | + author: |
| 133 | + name: 'Davin Gahisan' |
| 134 | + description: 'C founder NLFTs' |
| 135 | + avatar: |
| 136 | + src: 'https://avatars.githubusercontent.com/u/228851591?v=4' |
| 137 | + srcset: 'https://avatars.githubusercontent.com/u/228851591?v=4 2x' |
| 138 | +blog: |
| 139 | + title: "Artikel Terbaru" |
| 140 | + description: "Beberapa pemikiran terbaru saya" |
| 141 | +faq: |
| 142 | + title: Pertanyaan yang Sering Diajukan |
| 143 | + description: Jawaban atas pertanyaan umum tentang proses dan layanan saya. |
| 144 | + categories: |
| 145 | + - title: Layanan & Proses |
| 146 | + questions: |
| 147 | + - label: Layanan apa saja yang Anda tawarkan? |
| 148 | + content: | |
| 149 | + Saya berspesialisasi dalam fotografi dan pengembangan web. Ini mencakup fotografi produk, fotografi portrait, pembuatan website responsif, aplikasi web (terutama dengan Vue.js/Nuxt.js), dan pengembangan sistem desain. Tujuan saya adalah menciptakan pengalaman digital yang mulus dari konsep hingga peluncuran. |
| 150 | + - label: Bagaimana proses kerja Anda? |
| 151 | + content: | |
| 152 | + Proses saya bersifat kolaboratif dan iteratif, biasanya melibatkan tahap Penemuan & Riset, Ideasi & Prototyping, Pengujian, Desain Visual, dan kolaborasi erat dengan tim pengembangan selama implementasi. Saya menyesuaikan proses berdasarkan kebutuhan proyek, selalu fokus pada solusi yang berpusat pada pengguna. |
| 153 | + - label: Apakah Anda bekerja dengan startup? |
| 154 | + content: | |
| 155 | + Tentu saja! Saya senang bekerja dengan startup untuk membantu membentuk visi produk mereka dan menciptakan antarmuka yang ramah pengguna dari awal. Saya dapat menyesuaikan proses saya agar sesuai dengan lingkungan startup yang serba cepat. |
| 156 | + - title: Harga & Jadwal |
| 157 | + questions: |
| 158 | + - label: Berapa biaya proyek biasanya? |
| 159 | + content: | |
| 160 | + Biaya proyek bervariasi tergantung cakupan, kompleksitas, fitur, dan jadwal. Untuk proyek fotografi dan pengembangan web yang komprehensif, engagement saya biasanya dimulai dari Rp 5.000.000, dengan proyek rata-rata berkisar antara Rp 8.000.000 hingga Rp 25.000.000. Untuk konsultasi atau tugas desain tertentu, tarif harian saya adalah Rp 1.500.000. |
| 161 | + - label: Bagaimana ketentuan pembayaran Anda? |
| 162 | + content: | |
| 163 | + Saya umumnya membutuhkan DP 40% untuk menjadwalkan proyek dan memulai pekerjaan, dengan sisa 60% jatuh tempo setelah proyek selesai dan diserahkan. Saya menerima pembayaran melalui transfer bank. |
| 164 | + - label: Berapa lama proyek biasanya selesai? |
| 165 | + content: | |
| 166 | + Jadwal sangat bergantung pada cakupan dan kompleksitas proyek. Proyek kecil mungkin membutuhkan 3-4 minggu, sementara proyek yang lebih besar dan rumit bisa memakan waktu 2 hingga 4 bulan. Saya selalu memberikan estimasi jadwal terperinci setelah fase penemuan awal. |
| 167 | + - label: Apakah Anda menawarkan retainer atau dukungan berkelanjutan? |
| 168 | + content: | |
| 169 | + Ya, untuk klien yang membutuhkan dukungan desain berkelanjutan, pengembangan fitur, atau pemeliharaan, saya menawarkan opsi retainer bulanan yang disesuaikan dengan kebutuhan spesifik. Mari diskusikan jika ini sesuatu yang Anda minati. |
| 170 | + - title: Tentang Saya |
| 171 | + questions: |
| 172 | + - label: Apa yang paling Anda nikmati dari pekerjaan Anda? |
| 173 | + content: | |
| 174 | + Saya menyukai tantangan dalam memecahkan masalah kompleks melalui desain dan teknologi. Sangat memuaskan melihat orang berinteraksi dengan sesuatu yang saya buat dan merasa bahwa itu benar-benar berguna dan mudah digunakan. Menjembatani kebutuhan pengguna dan kemungkinan teknis adalah yang benar-benar membuat saya bersemangat. |
| 175 | + - label: Apa hobi Anda di luar pekerjaan? |
| 176 | + content: | |
| 177 | + Ketika tidak sedang mendesain atau coding, saya menikmati berkeliling Bandung, mencoba kafe-kafe baru, dan memotret pemandangan alam. Saya juga suka berkontribusi pada proyek open-source dan bereksperimen dengan teknologi baru. |
| 178 | +
|
| 179 | +``` |
| 180 | +
|
| 181 | +
|
| 182 | +dan anda tinggal merubah halaman lainya seperti |
| 183 | +
|
| 184 | +- Halaman about `content/about.yml` |
| 185 | +- Halaman Teman `content/friends.yml` |
| 186 | +- Halaman project `content/project.yml` |
| 187 | +- Halaman blog `content/blog.yml` |
| 188 | + |
| 189 | +dan lainya... |
| 190 | + |
| 191 | + |
| 192 | +### 2. Impovisasi Desain Website |
| 193 | + |
| 194 | +Anda tidak perlu kawatir soal desain website yang tidak bisa di ubah, semua anatar muka telah ada di dalam folder app untuk anda customasi lebih lanjut dengan bebeas seperti menambahkan halaman atau sekedar redesign ulang halaman yang sudah ada. tanpa perlu mengkahawatikan masalah soal desain |
| 195 | + |
| 196 | +Berikut adalah beberapa contoh halaman yang ada di dalam folder app: |
| 197 | + |
| 198 | +- `app/pages/index.vue` - Halaman utama |
| 199 | +- `app/pages/about.vue` - Halaman tentang |
| 200 | +- `app/pages/friends.vue` - Halaman teman |
| 201 | +- `app/pages/project.vue` - Halaman project |
| 202 | +- `app/pages/blog.vue` - Halaman blog |
| 203 | +- `app/pages/contact.vue` - Halaman kontak |
| 204 | + |
| 205 | +dan sisanya adalah componnents kecil yang bisa anda sesuaikan dengan bebas |
| 206 | + |
| 207 | + |
| 208 | +### Assets |
| 209 | + |
| 210 | +#### Blog |
| 211 | + |
| 212 | +jika anda ingin menulis artikel anda bisa langsung menulisnya di dalam folder `content/blog` dengan format markdown anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content agar tampilan nya menarik dan sesuai dengan apa yang anda mau. jika anda tidak tau apa saja format markdown yang di berikan oleh nuxt anda bisa membaca dokumentasinya di [sini](https://content.nuxt.com/docs/getting-started) |
| 213 | + |
| 214 | +#### Image |
| 215 | + |
| 216 | +jika anda ingin menambahkan gambar pada website anda anda bisa menambahkannya di dalam folder `public` atau `assets` anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content agar tampilan nya menarik dan sesuai dengan apa yang anda mau. jika anda tidak tau apa saja format gambar anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content atau anda bisa mencari di google tentang format gambar. |
| 217 | + |
| 218 | +#### Video |
| 219 | + |
| 220 | +jika anda ingin menambahkan video pada website anda anda bisa menambahkannya di dalam folder `public` atau `assets` anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content agar tampilan nya menarik dan sesuai dengan apa yang anda mau. jika anda tidak tau apa saja format video anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content atau anda bisa mencari di google tentang format video. |
| 221 | + |
| 222 | +#### Audio |
| 223 | + |
| 224 | +jika anda ingin menambahkan audio pada website anda anda bisa menambahkannya di dalam folder `public` atau `assets` anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content agar tampilan nya menarik dan sesuai dengan apa yang anda mau. jika anda tidak tau apa saja format audio anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content atau anda bisa mencari di google tentang format audio. |
| 225 | + |
| 226 | +#### Font |
| 227 | + |
| 228 | +jika anda ingin menambahkan font pada website anda anda bisa menambahkannya di dalam folder `public` atau `assets` anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content agar tampilan nya menarik dan sesuai dengan apa yang anda mau. jika anda tidak tau apa saja format font anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content atau anda bisa mencari di google tentang format font. |
| 229 | + |
| 230 | +#### Icon |
| 231 | + |
| 232 | +jika anda ingin menambahkan icon pada website anda anda bisa menambahkannya di dalam folder `public` atau `assets` anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content agar tampilan nya menarik dan sesuai dengan apa yang anda mau. jika anda tidak tau apa saja format icon anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content atau anda bisa mencari di google tentang format icon. |
| 233 | + |
| 234 | +#### Other |
| 235 | + |
| 236 | +jika anda ingin menambahkan file lain pada website anda anda bisa menambahkannya di dalam folder `public` atau `assets` anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content agar tampilan nya menarik dan sesuai dengan apa yang anda mau. jika anda tidak tau apa saja format file anda bisa menggunakan format yang telah di berikan oleh nuxt ui/ nuxt content atau anda bisa mencari di google tentang format file. |
| 237 | + |
| 238 | + |
| 239 | + |
| 240 | + |
| 241 | + |
| 242 | + |
| 243 | + |
0 commit comments