🧾 HTML CV / Resume Tasarlamak

Klasik CV öldü mü? Hayır. Ama HTML CV seviye atladı.

Bir CV düşün:

Word değil ❌
PDF değil ❌
Scroll ediliyor ✔️
Mobilde düzgün ✔️
Kodla yapılmış ✔️

Ve en önemlisi:

“Bu CV benim HTML anlayışımı gösteriyor.”

HTML CV, özellikle frontend / yazılım dünyasında:

Ben sadece konuşmam, yaparım demenin yolu
Semantic HTML + erişilebilirlik + düzen = sessiz şov 😎

🎯 HTML CV NEDEN GERÇEKTEN MANTIKLI?

Bu bölümü HR gözünden düşünelim 👀

HTML CV sana ne kazandırır?

✅ Kod bilgin somutlaşır
✅ HTML hiyerarşisini bildiğin anlaşılır
✅ SEO + semantic farkındalığı gösterir
✅ Portföy gibi çalışır
✅ Online paylaşılır (tek link)

Ama gerçekçi olalım:

❗ Bazı firmalar hâlâ PDF ister
👉 Çözüm: HTML CV + PDF versiyon

HTML CV = bonus karakter 🎮

🧱 HTML CV’NİN TEMEL İSKELETİ

(Burayı düzgün kur, gerisi akar)

&lt;!DOCTYPE html>
&lt;html lang="tr">
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>Cansu Porsuk | Frontend Developer&lt;/title>
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
  &lt;meta name="description" content="Frontend Developer CV - HTML, CSS, JavaScript">
&lt;/head>
&lt;body>

&lt;/body>
&lt;/html>

🧠 Buradaki gizli kahramanlar:

lang="tr" → erişilebilirlik
viewport → mobil uyum
description → SEO + paylaşım önizlemesi

📌 HTML CV bile SEO düşünebilir.

🧑‍💼 HEADER: “BEN BUYUM” ALANI

(İlk 5 saniye kuralı)

&lt;header>
  &lt;h1>Cansu Porsuk&lt;/h1>
  &lt;p>Frontend Developer&lt;/p>

  &lt;address>
    &lt;a href="mailto:cansu@example.com">cansu@example.com&lt;/a>&lt;br>
    &lt;a href="https://github.com/cansuporsuk">GitHub&lt;/a> |
    &lt;a href="https://linkedin.com/in/cansuporsuk">LinkedIn&lt;/a>
  &lt;/address>
&lt;/header>

Neden böyle?

<h1> → CV’nin ana başlığı (tek olmalı)
<p> → rol tanımı
<address> → iletişim semantic olarak doğru

❌ <div class="contact">
✅ <address>

HTML mutlu, ekran okuyucu mutlu 😄

📝 HAKKIMDA (ABOUT ME)

Uzun anlatma, net anlat

&lt;section>
  &lt;h2>Hakkımda&lt;/h2>
  &lt;p>
    Temiz, erişilebilir ve performans odaklı
    kullanıcı arayüzleri geliştirmeyi seven
    bir frontend geliştiricisiyim.
  &lt;/p>
&lt;/section>

🧠 Altın ipucu:

“Ne yaptığını” değil
“Nasıl düşündüğünü” yaz

❌ “Takım çalışmasına yatkınım”
✅ “Erişilebilirlik ve okunabilirlik önceliğim”

🧠 YETENEKLER (SKILLS)

Liste ama gerçekçi

&lt;section>
  &lt;h2>Yetenekler&lt;/h2>
  &lt;ul>
    &lt;li>HTML5 (Semantic HTML, Accessibility)&lt;/li>
    &lt;li>CSS3 (Flexbox, Grid)&lt;/li>
    &lt;li>JavaScript (ES6+)&lt;/li>
    &lt;li>Responsive Design&lt;/li>
  &lt;/ul>
&lt;/section>

🎯 İpuçları:

30 madde yazma
“Biliyorum” değil “kullandım” yaz
HTML CV = dürüst CV

💼 DENEYİM (EXPERIENCE)

`<article>` burada parlar ⭐

&lt;section>
  &lt;h2>Deneyim&lt;/h2>

  &lt;article>
    &lt;h3>Frontend Developer – XYZ Company&lt;/h3>
    &lt;time datetime="2022-01">2022&lt;/time> –
    &lt;time datetime="2024-06">2024&lt;/time>

    &lt;p>
      Kullanıcı arayüzleri geliştirdim,
      performans ve erişilebilirlik
      iyileştirmeleri yaptım.
    &lt;/p>
  &lt;/article>
&lt;/section>

Neden `time`?

Tarih = makine + insan için anlamlı
CV parsing sistemleri sever

📌 HR botları bile bu CV’yi okur 🤖

🎓 EĞİTİM (EDUCATION)

Sade ve temiz

&lt;section>
  &lt;h2>Eğitim&lt;/h2>

  &lt;article>
    &lt;h3>Bilgisayar Mühendisliği&lt;/h3>
    &lt;p>ABC Üniversitesi — 2018–2022&lt;/p>
  &lt;/article>
&lt;/section>

❌ Uzun ders listeleri
✅ Bölüm + okul + yıl

🧩 PROJELER (ASIL GÖSTERİ ALANI)

CV’yi CV yapan bölüm 💥

&lt;section>
  &lt;h2>Projeler&lt;/h2>

  &lt;article>
    &lt;h3>Personal Blog&lt;/h3>
    &lt;p>
      HTML, CSS ve JavaScript kullanılarak
      geliştirilen kişisel blog sitesi.
    &lt;/p>
    &lt;a href="https://example.com">Canlı Gör&lt;/a>
  &lt;/article>
&lt;/section>

🧠 Proje yazarken:

Ne yaptın?
Hangi teknolojiler?
Link var mı?

❗ Link yoksa → proje hayal ürünü gibi durur 😄

🧱 GERÇEK HAYAT MINI PROJE

Hepsi Bir Arada

&lt;article>
  &lt;h2>&lt;strong>HTML CV Örneği&lt;/strong>&lt;/h2>

  &lt;p>
    Bu CV &lt;em>özellikle&lt;/em>
    &lt;mark>frontend geliştiriciler&lt;/mark>
    için hazırlandı.
    &lt;small>(İlham alınabilir)&lt;/small>
  &lt;/p>

  &lt;p>
    &lt;del>Ezberle&lt;/del>
    &lt;ins>Anla&lt;/ins>
  &lt;/p>
&lt;/article>

Bu kod:

Semantic ✔️
Okunabilir ✔️
SEO uyumlu ✔️

🚫 HTML CV’DE EN SIK YAPILAN HATALAR

❌ Her şeyi <div> ile yazmak
❌ <h1>’i 5 kere kullanmak
❌ Inline CSS ile sayfayı boğmak
❌ Mobil uyumu düşünmemek
❌ Linkleri çalışmayan projeler

🧠 ALTIN KURALLAR (BUNU KAYDET)

HTML = anlam
CSS = görünüm
CV = dürüstlük
Proje = kanıt

🎯 HIZLI ÖZET TABLO

Bölüm	Etiket
Sayfa iskeleti	`html`, `body`
Üst alan	`header`
Bölümler	`section`
Deneyim	`article`
Tarih	`time`
İletişim	`address`
Liste	`ul`, `li`