ferhattufekci.github.io

🇬🇧 English | 🇹🇷 Türkçe

---

English

Personal portfolio website of Ferhat Tüfekçi.

Live: https://ferhattufekci.github.io

Tech Stack

• HTML5 / CSS3 / JavaScript
• jQuery + Shuffle.js (portfolio filtering)
• GitHub Actions (Medium article sync + GitHub repo sync)
• GitHub Pages (static hosting)

Project Structure

.
├── index.html                  # Single-page portfolio
├── css/                        # Stylesheets
├── js/                         # Client-side scripts
├── images/                     # Images and assets
├── fonts/                      # Local fonts & icons
├── data/
│   ├── medium-systems.json     # Auto-generated by GitHub Actions
│   ├── medium-test.json
│   ├── medium-software.json
│   ├── medium-all.json
│   ├── meta.json
│   ├── github-repos.json       # Auto-generated by GitHub Actions
│   ├── github-starred.json     # Auto-generated by GitHub Actions
│   └── github-meta.json
├── scripts/
│   ├── fetch-medium.js         # Medium RSS fetcher
│   ├── fetch-github.js         # GitHub repos & stars fetcher
│   └── package.json
├── .github/workflows/
│   ├── fetch-medium.yml        # Runs every 6 hours
│   └── fetch-github.yml        # Runs every Monday 03:00 UTC
├── FerhatTufekci_CV.pdf
├── ads.txt
├── robots.txt
├── sitemap.xml
└── BingSiteAuth.xml

Pages

Page	Description
About Me	Hero section with photo, title rotation, and resume download
Blog	Medium articles with language (EN/TR) and category filters
Projects	GitHub repositories with category filters, pinned repos, and starred section
Contact	Phone, email, Calendly interview scheduler, and links

Blog — Medium Auto-Sync

Articles are automatically fetched from Medium every 6 hours via GitHub Actions.

How it works:

1. fetch-medium.js reads https://medium.com/feed/@ferhattufekci
2. Category is detected automatically from RSS tags (systems / test / software)
3. Language is detected automatically from title (Turkish characters → tr, otherwise en)
4. Articles are saved to data/medium-*.json
5. Browser reads these JSON files — no CORS issues

To exclude an article from the site:
Add its hex ID (last segment of the Medium URL) to the EXCLUDE array in scripts/fetch-medium.js.

No manual steps needed when publishing a new article on Medium.

Blog Language & Category Filters

The Blog section supports two independent filters:

Filter	Options
Language	All / 🇬🇧 EN / 🇹🇷 TR
Category	All / Systems Engineering & Business Analysis / Test Engineering / Software Engineering

Projects — GitHub Auto-Sync

Repositories are automatically fetched from GitHub every Monday via GitHub Actions.

How it works:

1. fetch-github.js calls GET /users/ferhattufekci/repos (REST API)
2. Pinned repos are fetched via GitHub GraphQL API
3. All languages per repo are fetched via GET /repos/{owner}/{repo}/languages
4. Starred repos are fetched via GET /users/ferhattufekci/starred
5. Category is detected automatically from repo name, description, and topics
6. Results are saved to data/github-repos.json, data/github-starred.json, data/github-meta.json

Projects page sections:

Section	Description
📌 PINNED	Repos pinned on GitHub profile
📂 ALL REPOSITORIES	All public repos, sorted by stars
⭐ STARRED	Repos starred by Ferhat — resources he finds valuable (first 20 shown, expandable)

Category filter applies to PINNED and ALL REPOSITORIES sections.
Label updates dynamically to show the selected filter name.

To exclude a repo from the site:
Add the repo name to the EXCLUDE set in scripts/fetch-github.js.

No manual steps needed when creating or updating a repository.

Run Locally

# VS Code Live Server (recommended)
# Right-click index.html → Open with Live Server

# Or Python
python3 -m http.server 8000

License

Published for portfolio and demonstration purposes.
All personal content, articles, images, and branding are the intellectual property of Ferhat Tüfekçi.
Any commercial use, redistribution, or derivative work requires prior written permission.

Author

---

Türkçe

Ferhat Tüfekçi'nin kişisel portföy web sitesi.

Canlı: https://ferhattufekci.github.io

Teknoloji Yığını

• HTML5 / CSS3 / JavaScript
• jQuery + Shuffle.js (portföy filtreleme)
• GitHub Actions (Medium makale senkronizasyonu + GitHub repo senkronizasyonu)
• GitHub Pages (statik barındırma)

Proje Yapısı

.
├── index.html                  # Tek sayfalık portföy
├── css/                        # Stil dosyaları
├── js/                         # İstemci tarafı betikler
├── images/                     # Görseller ve kaynaklar
├── fonts/                      # Yerel fontlar ve ikonlar
├── data/
│   ├── medium-systems.json     # GitHub Actions tarafından otomatik oluşturulur
│   ├── medium-test.json
│   ├── medium-software.json
│   ├── medium-all.json
│   ├── meta.json
│   ├── github-repos.json       # GitHub Actions tarafından otomatik oluşturulur
│   ├── github-starred.json     # GitHub Actions tarafından otomatik oluşturulur
│   └── github-meta.json
├── scripts/
│   ├── fetch-medium.js         # Medium RSS çekici
│   ├── fetch-github.js         # GitHub repo ve yıldız çekici
│   └── package.json
├── .github/workflows/
│   ├── fetch-medium.yml        # Her 6 saatte bir çalışır
│   └── fetch-github.yml        # Her Pazartesi 03:00 UTC'de çalışır
├── FerhatTufekci_CV.pdf
├── ads.txt
├── robots.txt
├── sitemap.xml
└── BingSiteAuth.xml

Sayfalar

Sayfa	Açıklama
About Me	Fotoğraf, dönen başlık ve özgeçmiş indirme bağlantısı
Blog	Medium makaleleri — dil (EN/TR) ve kategori filtreleriyle
Projects	GitHub repoları — kategori filtresi, sabitlenmiş repolar ve yıldızlı repolar
Contact	Telefon, e-posta, Calendly mülakat planlayıcı ve bağlantılar

Blog — Medium Otomatik Senkronizasyonu

Makaleler, GitHub Actions aracılığıyla her 6 saatte bir Medium'dan otomatik olarak çekilir.

Nasıl çalışır:

1. fetch-medium.js, https://medium.com/feed/@ferhattufekci adresini okur
2. Kategori, RSS tag'lerinden otomatik tespit edilir (systems / test / software)
3. Dil, başlıktaki Türkçe karakterlerden otomatik tespit edilir (Türkçe karakter → tr, aksi halde en)
4. Makaleler data/medium-*.json dosyalarına kaydedilir
5. Tarayıcı bu JSON dosyalarını okur — CORS sorunu yok

Bir makaleyi siteden gizlemek için:
scripts/fetch-medium.js dosyasındaki EXCLUDE dizisine Medium URL'sinin sonundaki hex ID'yi ekle.

Medium'da yeni makale yayınlandığında hiçbir manuel adım gerekmez.

Blog Dil ve Kategori Filtreleri

Blog bölümü iki bağımsız filtre destekler:

Filtre	Seçenekler
Dil	Tümü / 🇬🇧 EN / 🇹🇷 TR
Kategori	Tümü / Systems Engineering & Business Analysis / Test Engineering / Software Engineering

Projects — GitHub Otomatik Senkronizasyonu

Repolar, GitHub Actions aracılığıyla her Pazartesi otomatik olarak çekilir.

Nasıl çalışır:

1. fetch-github.js, GET /users/ferhattufekci/repos çağrısı yapar (REST API)
2. Sabitlenmiş repolar GitHub GraphQL API ile çekilir
3. Her repo için dil dağılımı GET /repos/{owner}/{repo}/languages ile alınır
4. Yıldızlanan repolar GET /users/ferhattufekci/starred ile çekilir
5. Kategori; repo adı, açıklaması ve topic'lerinden otomatik tespit edilir
6. Sonuçlar data/github-repos.json, data/github-starred.json, data/github-meta.json dosyalarına kaydedilir

Projects sayfası bölümleri:

Bölüm	Açıklama
📌 PINNED	GitHub profilinde sabitlenmiş repolar
📂 ALL REPOSITORIES	Tüm public repolar, yıldız sayısına göre sıralı
⭐ STARRED	Ferhat'ın yıldızladığı repolar — değerli bulduğu kaynaklar (ilk 20 gösterilir, genişletilebilir)

Kategori filtresi PINNED ve ALL REPOSITORIES bölümlerine uygulanır.
Bölüm başlığı, seçilen filtre adını dinamik olarak gösterir.

Bir repoyu siteden gizlemek için:
scripts/fetch-github.js dosyasındaki EXCLUDE kümesine repo adını ekle.

Yeni repo oluşturulduğunda veya güncellendiğinde hiçbir manuel adım gerekmez.

Yerel Çalıştırma

# VS Code Live Server (önerilen)
# index.html üzerine sağ tıkla → Open with Live Server

# Veya Python ile
python3 -m http.server 8000

Lisans

Bu proje portföy ve tanıtım amaçlı yayımlanmıştır.
Tüm kişisel içerik, makaleler, görseller ve marka öğeleri Ferhat Tüfekçi'ye aittir.
Ticari kullanım, yeniden dağıtım veya türev çalışmalar için önceden yazılı izin alınması gerekmektedir.

Yazar