Modern, responsive ve tamamen özelleştirilebilir müzik prodüktörü portföy sitesi. Hasan Arthur Altuntaş'ın müzik kariyeri ve yazılım geliştirme projelerini sergileyen profesyonel web sitesi.
https://hasanarthuraltuntas.com.tr
Yukarıdaki bağlantıya tıklayarak canlı web sitesini görüntüleyebilirsiniz.
- Modern Profesyonel Tasarım: Müzik endüstrisi için özel tasarlanmış görsel tema
- Tamamen Responsive: Tüm cihazlarda (mobil, tablet, masaüstü) mükemmel görüntü
- Akıcı Animasyonlar: Scroll animasyonları, fade-in efektleri, hover etkileşimleri
- Karanlık Tema: Göz dostu karanlık renk şeması
- Çok Dilli Destek: İngilizce ve Türkçe dil seçeneği
- PWA Desteği: Progressive Web App özellikleri
- Spotify Entegrasyonu: Gerçek zamanlı müzik verisi
- YouTube Player: Embedded video içerikleri
- Apple Music Bağlantıları: Çoklu platform desteği
- Müzik Kartları: Şarkı listeleri ve albüm görselleri
- Platform Bağlantıları: Spotify, YouTube, Apple Music direkt bağlantıları
- Dinamik İçerik: API tabanlı müzik verisi yüklemesi
- Gelişmiş Galeri: Fotoğraf kategorileme sistemi
- Lightbox Modal: Fotoğraf büyütme ve önizleme
- Lazy Loading: Performans optimizasyonlu gecikmiş yükleme
- Kategoriler: Stüdyo, Konserler, Sahne Arkası
- Mobil Navigasyon: Dokunmatik cihazlar için kaydırma desteği
- GitHub Entegrasyonu: Canlı proje istatistikleri
- Teknoloji Yığını: Kullanılan teknolojilerin görsel sunumu
- Proje Sergileme: Açık kaynak projeler ve katkılar
- LinkedIn Bağlantısı: Profesyonel ağ bağlantıları
- İletişim Formu: Doğrudan mesaj gönderme
- Optimize Kod: Vanilla JavaScript, minimal dosya boyutları
- SEO Hazır: Meta etiketleri, Open Graph, Schema markup
- XML Sitemap: Arama motoru optimizasyonu
- Hızlı Yükleme: Optimize edilmiş görseller ve CSS
- Erişilebilirlik: WCAG uyumlu erişilebilirlik özellikleri
- Core Web Vitals: Google performans standartlarına uygun
MyPage/
├── index.html # Ana sayfa
├── sitemap.xml # SEO site haritası
├── robots.txt # Arama motoru talimatları
├── manifest.json # PWA manifesti
├── sw.js # Service Worker
├── netlify.toml # Netlify konfigürasyonu
├── README.md # Bu dosya
├── assets/
│ ├── css/
│ │ ├── hasan-arthur-design.css # Ana stil dosyası
│ │ ├── critical-inline.css # Kritik CSS
│ │ ├── theme-consistency.css # Tema tutarlılığı
│ │ ├── mobile-optimization.css # Mobil optimizasyonu
│ │ ├── accessibility-enhancements.css # Erişilebilirlik
│ │ ├── performance-optimization.css # Performans
│ │ └── new-music-cards.css # Müzik kartları
│ ├── js/
│ │ ├── theme-and-navigation.js # Tema ve navigasyon
│ │ ├── music-final.js # Müzik sistemi
│ │ ├── gallery.js # Galeri sistemi
│ │ ├── contact-form.js # İletişim formu
│ │ ├── sonic-interactions.js # Etkileşimler
│ │ ├── github-stats.js # GitHub istatistikleri
│ │ ├── language-simple.js # Dil sistemi
│ │ ├── performance-optimizer.js # Performans optimize edici
│ │ ├── accessibility-enhancer.js # Erişilebilirlik geliştirici
│ │ ├── error-handler.js # Hata yönetimi
│ │ ├── security.js # Güvenlik
│ │ └── form-validator.js # Form doğrulama
│ ├── images/ # Görsel varlıklar
│ │ ├── hasan-arthur-profile.jpg # Profil fotoğrafı
│ │ ├── logo-main.png # Ana logo
│ │ ├── logo-transparent.png # Şeffaf logo
│ │ └── favicon.ico # Site ikonu
│ └── data/ # Veri dosyaları
└── local-admin/ # Admin paneli (yerel)
- Modern web tarayıcısı (Chrome, Firefox, Safari, Edge)
- Yerel web sunucusu (isteğe bağlı, file:// protokolü de çalışır)
-
Dosyaları İndirin
git clone https://github.com/hasanarthur/portfolio cd portfolio -
Yerel Sunucu Başlatın (İsteğe bağlı)
# Python kullanarak python -m http.server 8000 # Node.js kullanarak npx serve . # PHP kullanarak php -S localhost:8000
-
Tarayıcıda Açın
- Yerel sunucu:
http://localhost:8000 - Doğrudan dosya:
index.htmldosyasına çift tıklayın
- Yerel sunucu:
assets/css/hasan-arthur-design.css dosyasındaki CSS değişkenlerini düzenleyin:
:root {
--primary-gold: #d4b078; /* Ana altın rengi */
--accent-gold: #f4d03f; /* Vurgu altını */
--dark-bg: #0a0a0a; /* Koyu arka plan */
--glass-bg: rgba(20, 20, 20, 0.6); /* Cam efekti */
--text-light: #ffffff; /* Açık metin */
--text-muted: rgba(255, 255, 255, 0.8); /* Soluk metin */
}- HTML Düzenleme:
index.htmldosyasını doğrudan düzenleyin - Dil Dosyaları:
assets/js/language-simple.jsdosyasından çeviri metinlerini güncelleyin
- Spotify API:
assets/js/music-final.jsdosyasında Spotify bağlantılarını güncelleyin - YouTube: Video ID'lerini HTML'de güncelleyin
- Görseller:
assets/images/klasörüne yeni görseller ekleyin - Galeri:
assets/js/gallery.jsdosyasından galeri içeriğini güncelleyin
Web sitesi tüm cihaz boyutları için optimize edilmiştir:
- Masaüstü: 1200px+ (Tam düzen)
- Tablet: 768px - 1199px (Orta düzen)
- Mobil: 320px - 767px (Kompakt düzen)
/* Tablet ve küçük ekranlar */
@media (max-width: 768px) { }
/* Mobil cihazlar */
@media (max-width: 480px) { }- Spotify Web API: Gerçek zamanlı müzik verisi
- YouTube Data API: Video içerikleri
- Last.fm API: Müzik istatistikleri (isteğe bağlı)
// Müzik sistemi erişimi
const musicSystem = window.musicSystem;
// Platform bağlantıları
musicSystem.openSpotify(trackId);
musicSystem.openYouTube(videoId);
musicSystem.openAppleMusic(songId);
// Bilgi alma
const trackInfo = musicSystem.getCurrentTrack();
const platforms = musicSystem.getSupportedPlatforms();- GitHub API: Canlı repository istatistikleri
- Spotify API: Dinlenme sayıları ve popüler şarkılar
- Site Analytics: Ziyaretçi istatistikleri (Google Analytics entegrasyonu)
index.html dosyasında </head> etiketinden önce ekleyin:
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>- ✅ Netlify (Mevcut deployment - önerilen)
- Vercel (Ücretsiz tier)
- GitHub Pages (Ücretsiz)
- Firebase Hosting (Ücretsiz tier)
- 🔗 Canlı URL: https://hasanarthuraltuntas.com.tr
- 📊 Durum: ✅ Aktif ve Çalışıyor
- 🔒 HTTPS: ✅ SSL Etkin
- 🚀 Performans: CDN ile optimize edilmiş
- 📱 PWA: Progressive Web App Hazır
- 🛡️ Güvenlik: Başlıklar yapılandırılmış
- GitHub repository'yi Netlify'a bağlayın
- Otomatik deployment etkin (GitHub push → otomatik deploy)
- Özel domain eklenebilir (isteğe bağlı)
- SSL sertifikası otomatik etkinleştirilir
- Site haritasını Google Search Console'a gönderin
- HTML5: Semantik markup yapısı
- CSS3: Flexbox & Grid ile modern styling
- Vanilla JavaScript: Framework bağımsız kod
- Font Awesome: İkon kütüphanesi
- Google Fonts: Web tipografisi
- Intersection Observer API: Scroll animasyonları
- Service Worker: PWA özellikleri
- Critical CSS: Satır içi kritik stiller
- Lazy Loading: Görseller ve medya için
- Resource Hints: DNS prefetch ve preload
- Image Optimization: WebP format desteği
- Browser Caching: Stratejik cache politikaları
- CDN Integration: Global içerik dağıtımı
- Chrome 70+
- Firefox 65+
- Safari 12+
- Edge 79+
Müzik yüklenmiyor:
- API anahtarlarını kontrol edin
- Network bağlantısını doğrulayın
- Console'da hata mesajlarını kontrol edin
Görseller görüntülenmiyor:
- Dosya yollarını kontrol edin
- Dosya uzantılarını doğrulayın
- Büyük/küçük harf duyarlılığını kontrol edin
Responsive tasarım çalışmıyor:
- CSS media query'lerini kontrol edin
- Viewport meta tag'ini doğrulayın
Tarayıcı console'unda debug bilgileri:
// Console'da çalıştırın
console.log(window.musicSystem);
console.log(window.themeManager);
console.log(window.languageSystem);- Meta açıklamaları ve anahtar kelimeler
- Open Graph sosyal medya etiketleri
- Schema.org yapılandırılmış veri markup
- XML sitemap arama motorları için
- Robots.txt tarayıcı talimatları
- Canonical URL'ler
- Çok dilli SEO desteği
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Hasan Arthur Altuntaş",
"jobTitle": "Music Producer & AI Developer",
"url": "https://hasanarthuraltuntas.com.tr",
"sameAs": [
"https://open.spotify.com/artist/...",
"https://www.youtube.com/channel/...",
"https://github.com/Rtur2003"
]
}Bu projeye katkıda bulunmak için:
- Repository'yi fork edin
- Feature branch oluşturun (
git checkout -b feature/YeniOzellik) - Değişikliklerinizi commit edin (
git commit -m 'Yeni özellik eklendi') - Branch'inizi push edin (
git push origin feature/YeniOzellik) - Pull request oluşturun
Bu proje MIT Lisansı altında lisanslanmıştır. Ticari ve kişisel projeler için özgürce kullanabilirsiniz.
- Görseller için WebP formatını kullanın
- CSS ve JavaScript'i minify edin
- CDN kullanmayı düşünün
- HTTPS kullanın
- Input validation uygulayın
- Regular güvenlik güncellemeleri yapın
- Gelişmiş analytics dashboard
- Blog sistemi entegrasyonu
- Newsletter abonelik sistemi
- Sosyal medya API entegrasyonları
- AI destekli içerik önerileri
Sorun yaşarsanız veya önerileriniz varsa:
- GitHub Issues kullanın
- Dokümantasyonu kontrol edin
- [email protected] adresine e-posta gönderin
🎵 Müziğinizle dünyayı dönüştürün! 🌟
Bu portfolio sitesi, müzik ve teknolojinin güçlü birleşimini sergiler.