Fotoğrafçı Portfolyonuzu Vibe Code ile Yapın

01Bunun şablon seçiciden farkı

Şablon galerileri size bitmiş bir tasarım gösterir ve beğenip beğenmediğinizi sorar. Bu araç bir katman daha derine iner: aşağıdaki altı yönün her biri, gerçekten incelenmiş (ekran görüntüleri, canlı yerleşim, hesaplanmış renkler, hesaplanmış yazı tipleri) gerçek, çalışan bir fotoğrafçı portfolyosuna dayanır; birinin bir renk örneğinde güzel görünsün diye uydurduğu bir palete değil. Örneğin Editoryal yön EB Garamond kullanır, çünkü gerçek bir moda fotoğrafçısının sitesi tam olarak bu yazı tipiyle dizilmiştir ve sayfa doğrudan incelenerek eşleştirilmiştir.

Bunun dayandığı gerçek sitelerin neredeyse hepsinde iki kalıp öne çıktı ve burada her yöne işlenmiş durumda: masaüstünde bile görünür bir bağlantı listesi olmadan tek bir hamburger simgesinin ardına gizlenmiş gezinme ve ızgara yerine her seferinde tek büyük görsel. Arayüz rengi baştan sona sıfıra yakın kalır: rengi fotoğraflar sağlar, arayüz değil.

02Sonunda ne elde edersiniz

Genel yönü, tam hex renkleri, yazı tipi adlarını ve eşleşmesini, sayfa listesini, gezinme davranışını, galeri düzenini ve görsel çerçevelemeyi, hangi özelliklerin ekleneceğini, gerçek maliyet ödünleşimleriyle bir barındırma önerisini ve sabit bir yapı kalitesi gereksinimleri kümesini (erişilebilir alt metin, duyarlı kırılma noktaları, koda gömülü gizli anahtar olmaması, tembel yüklenen görseller) kapsayan tek, yapılandırılmış bir prompt. Bunu seçtiğiniz yapay zekâ kodlama uygulamasına yapıştırın; başlamak için ihtiyacı olan her şey elinde olur.

03Prompt'tan canlı bir siteye: tam yol haritası

Prompt tasarım brifidir, bitiş çizgisi değil. İşte onu kopyalamakla, kartvizitinize koyabileceğiniz gerçek bir URL'ye sahip olmak arasındaki her adım; ücretsiz ya da ücrete yakın.

Prompt'u kopyalayın ve bir yapay zekâ kodlama uygulaması açın

Claude, Cursor, Claude Code, Windsurf ya da Replit'in yapay zekâ ajanı işe yarar; yalnızca sohbet etmeyen, sizin için dosya yazıp kaydedebilen her şey. Hiç kullanmadıysanız claude.ai ya da Replit gibi tarayıcı tabanlı bir seçenek kurulum gerektirmez: prompt'u ilk mesajınız olarak yapıştırın.

Kurmasına izin verin, sonra ortaya çıkana gerçekten bakın

Siteyi statik HTML/CSS/JS olarak (ya da prompt'un barındırma bölümünde belirtilen neyse onunla) kurmasını ve size bir önizleme göstermesini isteyin. Devam etmeden önce prompt'un istediği altı şeyi (renkler, yazı tipleri, galeri davranışı, gezinme, çerçeveleme, sayfalar) kontrol edin. Yanlış bir vurgu rengini şimdi düzeltmek, fotoğraflar işin içine girdikten sonra düzeltmekten çok daha ucuzdur.

Gerçek fotoğraflarınızı, biyografinizi ve iletişim bilgilerinizi yerleştirin

Her yer tutucu görseli ve dolgu metni satırını değiştirin. Yapay zekâ uygulamanızdan her fotoğraf için “image1.jpg” değil, gerçek bir tanım olan, somut bir alt özniteliği yazmasını isteyin; çünkü bu hem bir erişilebilirlik gereksinimi hem de küçük bir SEO artısıdır. İletişim formunun gerçekten baktığınız bir e-posta adresine gittiğini iki kez kontrol etmenin de zamanı budur.

Ücretsiz bir barındırıcıya yayınlayın

“Statik & ücretsiz” seviyesini seçtiyseniz, yapay zekâ uygulamanızdan projenin klasörünü ya da GitHub deposunu yukarıdaki menüdeki Barındırma sayfasında yer alan barındırıcılardan birine bağlamanız için size yol göstermesini isteyin. Dördü de bir değişiklik gönderdiğiniz her seferde otomatik olarak derler ve yayınlar; bağlandıktan sonra elle yükleme adımı yoktur.

Özel bir alan adı bağlayın (isteğe bağlı, ama değer)

Ücretsiz bir alt alan adı (yourname.netlify.app gibi) başlamak için gayet iyidir. yourname.com için hazır olduğunuzda, bu bir alan adı satın alımı artı bir DNS değişikliğidir; aşağıda ayrıntılı anlatılıyor.

04Hangi ücretsiz barındırıcıyı kullanmalısınız?

Bunlardan herhangi biri statik bir siteyi ücretsiz, ücretsiz HTTPS ile ve kişisel bir portfolyonun trafiğini rahatça karşılayan ücretsiz bir katmanla yayına alır. Ücretsiz katman sınırları oldukça sık değişir; bu yüzden Barındırma sayfasındaki rakamları kesin güncel değerler olarak değil, genel bir çerçeve olarak görün ve karar vermeden önce her sağlayıcının kendi fiyat sayfasına bakın.

Yapay zekâ kodlama uygulamanızdan gerçek yayın adımlarını sizinle birlikte yapmasını isteyin: “bu projeyi Netlify'a bağla” ondan istenebilecek tamamen normal bir şeydir ve genellikle hesap oluşturmayı ve ilk yayını birkaç dakikada adım adım gösterebilir.

05Özel alan adı bağlamak

Alan adı, uzantıya bağlı olarak yılda tipik olarak $10 ila 20 tutan küçük bir yıllık ücrettir; barındırmadan ayrıdır ve barındırma ücretsiz kalır. Üç parça:

1. Alan adını satın alın. Namecheap, Cloudflare Registrar ya da Google Domains'in halefi (Squarespace Domains).
2. Bir DNS kaydı ekleyin. Alan adınızı barındırıcınıza yönlendiren bir CNAME (ya da A kaydı), alan adı kayıt firmasının panelinde eklenir. Kayıt firmasının tablosunda iki satırdır: www için, barındırıcınızın verdiği adrese, örneğin your-portfolio.netlify.app adresine işaret eden bir CNAME ve çıplak alan adı için barındırıcının IP'sine işaret eden bir A kaydı.
3. Barındırıcınızda ekleyin. Aynı alan adını barındırıcınızın “özel alan adı” ayarlarına yapıştırın; HTTPS kendiliğinden kurulur.

Barındırma sayfasındaki her barındırıcının, eklemeniz gereken tam kaydı veren bir “Özel alan adı” ya da “Alan adları” sekmesi vardır; onu kopyalayın, kayıt firmanızda ekleyin ve bekleyin. DNS değişiklikleri genellikle dakikalar ile birkaç saat arasında yürürlüğe girer, bazen 24 ila 48 saate kadar sürer. Takılırsanız yapay zekâ kodlama uygulamanız kayıt firmanızın panelinde size yol gösterebilir; ayarlar sayfasının ekran görüntüsünü alın ve nereye tıklayacağınızı sorun. Asma kilit görünüyor, “güvenli değil” uyarısı yok: bitiş çizgisi budur.

06Yayın öncesi kontrol listesi

Bu listeyle geçirilecek beş dakika, bir portfolyoyu bitmemiş gösteren şeylerin çoğunu yakalar. Kontroller yukarıdaki menüdeki Yayın öncesi sayfasıdır; ilerledikçe işaretleyin.

07Sık sorulan sorular