etiketi navigasyon menülerini belirtir. Semantik HTML kullanımı, arama motorlarının sitenizi daha iyi anlamasına yardımcı olur ve erişilebilirlik açısından da büyük faydalar sağlar. Bu nedenle, projemizde modern ve anlamlı HTML etiketlerini tercih edeceğiz.
İkinci olarak, CSS (Cascading Style Sheets) , HTML tarafından oluşturulan iskelete görsel bir estetik kazandıran araçtır. CSS olmadan, web sayfaları sıkıcı ve düz metin yığınlarından ibaret olurdu. Renkler, yazı tipleri, boyutlar, boşluklar, konumlandırmalar ve düzenler gibi tüm görsel özellikler CSS ile kontrol edilir. Projemizin çekiciliğini artırmak ve farklı ekran boyutlarına uyum sağlamak (duyarlı tasarım) için Flexbox ve Grid gibi modern CSS düzenleme tekniklerini kullanacağız. Ayrıca, @media query’ler aracılığıyla mobil cihazlardan masaüstü bilgisayarlara kadar tüm ekranlarda sorunsuz bir deneyim sunmayı hedefleyeceğiz. Görsel olarak etkileyici bir portföy oluşturmak, potansiyel işverenlerin dikkatini çekmek için kritik bir adımdır.
Üçüncü olarak, JavaScript , web sayfalarını dinamik ve etkileşimli hale getiren programlama dilidir. HTML ve CSS statik görsellik sunarken, JavaScript kullanıcı eylemlerine yanıt veren, içerik değiştiren, animasyonlar başlatan ve sunucuyla iletişim kuran “beyni” temsil eder. Bir menüyü açıp kapatmak, bir forma doğrulama eklemek veya bir galeriye kaydırma özelliği katmak gibi tüm etkileşimler JavaScript ile mümkün olur. Projemizde, kullanıcıların portföyünüzle akıcı bir şekilde etkileşim kurmasını sağlamak için JavaScript’i aktif olarak kullanacağız. Bu, ziyaretçilerin sitenizde daha uzun süre kalmasına ve içeriğinizle daha derinlemesine etkileşim kurmasına yol açar.
Son olarak, GSAP (GreenSock Animation Platform) , özellikle karmaşık ve yüksek performanslı web animasyonları oluşturmak için tasarlanmış güçlü bir JavaScript kütüphanesidir. Saf CSS animasyonlarına kıyasla çok daha esnek, güvenilir ve tarayıcılar arası uyumlu animasyonlar sunar. GSAP ile nesnelerin pozisyonunu, boyutunu, opaklığını, rengini ve daha birçok özelliğini kolayca canlandırabilirsiniz. Özellikle ScrollTrigger eklentisi sayesinde, sayfa kaydırma hareketlerine duyarlı etkileyici animasyonlar oluşturmak mümkündür. Portföy klonumuzda, GSAP’i kullanarak giriş animasyonları, bölüm geçişleri ve genel UI/UX akıcılığı için profesyonel dokunuşlar ekleyeceğiz. Bu, projenize gerçekten “wow” faktörünü katacak ve onu diğerlerinden ayıracaktır. Bu dört teknolojinin birleşimi, sadece estetik olarak hoş değil, aynı zamanda işlevsel ve kullanıcı dostu bir web sitesi oluşturmamızı sağlayacaktır.
Portföy Klonu Projesine Nereden Başlamalıyız? Geliştirme Ortamı ve Temel Kurulum
Herhangi bir başarılı web projesinin temelinde sağlam bir başlangıç yatar. Portföy klonu projenize başlarken, doğru geliştirme ortamını kurmak ve temel dosya yapısını oluşturmak, ilerleyen aşamalarda karşılaşabileceğiniz olası sorunları minimize eder ve projenizi daha düzenli hale getirir. İlk adımımız, projemiz için bir çalışma klasörü oluşturmak olmalıdır. Bu klasör, tüm HTML, CSS, JavaScript ve muhtemel görselleri içerecektir.
Çalışma klasörünüzü oluşturduktan sonra, içerisine temel dosyalarımızı ekleyelim:
index.html: Web sitemizin ana sayfası ve tüm içeriği barındıracak HTML dosyamız.style.css: Web sitemizin tüm görsel stil tanımlamalarını içerecek CSS dosyamız.script.js: Web sitemizin dinamik etkileşimlerini ve GSAP animasyonlarını yönetecek JavaScript dosyamız.İsteğe bağlı olarak images/ veya assets/ gibi klasörler, projenizde kullanacağınız görselleri ve diğer medya dosyalarını düzenli tutmak için eklenebilir.
Bir sonraki önemli adım, kod yazmak için bir metin düzenleyici seçmektir. Visual Studio Code (VS Code) , web geliştiricileri arasında popülerliğini kanıtlamış, zengin özelliklere sahip, ücretsiz ve açık kaynaklı bir editördür. Canlı sunucu (Live Server) eklentisi gibi pek çok faydalı uzantısıyla geliştirme sürecinizi hızlandırır. Bu rehber boyunca VS Code kullandığınız varsayılmaktadır.
GSAP entegrasyonu, projemizin dinamik animasyonlar açısından kalbini oluşturacaktır. GSAP’i projenize eklemenin iki yaygın yolu vardır: CDN (Content Delivery Network) veya bir paket yöneticisi (NPM/Yarn) aracılığıyla. Hızlı başlangıç ve basit projeler için CDN kullanımı oldukça pratiktir. index.html dosyanızın
kapanış etiketinden hemen önce aşağıdaki CDN bağlantılarını ekleyerek GSAP’i projenize dahil edebilirsiniz:
Bu şekilde, script.js dosyanızdaki kodlar GSAP kütüphanesine erişebilecek ve animasyonlarınızı tanımlayabilecektir. Proje klonlama aşamasında, orijinal sitenin genel düzenini, renk paletini ve tipografisini dikkatlice incelemek önemlidir. Bu, kendi tasarım kararlarınızı verirken size rehberlik edecek ve klonunuzun otantikliğini artıracaktır. Unutmayın, iyi bir başlangıç, projenizin geri kalanının sağlam temeller üzerinde yükselmesini sağlar. Bu yüzden bu adımları özenle takip etmek, sizi başarıya taşıyacaktır.
Uzman İpucu: Projenizin kaynak kontrolünü sağlamak için Git ve GitHub kullanmayı ihmal etmeyin. Bu, versiyon kontrolü yapmanıza, farklı özellikler üzerinde güvenle çalışmanıza ve olası hataları geri almanıza olanak tanır.
HTML İskeletini Nasıl Oluştururuz? Semantik Yapı ve Temel Bölümler
Bir portföy web sitesinin omurgasını oluşturan HTML yapısı, projenizin hem işlevselliği hem de arama motoru optimizasyonu (SEO) açısından kritik öneme sahiptir. Semantik HTML5 etiketlerini kullanarak, web sitemizin içeriğini anlamlı bir şekilde düzenleyecek ve böylece hem tarayıcılar hem de yardımcı teknolojiler (ekran okuyucular gibi) için daha erişilebilir hale getireceğiz. Bu bölümde, tipik bir portföy web sitesinin ana bölümlerini ve bunların semantik HTML etiketleri ile nasıl oluşturulacağını adım adım inceleyeceğiz.
Her HTML belgesi standart bir yapıya sahiptir. Aşağıdaki temel şablon, projemizin başlangıç noktası olacaktır:
[Adınız/Proje Adı] Portföy
Merhaba, Ben [Adınız Soyadınız]
Yaratıcı bir [Mesleğiniz] olarak, dijital deneyimler tasarlıyorum.
Projelerimi Gör
Hakkımda
[Kısa bir özgeçmiş veya kendini tanıtma yazısı]
Bu temel iskelet, modern bir portföy web sitesinde bulunması gereken tüm ana bölümleri içermektedir:
) içerir. Responsive tasarım için burger menü iconları da burada konumlandırılabilir. ) halinde sergilediğiniz yerdir. Her kart, projenin küçük bir resmini, başlığını ve kısa bir açıklamasını içermelidir.
Bu semantik etiketlerin kullanımı, sadece web sitenizin yapısını organize etmekle kalmaz, aynı zamanda erişilebilirlik standartlarını karşılamasına ve arama motorları tarafından daha kolay indekslenmesine yardımcı olur. Bu, sizin için SEO açısından önemli bir avantaj sağlayacaktır. Gelecek bölümlerde bu HTML yapısına CSS ile stil kazandıracak ve JavaScript ile dinamik etkileşimler ekleyeceğiz.
CSS ile Portföyümüze Stil Nasıl Katarız? Duyarlı Tasarım ve Modern Yaklaşımlar
HTML iskeletini oluşturduktan sonra, sıra geldi bu yapıya hayat vermeye: CSS ile görsel bir estetik kazandırmaya. Portföyünüzün sadece işlevsel değil, aynı zamanda görsel olarak da çekici olması, ziyaretçiler üzerinde bırakacağınız ilk izlenim açısından kritik öneme sahiptir. Bu bölümde, projemize nasıl stil vereceğimizi, duyarlı tasarımı nasıl uygulayacağımızı ve modern CSS yaklaşımlarını nasıl kullanacağımızı detaylıca inceleyeceğiz.
style.css dosyamızda başlayarak, tüm tarayıcılarda tutarlı bir başlangıç noktası sağlamak için genellikle bir "CSS Reset" veya "Normalize.css" uygulamak iyi bir yöntemdir. Ayrıca, projemizde sıkça kullanacağımız renkler ve yazı tipi boyutları gibi değişkenleri tanımlamak için CSS özel özelliklerini (CSS Custom Properties veya değişkenler) kullanabiliriz. Bu, tasarımda esneklik sağlar ve ileride değişiklik yapmayı kolaylaştırır.
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Kök değişkenler */
:root {
--primary-color: #007bff; /* Ana renk */
--secondary-color: #6c757d; /* İkincil renk */
--background-dark: #1a1a1a; /* Koyu arka plan */
--text-light: #f8f9fa; /* Açık metin rengi */
--font-family-sans: 'Montserrat', sans-serif;
--font-family-serif: 'Merriweather', serif;
}
body {
font-family: var(--font-family-sans);
line-height: 1.6;
background-color: var(--background-dark);
color: var(--text-light);
overflow-x: hidden; /* Yatay kaydırmayı engelle */
}
/* Navigasyon Stilleri */
header {
background-color: var(--background-dark);
padding: 1rem 0;
position: fixed;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.logo a {
color: var(--primary-color);
text-decoration: none;
font-size: 1.8rem;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li a {
color: var(--text-light);
text-decoration: none;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
}
.nav-links li a:hover {
color: var(--primary-color);
}
/* Hero Bölümü */
.hero {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #222; /* Koyu bir hero arka planı */
background-size: cover;
background-position: center;
position: relative;
padding-top: 80px; /* Header yüksekliği kadar boşluk */
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
.hero-content p {
font-size: 1.5rem;
margin-bottom: 2rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.btn {
display: inline-block;
background-color: var(--primary-color);
color: var(--text-light);
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: darken(var(--primary-color), 10%); /* Daha koyu bir ton */
}
/* Genel Bölüm Stilleri */
section {
padding: 6rem 2rem;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
section h2 {
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--primary-color);
}
/* Duyarlı Tasarım (Media Queries) */
.burger-menu {
display: none; /* Masaüstünde gizle */
cursor: pointer;
}
.burger-menu div {
width: 25px;
height: 3px;
background-color: var(--text-light);
margin: 5px;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
nav {
padding: 0 1rem;
}
.nav-links {
position: fixed;
right: 0;
top: 0;
height: 100vh;
width: 70%;
background-color: var(--background-dark);
flex-direction: column;
justify-content: space-around;
align-items: center;
transform: translateX(100%); /* Başlangıçta sağda gizle */
transition: transform 0.5s ease-in;
z-index: 999;
}
.nav-links li {
opacity: 0;
}
.nav-links.nav-active {
transform: translateX(0%); /* Aktif olduğunda görünür yap */
}
.burger-menu {
display: block; /* Mobil cihazlarda göster */
}
/* Burger menü animasyonu */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
font-size: 1.2rem;
}
section {
padding: 4rem 1rem;
}
}
Yukarıdaki CSS kod bloğu, projemizin genel stilini, navigasyonunu ve hero bölümünü şekillendiriyor. Özellikle @media query, web sitemizin farklı ekran boyutlarına nasıl uyum sağladığını gösteriyor. Mobil cihazlarda, geleneksel navigasyon menüsü gizlenerek yerine bir "burger menü" ikonu çıkıyor. Bu ikon tıklandığında, navigasyon bağlantıları ekranın sağ tarafından içeri kayarak açılıyor. Bu, kullanıcı deneyimini iyileştiren modern bir yaklaşımdır.
Duyarlı tasarım, günümüz web geliştiriciliğinin olmazsa olmazıdır. Kullanıcılarınızın tablet, telefon veya masaüstü bilgisayar gibi farklı cihazlardan sitenize erişebileceğini unutmayın. Bu nedenle, CSS'inizi yazarken "mobil öncelikli" bir yaklaşım benimsemek, yani önce küçük ekranlar için stil yazıp daha sonra daha büyük ekranlar için stilleri özelleştirmek, en iyi uygulamalardan biridir.
Ayrıca, tipografi seçimi ve renk paleti, portföyünüzün profesyonel görünümünü büyük ölçüde etkiler. Okunaklı yazı tipleri ve uyumlu renkler seçmek, kullanıcı deneyimini önemli ölçüde artırır. Flexbox ve CSS Grid gibi modern düzenleme araçlarını kullanarak, içeriklerinizi esnek ve düzenli bir şekilde konumlandırabilirsiniz. Proje kartları veya galeri bölümleri gibi öğeleri düzenlerken bu özellikler paha biçilmezdir. Özellikle .project-grid sınıfı için CSS Grid kullanarak, farklı boyutlardaki ekranlarda projelerinizi otomatik olarak uygun sütunlara yerleştirebilirsiniz.
Kısacası, CSS sadece bir stil dili değil, aynı zamanda kullanıcı arayüzü (UI) ve kullanıcı deneyimi (UX) tasarımının temel aracıdır. Doğru CSS yaklaşımlarıyla, portföy klonunuz sadece fonksiyonel değil, aynı zamanda göz alıcı ve erişilebilir olacaktır.
JavaScript ile Etkileşimi Nasıl Sağlarız? DOM Manipülasyonu ve Olay Dinleyicileri
HTML ve CSS ile portföyümüzün iskeletini ve görünümünü oluşturduktan sonra, sıra geldi web sitemize dinamik etkileşimler katmaya. JavaScript, bir web sitesini statik bir belge olmaktan çıkarıp, kullanıcı eylemlerine yanıt veren, canlı ve etkileşimli bir deneyime dönüştüren programlama dilidir. Bu bölümde, JavaScript'i kullanarak DOM (Document Object Model) manipülasyonunu nasıl yapacağımızı, olay dinleyicilerini (event listeners) nasıl ekleyeceğimizi ve özellikle mobil menü (burger menü) işlevselliğini nasıl hayata geçireceğimizi adım adım inceleyeceğiz.
JavaScript'in gücü, web sayfasının tüm öğelerine (HTML elemanlarına) erişme, onları değiştirme, kaldırma veya yenilerini ekleme yeteneğinde yatar. Bu işleme DOM manipülasyonu denir. Örneğin, bir butona tıklandığında bir metni değiştirebilir, bir resmi gizleyebilir veya yeni bir içerik yükleyebilirsiniz. Olay dinleyicileri ise, belirli bir olay (tıklama, fare hareketi, klavye girişi vb.) gerçekleştiğinde çalışacak fonksiyonları tanımlamanıza olanak tanır.
script.js dosyamızda başlayarak, ilk olarak HTML elemanlarımıza JavaScript ile erişmemiz gerekiyor. Bunu document.querySelector() veya document.querySelectorAll() gibi metotlarla yaparız. Portföy projemizde, navigasyon menüsünü açıp kapatmak için burger menü ikonunu ve menü bağlantılarını seçeceğiz.
const navSlide = () => {
const burger = document.querySelector('.burger-menu');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
// Burger Menüye Tıklama Olayı
burger.addEventListener('click', () => {
// Navigasyonu Aç/Kapat
nav.classList.toggle('nav-active');
// Navigasyon Bağlantılarına Animasyon Ekle
navLinks.forEach((link, index) => {
if (link.style.opacity) {
link.style.opacity = ''; // Stili temizle
} else {
link.style.opacity = '1';
link.style.transition = opacity 0.5s ease forwards ${index / 7 + 0.5}s;
}
});
// Burger Menü Animasyonu
burger.classList.toggle('toggle');
});
// Navigasyon bağlantılarına tıklandığında menüyü kapat
navLinks.forEach(link => {
link.addEventListener('click', () => {
if (nav.classList.contains('nav-active')) {
nav.classList.remove('nav-active');
burger.classList.remove('toggle');
navLinks.forEach(item => {
item.style.opacity = ''; // Stili temizle
item.style.transition = ''; // Geçişi de temizle
});
}
});
});
};
navSlide(); // Fonksiyonu çağır
Yukarıdaki kod bloğunda, navSlide adında bir fonksiyon tanımladık. Bu fonksiyonun içinde:
burger değişkeni, hamburger menü ikonunu temsil eden HTML öğesini seçer.nav değişkeni, navigasyon bağlantılarını içeren listeyi seçer.navLinks değişkeni ise, her bir navigasyon bağlantısını (li) toplar.
burger.addEventListener('click', ...) satırı, burger menü ikonuna her tıklandığında belirli bir fonksiyonun çalışmasını sağlar. Bu fonksiyonun içinde:
nav.classList.toggle('nav-active'): Navigasyon menüsünün nav-active sınıfını ekler veya kaldırır. Bu sınıf, CSS'imizde menüyü görünür hale getirmek veya gizlemek için kullanılır.navLinks.forEach(...): Menü açıldığında, her bir navigasyon bağlantısının belirli bir gecikmeyle görünmesini sağlayan basit bir animasyon ekler. Bu, kullanıcıya daha akıcı ve modern bir deneyim sunar.burger.classList.toggle('toggle'): Burger menü ikonunun kendi animasyonunu (çizgilerin çarpı şeklini alması gibi) tetikler.
Ayrıca, mobil menü açıkken herhangi bir navigasyon bağlantısına tıklandığında menünün otomatik olarak kapanmasını sağlayan ek bir olay dinleyici ekledik. Bu, kullanıcı deneyimi açısından oldukça önemlidir, çünkü kullanıcıların her seferinde menüyü manuel olarak kapatmasına gerek kalmaz.
JavaScript ile yapılabilecekler bunlarla sınırlı değil. Örneğin, bir iletişim formunun gönderilmeden önce alanlarının dolu olup olmadığını kontrol etmek (form doğrulama), sayfa içinde sorunsuz kaydırma (smooth scroll) efektleri eklemek veya kullanıcı belirli bir bölüme geldiğinde bir öğenin görünümünü değiştirmek gibi pek çok etkileşimi JavaScript ile yönetebiliriz. Bu dinamik öğeler, portföyünüzü sıradan olmaktan çıkarıp, ziyaretçilerin aklında kalan unutulmaz bir deneyime dönüştürecektir.
GSAP ile Animasyonları Nasıl Canlandırırız? Akıcı Geçişler ve ScrollTrigger Büyüsü
Portföyünüzün sadece işlevsel olması yeterli değildir; aynı zamanda estetik ve akıcı bir kullanıcı deneyimi sunması da gerekir. İşte bu noktada GSAP (GreenSock Animation Platform) devreye giriyor. GSAP, web sitenize profesyonel düzeyde, yüksek performanslı ve tarayıcılar arası uyumlu animasyonlar eklemenizi sağlayan güçlü bir JavaScript kütüphanesidir. Bu bölümde, GSAP'in temel özelliklerini, nasıl kullanıldığını ve özellikle ScrollTrigger eklentisiyle kaydırma tabanlı etkileyici animasyonları nasıl oluşturabileceğimizi keşfedeceğiz.
GSAP'in CDN bağlantısını index.html dosyamıza eklediğimizden emin olduktan sonra, script.js dosyamızda animasyonlarımızı tanımlamaya başlayabiliriz. GSAP'in temel animasyon yöntemleri şunlardır:
gsap.to(): Bir öğeyi mevcut durumundan hedeflediğiniz duruma doğru canlandırır.gsap.from(): Bir öğeyi hedeflediğiniz durumdan mevcut durumuna doğru canlandırır (genellikle sayfa yüklenirken gizli olan bir öğeyi görünür hale getirmek için kullanılır).gsap.fromTo(): Bir öğeyi başlangıç durumundan hedef duruma doğru canlandırır.
Her animasyon metodunda, ilk parametre animasyon uygulanacak hedef öğe (bir CSS seçicisi veya DOM nesnesi), ikinci parametre ise animasyon özelliklerini içeren bir obje (duration, x, y, opacity, rotation vb.) olur.
Örnek olarak, sayfa yüklendiğinde "Hero" bölümümüzdeki metinleri aşağıdan yukarıya doğru ve opaklaşarak görünür hale getiren bir animasyon oluşturalım:
// GSAP ile başlangıç animasyonları
gsap.from(".hero-content h1", {
duration: 1,
y: 50, // Y ekseninde 50px aşağıdan başla
opacity: 0,
ease: "power3.out" // Animasyon hızlandırma eğrisi
});
gsap.from(".hero-content p", {
duration: 1,
y: 50,
opacity: 0,
ease: "power3.out",
delay: 0.3 // Biraz gecikmeyle başla
});
gsap.from(".hero-content .btn", {
duration: 1,
y: 50,
opacity: 0,
ease: "power3.out",
delay: 0.6
});
Bu kod, hero bölümündeki başlığı, paragrafı ve butonu sayfa yüklendiğinde kademeli olarak canlandırır. delay özelliği, her bir öğenin animasyonunun farklı zamanlarda başlamasını sağlayarak daha dinamik bir giriş efekti yaratır. ease özelliği ise animasyonun hızlanma/yavaşlama eğrisini kontrol eder, böylece daha doğal bir hareket sağlar.
ScrollTrigger ile Kaydırma Tabanlı Animasyonlar
GSAP'in en güçlü eklentilerinden biri olan ScrollTrigger, sayfa kaydırma hareketlerine duyarlı animasyonlar oluşturmanıza olanak tanır. Bir öğenin görünür hale gelmesiyle tetiklenen (on-scroll reveal) animasyonlar, bir öğeyi kaydırma çubuğunun ilerlemesine göre hareket ettirme (pinning) veya bir video animasyonunu kaydırma hızına göre kontrol etme gibi karmaşık senaryoları kolayca uygulayabilirsiniz.
Örnek olarak, "Projelerim" bölümümüz sayfada görünür hale geldiğinde her bir proje kartının alttan yukarı doğru uçarak gelmesini sağlayalım:
// ScrollTrigger kayıt
gsap.registerPlugin(ScrollTrigger);
// Proje kartları için ScrollTrigger animasyonu
gsap.utils.toArray(".project-card").forEach(card => {
gsap.from(card, {
opacity: 0,
y: 100, // Alttan 100px yukarıdan başla
duration: 1,
ease: "power3.out",
scrollTrigger: {
trigger: card, // Animasyonu tetikleyecek öğe
start: "top 80%", // Öğenin üst kısmı viewport'un %80'ine geldiğinde başla
end: "bottom 20%",
toggleActions: "play none none none" // Animasyonun nasıl tetikleneceğini belirle (play, pause, resume, reverse)
// markers: true // Geliştirme için tetikleyici işaretleri gösterir
}
});
});
// Hakkımda bölümü için daha basit bir animasyon
gsap.from(".about img", {
opacity: 0,
scale: 0.8,
duration: 1,
ease: "power2.out",
scrollTrigger: {
trigger: ".about",
start: "top 75%",
toggleActions: "play none none none"
}
});
Bu kod bloğu, .project-card sınıfına sahip her bir öğe için ayrı bir ScrollTrigger animasyonu oluşturur. trigger: card ifadesi, her bir kartın kendi görünürlüğü ile animasyonu tetiklemesini sağlar. start: "top 80%", kartın üst kenarı ekranın üstünden %80 aşağıya indiğinde animasyonun başlayacağını belirtir. toggleActions: "play none none none" ise animasyonun sadece bir kez oynanacağını (sayfa aşağı kaydırıldığında) ve geri kaydırıldığında veya diğer durumlarda tekrar oynamayacağını belirtir.
Uzman İpucu: GSAP animasyonlarını optimize etmek için 'will-change' CSS özelliğini kullanabilirsiniz. Animasyon başlayana kadar bu özelliği 'transform' veya 'opacity' gibi değerlere ayarlamak, tarayıcıya render için önceden hazırlık yapmasını söyleyerek performansı artırabilir. Ancak, animasyon bitince bu özelliği kaldırmayı unutmayın, aksi takdirde bellekte yer işgal edebilir.
GSAP, sadece basit giriş/çıkış animasyonlarıyla sınırlı değildir. Timeline özelliği ile birden fazla animasyonu sıralı veya eşzamanlı olarak yürütebilir, daha karmaşık ve senaryolu animasyon akışları oluşturabilirsiniz. Ayrıca, Draggable, Flip gibi diğer eklentileriyle de kullanıcı deneyiminizi zenginleştirebilirsiniz. Bu kütüphane sayesinde, portföy klonunuz sıradan bir web sitesi olmaktan çıkıp, ziyaretçileri büyüleyen, dinamik ve akılda kalıcı bir deneyime dönüşecektir. Profesyonel bir görünüm için GSAP'ten faydalanmak, projelerinizi diğerlerinden ayırmanın en etkili yollarından biridir.
İleri Düzey İpuçları ve Optimizasyon Teknikleri Nelerdir? Performans, Erişilebilirlik ve SEO
Bir portföy klonu oluşturmak sadece kod yazmakla bitmez; aynı zamanda projenizin sadece görsel olarak değil, aynı zamanda teknik olarak da optimize edilmiş olmasını sağlamak gerekir. Performans, erişilebilirlik ve arama motoru optimizasyonu (SEO), modern web geliştirmenin temel taşlarıdır ve projenizin başarısı için kritik öneme sahiptir. Bu bölümde, portföy klonunuzu daha iyi hale getirecek ileri düzey ipuçlarını ve optimizasyon tekniklerini inceleyeceğiz.
1. Performans Optimizasyonu
Hızlı yüklenen bir web sitesi, kullanıcı deneyimi açısından olmazsa olmazdır. Kimse yavaş bir siteyi beklemek istemez. Performansı artırmak için şunları göz önünde bulundurmalısınız:
Görsel Optimizasyonu: Portföyünüzdeki tüm resimlerin (profil fotoğrafı, proje görselleri vb.) boyutları ve formatları optimize edilmiş olmalıdır. JPEG, PNG, WebP gibi modern formatlar kullanarak dosya boyutunu küçültün. Görsel sıkıştırma araçları (TinyPNG, Compressor.io) bu konuda size yardımcı olabilir. Ayrıca, resimler için loading="lazy" özelliğini kullanarak "tembel yükleme" (lazy loading) uygulayın. Bu, sadece ekranın görünür alanındaki resimlerin yüklenmesini sağlayarak ilk yükleme süresini kısaltır.Kod Sıkıştırma (Minification): CSS ve JavaScript dosyalarınızı üretim ortamına dağıtmadan önce sıkıştırın. Bu, dosya boyutlarını küçültür ve tarayıcının indirme süresini azaltır. Webpack, Parcel gibi derleyiciler veya online minification araçları bu işlemi otomatikleştirir.CDN Kullanımı: GSAP gibi kütüphaneleri ve diğer statik varlıkları (fontlar, ikonlar) CDN (Content Delivery Network) üzerinden sunmak, kullanıcıya en yakın sunucudan yükleme yaparak performansı artırır.Tarayıcı Önbellekleme: Sunucunuzu statik varlıklar için doğru önbellekleme başlıklarını gönderecek şekilde yapılandırın. Bu, tekrar eden ziyaretlerde tarayıcının bu dosyaları indirmesine gerek kalmamasını sağlar.
2. Erişilebilirlik (Accessibility - A11y)
Web sitenizin herkes tarafından kullanılabilir olması, modern web geliştirmenin etik ve yasal bir gerekliliğidir. Erişilebilirliği artırmak için:
Semantik HTML: Daha önce de vurguladığımız gibi,
,
,
,
gibi anlamlı etiketler kullanın. Bu, ekran okuyucuların site yapısını anlamasına yardımcı olur.alt Nitelikleri:alt metinleri sağlayın. Bu, görme engelli kullanıcıların resmin içeriğini anlamasına olanak tanır.Klavye Navigasyonu: Web sitenizin sadece fareyle değil, klavye ile de tam olarak gezilebilir olduğundan emin olun (Tab tuşu ile elementler arasında geçiş, Enter ile butonlara tıklama vb.).Renk Kontrastı: Metin ve arka plan renkleriniz arasında yeterli kontrast olduğundan emin olun. WCAG (Web Content Accessibility Guidelines) standartlarına uygun renkleri tercih edin.ARIA Nitelikleri: Dinamik içerik veya özel widget'lar kullanıyorsanız, ARIA (Accessible Rich Internet Applications) niteliklerini (aria-label, aria-expanded vb.) kullanarak bu öğelerin amacını ve durumunu yardımcı teknolojilere bildirin.
3. Arama Motoru Optimizasyonu (SEO)
Portföyünüzün bulunabilirliği, kariyeriniz için hayati öneme sahiptir. SEO, web sitenizin arama motoru sonuçlarında üst sıralarda yer almasına yardımcı olur:
Meta Etiketleri: Anlamlı URL'ler: Sayfalarınız için açıklayıcı ve anahtar kelime içeren URL'ler kullanın (örn: /projelerim yerine /web-tasarim-projeleri).Başlık Hiyerarşisi:
,
etiketlerini doğru ve hiyerarşik bir sırayla kullanın. Bu, hem okunabilirliği artırır hem de arama motorlarına sayfanızın yapısını bildirir.Mobil Dostu Tasarım: Google, mobil uyumlu siteleri ödüllendirir. Duyarlı tasarım (responsive design) kullanmanız bu açıdan kritik öneme sahiptir.Site Haritası (Sitemap) ve robots.txt: Bir sitemap.xml dosyası oluşturarak arama motorlarının sitenizdeki tüm sayfaları keşfetmesini sağlayın. robots.txt dosyasıyla da hangi sayfaların taranıp taranmayacağını kontrol edin.
Uzman İpucu: Web sitenizin performans, erişilebilirlik, en iyi uygulamalar ve SEO puanlarını ölçmek için Google Lighthouse aracını kullanın. Tarayıcınızın geliştirici araçlarında bulabilir ve düzenli olarak denetim yaparak iyileştirme alanlarını belirleyebilirsiniz.
Bu ileri düzey teknikleri projenize entegre etmek, sadece bir portföy klonu oluşturmakla kalmayacak, aynı zamanda onu sektör standartlarına uygun, yüksek kaliteli ve etkili bir dijital varlığa dönüştürecektir. Unutmayın, iyi bir web sitesi sadece iyi görünmekle kalmaz, aynı zamanda iyi performans gösterir ve herkese açık olur.
Sonuç: Web Geliştirme Yolculuğunuzda Portföy Klonunun Gücü
Bu kapsamlı rehber boyunca, HTML, CSS, JavaScript ve GSAP kullanarak sıfırdan etkileyici ve işlevsel bir portföy klonu oluşturmanın inceliklerini keşfettik. Projenizin temelini sağlam bir HTML iskeletiyle atmaktan, CSS ile görsel bir şahesere dönüştürmeye, JavaScript ile dinamik etkileşimler katmaya ve GSAP ile akıcı animasyonlarla zenginleştirmeye kadar her adımda detaylı bilgiler edindiniz. Ayrıca, projenizin sadece teknik olarak doğru değil, aynı zamanda performans, erişilebilirlik ve SEO açısından da optimize edilmiş olmasının önemini vurguladık. Kendi portföy klonunuzu oluşturma süreci, size sadece kodlama becerileri kazandırmakla kalmayacak, aynı zamanda problem çözme yeteneğinizi, tasarım anlayışınızı ve modern web teknolojilerini derinlemesine anlama kapasitenizi de geliştirecektir. Bu proje, pratik bilginizi artırmanın, sektöre özel en iyi uygulamaları öğrenmenin ve potansiyel işverenlere veya müşterilere yeteneklerinizi etkili bir şekilde sergilemenin en iyi yollarından biridir. Unutmayın, web geliştirme sürekli bir öğrenme sürecidir. Bu portföy klonu, sizin için mükemmel bir başlangıç noktasıdır. Onu kendi kişisel dokunuşlarınızla özelleştirmekten, yeni özellikler eklemekten ve farklı teknolojileri denemekten çekinmeyin. Başarıya ulaşmak için pratik yapmak, denemek ve hatalarınızdan ders çıkarmak çok önemlidir. Şimdi bu bilgileri pratiğe dökme ve kendi dijital imzanızı oluşturma zamanı!
Sıkça Sorulan Sorular
Neden GSAP yerine saf CSS animasyonlarını kullanmamalıyım?
Saf CSS animasyonları basit geçişler ve efektler için harikadır, ancak GSAP, karmaşık zamanlamalı, sıralı veya kaydırma tabanlı animasyonlar için çok daha fazla kontrol ve esneklik sunar. Tarayıcılar arası uyumluluk konusunda daha güvenilirdir ve performans açısından genellikle daha optimize edilmiş sonuçlar verir. Özellikle "ScrollTrigger" gibi eklentileriyle, CSS ile yapılması çok zor veya imkansız olan etkileşimli animasyonlar oluşturabilirsiniz.
Portföyüm için hazır bir şablon kullanmak yerine sıfırdan klon yapmak neden daha iyi?
Sıfırdan klon yapmak, her bir kod satırını anlamanıza ve nasıl çalıştığını öğrenmenize olanak tanır. Bu, problem çözme becerilerinizi geliştirir, yeni teknolojilere aşina olmanızı sağlar ve kendi kişisel tarzınızı projenize yansıtma özgürlüğü verir. Hazır şablonlar hızlı olsa da, genellikle fazla kod içerir, istediğiniz gibi özelleştirilemez ve size sınırlı öğrenme fırsatı sunar. Kendi klonunuz, yeteneklerinizi ve bilginizi göstermenin çok daha güçlü bir yoludur.
SEO için portföyümde nelere dikkat etmeliyim?
SEO için semantik HTML kullanmaya (doğru başlık hiyerarşisi, anlamlı etiketler), resimler için açıklayıcı alt nitelikleri eklemeye, mobil uyumlu bir tasarıma sahip olmaya ve site hızını optimize etmeye dikkat edin. Ayrıca, benzersiz ve anahtar kelime açısından zengin
Portföyümü yayına almak için en iyi yöntem nedir?
Portföyünüzü yayına almak için GitHub Pages, Netlify, Vercel veya Firebase Hosting gibi ücretsiz veya uygun maliyetli platformları kullanabilirsiniz. Bu hizmetler, statik web sitelerinizi dakikalar içinde canlıya almanıza olanak tanır ve genellikle otomatik dağıtım gibi ek özellikler sunar. Projenizi bir Git deposuna yükledikten sonra bu platformlara bağlamak oldukça kolaydır.
Mobil uyumluluk neden bu kadar önemli?
Günümüzde internet kullanıcılarının büyük bir kısmı web sitelerine mobil cihazlardan erişiyor. Mobil uyumlu bir portföy, her boyuttaki ekranda iyi görünerek ve düzgün çalışarak kullanıcı deneyimini artırır. Ayrıca, Google gibi arama motorları mobil uyumlu siteleri arama sonuçlarında daha üst sıralara çıkarır; bu da SEO açısından kritik bir avantaj sağlar. Kısacası, mobil uyumluluk hem kullanıcı hem de arama motorları için olmazsa olmazdır.
