🚀 Gömülü Yazılım Mühendisi Portfolio

Modern, profesyonel ve karizmatik bir portfolio web sitesi. React, Vite ve Tailwind CSS ile geliştirilmiştir.

✨ Özellikler

• 🎨 Modern ve şık tasarım (yeşil tonlarında)
• 📱 Tamamen responsive (mobil, tablet, desktop)
• ⚡ Hızlı ve performanslı (Vite ile)
• 🎭 Smooth animasyonlar ve geçişler
• 📝 CV/Hakkımda bölümü
• 💼 Proje showcase (GitHub repos)
• 🛠️ Hizmetler/Danışmanlık bölümü
• 📧 İletişim formu
• 🌙 Dark mode tasarım

🛠️ Teknolojiler

• React 19 - UI framework
• Vite 7 - Build tool
• Tailwind CSS 4 - Styling
• JavaScript (ES6+) - Programming language

📦 Kurulum

# Projeyi klonlayın
git clone https://github.com/yourusername/personal-website.git

# Proje dizinine girin
cd personal-website

# Bağımlılıkları yükleyin
npm install

# Development server'ı başlatın
npm run dev

Tarayıcınızda http://localhost:5173 adresini açın.

🎯 Kişiselleştirme

1. Kişisel Bilgilerinizi Güncelleyin

src/components/Hero.jsx - İsim ve tanıtım metni

<h1>Merhaba, Ben <span className="gradient-text">İsminiz</span></h1>

src/components/About.jsx - CV bilgileri, deneyim, eğitim

const experiences = [
  // Kendi deneyimlerinizi ekleyin
]

src/components/Projects.jsx - GitHub projeleriniz

const projects = [
  // Kendi projelerinizi ekleyin
]

src/components/Contact.jsx - İletişim bilgileri

const contactInfo = [
  // Kendi bilgilerinizi ekleyin
]

2. Sosyal Medya Linklerini Güncelleyin

src/components/Footer.jsx - GitHub, LinkedIn, Twitter linkleri

const socialLinks = [
  // Kendi linklerinizi ekleyin
]

3. Renkler ve Stiller

tailwind.config.js - Renk paletini özelleştirin

colors: {
  primary: {
    // İstediğiniz renk tonlarını değiştirin
  }
}

🚀 Build & Deploy

Production Build Oluşturma

npm run build

Build dosyaları dist/ klasöründe oluşturulacaktır.

🌐 Ücretsiz Hosting Seçenekleri

1. Vercel (Önerilen ⭐)

En kolay ve hızlı deployment yöntemi:

# Vercel CLI'yi yükleyin
npm i -g vercel

# Deploy edin
vercel

veya:

1. vercel.com adresine gidin
2. GitHub ile giriş yapın
3. Repoyu import edin
4. Deploy butonuna tıklayın
5. Otomatik deploy olacaktır!

Avantajları:

• Otomatik SSL sertifikası
• GitHub entegrasyonu (her push'ta otomatik deploy)
• CDN ile hızlı yükleme
• Özel domain desteği
• Tamamen ücretsiz

2. Netlify

# Netlify CLI yükleyin
npm install -g netlify-cli

# Build edin
npm run build

# Deploy edin
netlify deploy --prod --dir=dist

veya:

1. netlify.com adresine gidin
2. Drag & drop ile dist/ klasörünü yükleyin

Avantajları:

• Form handling built-in
• Serverless functions desteği
• Otomatik SSL
• Ücretsiz

3. GitHub Pages

# gh-pages paketini yükleyin
npm install --save-dev gh-pages

# package.json'a ekleyin:
"homepage": "https://yourusername.github.io/personal-website",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

# Deploy edin
npm run deploy

Avantajları:

• GitHub'dan direkt hosting
• Ücretsiz
• Kolay kurulum

4. Cloudflare Pages

1. pages.cloudflare.com adresine gidin
2. GitHub reposunu bağlayın
3. Build ayarları:
   • Build command: npm run build
   • Build output directory: dist
4. Deploy edin

Avantajları:

• Çok hızlı CDN
• Sınırsız bandwidth
• Otomatik SSL
• Ücretsiz

📝 İletişim Formu Entegrasyonu

İletişim formu şu anda frontend-only. Backend entegrasyonu için:

Formspree (En Kolay)

// Contact.jsx içinde
<form action="https://formspree.io/f/your-form-id" method="POST">

EmailJS

npm install @emailjs/browser

Web3Forms

Ücretsiz form API servisi, detaylar: web3forms.com

🎨 Özelleştirme İpuçları

Profil Fotoğrafı Eklemek

// Hero.jsx veya About.jsx içine
<img
  src="/path/to/your/photo.jpg"
  alt="Profile"
  className="w-48 h-48 rounded-full border-4 border-primary-500"
/>

Animasyonlar

Tailwind config'de tanımlı animasyonlar:

• animate-fade-in - Fade in efekti
• animate-slide-up - Yukarıdan kayma
• animate-float - Yüzen animasyon

Gradient Text

<span className="gradient-text">Renkli Metin</span>

📱 Responsive Design

Site tüm ekran boyutlarında çalışır:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🔧 Troubleshooting

Build Hatası

# Cache temizle ve tekrar dene
rm -rf node_modules package-lock.json
npm install
npm run build

Tailwind Stilleri Görünmüyor

# Tailwind'i yeniden derle
npm run dev

📄 Lisans

MIT License - Dilediğiniz gibi kullanabilirsiniz.

🤝 Katkıda Bulunma

Pull request'ler hoş geldiniz! Büyük değişiklikler için önce issue açın.

🌟 Özellikler Eklemek İsterseniz

• Blog bölümü
• Karanlık/Aydınlık mod toggle
• Çoklu dil desteği
• Proje filtreleme
• Animasyonlu skill charts
• Testimonials bölümü

---