11 Ağu 2025·7 dk
30 Dakikada Portföy Sitesi Nasıl Oluşturulur (Kod Yazmadan)
Yaklaşık 30 dakikada temiz bir portföy sitesi oluşturun—kodlama gerekmiyor. Basit bir kontrol listesi: bir şablon seçin, işleri ekleyin, alan adı bağlayın ve yayınlayın.
Yaklaşık 30 dakikada temiz bir portföy sitesi oluşturun—kodlama gerekmiyor. Basit bir kontrol listesi: bir şablon seçin, işleri ekleyin, alan adı bağlayın ve yayınlayın.
Bu hızlı yapımın sonunda, üç işi iyi yapan temiz, tek sayfalık bir portföy sitesine sahip olacaksınız: işinizi gösterir, kim olduğunuzu açıklar ve sizinle iletişim kurmayı kolaylaştırır.
Basit bir sayfa:
Bu kasıtlı olarak minimal. Tek sayfalık portföy, oluşturması daha hızlı, güncellemesi kolay ve birisi çalışmalarınızı tararken çok sayfalı sitelere göre genellikle daha iyi dönüşüm sağlar.
Bu yaklaşım, hızlıca profesyonel bir şey gerekli olan serbest çalışanlar, öğrenciler, yaratıcılar ve iş arayanlar için uygundur—özellikle işe başvuruyorsanız, müşterilere teklif sunuyorsanız veya çalışmalarınızı sosyal platformlarda paylaşıyorsanız.
30 dakika içinde kalmak için önce şunları toplayın:
30 dakikalık bir yapım, 3–5 dakikayı "tamamlanmış" görünümünü tanımlamaya ayırırsanız işe yarar. Aksi halde yazı tipleriyle uğraşmak, bölümleri yeniden düzenlemek ve ne ekleyeceğinize karar vermek zamanınızı alır.
Portföyünüzün birincil amacını seçin:
Bu hedef, en önce neyi vurgulayacağınızı belirler: işe alım için rolünüz ve sonuçlar, müşteri için teklifiniz ve süreciniz veya uzmanlık için niş çalışmalarınız.
Şunlardan birine karar verin:
Zamanla yarışıyorsanız, şimdi tek sayfa ile başlayın—daha sonra sayfalara ayırabilirsiniz.
Bir birincil CTA ve (isteğe bağlı) bir ikincil CTA seçin. Örnekler:
Sayfadaki her şey bu aksiyonları desteklemeli.
Bir şablona dokunmadan önce kısa bir satır taslağı hazırlayın:
Ben [kimi] [ne ile] yardımcı olurum, böylece [sonuç] elde ederler.
Örnek: “SaaS girişimlerine, kaybı azaltan ve aktivasyonu artıran onboarding akışları tasarlamada yardımcı oluyorum.”
Bu cümleyi inşa ederken görünür tutun—ne ekleyeceğinize ve neyi çıkaracağınıza karar vermenize yardımcı olur.
Kullandığınız oluşturucu, bu “30 dakikalık” projenin ne kadar hızlı hissedeceğini belirler. Menülerle uğraştırmayan bir şey seçin.
Daha kişiselleştirilmiş bir sonuç istiyorsanız, geleneksel bir geliştirme sürecine girmeden başka bir yol olarak Koder.ai de var: portföyünüzü sohbette tarif ettiğinizde gerçek bir React web uygulaması üreten bir platform. Kaynak kodu dışa aktarabilir, dağıtabilir/barındırabilir, özel alan adı bağlayabilir ve anlık görüntü/geri alma kullanabilirsiniz—esnek ama hızlı bir şey istiyorsanız faydalı olabilir.
Başlarken şu özelliklere öncelik verin:
Birçok araç ucuz görünür ama bir ödeme duvarına takılabilirsiniz. Şuna bakın:
Fiyat önemliyse, /pricing sayfasında katmanları karşılaştırın ve özel alan adı ile yukarıdaki özellikleri destekleyen en düşük planı seçin. Portföyünüz genişledikçe yükseltebilirsiniz.
İyi bir şablon yardımcı bir başlangıç gibi hissettirmeli—yayınlamadan önce çözmeniz gereken bir bulmaca değil. 30 dakikada hedefliyorsanız, yanlış şablon en hızlı şekilde zaman kaybettirendir.
Çalışma sergilemeye uygun bir şablon seçin: net bir hero bölümü, proje ızgarası, kısa bir Hakkında alanı ve belirgin bir İletişim bölümü. Bir iş veya etkinlik şablonuyla başlarsanız, silmek ve yeniden düzenlemekle vakit harcarsınız.
Temiz tipografi, güçlü boşluk ve beyaz alan tercih edin. Gösterilerde etkileyici görünen özel animasyonlar, alışılmadık navigasyon ve “yaratıcı” kaydırma efektleri, içeriği taramayı ve düzenlemeyi zorlaştırabilir.
Portföyünüz üründür. Şablon engel olmamalı.
Karar vermeden önce şu temel öğeleri sorunsuzca destekleyip desteklemediğini doğrulayın:
Şablon bunları doğal olarak içermiyorsa, zorlayarak eklemek sizi rahatsız eder.
Mobil önizlemeyi açıp üç şeye bakın:
Mobil görünüm şu an karışıksa, daha sonra kendiliğinden düzelmez. Daha basit bir şablon seçin ve ilerlemeye devam edin—portföy yayınlandıktan sonra görünümü yükseltebilirsiniz.
Portföyünüzün profesyonel görünmesi için bir marka rehberine gerek yok. Birkaç tutarlı seçim yeterlidir.
Zaten bir logonuz varsa, başlık ve altbilgide kullanın. Yoksa temiz bir sözcük işi (adınız iyi bir fontla) gayet yeterlidir—özellikle serbest çalışanlar için.
Butonlar, bağlantılar ve küçük vurgular için tek bir vurgu rengi seçin (büyük metin blokları için değil). Seçimi basitçe: en iyi projenizdeki bir renkten çekin.
Başlıklar için bir font, gövde yazısı için bir font ile yetinin. Birçok şablon fazla yazı stili karıştırdığı için dağınık görünür.
Okunabilirliği ön planda tutun:
Emin değilseniz, şablon varsayılanlarıyla devam edip sadece vurgu rengini değiştirin.
Tutarlılık, no-code portföy sitesini özel gösterir.
Hızlı ayarlar:
Bu ayrıntılar gösterişli efektlerden daha önemlidir ve şablonun daha cilalı görünmesini sağlar.
10 saniyelik bir tarama yapın: her arka plan üzerinde metin rahatça okunuyor mu?
Mobilde kontrast sorunları genellikle ilk ortaya çıkar; bu yüzden mobil önizlemeyi kontrol edin.
Karmaşık bir site haritasına gerek yok. Tek net bir sayfa çoğu ziyaretçinin bir dakika içinde aradığı bilgiyi verir.
Basitten karmaşığa doğru akış kullanın. Bu bölümler çoğu ziyaretçinin bir dakika içinde aradığını karşılar:
Şablonda ekstra bloklar (blog, bülten, fiyatlandırma, uzun özellik ızgaraları) varsa, şimdilik silin. Daha sonra ekleyebilirsiniz.
Hero, “neden umursamalıyım?” bölümüdür. Kısa kontrol listesi:
Kısa cümleler, net başlıklar ve nefes alacak boşluk kullanın.
Sayfa uzun ise navigasyon çubuğu ekleyin. Sayfa birkaç kaydırmada sığıyorsa, navigasyona gerek yok—düzen insanları doğal olarak yönlendirir.
Her bölümde aynı deseni kullanın: bir başlık, bir kısa giriş satırı, sonra içerik. Tutarlılık, hızlı oluşturulmuş olsa bile portföyünüzü kasıtlı gösterir.
Projeler portföyün ana noktasıdır. Her şeyi serpiştirmek yerine 3–6 güçlü çalışma seçin.
Sonraki yapmak istediğiniz işe uygun işleri seçin. Tasarımcıysanız tasarım gösterin; fotoğrafçıysanız en iyi serinizi öne koyun; genelciyseniz tutarlı kalan bir karışım seçin.
Kısa bir filtre: kısa bir görüşmede kendinizden emin şekilde açıklayamayacağınız herhangi bir şeyi çıkarın. “Ben aslında çok fazla katkı yapmadım” türü açıklamalar projeyi zayıflatır.
Her proje için aynı temel detayları ekleyin ki insanlar hızlıca tarayabilsin:
Genelde 2–5 kısa cümle yeterlidir.
Her proje için 3–6 görsel veya hareket işi ise kısa bir video kullanın. En güçlü görseli ilk sıraya koyun—o tıklatır.
Mümkünse bir “süreç” görseli ekleyin (taslak, eskiz, before/after, kontakt tablosu) ve düşünme şeklinizi gösterin—ama sayfayı bir vaka çalışması romanına döndürmeyin.
Açık başlıklar ve etiketler kullanın (örn. “Marka kimliği”, “Web yeniden tasarımı”, “Editöryel çekim”). Projede bir bağlantı varsa, açıkça belirtin: “Canlı siteyi görüntüle” veya “Son kurguyu izle.”
Hakkında bölümünüzün tek işi: birinin sizi hızlıca iletişime geçip geçmemeye karar vermesine yardımcı olmak.
Dostça bir vesikalık veya temiz bir illüstrasyon kullanın. Arka plan sade ve aydınlatma doğal olsun. Kalabalık sahneler, parti fotoğrafları ve ağır filtreler insanları sizi okumak için zorlar.
Toplam 4–6 satır hedefleyin:
Örnek:
Ben, erken aşama SaaS'ler için dönüşüm odaklı açılış sayfaları tasarlayan serbest UI tasarımcısıyım. Daha önce bir fintech girişiminin yeni onboarding akışını yayımlamasına yardımcı oldum ve aktivasyonu %18 artırdım. Bu ay 1–2 yeni müşteri projesi arıyorum.
Gerçekten kullandığınız araçları (Figma, Webflow, Notion), deneyimli olduğunuz sektörleri (sağlık, fintech, eğitim) ve ödülleri/sertifikaları yalnızca doğru ve ilgiliyse belirtin.
Alanınız uygunsa, kısa bir satırda açık etiketli bir PDF ekleyin:
“Özgeçmişi indir (PDF)”
Bunu iletişim butonunun yakınında tutun ki biri hikayenizi hızlıca okur, güven duyar ve tek kaydırmada harekete geçebilsin.
Güzel bir portföy, biriyle iletişim kurulamazsa işe yaramaz. İletişim bölümünüz belirgin, kısa ve sürtünmesiz olmalı—araştırma yok, tahmin yok.
İki seçenek hedefleyin, üçten fazlasına çıkmayın:
Daha fazlası ziyaretçiyi tereddütte bırakır. Eğer bir navigasyon varsa, bunu “İletişim” olarak etiketleyin.
Tek bir cümle, gereksiz yazışmayı azaltır ve daha iyi talepler çeker. Örnek:
"Serbest marka projeleri için gelecek ay müsaitim. Ortalama yanıt süresi: 1–2 iş günü içinde."
Bunu yalnızca gerçekse söyleyin. Eğer iş almıyorsanız, neye açık olduğunuzu belirtin (iş birlikleri, tam zamanlı roller, konuşma davetleri vb.).
Hizmet tabanlı işler için rezervasyon bağlantıları iyi olabilir, ama sadece güncel tutabilecek ve insanların bir randevu almasını sorun etmeyecek durumdaysanız ekleyin. Programınız sık değişiyorsa, e-posta + form ile devam edin.
Müşterilerle çalışıyorsanız kısa bir not ekleyin: “Berlin merkezli (CET)” veya “Küresel çalışıyorum (UTC-5).” Bu, toplantı zamanları önermeyi kolaylaştırır ve uzaktan işler için profesyonellik sinyali verir.
İletişim bağlantısını footer'da da tekrarlayın. İnsanlar kaydırır, karar verir ve oradan tıklar.
Güzel bir portföyünüz olabilir ama telefonlarda hantal veya yavaşsa insanlar kaybeder. Birkaç dakika harcayın, site cilalı hissedecektir—üstelik ekstra sayfa eklemeden.
Çoğu ziyaretçi portföyünüzü telefonda görecek. Oluşturucunun mobil görünümünü açın ve üstten alta hızlıca kaydırın.
Farklı ekran boyutlarında önizleyin (mobil, tablet, masaüstü) ve şunlara bakın:
Çoğu düzeltme basittir: padding azaltmak, tutarlı boşluk ayarlamak veya mobilde çok sütunlu blokları tek sütuna geçirmek.
Hızlı siteler daha profesyonel hissedilir. En büyük hız katilleri büyük görseller ve arka plan medyalarıdır.
Büyük görselleri sıkıştırın (özellikle proje ekran görüntüleri). Genel kural: portföy görselleri nadiren ~2000px'den geniş olmalı. Oluşturucunuzda “optimize” seçeneği varsa açın.
Büyük arka plan videolarından kaçının. Hareket istiyorsanız, hafif bir döngü veya küçük bir gömülü klip genelde yeterlidir—çalışmanız odak olmalı, başlık değil.
Her buton ve bağlantıya tıklayın—sosyal simgeler, proje kartları ve e-posta/iletişim butonu dahil.
Kontrol edin:
Yayınlamadan önce hızlı bir tur:
Portföyünüz mobil uyumlu, hızlı yüklenen ve küçük hatalardan arınmışsa, 30 dakikada yapılmış olsa bile daha güvenilir görünür.
Özel alan adı portföyünüzü tamamlanmış hissettirir—özgeçmişlerde, e-posta imzalarında ve sosyal profillerde paylaşması daha kolay olur. Yayınlama genellikle tek bir butondur. Alan adı bağlantısı birkaç dakika daha alır ama yine de basittir.
Basit ve profesyonel tutun:
Tam adınız alınmışsa küçük okunabilir varyasyonlar deneyin (orta baş harfi, “studio” veya mesleğiniz). Tire ve uzun ifadelerden kaçının—insanlar yanlış yazabilir.
Çoğu oluşturucu adım adım bir kontrol listesiyle rehberlik eder.
Alan adını oluşturucu ayarlarına bağlayın ve DNS talimatlarını dikkatle izleyin.
Genelde bir veya iki DNS kaydını (çoğunlukla bir A kaydı ve/veya CNAME) domain kayıt firmanıza kopyalarsınız. Yazım, noktalama ve kaydın kök alan adına (yourname.com) mı yoksa “www” alt alan adına mı işaret ettiği gibi ayrıntıları iki kez kontrol edin.
DNS değişiklikleri zaman alabilir. Bazı domainler dakikalar içinde bağlanırken bazıları birkaç saat sürebilir. Bağlandıktan sonra hem yourname.com hem de www.yourname.com (her ikisini kullanıyorsanız) açıp güvenlik uyarısı olmadan yüklendiğini doğrulayın.
Son olarak, tercih edilen sürümü (genellikle non-www veya www) birincil alan adı olarak ayarlayın ki her zaman tek temiz bir URL paylaşasınız.
SEO teknik gelebilir ama no-code portföy için temeller çoğunlukla basit alanlar ve net ifadeler.
Oluşturucunuzun SEO ayarlarında Sayfa Başlığı ve Meta Açıklama alanlarını bulun.
Sayfa başlığını açık ve okunaklı yapın. Güçlü bir format:
Adınız — Rol | Portföy
Örnek: Jordan Lee — Ürün Tasarımcısı | Portföy
Meta açıklama için bir kısa cümle yazın: ne yaptığınızı ve ziyaretçilerin neler bulacağını belirtin.
Örnek: “Mobil uygulamalar ve tasarım sistemleri konusunda uzman ürün tasarımcısı. Seçilmiş projeler, süreç ve iletişim bilgileri.”
Ana sayfanızda bir H1 olmalı—genellikle adınız ve rolünüz. Bu ziyaretçilere ne yaptığınızı anında gösterir.
İyi H1 örnekleri:
Sonra “Seçilmiş İşler”, “Hakkında” ve “İletişim” gibi açıklayıcı başlıklar kullanın. “Hoş geldiniz” veya “Yaptıklarım” gibi belirsiz etiketlerden kaçının.
Portföy siteleri görsel ağırlıklıdır; bu yüzden küçük resimler, hero görseli ve sonucu anlatan görsellere alt metin ekleyin.
Alt metin, tüm pikselleri açıklamak yerine ihtiyaç duyulan bilgiyi vermeli. Örnekler:
Bu erişilebilirliği artırır ve arama araçlarına daha fazla bağlam verir.
Bazı oluşturucular arama araçlarına bağlanma veya otomatik sitemap oluşturma imkanı sunar. Varsa kullanın. Yoksa, yayınlamada vakit kaybetmeyin: linki LinkedIn biyografinizde, Instagram profilinizde ve aktif olduğunuz dizinlerde paylaşın.
Paylaşmadan önce her şeyin çalıştığından ve profesyonel göründüğünden emin olun. Temiz çalışan bir site, bozuk linkleri olan gösterişli bir siteden her zaman iyidir.
Temel analitikle görüntülemeleri, proje tıklamalarını ve iletişim gönderimlerini ölçün. Bir hafta sonra en çok tıklama alan projeyi vurgulayın ve insanların görmediği proje başlıklarını yeniden yazın.
Evet. Tek sayfalık bir portföy, hızlı kararlar için çoğunlukla daha iyi çalışır çünkü taraması kolaydır.
Hedef bir akış oluşturun: Hero → İşler → Hakkında → İletişim. Site yayına çıktıktan sonra projeleri ayrı vaka çalışması sayfalarına ayırabilirsiniz.
Bitirmek için minimal tutun:
Eğer 3 projeniz yoksa, 1–2 güçlü iş ile yayınlayın ve sonra ekleyin.
Tek bir ana sonucu seçin ve kararlarınızı buna göre verin:
Karmaşıksa, sadece bu hedefi destekleyen içerileri dahil edin.
Sizi yavaşlatmayacak bir araç seçin:
Karar vermeden önce gibi ödeme engellerini kontrol edin (genellikle /pricing altında listelenir).
İhtiyacınız olan bölümleri (hero, proje ızgarası, hakkında, iletişim) zaten barındıran bir şablon seçin. Özelleştirmeye başlamadan önce mobil önizlemeye bakın.
Ağır animasyonlar, alışılmadık navigasyon veya karmaşık düzenler gerektiren şablonlardan kaçının—bunlar sorunsuz görünse bile duyarlı tasarım ve okunabilirlik düzeltmeleriyle zaman kaybettirir.
Markanızı birkaç tutarlı seçimle profesyonel gösterin:
Tutarlılık, şablon kullanıldığında bile “özelleştirilmiş” izlenimi verir.
İnsanların tarayabilmesi için tekrarlanabilir bir format kullanın:
Kısa tutun (genellikle 2–5 kısa cümle) ve en güçlü görseli öne koyun.
Hızlı okunacak basit bir yapı kullanın:
Bir dakikadan kısa tutun ve yakınında net bir sonraki adım (e-posta/iletisim düğmesi, isteğe bağlı "Özgeçmiş indir (PDF)") bulundurun.
İki seçenek sunun (en fazla üç):
Kısa bir beklenti cümlesi ekleyin (cevap süresi, müsaitlik) ve uzaktan çalışıyorsanız konum/zaman dilimini belirtin. Footer'da da iletişim bağlantısını tekrarlayın.
Hızlı kontroller:
Yayınladıktan sonra LinkedIn, e-posta imza ve sosyal profillerde paylaşın; hangi projelerin tıklama aldığını izleyin ve ana sayfanızı ona göre ayarlayın.