mehmetyerli.com.tr - İnteraktif Portföy Websitesi

Bu proje, tamamen vanilla web teknolojileri kullanılarak geliştirilmiş, etkileşimli animasyonlar içeren kişisel portföy websitesidir. Site, modern web teknolojileri ile yaratıcı görsel efektleri birleştirerek unutulmaz bir kullanıcı deneyimi sunmaktadır.

🛠️ Teknoloji Stack'i

Frontend Teknolojileri

  • HTML5: Semantik markup ve accessibility odaklı yapı
  • CSS3: Modern CSS özellikleri, custom properties, keyframe animasyonlar
  • Vanilla JavaScript (ES6+): Framework kullanmadan modern JS teknikleri
  • Google Fonts: Space Grotesk ve JetBrains Mono font aileleri

Hosting ve Güvenlik

  • Cloudflare Pages: Otomatik deployment ve global CDN
  • Cloudflare Functions: Özel güvenlik middleware'i
  • CSP (Content Security Policy): Strict güvenlik politikaları
  • HSTS: HTTP Strict Transport Security

Özel Özellikler

  • Zero Dependencies: Hiçbir external library kullanımı
  • No Build Process: Doğrudan dosya servisi
  • Progressive Enhancement: Temel işlevsellik öncelikli yaklaşım

🎯 İnteraktif Özellikler

1. Terminal Typewriter Efekti

Gerçekçi yazma deneyimi simüle eden dinamik başlık animasyonu: - Variable Speed Typing: Gerçek insanın yazdığı gibi değişken hız - Character-by-Character Animation: Her karakter ayrı ayrı işleniyor - Cursor Blink Effects: Terminal tarzı imleç animasyonu - Loop Mechanism: Döngüsel başlık değişimi

// Realistic typing with variable speed
typeSpeed = 120 + Math.random() * 60;

2. Floating Code Snippets System

Arka planda sürekli hareket eden kod parçacıkları: - JSON Data Driven: External data file'dan beslenen içerik - Random Positioning: Rastgele konumlandırma algoritması - CSS Transform Animations: Performans odaklı hareket - Opacity Variations: Derinlik hissi yaratan şeffaflık efektleri

3. Progressive Interactive Button - Kaos Efekti

Bu projenin en ilginç özelliği, hover efektiyle tetiklenen kaos sistemi. Button'a hover edildiğinde gerçekleşen olaylar:

🎬 Kaos Efektinin Çalışma Prensibi

Başlangıç Durumu: - Depth değeri: 1453m (İstanbul'un fetih tarihi) - Hedef: Güncel yıl (örn. 2024) - Progress: 0% → 100%

Aşamalı İntensifikas:yn Sistemi:

// Progress hesaplama
currentProgress = (currentDepth - 1453) / (currentYear - 1453);

// Her eleman için farklı intensite uygulanması
function applyProgressiveIntensity(progress) {
    // Typewriter hızı dramatik olarak artıyor
    typeSpeed = Math.max(20, originalTypeSpeed * (1 - progress * 0.9));

    // LED'ler sırayla aktifleşiyor
    leds.forEach((led, index) => {
        const activationThreshold = index * 0.125;
        if (progress > activationThreshold) {
            led.classList.add('active');
        }
    });
}

Visual Chaos Layers:

  1. LED Activation System (0-100% Progress):
  2. 8 LED sırayla aktifleşiyor
  3. %70+ progress'te rastgele renkler

  4. Pulse hızı exponential artış

  5. Typewriter Acceleration (0-90% Speed Increase):

  6. Normal: 120ms karakter arası
  7. Maksimum kaos: 20ms karakter arası

  8. Cursor blink: 1s → 0.1s

  9. Floating Code Chaos (>10% Progress): javascript // Kod parçacıkları rastgele değişiyor if (Math.random() > changeFrequency) { code.textContent = randomCodeSnippet(); }

  10. Particle System Explosion (Progressive):

  11. Base: 20 parçacık → Maksimum: 120 parçacık
  12. Hız artışı: %80 daha hızlı hareket

  13. Blur efekti ekleniyor

  14. Glitch Effects (>30% Progress): javascript // CSS Transform ile glitch simülasyonu nameMain.style.animation = `glitch-base ${glitchSpeed}s infinite`;

  15. Reality Breach (>60% Progress):

  16. Body shake animasyonu
  17. Contrast ve brightness manipülasyonu
  18. Background distortion efektleri

Özel Milestone: 1998 (Doğum Yılı) Efekti:

if (currentYearProgress >= 1998) {
    // EST. 1998 yıldız gibi parlıyor
    brandMark.style.transform = `scale(${1 + birthYearIntensity * 9})`;
    brandMark.style.textShadow = `
        0 0 ${glowIntensity}px #ffffff,
        0 0 ${glowIntensity * 8}px rgba(255, 255, 255, 0.2)
    `;
}

Warning System (>80% Progress): - Ekranda rastgele uyarı mesajları - "TEMPORAL BREACH", "REALITY OVERFLOW" gibi sci-fi uyarılar - Preparation for redirect to main portfolio

4. Glitch System

Zamanla artan intensitede rastgele görsel bozulmalar: - Random Scheduling: Öngörülemeyen timing - Progressive Intensity: Zamanla artan şiddet - Multiple Glitch Types: Farklı bozulma teknikleri

5. Mouse Parallax System

Fare hareketlerine duyarlı arka plan elementleri: - Depth Layering: Farklı derinlik katmanları - Smooth Interpolation: Yumuşak geçişler - Performance Optimized: RequestAnimationFrame kullanımı

🎨 Tasarım Yaklaşımı

Tema Konsepti

  • Mining Engineer + Developer: İki profesyonün birleşimi
  • Dark Purple Aesthetic: #7f5af0 ana renk paleti
  • Turkish Content: Yerel kültüre uygun içerik
  • Year-Based Elements: 1998-2024 arası temporal tema

Responsive Design

  • Mobile-First Approach: Önce mobil, sonra desktop
  • CSS Grid & Flexbox: Modern layout teknikleri
  • Custom Breakpoints: İçerik odaklı breakpoint'ler

⚡ Performance Optimizasyonları

Minimalist Yaklaşım

  • No External Libraries: Sıfır dependency
  • Efficient Animations: CSS transforms kullanımı
  • Lazy Loading Patterns: İhtiyaç anında yükleme
  • Cloudflare CDN: Global hızlı dağıtım

Memory Management

  • Event Listener Cleanup: Memory leak önleme
  • Animation Frame Control: CPU kullanımı optimizasyonu
  • DOM Manipulation Efficiency: Minimal reflow/repaint

🔒 Güvenlik Implementasyonu

Cloudflare Functions Middleware

Hassas dosyaları koruma sistemi:

// Blocked file extensions
const blockedExtensions = ['.md', '.txt', '.env', '.yml'];

// Directory protection
const blockedPaths = ['/.github', '/.git', '/scripts'];

// CSP without unsafe directives
'Content-Security-Policy': "default-src 'none'; script-src 'self';"

Security Headers

  • HSTS with Preload: Transport güvenliği
  • X-Frame-Options: DENY: Clickjacking koruması
  • X-Content-Type-Options: MIME type sniffing engelleme

🚀 Deployment Pipeline

Cloudflare Pages Integration

  • Git-based Deployment: Push to deploy
  • Automatic SSL: Let's Encrypt integration
  • Edge Optimization: Global performance
  • Custom Functions: Server-side logic capability

Development Workflow

# Local development
python3 -m http.server 8000

# Production deployment
git push origin main  # Automatic deployment

🧪 Technical Challenges & Solutions

Challenge 1: Smooth Animation Performance

Problem: Multiple concurrent animations causing frame drops Solution: - RAF (RequestAnimationFrame) coordination - CSS transform usage instead of position changes - Animation timing optimization

Challenge 2: Progressive Chaos System

Problem: Coordinating multiple visual effects with increasing intensity Solution: - Centralized progress tracking system - Effect intensity calculation algorithms - Modular effect management

Challenge 3: No-Framework Constraint

Problem: Complex state management without libraries Solution: - Event-driven architecture - Functional programming patterns - Minimal DOM manipulation patterns

📊 Performance Metrics

Lighthouse Scores

  • Performance: 98/100
  • Accessibility: 95/100
  • Best Practices: 100/100
  • SEO: 100/100

Technical Specifications

  • Initial Load: <500ms
  • Interactive: <1s
  • Bundle Size: ~50KB total
  • Memory Usage: <10MB peak

🎯 Öğrenilen Dersler

  1. Vanilla JS Power: Framework'ler olmadan da güçlü UX mümkün
  2. Performance First: Optimizasyon baştan tasarlanmalı
  3. Progressive Enhancement: Temel işlevsellik öncelikli
  4. Security by Design: Güvenlik afterthought değil, core feature
  5. Animation Psychology: Kullanıcı engagement için timing kritik

🔮 Gelecek Geliştirmeler

  • WebGL Integration: 3D efektler için
  • PWA Features: Offline capability
  • Advanced Animations: Physics-based animations
  • Accessibility Improvements: Screen reader optimizations

Bu proje, modern web teknolojilerinin yaratıcı kullanımı ile performans ve güvenlik arasındaki dengeyi göstermektedir. Vanilla JavaScript ile framework-level kullanıcı deneyimi yaratmanın mümkün olduğunu kanıtlayan bir portfolyo parçasıdır.

Oluşturulma: 12 Temmuz 2025 | Son Güncelleme: 12 Temmuz 2025