Vibe Code Portfolio Jurugambar Anda

01Bezanya dengan pemilih templat

Galeri templat menunjukkan reka bentuk siap dan meminta anda menyukainya atau tidak. Alat ini pergi satu lapisan lebih dalam: setiap satu daripada enam arah di bawah berdasarkan portfolio jurugambar sebenar yang berfungsi dan benar-benar diperiksa (tangkapan skrin, susun atur langsung, warna yang dikira, fon yang dikira), bukan palet yang dicipta supaya cantik dalam sampel warna. Arah Editorial, sebagai contoh, menggunakan EB Garamond kerana itulah secara harfiah jenis huruf yang digunakan pada laman seorang jurugambar fesyen sebenar, dipadankan dengan memeriksa halaman itu secara terus.

Dua corak muncul hampir di mana-mana merentasi laman sebenar yang menjadi asas alat ini, dan ia diterapkan dalam setiap arah di sini: navigasi tersembunyi di sebalik satu ikon hamburger tanpa senarai pautan yang kelihatan, malah pada desktop, dan satu imej besar pada satu masa dan bukan grid. Warna UI kekal hampir sifar sepanjang masa: fotografi membekalkan warna, bukan antara muka.

02Apa yang anda dapat pada akhirnya

Satu prompt berstruktur yang merangkumi arah keseluruhan, warna hex yang tepat, nama dan pasangan fon, senarai halaman, kelakuan navigasi, susun atur galeri dan pembingkaian imej, ciri yang perlu disertakan, cadangan pengehosan dengan pertukaran kos sebenar, dan satu set keperluan kualiti binaan yang tetap (teks alt yang boleh diakses, titik henti responsif, tiada rahsia dikodkan keras, imej dimuatkan secara malas). Tampalkannya ke aplikasi pengekodan AI pilihan anda dan ia mempunyai segala yang diperlukan untuk bermula.

03Daripada prompt kepada laman langsung: panduan penuh

Prompt itu ialah ringkasan reka bentuk, bukan garisan penamat. Berikut setiap langkah antara menyalinnya dan memiliki URL sebenar yang boleh anda letakkan pada kad perniagaan, percuma atau hampir percuma.

Salin prompt dan buka aplikasi pengekodan AI

Claude, Cursor, Claude Code, Windsurf atau ejen AI Replit semuanya berfungsi, apa-apa yang boleh menulis dan menyimpan fail untuk anda, bukan sekadar berbual. Jika anda belum pernah menggunakannya, pilihan berasaskan pelayar seperti claude.ai atau Replit tidak memerlukan pemasangan: tampal prompt sebagai mesej pertama anda.

Biarkan ia membina, kemudian lihat betul-betul apa yang dihasilkannya

Minta ia membina laman sebagai HTML/CSS/JS statik (atau apa sahaja yang ditetapkan bahagian pengehosan dalam prompt) dan tunjukkan pratonton. Semak enam perkara yang diminta prompt (warna, fon, kelakuan galeri, navigasi, pembingkaian, halaman) sebelum anda teruskan. Jauh lebih murah membetulkan warna aksen yang salah sekarang berbanding selepas foto dimasukkan.

Gantikan dengan foto, bio dan butiran hubungan anda yang sebenar

Gantikan setiap imej pemegang tempat dan baris teks pengisi. Minta aplikasi AI anda menulis atribut alt yang sebenar dan khusus untuk setiap foto sambil jalan, bukan “image1.jpg”, tetapi penerangan sebenar, kerana itu keperluan kebolehcapaian dan juga sedikit tambahan SEO. Ini juga masa untuk menyemak semula bahawa borang hubungan benar-benar menuju ke alamat e-mel yang anda semak.

Sebarkan ke hos percuma

Jika anda memilih peringkat “Static & free”, minta aplikasi AI anda membimbing anda menyambungkan folder projek atau repositori GitHub kepada salah satu hos pada halaman Pengehosan dalam menu di atas. Kesemua empat membina dan menyebarkan secara automatik setiap kali anda menolak perubahan; tiada langkah muat naik manual sebaik ia disambungkan.

Sambungkan domain tersuai (pilihan, tetapi berbaloi)

Subdomain percuma (seperti yourname.netlify.app) berfungsi baik untuk bermula. Apabila anda bersedia untuk yourname.com, ia ialah pembelian domain ditambah satu perubahan DNS, diterangkan dengan terperinci lebih lanjut di bawah.

04Hos percuma yang mana patut anda guna?

Mana-mana daripada ini akan melaksanakan laman statik secara langsung tanpa kos, dengan HTTPS percuma dan peringkat percuma yang mudah menampung trafik portfolio peribadi. Had peringkat percuma agak kerap berubah, jadi anggap angka pada halaman Pengehosan sebagai gambaran umum dan bukan angka semasa yang tepat, dan semak halaman harga setiap penyedia sendiri sebelum anda membuat keputusan.

Minta aplikasi pengekodan AI anda melakukan langkah penyebaran sebenar bersama anda: “sambungkan projek ini ke Netlify” ialah permintaan yang sangat biasa, dan ia biasanya boleh membimbing anda melalui pembuatan akaun dan penyebaran pertama dalam beberapa minit.

05Menyambungkan domain tersuai

Domain ialah yuran tahunan yang kecil (lazimnya $10 hingga 20/tahun bergantung pada sambungan), berasingan daripada pengehosan, yang kekal percuma. Tiga bahagiannya:

1. Beli domain. Namecheap, Cloudflare Registrar, atau pengganti Google Domains (Squarespace Domains).
2. Tambah rekod DNS. Rekod CNAME (atau A) yang menghala domain anda ke hos anda, ditambah dalam papan pemuka pendaftar. Ia dua baris dalam jadual pendaftar: CNAME untuk www yang menghala ke alamat yang diberikan hos anda, seperti your-portfolio.netlify.app, dan rekod A untuk domain tanpa awalan yang menghala ke IP hos.
3. Tambahkannya dalam hos anda. Tampal domain yang sama ke dalam tetapan “custom domain” hos anda; HTTPS disediakan sendiri.

Setiap hos pada halaman Pengehosan mempunyai tab “Custom domain” atau “Domains” yang memberi anda rekod tepat untuk ditambah, salin, tambahkannya pada pendaftar anda, dan tunggu. Perubahan DNS lazimnya mengambil masa beberapa minit hingga beberapa jam untuk berkuat kuasa, sesekali sehingga 24 hingga 48 jam. Aplikasi pengekodan AI anda boleh membimbing anda melalui papan pemuka pendaftar khusus anda jika anda tersekat; tangkap skrin halaman tetapan dan tanya apa yang perlu diklik. Mangga kelihatan, tiada amaran “not secure”: itulah garisan penamat.

06Senarai semak sebelum pelancaran

Lima minit dengan senarai ini menangkap kebanyakan perkara yang menjadikan portfolio kelihatan tidak siap. Semakannya ialah halaman Sebelum pelancaran dalam menu di atas; tandakannya satu demi satu.

07Soalan lazim