AI ile Portfolyo Sitesi Nasıl Yapılır

Builder’ı açmadan önce minimum kapsamı yazın. Kişisel portfolyoların çoğu çok sayfa gerektirmez, ama net içerik gerektirir.

Yaygın bir yapı şöyledir:

• Ad, rol, kısa giriş ve öne çıkan birkaç projeyle ana sayfa
• Ekran görüntüleri, özetler, kullanılan araçlar ve sonuçlarla projeler sayfası veya proje bölümleri
• Geçmiş, beceriler ve çalışma tarzıyla hakkımda sayfası
• E-posta, sosyal bağlantılar ve isteğe bağlı bir form içeren iletişim bölümü

Ayrıca sitenin kim için olduğunu da belirleyin:

• Çalışmanızı hızlıca görmek isteyen işe alım yöneticileri
• Sizin kendi projelerine uyup uymadığınızı kontrol eden müşteriler
• Sürecinizi ve zevkinizi görmek isteyen iş birlikçileri

Ardından elinizde olan içeriği listeleyin:

• Proje başlıkları
• Proje başına 1–3 ekran görüntüsü
• Kısa açıklamalar
• Canlı işe veya GitHub’a bağlantılar
• Biyografi ve profil fotoğrafı

Bunu önce yaparsanız, AI ilk denemede size genel bir şablon vermek yerine kullanılabilir bir şey oluşturmak için yeterli bağlamı alır.

Moremade’de siteyi düz bir dille tarif edersiniz. AI agent kaynak kodu yazar, size canlı önizleme sunar ve siz sohbet yoluyla düzenlemeye devam edebilirsiniz.

İlk prompt’unuz şunları kapsamalı:

• Ne tür bir portfolyo olduğu
• Hangi sayfaların veya bölümlerin gerektiği
• Hangi içeriğin ekleneceği
• Görsel yön
• İletişim formu veya bağlantılar gibi işlevsel ayrıntılar

Spesifik olun. Sadece “bana bir portfolyo yap” derseniz, sonucu düzeltmek için daha çok zaman harcarsınız.

Örnek ilk prompt:

Maya Chen adlı freelance bir product designer için kişisel bir portfolyo sitesi oluştur. Temiz, minimal bir düzen kullan; güçlü tipografi, yumuşak renkler ve bol boşluk olsun. Kısa bir hero girişi, öne çıkan projeler, hakkında bölümü, testimonials yer tutucusu ve iletişim bölümü içeren bir ana sayfa oluştur. 4 vaka inceleme kartı olan bir projects sayfası ekle. Her projede başlık, tek cümlelik özet, kullanılan araçlar ve daha fazla detay için bir buton olsun. Navigasyon, footer, mobil dostu düzen ve bir iletişim formu ekle. React ve Tailwind stil kurallarını kullan ve siteyi gösterişli değil profesyonel hissettir.

Basit bir portfolyo için önce temel sayfaları ve mantıklı bir varsayılan düzeni isteyin. Görsel ayrıntıları önizlemeyi gördükten sonra geliştirebilirsiniz.

İlk sürüm oluşturulduktan sonra canlı önizlemeyi dikkatlice inceleyin. Önce içerik yapısına, sonra görsel cilaya bakın.

Şu noktalara bakın:

• İlk ekranda hiyerarşi net mi?
• Projeler kolay taranabiliyor mu?
• Hakkımda bölümü yeterince kişisel mi?
• Butonlar, boşluklar ve yazı boyutları tutarlı mı?
• Doldurma metni gibi durup değiştirmeniz gereken bir şey var mı?

Moremade, sohbet ederek değişiklik yapmanıza izin verir ve ayrıca bir görsel denetleyici sunar; böylece bir öğeyi işaret edip düzenleyebilirsiniz. Her seferinde tek bir sorunu hedefleyen kısa takip prompt’ları kullanın.

Üç kullanışlı örnek:

• “Hero bölümünün yüksekliğini azalt, öne çıkan projeleri sayfada daha yukarı taşı ve giriş metnini daha kısa hale getir.”
• “Proje kartlarını, üstte küçük görsel, araç etiketleri ve her özetin altında kısa bir sonuç satırı olan vaka inceleme önizlemelerine dönüştür.”
• “Daha sıcak bir nötr renk paleti kullan, gövde metni kontrastını artır ve iletişim formu butonunu yalnızca mobilde tam genişlik yap.”

İlk yapı açıkça yanlış değilse, bu aşama genellikle tam bir yeniden tasarım istemekten daha hızlı ilerler.

Birçok portfolyoda veritabanı, giriş yapma veya ödeme gerekmez. İlk sürümü basit tutmak işi bitirmeyi kolaylaştırır.

Supabase’i yalnızca portfolyonun şu tür özelliklere ihtiyacı varsa kullanın:

• Gönderimleri saklayan bir iletişim formu
• Giriş arkasında korunan içerik
• Proje girdilerini verilerden güncellemek için küçük bir CMS benzeri kurulum

Stripe’ı yalnızca portfolyo aynı zamanda bir şey satıyorsa kullanın, örneğin:

• Ücretli tasarım şablonları
• Danışmanlık oturumları
• Dijital indirmeler

Moremade’de Supabase ve Stripe için yerleşik bağlantıların yanı sıra Resend ve SendGrid gibi e-posta sağlayıcıları da vardır. Bunlardan birini ekliyorsanız, gereksinimi açıkça yazın.

Örneğin:

• “İletişim formunu Supabase’e bağla, böylece gönderimler ad, e-posta ve mesajla birlikte saklansın.”
• “Benim belirlediğim fiyatla 60 dakikalık bir portfolio review oturumu için Stripe checkout sayfası ekle.”

Amacınız profesyonel bir kişisel siteyi yayına almaksa, gerçek bir ihtiyacı çözmüyorsa bu entegrasyonları atlayın.

Bir portfolyo çoğu zaman önce telefonda incelenir, özellikle e-posta veya sosyal profillerdeki bir bağlantı üzerinden. Mobil sorunlar, iyi işi özensiz göstermenın en kolay yollarından biridir.

Önizlemede şunları kontrol edin:

• Navigasyon menüsünün davranışı
• Hero metninin satır kırılımları
• Proje kartı boşlukları
• Görsel kırpılması
• Buton boyutu ve dokunma alanları
• İletişim formu alan boşlukları
• Footer bağlantılarının okunabilirliği

“Mobilde daha iyi yap” demek yerine net düzeltmeler isteyin.

Örnekler:

• “Mobil genişliğin altındaki ekranlarda hero içeriğini dikey olarak üst üste diz ve başlık boyutunu bir kademe küçült.”
• “Tüm proje küçük görsellerini aynı en-boy oranına getir ve açıklamaların telefonlarda üç satıra taşmasını engelle.”
• “İletişim bölümünde yan boşluğu artır ve küçük ekranlarda gönder düğmesini daha kolay dokunulur hale getir.”

Moremade ayrıca kod görünümü de sunar; bu, React ve Tailwind kodunda tam olarak neyin değiştiğini incelemek isterseniz kullanışlıdır.

Site doğru görünüyorsa yayınlayın. Moremade, ücretsiz yourname.moremade.ai alt alan adına tek tıkla yayın yapabilir. Ücretli planlarda özel domain bağlayabilirsiniz. Domainler Moremade içinde de satın alınabilir.

Pratik bir yayın sırası şu şekildedir:

• Önce ücretsiz alt alan adına yayınlayın
• Canlı siteyi masaüstünde ve telefonda açın
• Son içerik veya boşluk sorunlarını düzeltin
• Ücretli plandaysanız özel domain’inizi bağlayın

Moremade, web siteleri için gerçek React + Tailwind kodu üretir. Tüm kaynak kodunu istediğiniz zaman ZIP olarak dışa aktarabilir veya GitHub’a gönderebilirsiniz. Bu, bir portfolyo için önemlidir; çünkü ileride başka yerde barındırmak, bir geliştiriciye vermek veya platform dışında geliştirmeye devam etmek isteyebilirsiniz.

Siteyi sık sık değiştireceğinizi düşünüyorsanız, ücretli planlardaki sürüm geçmişi değişiklikleri karşılaştırmak ve geri almak için kullanışlıdır.

Asıl başarısızlık noktası teknik değildir. Sorun, bitmiş gibi görünen ama aslında çok az şey anlatan bir portfolyo yayınlamaktır.

Şu yaygın problemlere dikkat edin:

• Ana sayfada çok fazla bölüm olması ve net bir öncelik bulunmaması
• Ne yaptığınızı hiç açıklamayan belirsiz proje özetleri
• Şablon gibi sonuç veren genel görsel prompt’lar
• Gerçek kullanım senaryosu olmadan Stripe, giriş yapma veya veritabanı özellikleri eklemek
• Mobil incelemeyi atlamak
• Yer tutucu metin, stok görseller veya boş vaka inceleme sayfaları yayınlamak

İyi bir portfolyo genellikle birkaç basit şeyi iyi yapar:

• Kim olduğunuzu ve ne tür iş yaptığınızı söyler
• Her şeyi değil, seçilmiş projeleri gösterir
• Düşünme biçiminizi değerlendirmeye yetecek kadar detay verir
• Sizinle iletişim kurmayı kolaylaştırır

AI’yi hızlıca güçlü bir taslağa ulaşmak için kullanın, sonra zamanınızı içeriğin özünü iyileştirmeye harcayın.