Harika bir soru! Kodun içine ne yaptığını ve nasıl çalıştığını adım adım anlatayım. Bu proje, **"AI for Humanity" (İyilik için Yapay Zeka)** temasına uygun, modern ve etkileşimli bir web arayüzü.
İşte yaptığım değişikliklerin ve kodun mantığının detayları:
### 1. Tasarım ve Stil (CSS)
Kodun en görsel kısmı CSS tarafında. Modern bir "Dark Mode" (Koyu Tema) tasarımı seçtim.
* **Renk Paleti (`:root`):**
* `--bg-color`: Koyu lacivert/siyah tonları (#0f172a) kullanarak gözü yormayan, premium bir arka plan oluşturdu.
* `--primary` ve `--accent`: Mavi ve turkuaz tonları (#38bdf8, #22d3ee) kullanarak teknoloji ve yapay zeka hissini verdim.
* **Glassmorphism (Cam Efekti):** Header (üst menü) kısmında `backdrop-filter: blur(12px)` kullanarak arka planın bulanık geçmesini sağladım. Bu, modern UI tasarımında çok popülerdir.
* **Grid Yapısı:** Kartları yerleştirmek için `display: grid` ve `grid-template-columns: repeat(auto-fit, ...)` kullandım. Bu kod, ekran küçüldüğünde kartların otomatik olarak tek satıra düşmesini, ekran büyüdüğünde yan yana dizilmesini sağlar (Responsive).
* **Hover Efektleri:** Kartların üzerine gelince (`:hover`) hafifçe yukarı kalkması (`transform: translateY(-5px)`) ve parlama efekti (`box-shadow`) ile kullanıcıya "buna tıkla" hissi verdim.
* **Gradient Text:** Başlıklarda (`h1`) ve marka isminde renk geçişleri (`linear-gradient`) kullanarak metnin sıkıcı düz beyaz olmasını engelledim.
### 2. HTML Yapısı
HTML kısmı semantik (anlamsal) etiketlerle temiz bir yapıya sahip:
* **Header:** Marka adı ve "Built with anycoder" linki sabit olarak üstte duruyor.
* **Hero Section:** Kullanıcıyı karşılayan büyük başlık ve açıklama metni.
* **Grid Container:** İçerideki kartların (Card) bulunduğu ana alan.
* **Cards (Kartlar):** Her bir kategori (Sağlık, Eğitim vb.) bir `` etiketi içinde. İçinde ikon, başlık, açıklama ve "Projeleri Gör" butonu var.
* **Modal (Popup):** Sayfanın en altına gizli bir pencere (`modal-overlay`) koydum. Başlangıçta görünmez (`opacity: 0`), kullanıcı bir kartı tıkladığında açılır.
### 3. JavaScript Mantığı (İşlevsellik)
JavaScript kısmı sayfanın "canlı" olmasını sağlar.
* **Veri Yapısı (`contentData`):**
* Kodun içinde karmaşık HTML yazmak yerine, verileri bir JavaScript nesnesi (object) içinde sakladım.
* Örneğin: `'health': { title: '...', list: [...] }` şeklinde. Bu, veriyi yönetmek ve değiştirmek çok daha kolaydır.
* **Etkileşim (`openModal`):**
* Bir kart tıklandığında `onclick="openModal('health')"` tetiklenir.
* JavaScript, bu anahtarı (`health`) alır, `contentData` içinden ilgili verileri bulur.
* Modal penceresinin başlığını, açıklamasını ve listesini (`ul` içindeki `li`'leri) dinamik olarak doldurur.
* Son olarak `.active` sınıfını ekleyerek pencereyi görünür yapar.
* **Kapatma İşlemi:**
* "Kapat" butonu veya pencere dışına tıklayınca `closeModal` çalışır ve pencereyi kapatır.
### Özetle Ne Oluşturdum?
Eskiden sadece düz metinler olan bir sayfayı;
1. **Görsel olarak zengin** (gradientler, ikonlar, gölgeler),
2. **Mobil uyumlu** (telefonda tek sütun, bilgisayarda çok sütun),
3. **İçerik yüklü** (JavaScript ile dinamik içerik gösteren)
bir uygulamaya dönüştürdüm.
Kullanıcı bir kartı tıkladığında sayfa yenilenmez, sadece ilgili pencere (modal) açılır ve detaylar orada gösterilir. Bu, kullanıcı deneyimi (UX) açısından çok daha hızlı ve modern bir yöntemdir.