🚀 Muhammed Emin Çelik - Kişisel Portföy

Modern, responsive ve interaktif kişisel portföy web sitesi. Bilgisayar mühendisi olarak web ve mobil geliştirme becerilerimi sergileyen profesyonel portföy.

✨ Özellikler

• 🎨 Modern Tasarım: Temiz ve profesyonel görünüm
• 🌙 Dark Mode: Kullanıcı tercihine göre tema değişimi
• 📱 Responsive: Tüm cihazlarda mükemmel görünüm
• ⚡ Hızlı: Optimize edilmiş performans
• 🎭 Animasyonlar: Smooth scroll ve hover efektleri
• 📧 İletişim Formu: EmailJS entegrasyonu
• 🔍 SEO Optimized: Arama motorları için optimize edilmiş

🛠️ Teknolojiler

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Animasyonlar: CSS Animations, Intersection Observer API
• Form Handling: EmailJS
• Icons: Font Awesome 6.0
• Design: Custom CSS with CSS Variables
• Code Quality: ESLint, Prettier, Husky
• Testing: Jest, Testing Library
• CI/CD: GitHub Actions

📁 Proje Yapısı

├── src/
│   ├── css/
│   │   ├── style.css
│   │   └── components/
│   ├── js/
│   │   ├── script.js
│   │   └── modules/
│   ├── images/
│   └── pages/
├── docs/
├── index.html
├── about.html
├── skills.html
├── projects.html
├── contact.html
├── README.md
├── .gitignore
└── package.json

🚀 Kurulum

1. Repository'yi klonlayın

   git clone https://github.com/MuhammedEminClk/portfolio.git
   cd portfolio

2. Bağımlılıkları yükleyin

   npm install

3. Environment variables ayarlayın

   # env.example dosyasını .env olarak kopyalayın
   cp env.example .env
   
   # Backend endpoint'inizi .env dosyasına ekleyin
   # FORM_SUBMISSION_URL=https://your-backend-api.com/contact

4. Projeyi çalıştırın

   # Development server
   npm run dev
   
   # veya production build
   npm start

5. Tarayıcıda açın

   http://localhost:8000
   

🧪 Test ve Geliştirme

# Linting
npm run lint
npm run lint:fix

# Formatting
npm run format

# Testing
npm test
npm run test:watch

📄 Sayfalar

• Ana Sayfa: Hero section, animasyonlar ve genel bilgiler
• Hakkımda: Eğitim, deneyim ve kişisel bilgiler
• Yetenekler: Teknik beceriler ve seviyeler
• Projeler: Tamamlanan projeler ve GitHub linkleri
• İletişim: İletişim formu ve sosyal medya linkleri

🎯 Özellikler Detayı

Dark Mode

• LocalStorage ile tema tercihi kaydedilir
• Smooth geçiş animasyonları
• Toggle butonu ile kolay değişim

Responsive Tasarım

• Mobile-first yaklaşım
• Breakpoint'ler: 480px, 768px, 1200px
• Flexible grid sistemi

Animasyonlar

• Scroll-triggered animasyonlar
• Hover efektleri
• Loading animasyonları
• Smooth transitions

🔧 Geliştirme

CSS Yapısı

• CSS Variables kullanımı
• BEM metodolojisi
• Modüler component yapısı
• Utility classes

JavaScript Modülleri

• Dark mode management
• Form handling
• Animation controllers
• Utility functions

📱 Browser Desteği

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Katkıda Bulunma

1. Fork yapın
2. Feature branch oluşturun (git checkout -b feature/AmazingFeature)
3. Commit yapın (git commit -m 'Add some AmazingFeature')
4. Push yapın (git push origin feature/AmazingFeature)
5. Pull Request açın

📄 Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Detaylar için LICENSE dosyasına bakın.

📞 İletişim

• LinkedIn: Muhammed Emin Çelik
• GitHub: @MuhammedEminClk
• Email: muhammedlance@gmail.com

🙏 Teşekkürler

• Font Awesome - İkonlar için
• EmailJS - Form handling için
• Google Fonts - Tipografi için

---

⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!