Dijital Portföyünüzü Oluşturun ve Öne Çıkın: Kapsamlı Rehber

    
Projelerim
    
Yeteneklerimi sergilediğim en son çalışmalarıma göz atın.

    
    

        Tümü
        Web Tasarım
        Mobil Uygulama
        Markalama
    

    
    


        
        

            
            

                
Modern E-ticaret Platformu
                
Kullanıcı dostu arayüze sahip, SEO uyumlu ve responsive bir e-ticaret sitesi.
                Detayları Gör
            
        

        
        

            
            

                
Fitness Takip Uygulaması
                
Hedef belirleme ve ilerleme takibi özelliklerine sahip mobil uygulama projesi.
                Detayları Gör
            
        

        

    
 
 

Yukarıdaki HTML yapısında, portfolio-grid sınıfı, CSS Grid veya Flexbox ile kolayca stil verilebilecek bir kapsayıcı görevi görür. Her portfolio-item, ayrı bir projeyi temsil eder. loading="lazy" niteliği, görsellerin sayfa yüklendiğinde hemen değil, kullanıcı kaydırdıkça yüklenmesini sağlayarak performansı artırır. data-category niteliği ise daha sonra JavaScript ile filtreleme işlemleri için kullanılabilir.

CSS ile Görsel Estetik ve Duyarlılık Kazandırma

HTML iskeletimizi oluşturduktan sonra, sıra CSS ile portföyümüze estetik bir görünüm kazandırmaya ve onu her cihazda kullanılabilir hale getirmeye gelir. CSS, renkler, fontlar, boşluklar, hizalamalar ve en önemlisi duyarlı tasarım (responsive design) için kullanılır. Responsive tasarım, web sitenizin ekran boyutuna göre otomatik olarak ayarlamasını sağlayarak mobil cihazlarda bile mükemmel bir deneyim sunar.

/* Genel Stil Ayarları */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.portfolio-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.portfolio-section h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #222;
}

.section-description {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
}

/* Filtre Butonları Stili */
.filter-buttons {
    margin-bottom: 30px;
}

.filter-btn {
    background-color: #e0e0e0;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.filter-btn.active, .filter-btn:hover {
    background-color: #007bff;
    color: white;
}

/* Portföy Izgara Stili */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Esnek sütunlar */
    gap: 30px; /* Öğeler arası boşluk */
}

.portfolio-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.portfolio-item img {
    width: 100%;
    height: 200px; /* Görsellerin aynı boyutta görünmesi için */
    object-fit: cover; /* Görselin kapsayıcıya sığmasını sağlar */
    display: block;
}

.item-content {
    padding: 20px;
    text-align: left;
}

.item-content h3 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.item-content p {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 20px;
}

.btn-primary {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* Mobil Uyumluluk (Responsive Design) için Media Queries */
@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* Tek sütunlu düzen */
        gap: 20px;
    }

    .portfolio-section {
        padding: 40px 15px;
    }

    .portfolio-section h2 {
        font-size: 2em;
    }

    .section-description {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .filter-btn {
        margin: 5px;
        padding: 8px 15px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .portfolio-section h2 {
        font-size: 1.8em;
    }
    .item-content h3 {
        font-size: 1.3em;
    }
    .item-content p {
        font-size: 0.9em;
    }
}

Yukarıdaki CSS kodu, portfolio-grid için CSS Grid'i kullanarak esnek bir ızgara düzeni oluşturur. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); ifadesi, ekran genişliğine göre otomatik olarak 300px'lik sütunlar oluşturmaya çalışır. Eğer ekran daralırsa ve 300px'lik sütunlar sığmazsa, sütun sayısı azalır. Mobil cihazlar için ise @media sorguları kullanılarak max-width: 768px altındaki ekranlarda portfolio-grid'in tek sütunlu (1fr) bir düzene geçmesi sağlanır. Bu, portföyünüzün her ekranda okunabilir ve kullanılabilir olmasını garanti eder. Görseller için object-fit: cover; kullanmak, görsellerin bozulmadan kapsayıcılarını doldurmasını sağlar.

JavaScript ile Etkileşimli Özellikler Ekleme

Portföyünüze dinamik ve etkileşimli özellikler eklemek, kullanıcı deneyimini zenginleştirir ve sitenizi daha modern hale getirir. JavaScript, bu etkileşimleri sağlamak için kullanılan anahtar teknolojidir. Proje filtreleme, lightbox galerileri, dinamik içerik yükleme veya basit animasyonlar gibi özellikler ekleyebiliriz. İşte yukarıdaki HTML yapımıza uygun bir proje filtreleme mekanizması eklemek için temel bir JavaScript örneği:

Bu JavaScript kodu, DOMContentLoaded olayı tetiklendiğinde çalışır. Filtre butonlarını ve portföy öğelerini seçer. Her filtre butonuna bir click olayı dinleyicisi ekleyerek, tıklanan butonun data-category özelliğine göre ilgili projeleri gösterir veya gizler. all kategorisi tüm projeleri gösterirken, diğer kategoriler sadece o kategoriye ait projeleri listeler. Ek olarak, daha modern bir his vermek için Intersection Observer API kullanılarak, portföy öğeleri ekranda görünür hale geldiğinde hafif bir yukarı kaydırma ve şeffaflık efekti eklenmiştir. Bu, kullanıcılar sayfayı kaydırdıkça projelerin "canlı" bir şekilde belirmesini sağlar. Bu etkileşimler, sitenizin sadece bilgilendirici değil, aynı zamanda görsel olarak da çekici olmasını sağlar.

Portföyünüzü Optimize Etme ve Pazarlama Stratejileri Nelerdir?

Mükemmel bir dijital portföy oluşturmak, yolculuğun sadece yarısıdır. Gerçek değerini ortaya çıkarmak ve potansiyel fırsatları yakalamak için portföyünüzü optimize etmeniz ve doğru stratejilerle pazarlamanız gerekir. Bir web sitesine sahip olmak önemlidir, ancak bu web sitesinin keşfedilebilir olması ve doğru kitleye ulaşması çok daha kritik. Bu bölümde, portföyünüzün çevrimiçi görünürlüğünü artırmak, performansını iyileştirmek ve doğru kişilere ulaşmasını sağlamak için uygulayabileceğiniz ileri düzey teknikleri ve pazarlama stratejilerini inceleyeceğiz. Sadece "Check it" demek yetmez; "See it, explore it, and contact me!" dedirtmeliyiz.

SEO ve Performans İpuçları: Daha Fazla Görünürlük İçin

Portföyünüzün arama motorlarında üst sıralarda yer alması, organik trafik çekmek ve daha fazla kişiye ulaşmak için hayati öneme sahiptir. İşte SEO (Arama Motoru Optimizasyonu) ve performans konusunda dikkat etmeniz gereken bazı ipuçları:

1. Anahtar Kelime Araştırması ve Kullanımı: Hangi anahtar kelimelerin sizi bulmasını istersiniz? Örneğin, "web tasarımcı İstanbul", "UI/UX uzmanı portföy", "JavaScript geliştirici örnekleri". Bu anahtar kelimeleri başlıklarınızda (H2, H3), paragraf metinlerinizde, görsel alt metinlerinizde (alt niteliği) ve meta açıklamalarınızda doğal bir şekilde kullanın. Aşırıya kaçmaktan (keyword stuffing) kaçının; bu, arama motorları tarafından olumsuz algılanabilir.
2. Meta Etiketleri Optimizasyonu: Her sayfanız için benzersiz ve açıklayıcı