HTML & CSS ile Minimal Geliştirici Kimlik Kartı
Merhaba! Fatih Soysal olarak, bugün sizlerle HTML ve CSS kullanarak minimalist ve kişisel bir geliştirici kimlik kartı oluşturma konusunda detaylı bir rehber paylaşacağım. Bu kart, özgeçmişinizin kısa bir özeti niteliğinde olup, becerilerinizi ve iletişim bilgilerinizi şık bir şekilde sunmanıza olanak tanır. Dev.to’daki orijinal makaleden esinlenerek, Türkçeleştirme ve kendi deneyimlerimi de ekleyerek daha kapsamlı bir içerik oluşturdum.
Öncelikle, projenizin temel yapısını oluşturalım. Bu, HTML’in temel yapı taşlarını kullanarak gerçekleştirilecektir. Aşağıda, kimlik kartımızın HTML yapısı yer almaktadır:
<div class="card">
<div class="card-image">
<img src="profil_fotoğrafınız.jpg" alt="Profil Fotoğrafınız">
<div>
<div class="card-content">
<h2>Adınız Soyadınız</h2>
<p>Mesleğiniz</p>
<ul>
<li>Beceri 1</li>
<li>Beceri 2</li>
<li>Beceri 3</li>
</ul>
<a href="https://fatihsoysal.com" target="_blank">Web Sitem</a>
</div>
</div>
Bu kod bloğu, bir kart yapısı (.card), profil fotoğrafı için bir alan (.card-image) ve bilgileriniz için bir alan (.card-content) tanımlar. Ardından, CSS ile bu yapıları görsel olarak düzenleyip kişiselleştirebiliriz. Örneğin, renkler, yazı tipleri, boyutlar ve kenar boşlukları CSS ile kontrol edilebilir.
CSS kullanarak kartın stilini özelleştirebilirsiniz. Örneğin, .card sınıfına köşeler eklemek, gölgelendirme uygulamak veya arka plan rengini değiştirmek gibi işlemler gerçekleştirebilirsiniz. Burada yaratıcılığınızı konuşturmanız ve kişisel tarzınızı yansıtmanız önemlidir. Elbette, internetten bulduğunuz örnek CSS kodlarını da inceleyip kendi projenize uyarlayabilirsiniz.
Unutmayın ki, bu sadece bir başlangıç noktasıdır. Daha fazla özelliği ekleyerek, kimlik kartınızı daha da geliştirebilirsiniz. Örneğin, sosyal medya bağlantılarınız için ikonlar ekleyebilir, proje örneklerinizden bahsedebilir veya ekstra becerilerinizi listeleyebilirsiniz. Hatta animasyonlar kullanarak daha etkileyici bir görünüm elde edebilirsiniz. Kendi kişisel web sitenizi geliştirmek için buraya bakabilirsiniz.
Bu makalede, basit bir HTML ve CSS kullanarak oluşturulmuş geliştirici kimlik kartı örneği gösterdim. Umarım bu rehber, kendi kişisel kimlik kartınızı oluşturmanızda size yardımcı olmuştur. Unutmayın, web geliştirme sürekli öğrenme ve deneyimlemeyi gerektirir. Bol kodlama!
#Etiketler: HTML, CSS, Geliştirici Kimlik Kartı, Minimalist Tasarım, Kişisel Web Sitesi, Web Geliştirme, Kod Örneği, Fatih Soysal