Merhaba! Bu repo, yeteneklerimi, projelerimi ve yazılım felsefemi sergilemek üzere tasarladığım kişisel portföy web sitemin kaynak kodlarını barındırmaktadır. Bu platformu, dijital bir kartvizitten daha fazlası olarak görüyor; teknik yetkinliğimi ve problem çözme yaklaşımımı somut bir şekilde göstermeyi amaçlıyorum.
Bu projeyi, bir geliştirici olarak sahip olduğum teknik derinliği ve estetik anlayışı bir araya getirme vizyonuyla hayata geçirdim. Amacım, statik bir "hakkında" sayfasının ötesine geçerek, her projenin arkasındaki hikayeyi, karşılaştığım zorlukları ve ürettiğim çözümleri detaylı vaka analizleri ile anlatmaktı. Bu site, benim dijital atölyem ve mühendislik yaklaşımımın bir yansımasıdır.
Sitemi geliştirirken hem teknik hem de görsel olarak zengin bir deneyim sunmayı hedefledim. İşte öne çıkan bazı özellikler:
- Modern ve Duyarlı Tasarım: Her türlü cihazda (mobil, tablet, masaüstü) kusursuz bir kullanıcı deneyimi sunar.
- Next.js 15 App Router Mimarisi: Performans, SEO ve geliştirici deneyimini en üst düzeye çıkarmak için en güncel teknolojilerden faydalandım.
- İnteraktif Arka Plan:
react-tsparticlesile siteye derinlik katan, dinamik ve hafif bir partikül animasyonu entegre ettim. - Gelişmiş Kaydırma Animasyonları:
ScrollRevealkullanarak sayfa elemanlarına akıcı ve dikkat çekici giriş animasyonları ekledim. - Özelleştirilmiş İmleç (Cursor): Kullanıcı etkileşimini artırmak için tasarladığım, standart imlecin yerini alan şık bir "dot" ve "outline" animasyonu.
- Dinamik Glow Efektleri:
IntersectionObserverAPI'si ile, kullanıcının görüntülediği bölüme göre arka planda beliren estetik "glow" (ışıma) efektleri geliştirdim. - 3D Tilt Efekti:
Vanilla-Tilt.jsile proje kartlarına ve yetenek ikonlarına, fare ile üzerine gelindiğinde hafif bir 3D derinlik hissi kazandırdım. - Detaylı Vaka Analizleri: Her projem için ayrı bir sayfada, projenin amacını, teknik detaylarını ve sonuçlarını anlatan kapsamlı içerikler hazırladım.
- Kod Farkı Görüntüleyici:
react-diff-viewerkullanarak, bir kodun işlemden önceki ve sonraki halini etkili bir şekilde sergiledim. - Modüler ve Tekrar Kullanılabilir Bileşenler: Proje genelinde tutarlılığı sağlamak ve bakımı kolaylaştırmak için
SectionHeader,FeatureItem,InfoBoxgibi kendi özel bileşenlerimi oluşturdum.
Bu projeyi hayata geçirirken, modern web geliştirme standartlarını yansıtan, güvendiğim ve keyifle kullandığım teknolojileri tercih ettim:
| Kategori | Teknoloji | Neden Tercih Ettim? |
|---|---|---|
| Ana Çatı (Framework) | Next.js |
Sunucu Taraflı Oluşturma (SSR) ve Statik Site Üretimi (SSG) yetenekleriyle üst düzey performans ve SEO optimizasyonu sağlıyor. |
| Kütüphane | React |
Bileşen tabanlı mimarisiyle karmaşık arayüzleri yönetilebilir ve modüler bir şekilde inşa etmeme olanak tanıyor. |
| Stil & Tasarım | CSS Modules, Global CSS |
Bileşen bazlı stil izolasyonu ve CSS değişkenleri (variables) ile sürdürülebilir bir tema altyapısı kurdum. |
| Animasyon & Efektler | react-tsparticles |
İnteraktif ve performansı etkilemeyen arka planlar oluşturmak için ideal bir seçim. |
ScrollReveal.js |
Kullanıcı deneyimini zenginleştiren, kolay entegre edilebilir kaydırma animasyonları sunuyor. | |
Vanilla-Tilt.js |
Dış bağımlılığı olmayan, hafif ve pürüzsüz 3D tilt efektleri için tercih ettim. | |
| İkonlar | Font Awesome, Devicon |
Geniş ikon setleri ve kolay kullanımları sayesinde projeye görsel zenginlik katıyorlar. |
| Kod Görüntüleme | react-diff-viewer |
Teknik yetkinliğimi sergilemek adına, kod manipülasyonu gibi konuları görselleştirmek için güçlü bir araç. |
Kodun bakımını kolaylaştırmak ve ölçeklenebilirliği sağlamak adına, projeyi Next.js App Router'ın standartlarına uygun olarak organize ettim:
Projeyi kendi bilgisayarınızda kurmak ve çalıştırmak isterseniz aşağıdaki adımları izleyebilirsiniz.
Gereksinimler:
- Node.js (v18.x veya üstü)
npmveyayarn
Kurulum Adımları:
- Repoyu klonlayın:
git clone [https://github.com/bentahsin/benth-portfolio.git](https://github.com/bentahsin/benth-portfolio.git)
- Proje dizinine geçin:
cd benth-portfolio - Gerekli paketleri yükleyin:
npm install
- Geliştirme sunucusunu başlatın:
npm run dev
- Tarayıcıda açın: Uygulama artık http://localhost:3000 adresinde çalışıyor olacaktır.
Bu proje MIT Lisansı ile lisanslanmıştır. Daha fazla bilgi için LICENSE dosyasına göz atabilirsiniz.
- GitHub: @bentahsin
- E-posta:
tahsin@bentahsin.com
Bu projeye gösterdiğiniz ilgi için teşekkür ederim. Her türlü geri bildirim ve katkıya açığım.