Hoşgeldiniz! Bu, Akram Mohamed Saeed'in kişisel portföy sitesidir. Modern ve duyarlı tasarımıyla web geliştirme alanındaki projelerimi ve yeteneklerimi sergilemek üzere oluşturulmuştur.
Bu portföy sitesi, web geliştirme konusundaki uzmanlığımı göstermek ve potansiyel işverenlere veya müşterilere benim hakkımda bilgi vermek amacıyla tasarlanmıştır. Sitede tüm projelerim, teknik yeteneklerim ve iletişim bilgilerim yer almaktadır. Özellikle modern tasarım ilkeleri ve kullanıcı deneyimine odaklanarak geliştirilmiştir.
Sitesinde birbirinden harika özellikler bulunmaktadır. Sayfayı açtığınızda ilk olarak karşınıza gelen anasayfada, benim hakkımda kısa bilgiler ve profesyonel hedeflerim yazılıdır. Siz ziyaretçi olark, "Hakkımda" sekmesine tıklayarak benim kariyer hedeflerimi ve kişisel bilgilerimi görebilirsiniz.
Site, "Yetenekler" bölümünde web geliştirme, tasarım ve programlama alanlarında sahip olduğum teknik yetenekleri detaylı bir şekilde göstermektedir. Her yetenek, ikonlarla görseleştirilmiştir ve kullanıcılar için anlaşılması kolay hale getirilmiştir.
"Projeler" kısmında ise daha önce tamamladığım projelerim sergilenmektedir. Bu projeler kartkart şeklinde görüntülenmekte ve filtreleme özelliği sayesinde proje türüne göre (web veya mobil) sıralanabilmektedir. Her proje kartında projenin adı, açıklaması ve görseli yer almaktadır.
"İletişim" bölümünde ziyaretçiler benim sosyal medya hesaplarıma erişebilir, bana doğrudan mesaj gönderebilir veya e-posta yoluyla bana ulaşabilirler. Böylece, işbirliği fırsatları veya danışmanlık hizmetleri için benimle kolayca iletişime geçebilirler.
Sitede gece modu özelliği bulunmaktadır. Bu özellik sayesinde ziyaretçiler, sitede kalma sürelerine göre ışık modu veya karanlık modu arasında seçim yapabilirler. Gundüz saatlerinde ışık ve parlak renkler kullanılır, gece saatlerinde ise koyu tonlar tercih edilir. Bu özellik, gözleri koruma açısından da oldukça önemlidir.
Tasarım tamamen duyarlı olarak geliştirilmiştir. Bilgisayar, tablet, telefon gibi tüm cihazlarda mükemmelen çalışmaktadır. Ekran boyutu küçük olduğunda menüler mantıklı şekilde düzenlenir, görseller ve metinler otomatik olarak başındaki cihaza uyum sağlar.
Bu proje HTML5, CSS3 ve JavaScript ES6+ teknolojileri kullanarak geliştirilmiştir. Her bir teknoloji, farklı bir amaca hizmet etmektedir.
HTML5, sayfanın yapısal temelini oluşturur. Anlamsal işaretleme (semantic markup) kullanarak, sayfa içeriğinin erişilebilir ve SEO dostu olması sağlanmıştır. Başlıklar, paragraflar, listeler ve diğer öğeler uygun HTML etiketleriyle tanımlandı.
CSS3 ise siteye görsellik katmaktadır. Modern Flexbox ve Grid tasarım yöntemleri kullanılarak sayfa elemanları düzenlenmiştir. Geçişler (transitions) ve animasyonlar, sayfa etkileşimini daha canlı hale getirmektedir. Renk gradyanları, gölgeler ve diğer görsel efektler, tasarımı profesyonel görünüştür.
JavaScript ES6+ ise siteyi etkileşimli hale getirmektedir. Kullanıcı etkileşimlerine (tıklama, kaydırma vb.) tepki vermek, DOM elemanlarını dinamik olarak değiştirmek, form doğrulaması yapmak ve çeşitli animasyonlar oluşturmak JavaScript'in görevleridir.
Bunun yanında Font Awesome kütüphanesi, profesyonel simgeler sağlamıştır. Google Fonts ise guzel ve okunaklı tipografi stilinde ve seçilmiş yazı tipi sayesinde site daha çekici görünmektedir.
Proje dosyaları, açık ve organize bir şekilde düzenlenmiştir. Ana dosyalar şu şekilde sıralanmıştır:
portfolio/
├── index.html # Ana HTML dosyası, tüm içeriği barındırır
├── style.css # Tüm CSS stilleri ve tasarım kuralları
├── script.js # JavaScript kodu ve etkileşim mantığı
├── README.md # Proje belgelendirmesi (bu dosya)
├── .gitignore # Git sistem dosyaları
├── .gitattributes # Git dosya öznitelikleri
└── images/ # Proje görselleri ve fotoğrafları
Her dosya özel bir görev taşımaktadır. HTML dosyası sayfanın içeriğini ve yapısını oluşturur, CSS dosyası tasarım ve stil kurallarını içerir, JavaScript dosyası ise etkileşim ve dinamik işlevleri yönetir.
Anasayfa kişisel bir giriş sayfasıdır. Profil fotoğrafım, adım ve profesyonel bir özet yazılıdır. Yazı, dinamik bir "yazı makinesi" efektiyle gösterilmektedir ki bu da siteyj daha dikkat çekici hale getirmektedir.
Yetenekler bölümünde, web geliştirme alanında sahip olduğum beceriler listelenmiştir. Her yetenek adı, ikonuyla birlikte gösterilmekte ve açıklaması yapılmaktadır. HTML, CSS, JavaScript, Python, Git, Responsive Design gibi teknik konular bu sekmede yer almaktadır.
Projeler bölümü, daha önce tamamlamış olduğum çalışmaları sergilemektedir. Her proje, bir kartla gösterilmekte ve proje adı, açıklaması ve görseli yer almaktadır. Kullanıcılar, "Web" veya "Mobil" seçeneklerini tıklayarak proje türüne göre filtreleme yapabilirler.
Benimproje örnekleri, e-ticaret sitesi, kişisel blog platformu, hava durumu uygulaması, portföy websitesi ve restoran sipariş uygulamasıdır. Her biri, farklı teknik beceriler ve farklı alanlar göstermektedir.
İletişim bölümünde, ziyaretçiler bana ulaşabileceği yollar bulunmaktadır. Telefon numarası, e-posta adresi ve sosyal medya hesaplarım (LinkedIn, GitHub, Twitter vs.) yer almaktadır. Bunun yanında, belki bir iletişim formu da olabilir, böylece ziyaretçiler doğrudan mesaj gönderebilirler.
Eğer bu projeyi kendi bilgisayarınızda veya sunucusunda çalıştırmak isterseniz, aşağıdaki adımları izleyebilirsiniz.
İlk olarak, projeyi GitHub'dan klonlamanız gerekmektedir. Terminal atau komut satırında şu komutu çalıştırın:
git clone https://github.com/YOUR_USERNAME/portfolio.git
cd portfolioBundan sonra, index.html dosyasını doğrudan web tarayıcınızda açabilirsiniz. Dosyaya sağ tıklayıp "Open with Browser" (Tarayıcı ile Aç) seçeneğini seçebileceğiniz gibi, HTML dosyasını tarayıcının adres çubuğuna sürükleyebilirsiniz.
Alternatif olarak, eğer Python kuruluysa, terminal'den aşağıdaki komutu yazarak yerel bir sunucu başlatabilirsiniz:
python -m http.server 8000Bundan sonra tarayıcınızda http://localhost:8000 adresine gidin ve projeyi göreceksiniz.
Bu portföy sitesi, tüm ekran boyutlarında mükemmelen çalışmak üzere tasarlanmıştır. Bilgisayarınızda açın, tablet boyutuna küçültün, telefonunuzda açın - her yerde sitesi düzgün ve anlaşılır görünecektir.
CSS Media Queries kullanılarak, farklı ekran boyutlarında farklı stil kuralları uygulanmıştır. Geniş ekranlarda tüm içerik yan yana gösterilmektedir, dar ekranlarda ise öğeler üst üste konumlandırılır. Böylece, kullanıcı deneyimi her cihuzda optimal seviyede kalır.
Site, gece modu özelliği ile donatılmıştır. Sayfanın sağ üst köşesindeki ay ikonuna tıklamak, siteyi gece moduna geçirir. Tıklandığında tüm renkler ters çevrilir ğ - açık renkler karanlık hale gelir, karanlık renkler açık hale gelir.
Bu özellik, gece geç saatlerde siteyi ziyaret eden kullanıcıların gözlerini korumaktadır. Ayrıca, OLED ekranlı cihazlarda batarya tasarrufu da sağlamaktadır.
Eğer bu portföy sitesini kendi projeniz için kullanmak isterseniz kolayca düzenleyebilirsiniz.
index.html dosyasında sayfanın içeriğini değiştirebilirsiniz. Adınızı, biyografinizi, proje adlarınızı ve açıklamalarınızı güncelleyebilirsiniz. Profil fotoğrafını değiştirmek için src özniteliklerikini düzenleyebilirsiniz.
style.css dosyasında renkleri, yazı tiplerini ve tasarım kurallarını değiştirebilirsiniz. Çeşitli CSS değişkenleri (CSS variables) kullanılmıştır, böylece ana renkleri değiştirmek çok kolay hale gelmiştir.
script.js dosyasında JavaScript fonksiyonlarını düzenleyebilir, yeni özellikler ekleyebilir veya mevcut özellikleri değiştirebilirsiniz. Proje listeleri, animasyonlar, form işlevleri gibi işlevler burada yönetilmektedir.
Eğer bu portföy sitesini internete yayınlamak isterseniz, birkaç popüler platform kullanabilirsiniz.
Netlify, basit bir free hosting servisidir. GitHub depo bağlamak ve otomatik olarak deploy etmek mümkündür.
Vercel ise bir diğer modern hosting platformudur. Özellikle Next.js projeleri için optimize edilmiş olsa da, statik siteler de kolayca host edilebilir.
GitHub Pages, GitHub'un kendi hosting servisidir. Tamamen free'dir ve depolarınızdan doğrudan yayınlanabilir. Sadece ayarları yapmak gerekli.
Bu platformlar arasından birini seçip, adımları izleyerek projenizi canlıya çıkabilirsiniz.
Son Güncelleme: Nisan 2026