Tek Sayfa Kişisel Portfolyo HTML Kodları (2026 Ücretsiz)
Dijital çağda, yeteneklerinizi sergilemek için sadece bir PDF özgeçmişe sahip olmak artık yeterli değil. İster bir Frontend geliştirici, ister bir grafik tasarımcı, isterseniz de iş arayan yeni bir mezun olun; dijital dünyadaki kartvizitiniz kendi web sitenizdir.
Peki, sıfırdan bir site kodlamak günlerce vaktinizi mi almalı? Kesinlikle hayır. Bu rehberde, Google SEO uyumlu, mobil ekranlarda kusursuz görünen ve saniyeler içinde yayına alabileceğiniz kişisel portfolyo html kodları paylaşacağız.
Neden Tek Sayfa (One-Page) Portfolyo Tasarımı Kullanmalısınız?
2026 web tasarım trendleri, kullanıcının dikkatini dağıtmayan minimalist (minimalist) yaklaşımlara odaklanıyor. Hakkımda, Hizmetler, Portfolyo ve İletişim sayfalarını ayrı ayrı yükletmek yerine tek sayfa html css kodları kullanmak size şu avantajları sağlar:
- Yüksek Yüklenme Hızı: Tüm içerik (DOM ağacı) tek seferde yüklenir. Kullanıcılar menüye tıkladığında sayfa yenilenmeden ilgili bölüme pürüzsüzce (smooth scroll) kayar.
- Mobil Odaklı Gezinme: İnsanlar artık tıklamak yerine kaydırmayı (scrolling) tercih ediyor. Tek sayfa yapısı, mobil cihazlarda Instagram veya X (Twitter) kullanıyormuş hissi verir.
- Hikaye Anlatıcılığı: Ziyaretçiyi bir huninin (funnel) içine alırsınız. Sizi tanır, yeteneklerinizi görür, referanslarınızı inceler ve en altta iletişim formuyla size ulaşır.
Ücretsiz Kişisel Portfolyo HTML Kodları (2026 Modern Şablon)
Sizler için özel olarak kodladığımız bu html portfolyo şablonu, hiçbir dış kütüphaneye (Bootstrap, jQuery vb.) ihtiyaç duymadan sadece saf (Vanilla) HTML5 ve CSS3 ile çalışır. Kodu kopyalayarak .html uzantılı bir dosyaya yapıştırmanız yeterlidir.
(Not: Aşağıdaki kod hem açık/koyu (light/dark) tonları dengeli kullanan bir tasarıma hem de hazır mobil menü iskeletine sahiptir.)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="[Adınız Soyadınız] - Kişisel Portfolyo Web Sitesi">
<title>[Adınız Soyadınız] | Dijital Portfolyo</title>
<style>
/* Modern Reset ve Temel Değişkenler */
:root {
--primary-color: #3b82f6;
--secondary-color: #0f172a;
--bg-light: #f8fafc;
--text-dark: #334155;
--text-light: #f1f5f9;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, sans-serif; scroll-behavior: smooth; }
body { background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; }
/* Navbar (Üst Menü) */
header { background-color: var(--secondary-color); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 999; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.logo { font-size: 1.8rem; font-weight: 800; color: var(--text-light); text-decoration: none; }
.logo span { color: var(--primary-color); }
nav ul { list-style: none; display: flex; gap: 2rem; }
nav a { color: var(--text-light); text-decoration: none; font-weight: 500; font-size: 1rem; transition: color 0.3s ease; }
nav a:hover { color: var(--primary-color); }
/* Hero Section (Karşılama Ekranı) */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, #1e293b, #0f172a); color: var(--text-light); padding: 0 5%; }
.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; letter-spacing: -1px; }
.hero p { font-size: 1.25rem; color: #cbd5e1; max-width: 600px; margin-bottom: 2.5rem; }
.btn-primary { padding: 12px 30px; background-color: var(--primary-color); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1.1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; display: inline-block; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4); }
/* Genel Seksiyon Ayarları */
.section-padding { padding: 100px 5%; max-width: 1200px; margin: 0 auto; }
.section-title { font-size: 2.5rem; color: var(--secondary-color); text-align: center; margin-bottom: 3rem; position: relative; }
.section-title::after { content: ''; width: 60px; height: 4px; background: var(--primary-color); display: block; margin: 10px auto 0; border-radius: 2px; }
/* Yetenekler (Skills) Kartları */
.skills-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: transform 0.3s ease; border-top: 4px solid transparent; }
.card:hover { transform: translateY(-5px); border-top-color: var(--primary-color); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--secondary-color); }
/* İletişim ve Footer */
.contact-section { background-color: #e2e8f0; text-align: center; }
footer { background-color: var(--secondary-color); color: #94a3b8; text-align: center; padding: 1.5rem; font-size: 0.9rem; }
/* Mobil Uyumluluk */
@media (max-width: 768px) {
nav ul { display: none; } /* Mobil menü ikonu eklenebilir */
.hero h1 { font-size: 2.5rem; }
.section-padding { padding: 60px 5%; }
}
</style>
</head>
<body>
<!-- Navigasyon -->
<header>
<a href="#" class="logo">Portfolyo<span>.</span></a>
<nav>
<ul>
<li><a href="#hakkimda">Hakkımda</a></li>
<li><a href="#yetenekler">Yetenekler</a></li>
<li><a href="#projeler">Projeler</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<!-- Karşılama (Hero) -->
<section class="hero" id="hakkimda">
<h1>Merhaba, Ben [Adınız Soyadınız]</h1>
<p>Kullanıcı odaklı, hızlı ve modern web arayüzleri geliştiren tutkulu bir Front-End (Arayüz) geliştiricisiyim.</p>
<a href="#iletisim" class="btn-primary">Benimle İletişime Geçin</a>
</section>
<!-- Yetenekler -->
<section class="section-padding" id="yetenekler">
<h2 class="section-title">Uzmanlık Alanlarım</h2>
<div class="skills-container">
<div class="card">
<h3>UI/UX Tasarım</h3>
<p>Ziyaretçileri yormayan, dönüşüm oranı yüksek, modern ve temiz kullanıcı arayüzleri tasarlıyorum.</p>
</div>
<div class="card">
<h3>HTML5 & CSS3</h3>
<p>Arama motoru dostu (SEO) semantik etiketler ve modern CSS mimarileri ile piksel mükemmelliğinde tasarımlar yapıyorum.</p>
</div>
<div class="card">
<h3>Modern JavaScript</h3>
<p>Statik sitelere hayat veriyor, API entegrasyonları ile dinamik web uygulamaları geliştiriyorum.</p>
</div>
</div>
</section>
<!-- İletişim -->
<section class="section-padding contact-section" id="iletisim">
<h2 class="section-title">Projeye Başlayalım Mı?</h2>
<p style="margin-bottom: 2rem; font-size: 1.1rem;">Fikrinizi hayata geçirmek için buradayım. Bana e-posta üzerinden ulaşabilirsiniz.</p>
<a href="mailto:ornek@mailadresiniz.com" class="btn-primary">ornek@mailadresiniz.com</a>
</section>
<!-- Alt Bilgi (Footer) -->
<footer>
<p>© 2026 [Adınız Soyadınız]. Tüm Hakları Saklıdır. Tutkuyla kodlandı.</p>
</footer>
</body>
</html>
Kişisel Web Sitesi Kodları Nasıl Özelleştirilir?
Yukarıdaki kodu kopyalayıp kullanmak işin en kolay kısmıdır. Sizi rakiplerinizden ayıracak olan şey, bu koda katacağınız “kişisel dokunuşlardır”. Kod Önizleme Platformumuzda yer alan ücretsiz geliştirici araçları ile bu şablonu tamamen kendinize has bir hale getirebilirsiniz:
- Kodu Canlı Test Edin: Kodu bilgisayarınızda kurmaya çalışmadan önce, hemen şimdi Canlı HTML Editörü aracımıza yapıştırın. Anında çalışan sonuçları görün, CSS kodlarını değiştirerek tasarımı canlı olarak izleyin.
- Kendi Renklerinizi Yaratın: Arka planda kullandığımız mavi/lacivert renkleri tarzınızı yansıtmıyor mu? Sorun değil! CSS Gradient Generator sayfamıza gidin, kendi marka renklerinizi seçin ve elde ettiğiniz “linear-gradient” kodunu
.herosınıfının içine yapıştırın. - Modern Kart Gölgeleri: Yetenekler bölümündeki beyaz kartlara (card), daha estetik bir 3D hissiyat vermek için CSS Box Shadow aracımızla pürüzsüz gölgeler tasarlayın ve CSS dosyanıza ekleyin.
- SEO Ayarlarını Unutmayın: Sitenizi yayınlamadan önce, Google’da isminiz aratıldığında profesyonel görünmesi için Meta Etiket Jeneratörü aracımızı kullanarak başlık ve açıklama (Description) kodlarınızı oluşturun.
Portfolyonuzu İnternette Ücretsiz Yayınlama (Hosting)
Bu harika hazır cv web sitesi tasarımını hazırladınız, peki insanlar bunu nasıl görecek? Başlangıç aşamasında sunucu (hosting) masrafı ödemenize gerek yok.
Kodu index.html olarak kaydedin. Ardından yazılımcıların en büyük platformu olan GitHub’a üye olun. Bir depo (Repository) oluşturarak bu dosyayı yükleyin. Ardından GitHub Pages özelliğini aktif ederek web sitenizi “adinizsoyadiniz.github.io” şeklinde tamamen ücretsiz ve SSL sertifikalı (Güvenli) bir şekilde tüm dünyaya yayınlayabilirsiniz.
Sıkça Sorulan Sorular (FAQ)
Tek sayfalık siteler SEO açısından dezavantajlı mıdır?
Eğer hedefiniz çok fazla makale yayınlamaksa evet, ancak bir portfolyo için hayır. Tek sayfalık sitelerde tüm önemli anahtar kelimeleri ve projelerinizi aynı sayfaya topladığınız için, isminizle yapılan aramalarda (Kişisel Marka SEO’su) çok daha hızlı yükselirsiniz.
Bu portfolyo şablonunu mobil cihazlara uyumlu mu?
Evet. CSS içerisindeki @media sorguları sayesinde, web sitesi telefon, tablet ve masaüstü bilgisayarlarda otomatik olarak şekil değiştirir ve içeriği ekrana mükemmel sığdırır.
Şablona JavaScript eklemeli miyim?
Tasarım sadece HTML ve CSS ile çalışmaktadır. Ancak sayfayı kaydırırken animasyonlar eklemek (Scroll reveal) veya yetenek çubuklarını (Progress bar) hareket ettirmek isterseniz basit JavaScript kodları ekleyebilirsiniz. Test etmek için Canlı JS Editörümüzü kullanabilirsiniz.
Bir yanıt yazın