Bunu, hakkında olduğu şeyin üzerinde okuyorsun.
Yakın zamanda tam zamanlı freelance'e geçtim ve bu, bir portfolyonun ne işe yaradığını değiştiriyor. Bir işin olduğunda, yaptığın iş işvereninin üzerinden konuşur. Kendi başınayken, işin kendi adına konuşmak zorunda — ve bunu yapabileceği bir yere ihtiyacı var. Yıllarca biriken projeleri kafamda ve dağınık klasörlerde taşıyordum: müze enstalasyonları, birkaç oyun, backend sistemleri, küçük araçlar. Hiçbiri bir yabancının bulabileceği bir yerde durmuyordu. Ben de bu siteyi o yer olsun diye yaptım.
İşte içine ne girdiği ve yaparken ne öğrendiğim.
The stack#
Site, App Router ile Next.js üzerinde çalışıyor, TypeScript ile yazıldı, Tailwind ile stillendi. İçerik MDX dosyalarında yaşıyor — her proje case study'si ve her günlük yazısı (bu dahil) sadece üstünde biraz frontmatter olan bir Markdown dosyası.
En çok memnun olduğum karar bu sonuncusu. Site dosya-tabanlı. Bir proje eklemek istediğimde hiçbir sayfa koduna dokunmuyorum — bir klasöre yeni bir .mdx dosyası bırakıyorum, site onu alıyor:
export function getAllProjects(): Project[] {
const files = readdirSync("content/projects/");
return files
.map((file) => parseFrontmatter(file))
.filter((p) => p.published)
.sort((a, b) => a.order - b.order);
}
/projects sayfası o fonksiyona ne olduğunu soruyor ve ne dönerse onu render ediyor. Bugün beş proje, bir gün elli — kod hiç değişmiyor. Yeni iş, bir dosya ve bir git push, fazlası değil. Aynı kalıp şu an okuduğun günlüğü de besliyor.
The design#
Görünüm bilinçli. Saf siyah yerine sıcak siyah, tek bir amber vurgu, işin çoğunu yapan monospace tipografi, ve ekranın kenarlarını çerçeveleyen sessiz bir HUD. Glassmorphism yok, yumuşak geçişler yok, her şeyi yuvarlatmak yok.
Bunu bir şablondan almadım. Gerçekten sevdiğim estetik bu — terminaller, teknik çizimler, çevirdiğin bir broşürden çok işlettiğin bir sistem hissi. Günlerimi enstalasyonlarda ve araç geliştirmede, donanıma yakın geçiriyorum, ve sitenin de o dünya gibi hissettirmesini istedim. Bir portfolyo, diğer her portfolyo gibi değil, kişinin kendisi gibi görünmeli. Bu, bana benziyor.
What I learned#
Açıkçası cevap hepsi — ama şöyle bir şekilde: zaten her şeyi yarı yarıya biliyordun ve gerçeğini yapmak o yarım bilgiyi asıl beceriye dönüştürdü.
Daha önce Next.js'e dokunmuştum, ama tamamen dosya-tabanlı bir içerik sistemini baştan sona kurmak — dynamic route'lar, statik generation, syntax-highlight'lı kod blokları olan bir MDX pipeline'ı — bunu tutorial'ların asla yapmadığı şekilde somutlaştırdı. Kimsenin bahsetmediği kısımlar için de aynısı geçerli: bir domain'i Cloudflare'e almak, DNS'i Vercel'e yönlendirmek, bir deploy'un neden bloklandığını çözmek (eski bir git e-postası, hem de), bir boot-sequence animasyonunu ekranlar arası doğru render ettirmek. Bunların hiçbiri gösterişli değil. Hepsi, dizüstündeki bir projeyle gerçekten canlı bir site arasındaki farkı oluşturuyor.
Gösterişsiz kısımlar işin çoğu. Bunu zaten biliyordum. Bunu yapmak bana hatırlattı.
On using an AI agent#
Açık konuşayım: bunun çoğunu bir AI agent ile birlikte yaptım. Tekrar eden işi o hallediyordu — component iskeletleri kurmak, boilerplate bağlamak, bir kararı bir düzine dosyaya dönüştürmek — ve bu beni hızlı tuttu. Üç gün, üç hafta değil.
Ama agent bir araçtı, yazar değil. Mimari, tasarım dili, neyin girip neyin kalacağı, şeyin nasıl hissettirmesi gerektiğine dair her yargı kararı — bunlar benimdi. Agent'a hız için yaslandım ve birkaç gerçekten zorlu problemde ona başvurdum. Zevk ve kararlar bende kaldı. Bence bu araçları şu an dürüstçe kullanmanın yolu bu: anladığın işte hızlı gitmelerine izin ver, önemli olan işte direksiyonda kal.
What's next#
Site canlı ve büyümek üzere kurulu. Projeler tamamlandıkça daha fazla case study. Burada, günlükte daha fazla yazı — bunun gibi bazıları teknik, bazıları değil, yanındaki Lovecraft yazısı gibi. Müze enstalasyonlarından gerçek fotoğraflar, onları çekmek için tekrar sahada olduğumda.
Şimdilik, var. Bir yabancı işi bulabiliyor ve iş kendi adına konuşuyor. Bütün mesele buydu.