Tarayıcıda çalışan bir Windows 8.1 klonu, aynı zamanda da Türkçe ve İngilizce bir portfolyo. Masaüstünde ve tablette Windows 8.1, telefonda ise Windows Phone 8.1 düzeni açılıyor. Kilit ekranını yukarı sürükleyip AFU, Misafir ya da İşe alım hesabıyla oturum açıyorsun; İşe alım hesabı seni doğrudan profile götürüyor. İlk açılışta Windows'un renk değiştiren "Merhaba" kurulum ekranı ve köşelerin nasıl çalıştığını anlatan kısa bir tanıtım geliyor.

Portfolyonun içeriğini Windows uygulamalarına dağıttım; bu projede en sevdiğim fikir de bu. Projeler Mağaza'da duruyor, her birinin genel bakış, ekran görüntüleri, özellikler ve kilometre taşlarıyla kendi mağaza sayfası var. Özgeçmişim Kişiler'de; blog yazıları, eğitimler ve konuşmalar Okuyucu'da. Posta'da sana yazılmış tanıtım iletileri var, "Yeni" ile bana e-posta da yazabilirsin. Takvim yazıları ve sertifikaları ay görünümünde gösteriyor. Başarılar sertifikaların yanında senin gezinirken kazandıklarını da tutuyor. Müzik ise tarayıcıda anlık sentezlenen üç parçayı canlı bir spektrumla çalıyor. Başlangıç ekranındaki canlı kutucuklar da bütün bunlara açılan kapılar. Projeyi Next.js 16, React 19 ve TypeScript ile yazdım; sunucu tarafı yok.

Başlangıç ekranı ve masaüstü bir arada

Başlangıç ekranında kutucukları sürükleyebilir, yeniden boyutlandırabilir, gruplara ad verebilirsin. Uygulamalar görünümü programları kategoriye göre listeliyor, Ara charm'ı da hem dosya hem program buluyor. Varsayılan kutucuk düzeni Windows 8.1'in Başlangıç ekranını örnek alıyor. Köşeler de Windows 8'deki gibi çalışıyor: sağ köşeler charm çubuğunu, sol üst köşe önceki uygulamayı, sol alt köşe Başlangıç'ı açıyor. Dokunmatik ekranda sağ kenardan içeri kaydırınca charm çubuğu, sol kenardan kaydırınca önceki uygulama geliyor. Telefonda ise alttaki gezinme çubuğu, sola kaydırınca açılan uygulama listesi ve yukarıdan çekilen işlem merkezi var.

Masaüstü tarafında Windows 8 pencere çerçevesi (ortalanmış başlık, kırmızı kapat düğmesi), Aero Snap, kenarlardan boyutlandırma, Win+X menüsü, sağ tık menüleri ve Özellikler penceresi var. Görev çubuğunda sabitlenmiş ve çalışan programlar önizlemeleriyle duruyor; yanında saat ve takvim, ses, dil, İşlem Merkezi ve Ağlar paneli var. Masaüstü simgelerini sürükleyebilir, seçim dikdörtgeniyle seçebilir, yeniden adlandırabilir ve Geri Dönüşüm Kutusu'na atabilirsin.

Masaüstü programlarının her biri bir kayıt dosyasında bir uygulama kimliğine bağlı ve kendi penceresinin içinde çiziliyor. Dosya Gezgini'nde şerit, ağaç, altı görünüm, arama ve sürükle-bırak çalışıyor. Internet Explorer 11 sekmeli ve yerel .html dosyalarını açabiliyor. Komut İstemi'nde dir, cd, copy, tasklist gibi komutlar sanal dosya sistemi üzerinde gerçekten çalışıyor. Paint, WordPad ve Not Defteri bu dosya sistemine kaydediyor; Denetim Masası'ndaki Kişiselleştirme ve Bölge ayarları da gerçek tercihlere bağlı. Görev Yöneticisi, Hesap Makinesi, Mayın Tarlası ve Çalıştır da masaüstü penceresi olarak açılıyor. Windows logosu dahil bütün simgeleri sıfırdan SVG olarak çizdim; Metro gliflerinde Segoe UI Symbol'ün tarzına sadık kaldım. Segoe UI'ın olmadığı sistemlerde Selawik yazı tipi devreye giriyor.

Pencere yöneticisi React'in dışında

"İşletim sisteminin" durumu lib/os.tsx içinde tutuluyor: güç aşaması (off, boot, lock, login, welcome, os, power), oturumdaki kullanıcı, o an Başlangıç'ın mı, Uygulamalar'ın mı yoksa bir uygulamanın mı açık olduğu, charm'lar, bildirimler, tercihler ve başarılar.

Masaüstü pencere yöneticisini (lib/wm.ts) ise React'in dışında, useSyncExternalStore ile okunan harici bir store olarak yazdım. Böylece pencereler Başlangıç ekranına gidip gelince kaybolmuyor, bir pencereyi sürüklemek de bütün işletim sistemini yeniden çizdirmiyor. Store açık pencereleri, z-sırasını ve odağı tutuyor. Her pencere kendi konumunu, boyutunu, büyütülmüş ya da küçültülmüş olup olmadığını, Aero Snap ile hangi kenara yapıştığını ve varsa sahibini biliyor. Bir pencereye ait iletişim kutusu açıkken o pencereyi kullanamıyorsun; kaydedilmemiş değişikliği olan bir pencereyi kapatırken de karşına "değişiklikleri kaydet?" sorusu çıkıyor.

Gerçek Windows yollarıyla dosya sistemi

Sanal dosya sistemi localStorage'da kalıcı ve Windows yollarıyla çalışıyor; C:\Users\AFU\Belgeler\notlar.txt gibi yollar büyük ve küçük harfe duyarsız eşleşiyor. Bilinen klasörler, Türkçe bir Windows'taki desktop.ini gibi yerelleştirilmiş bir görünen ad taşıyor. Düğüm türleri arasında sürücü, klasör, metin, RTF, resim, kısayol, URL, program, HTML, ses ve video var. Paint'te kaydettiğin resimler data URL olarak saklanıyor; hazır gelen resimlerin bir kısmı ise kodla üretilmiş prosedürel görseller. Geri Dönüşüm Kutusu'na attığın öğeler nereden geldiklerini ve ne zaman silindiklerini hatırlıyor. Aç ve Farklı Kaydet iletişim kutuları ile kes, kopyala, yapıştır panosu da bu katmanın üzerinde çalışıyor.

Adres çubuğundan doğrudan bir uygulamaya da gidebilirsin: ?boot=1&open=notepad açılışı, kilidi ve oturum açmayı atlayıp Not Defteri'ni açıyor.

Sunucusuz yayın ve yarım kalanlar

Sunucu tarafı olmadığı için next build her şeyi statik export ile düz HTML, JS ve CSS olarak çıkarıyor. Docker imajı iki aşamalı: proje Node imajında derleniyor, sonra yalnızca çıktı klasörü nginx'e kopyalanıyor; çalışan imajda Node yok. nginx gzip'i açıyor ve adında hash olan statik dosyalara bir yıllık önbellek süresi veriyor.

Metro tarafında Kamera ve portfolyo uygulamaları çalışıyor. Hava Durumu, Haritalar, Haberler, Spor, Finans, Seyahat, Video, Alarmlar, SkyDrive ve Ses Kaydedici kayıtlı ve açılıyor, ama içleri şimdilik boş. Bu bir hayran çalışması; Microsoft ile bir bağlantısı yok.