Skip to content

Latest commit

 

History

History
230 lines (159 loc) · 11 KB

File metadata and controls

230 lines (159 loc) · 11 KB

👨‍💻 Terminal Portfolio Template

HTML5 CSS3 JavaScript GitHub Pages License: MIT

Read in: English | 한국어 | Deutsch | 中文 | Türkçe


Bu, hafif bir terminal tarzı kişisel web sayfası şablonudur. Herhangi bir derleme aracına (build tool) ihtiyaç duymayan basit bir statik site olarak oluşturulmuştur: Sadece saf HTML, CSS ve JavaScript.

Bu depoyu kendi portföyünüz için bir şablon (template) olarak kullanabilirsiniz. Bunun için birkaç yapılandırma değerini manuel olarak düzenleyebilir veya yerleşik yapılandırma oluşturucuyu (config generator) kullanabilirsiniz.

Live Demo Config Generator

👀 Önizleme ve Demo (Preview & Demo)

Canlı Demo (Live Demo)

💡 Daktilo animasyonunu ve etkileşimli komutları canlı olarak deneyimleyin. demo_terminal_like_portfolio

Yapılandırma Oluşturucu (Config Generator)

⚙️ Kodlara hiç dokunmadan kişiselleştirilmiş yapılandırma dosyanızı görsel olarak oluşturun! how_to_use_generator

Geliştirici: PythonToGo


🚀 Hızlı Başlangıç (Quick Start)

Terminal portföyünüzü saniyeler içinde çalışır hale getirin. Aşağıdaki komutları kopyalayıp terminalinize yapıştırın:

# 1. Depoyu klonlayın
git clone [https://github.com/PythonToGo/terminal-portfolio-template.git](https://github.com/PythonToGo/terminal-portfolio-template.git)

# 2. Dizin içerisine girin
cd terminal-portfolio-template

# 3. index.html dosyasını varsayılan web tarayıcınızda açın
# (macOS için 'open', Windows için 'start', Linux için 'xdg-open' kullanın)
open index.html

Açıldıktan sonra, aşağıdaki yöntemlerden birini kullanarak özelleştirebilirsiniz:

Not: Yalnızca portföy kullanımı için derleme araçları veya npm gerekmez. npm yalnızca şablon kodunu değiştirirken veya katkıda bulunurken gereklidir.


🛠 Proje Yapısı (Project Structure)

Temel dosya ve dizinlere kısa bir bakış:

.
├── index.html              # Ana terminal sayfası
├── terminal-config.js      # Kişisel yapılandırmanız (isteğe bağlı, oluşturucu ile üretilir)
├── js/                     # Çekirdek mantık (komutlar, GitHub API, vb.)
├── css/                    # Çeşitli terminal renk temaları
└── generator/              # Web tabanlı yapılandırma oluşturucu aracı
    ├── index.html          # Yapılandırma oluşturucu formu
    ├── main.js             # Form mantığı ve yapılandırma oluşturma
    └── style.css           # Oluşturucu stilleri

⚙️ Yapılandırma Seçenekleri (Configuration Options)

A Seçeneği – Manuel Yapılandırma

js/commands.js dosyasını açın ve dosyanın en üstündeki sabit değerleri düzenleyin:

  • GITHUB_USERNAME, EMAIL_ADDRESS
  • linkedin, github, blog (bağlantılar bölümünden gizlemek için boş "" bırakın)
  • linksOthers – Şu formatı kullanarak özel bağlantılar ekleyin: { "twitter": { name: "Twitter", url: "..." } }
  • CLAUDE_OWNER_NAME (yedek isim)
  • about, links, projects, help, welcomeMsg, banner
  • themes – Tema adlarını ilgili CSS dosya yollarına eşler
  • allCommands – Tab (Sekme) otomatik tamamlama için kullanılan listeyi tanımlar

Not: Bu en basit moddur ve hiçbir derleme adımı veya harici yapılandırma dosyası gerektirmez.

B Seçeneği – Oluşturucuyu Kullanma (Önerilen)

Tarayıcıda generator/index.html dosyasını açın veya barındırılan oluşturucuyu ziyaret edin.

Oluşturucu Form Bölümleri

Bölüm Alanlar
Profile (Profil) Tam ad, e-posta, GitHub kullanıcı adı, blog başlığı, Giriş/Hakkımda metni (isteğe bağlı)
Links (Bağlantılar) GitHub URL, LinkedIn URL (isteğe bağlı), Blog URL (isteğe bağlı), Diğerleri (isteğe bağlı: Her satıra bir Ad ve URL, `
Theme (Tema) Varsayılan tema
Banner (Afiş) Afiş metni, Afiş yazı tipi stili (block, dotted, light, minimal, shadow), canlı önizleme

Yapılandırma Çıktısı

Oluşturucu, aşağıdaki gibi görünen bir window.TERMINAL_CONFIG nesnesi üretir:

{
  profile: { name, email, githubUsername, blogTitle },
  links: { github, linkedin?, blog?, others? },
  theme: { defaultTheme, bannerText, bannerFont },
  content: { aboutLines? }
}

Yapılandırma Nasıl Kullanılır?

Yapılandırma Yolu Kullanım Amacı
profile.name Afiş metni (theme.bannerText boşsa), terminal komut satırı, yedek about metni, CLAUDE_OWNER_NAME
profile.email email komutunu çalıştırırken kullanılır
profile.githubUsername GitHub bağlantısını oluşturur ve projects komutu için depoları (repo) çeker
links.github links tablosunda gösterilir, github komutu tarafından kullanılır
links.linkedin links tablosunda gösterilir, linkedin komutu tarafından kullanılır (boşsa gizlenir)
links.blog links tablosunda gösterilir (boşsa gizlenir)
links.others links tablosunda gösterilir ve özel komutlar oluşturur (Örn: Twitter eklendiğinde twitter yazabilirsiniz)
theme.defaultTheme Sayfa yüklendiğinde uygulanacak başlangıç renk temasını ayarlar
theme.bannerText ASCII afiş (banner) olarak oluşturulacak metin
theme.bannerFont Afiş stili (block, dotted, light, minimal, shadow)
content.aboutLines about komutunun çıktı içeriği (Yedek değer: "Hi there, I am {Tam Ad}")

💻 Kullanılabilir Komutlar (Available Commands)

Komut Açıklama
help Kullanılabilir tüm komutları listeler
about Giriş/hakkımda metnini gösterir
links GitHub, LinkedIn, blog ve özel bağlantıları içeren bir tablo gösterir
projects GitHub API aracılığıyla GitHub depolarını (repo) çeker ve gösterir
email Varsayılan e-posta istemcisini açar (mailto:)
linkedin, github İlgili URL'leri yeni bir sekmede açar (yapılandırılmamışsa linkedin gizlenir)
theme ls Kullanılabilir tüm temaları listeler
theme set <name> Mevcut temayı değiştirir
theme random Rastgele bir tema uygular
banner ASCII afişi (banner) gösterir
clear Terminal çıktı ekranını temizler
history Komut geçmişini gösterir
echo <text> Girilen metni terminalde aynen yazdırır
ping <host> Sahte ping simülasyonu çalıştırır
explain, run, edit Claude tarzı sürpriz yumurtalar (easter eggs)
ls, cd Sahte dosya sistemi gezinme komutları
vi, vim, nvim, emacs Metin düzenleyici şakaları
sudo Erişim engellendi mesajı + sürpriz yumurta

Not: links.others içine eklenen özel bağlantılar otomatik olarak komut haline gelir. (Örn: Twitter|https://... olarak yapılandırmak twitter komutunu etkinleştirir).


🎨 Temalar ve Özelleştirme (Themes & Customization)

Temalar

Aşağıdaki temalar varsayılan olarak mevcuttur: lila (varsayılan), midnight, chocolate, og (orijinal), rainbow, orange, olive, bluescreen

ASCII Afiş (Banner)

  • Yazı tipi stilleri: block, dotted, light, minimal, shadow
  • Metin formatı: Hem büyük hem de küçük harfler desteklenir.
  • Yapılandırma: theme.bannerText (veya yedek olarak profile.name) ve theme.bannerFont aracılığıyla yönetilir.

🏗 Geliştirme Notları (Development Notes)

Komut Dosyası Yükleme Sırası (index.html)

Her şeyin doğru çalışmasını sağlamak için, komut dosyaları (script) şu sırayla yüklenir:

  1. terminal-config.js (isteğe bağlı, oluşturucu çıktısı)
  2. js/github.js
  3. js/caret.js
  4. js/ascii_banner.js
  5. js/commands.js
  6. js/main.js

Yerel Test

  • Hiçbir derleme aracına (Webpack, Vite, Node.js) ihtiyaç yoktur.
  • Tarayıcınızda doğrudan index.html dosyasını açın veya herhangi bir basit yerel web sunucusunu (örn. python -m http.server) kullanarak klasörü sunun.

CI/CD ve Kalite Kontrolü

Şablonu fork ettiğinizde veya değiştirdiğinizde CI otomatik olarak çalışır:

  • Testler (npm test): Birim testleri (örn. completeQuery, oluşturucu çıktı doğrulaması).
  • Lint (npm run lint): Kod kalitesi için ESLint.
  • Denetim (npm audit): Bağımlılık güvenlik kontrolü.

Yerel çalıştırma: npm installnpm testnpm run lint


🌐 Dağıtım / Yayınlama (GitHub Pages)

Bu şablon, sitenizi otomatik olarak yayınlamak (deploy) için .github/workflows/deploy-pages.yml konumunda kullanıma hazır bir GitHub Actions iş akışı içerir.

  1. Bu şablonu kullanarak yeni bir depo oluşturun (veya Fork/Clone yapın).
  2. Yaptığınız özelleştirmeleri varsayılan dalınıza (branch - main veya master) pushlayın.
  3. GitHub deponuzda Settings (Ayarlar) → Pages (Sayfalar) bölümüne gidin.
  4. Source (Kaynak) açılır menüsünü GitHub Actions olarak ayarlayın.

"Deploy terminal portfolio to GitHub Pages" adlı GitHub Action ilk kez başarıyla çalıştıktan sonra, canlı sitenize şu adresten erişilebilecektir: https://<github-kullanici-adiniz>.github.io/<repo-adiniz>/


🤝 Katkıda Bulunma (Contributing)

Pull Request (PR) gönderimleri, hata bildirimleri (bug report) ve iyileştirme önerileri her zaman kabul edilir!

📜 Krediler (Credits)

  • Orijinal terminal portföyü konsepti ve şablonu PythonToGo tarafından oluşturulmuştur.