Kariyer sayfanızı kodla veya yapay zekâyla özelleştirin

Kariyer sayfanız, çoğu zaman adayların şirketinize ilk kez gerçekten yakından baktığı yerdir. Web sitenizin geri kalanıyla aynı yazı tiplerini, renkleri ve üslubu taşıdığında, bir işe alım aracının sayfası gibi değil, markanızın bir parçası gibi hissettirir.

Emploist’teki her şirket, kendi logosu ve rengiyle ilk günden hazır bir kariyer sayfasına sahip olur. Daha fazlasını istediğinizde, sayfanın kodunu düzenleyerek görünümüyle ilgili her şeyi değiştirebilirsiniz. Kulağa teknik geliyor, ancak geliştirici olmanız gerekmiyor. Bu kılavuz bunun iki yolunu gösteriyor:

Kodu Emploist’te düzenleyin. Yeni bir başlık veya yazı tipi gibi küçük değişiklikler için uygundur. Her değişikliği siz yazarken canlı önizlemede görürsünüz.
Bu işi bir yapay zekâ asistanına bırakın. Yeni bir bölüm gibi daha büyük değişiklikler için uygundur. Kodu indirir, ne istediğinizi sade bir dille anlatır ve asistanın size geri gönderdiği dosyayı yüklersiniz.

İkisini de örnek bir şirket olan Northwind Labs üzerinden göstereceğiz. İşte başlamadan önceki kariyer sayfası.

Varsayılan tasarımıyla Northwind Labs kariyer sayfası: logolu bir üst bilgi, kısa bir şirket açıklamasıyla birlikte büyük bir “Join Northwind Labs” başlığı ve departman ile konum filtreleri bulunan bir açık pozisyonlar listesi. — Emploist'in varsayılan tasarımıyla Northwind Labs kariyer sayfası.

Neleri değiştirebilirsiniz

Kariyer sayfanız altı dosyadan oluşur. Her biri, açıp düzenleyebileceğiniz küçük bir metin dosyasıdır:

Dosya	Neyi kontrol eder
`layout.liquid`	Her sayfayı saran çerçeve: üst bilgi, alt bilgi ve yazı tipleri gibi her sayfada yüklenen öğeler
`jobs.liquid`	Tanıtım metniniz ve açık pozisyonlar listesiyle ana sayfa
`job.liquid`	Tek bir ilanın sayfası
`apply.liquid`	Başvuru formu
`applied.liquid`	Adayların başvurduktan sonra gördüğü teşekkür sayfası
`styles.css`	Her şeyin nasıl göründüğü: renkler, yazı tipleri, boyutlar ve boşluklar

Dosyalarda üç basit dil kullanılır. HTML, başlıklar ve düğmeler gibi sayfada neler olduğunu belirler. CSS, sayfanın nasıl göründüğünü belirler. Liquid ise {{ company.name }} gibi yer tutucular ekler; bir aday sayfayı açtığında Emploist bunları şirketinizin adı, ilanlarınız ve diğer ayrıntılarla değiştirir.

Denemeler yaparak kariyer sayfanızı bozamazsınız:

Siz Kaydet düğmesine tıklayana kadar adaylar için hiçbir şey değişmez.
Emploist kodunuzu kaydetmeden önce kontrol eder ve bir sorun varsa neyi düzeltmeniz gerektiğini söyler.
İstediğiniz zaman varsayılan tasarıma geri dönebilirsiniz.

Başlamak için yönetici olarak giriş yapın ve kenar çubuğundan Kariyer sayfası bölümünü açın. Tasarım sekmesinde sayfanızın rengi ve kodu bulunur. Tek ihtiyacınız marka renginizse, Ana renk alanından seçmeniz yeterli. Kod gerekmez.

Emploist'te kariyer sayfası ayarlarının “Design” sekmesi: bir “Primary color” renk seçicisi ve “Edit code”, “Download ZIP” ile “Upload ZIP” düğmelerinin bulunduğu bir “Code” bölümü. — Kariyer sayfası → Tasarım. Bu kılavuzda kullanılan her şey Kod bölümünde.

Seçenek 1: Kodu Emploist’te düzenleyin

Düzenleyiciyi açın

Kodu düzenle düğmesine tıklayın. Sayfanızın kodu solda yer alır; her dosyanın bir sekmesi ve dosyanın ne işe yaradığını anlatan kısa bir notu vardır. Sağda ise kariyer sayfanızın örnek ilanlarla doldurulmuş canlı önizlemesi bulunur.

Emploist'in kod düzenleyicisi: solda dosya sekmeleri ve layout.liquid dosyasının kodu, sağda kariyer sayfasının canlı önizlemesi. — Kod düzenleyici. Sağdaki önizleme siz yazdıkça güncellenir.

Önizlemenin üstündeki Sayfaya git menüsüyle adayların görebileceği tüm sayfalar arasında geçiş yapabilirsiniz: ilan listesi, bir ilan, başvuru formu, teşekkür sayfası, kapalı bir ilan ve “Sayfa bulunamadı”. Bir dosyanın sekmesine tıkladığınızda da o dosyanın kontrol ettiği sayfa gösterilir.

Başlığı değiştirin

jobs.liquid sekmesine tıklayın. Sayfanın en üstündeki büyük başlık 3. satırdadır:

<h1 class="hero-title">Join {{ company.name }}</h1>

“Join” kelimesini “Build what’s next at” ile değiştirin. {{ company.name }} kısmına dokunmayın: Emploist oraya şirketinizin adını yerleştirir. Yazmayı bıraktıktan kısa bir süre sonra önizlemede yeni başlık görünür.

Düzenleyicide jobs.liquid dosyası: başlık “Build what's next at {{ company.name }}” olarak değiştirilmiş, önizlemede “Build what's next at Northwind Labs” görünüyor. — Etiketlerin arasındaki metni düzenleyin, önizleme de ona göre değişir.

Kendi yazı tipinizi kullanın

Yazı tipini değiştirmek için iki küçük düzenleme yeterli. Örnekte, Google Fonts üzerinde ücretsiz sunulan Fraunces yazı tipini kullanacağız.

Yazı tipini yükleyin. Google Fonts sitesinde yazı tipini açın, önce Get font, ardından Get embed code düğmesine tıklayın ve fonts.googleapis.com/css2 içeren <link> satırını kopyalayın. layout.liquid dosyasında, stylesheet_url içeren satırın hemen üstüne yeni bir satır açıp yapıştırın:
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=swap">
```
Yazı tipini kullanın. styles.css dosyasında, en üste yakın yerde --font: ile başlayan satırı bulun ve yazı tipinin adını tırnak içinde, ardından bir virgül koyarak listenin başına ekleyin:
```
--font: "Fraunces", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
```
Listedeki diğer yazı tipleri, tarayıcının sizinkini yükleyemediği durumlar için yedektir.

Düzenleyicide styles.css dosyası: --font satırına Fraunces eklenmiş, önizlemede kariyer sayfası Fraunces yazı tipiyle görünüyor. — Fraunces artık sayfanın her yerinde kullanılıyor.

Telefonda kontrol edin

Birçok aday kariyer sayfanızı telefonundan açacak. Sayfayı telefon boyutunda görmek için önizlemenin üstündeki telefon simgesine tıklayın.

Düzenleyicinin önizlemesi telefon boyutuna geçirilmiş; kariyer sayfası yeni başlık ve yazı tipiyle dar bir sütunda görünüyor. — Telefon simgesi, önizlemeyi telefon boyutunda gösterir.

Hataları yayına girmeden düzeltin

Bir değişiklik bir şeyi bozarsa Emploist bunu hemen bildirir. Dosyanın sekmesinde kırmızı bir işaret belirir, önizleme sayfa yerine neyin yanlış gittiğini gösterir ve kodun altındaki liste sorunun ne olduğunu ve hangi satırda olduğunu belirtir. Bir soruna tıklayarak doğrudan oraya gidebilirsiniz. Sorunların çoğu bir yazım hatası veya eksik bir kapanış etiketidir; son değişikliğinizi geri almak (Mac’te Cmd+Z, Windows’ta Ctrl+Z) genellikle sorunu çözer.

Sorunlu bir kodla düzenleyici: jobs.liquid sekmesinde kırmızı bir işaret var, 4. satırın altı çizili, önizleme sayfanın gösterilemediğini söylüyor ve kodun altındaki liste, kaydetmeden önce düzeltilmesi gereken 1 sorun olduğunu belirtiyor: jobs.liquid, 4. satır, etiket kapatılmamış. — Bir {% endif %} etiketini yanlışlıkla silmek, ona ait {% if %} etiketini açık bırakır; Emploist de tam olarak hangi satırda olduğunu gösterir.

Sorunlar varken kaydedemezsiniz, bu yüzden adaylar hiçbir zaman bozuk bir sayfa görmez.

Neleri kullanabileceğinize bakın

Bir ilanın konumu veya şirketinizin açıklaması gibi kullanabileceğiniz tüm yer tutucuları, her birinin neyi gösterdiğine dair bir notla birlikte görmek için düzenleyicinin üstündeki Referans düğmesine tıklayın.

Düzenleyicinin üzerinde açılmış “Reference” paneli; company.name ve company.description gibi yer tutucuları, her birinin neyi gösterdiğiyle birlikte listeliyor. — Referans, şablonların gösterebileceği her şeyi listeler.

Değişikliklerinizi kaydedin

Önizlemeden memnun olduğunuzda Kaydet düğmesine tıklayın. Kariyer sayfanız adaylar için hemen güncellenir.

Fikrinizi mi değiştirdiniz? Diğer işlemler menüsünde (Değişiklikleri at düğmesinin yanındaki üç nokta) Varsayılan koda sıfırla seçeneği bulunur; bu seçenek Emploist’in varsayılan tasarımını geri getirir. Her değişiklikte olduğu gibi, siz kaydedene kadar kariyer sayfanızda hiçbir şey değişmez.

Düzenleyicideki “More actions” menüsü: “Download ZIP”, “Upload ZIP” ve “Reset to default code” seçenekleri. — Diğer işlemler: kodu ZIP olarak indirin veya yükleyin ya da baştan başlayın.

Seçenek 2: Değişiklikleri bir yapay zekâ asistanına yaptırın

Yeni bir bölüm veya farklı bir düzen gibi daha büyük değişikliklerde, ne istediğinizi anlatıp kodu bir yapay zekâ asistanına yazdırmak çoğu zaman daha kolaydır. Biz Claude kullanacağız, ancak dosyaları okuyup geri gönderebilen her asistan hemen hemen aynı şekilde çalışır.

Kodunuzu indirin

Tasarım sekmesinde ZIP indir düğmesine tıklayın. İçinde şunların bulunduğu careers-page.zip adlı bir dosya indirilir:

Altı dosyanız, kaydettiğiniz tüm değişikliklerle birlikte.
Bir kılavuz (README.md): kariyer sayfalarının kurallarını ve kullanabileceğiniz tüm yer tutucuları açıklar. Bir yapay zekâ asistanının kodu ilk denemede doğru yazmasına yardımcı olan şey budur.
Sayfayı bilgisayarınızda önizlemek için bir önizleme kiti (preview.mjs ve company.json). İsteğe bağlıdır; en sonda ele alıyoruz.

Arşivi açmanız gerekmez: Claude, ZIP dosyasını olduğu gibi okuyabilir.

Değişiklikleri isteyin

claude.ai adresini açın, yeni bir sohbet başlatın ve + düğmesiyle careers-page.zip dosyasını ekleyin. Ardından ne istediğinizi, bir tasarımcıya anlatır gibi sade bir dille anlatın. Biz şunu istedik:

Bu, Emploist’teki kariyer sayfamızın kodu. Lütfen ilanlar sayfasını daha sıcak ve davetkâr hâle getir: açık pozisyonlara giden bir düğmeyle daha büyük bir giriş bölümü ve birkaç yan hak içeren bir “Why join us” bölümü (uzaktan çalışma imkânı, eğitim bütçesi, 30 gün izin, ekip buluşmaları). README.md dosyasına uy ve bana yükleyebileceğim bir ZIP gönder.

claude.ai üzerinde yeni bir sohbet: careers-page.zip eklenmiş ve daha büyük bir giriş bölümü ile bir “Why join us” bölümü içeren, daha sıcak bir ilanlar sayfası isteniyor. — ZIP dosyasını ekleyin ve ne istediğinizi anlatın.

README.md dosyasına uymasını ve bir ZIP geri göndermesini istemek, birkaç tur gidip gelmenin önüne geçer.

Güncellenmiş kodu alın

Claude’un işi yaklaşık dört dakika sürdü. Kılavuzu ve kodu okudu, değişiklikleri yaptı ve ardından kendi işini kontrol etti: önizleme kitiyle sayfayı masaüstü ve telefon boyutlarında önizledi ve Emploist’in kaydetmeden önce yaptığı kontrolün aynısını çalıştırdı. Sonra neleri değiştirdiğinin özetiyle birlikte yeni bir careers-page.zip gönderdi:

Daha büyük ve sıcak bir giriş bölümü: yeni bir başlık, bir karşılama cümlesi ve aşağıdaki listeye götüren bir See open roles (“Açık pozisyonları görün”) düğmesi.
Bir “Why join us” (“Neden bize katılmalısınız”) bölümü: uzaktan çalışma imkânı, eğitim bütçesi, 30 gün izin ve ekip buluşmaları için dört kart.
Açık pozisyonlarda küçük dokunuşlar: örneğin listenin üstünde kısa bir giriş metni.

Claude'un claude.ai üzerindeki yanıtı: careers-page.zip yüklenmeye hazır, jobs.liquid ve styles.css dosyalarında nelerin değiştiğinin listesi, yeni başlığın sabit metin olduğuna dair bir not ve “Download” düğmesiyle birlikte ZIP dosyası. — Claude neleri değiştirdiğini açıklıyor ve indirmeniz için bir ZIP gönderiyor.

Yüklemeden önce özeti okuyun. Bu örnekte Claude, bizim yeni başlığımızı kendi başlığıyla (“Come build what’s next with us”) değiştirdiğini belirtti ve başlığı değiştirmek için hangi satırı düzenlememiz gerektiğini söyledi. Ayrıca eğitim bütçesinin tutarı gibi ayrıntılar uydurmadı; yan hakları, kendi ayrıntılarımızı ekleyebilmemiz için genel tuttu.

Sonuç tam istediğiniz gibi değilse sohbete devam edin: “düğmeyi yeşil yap”, “sağlık sigortasıyla ilgili bir yan hak ekle” veya “giriş bölümünü kısalt”. İşiniz bitince güncellenmiş ZIP dosyasını isteyin.

Kodu Emploist’e yükleyin

Tasarım sekmesine dönüp ZIP yükle düğmesine tıklayın ve Claude’un gönderdiği ZIP dosyasını seçin. Emploist, düzenleyiciyi yeni kodla açar ama henüz kaydetmez; böylece adaylar için bir şey değişmeden önce göz atabilirsiniz.

ZIP yüklendikten hemen sonra düzenleyici: durumda “Unsaved changes” yazıyor, bir mesaj dosyaların careers-page.zip dosyasından yüklendiğini ve önizlemeyi kontrol edip kaydetmek gerektiğini söylüyor; önizlemede ise “See open roles” düğmesiyle yeniden tasarlanmış giriş bölümü görünüyor. — Yüklenen kod, kontrol etmeniz için düzenleyicide açılır.

Her sayfayı kontrol etmek için Sayfaya git menüsünü ve telefon simgesini kullanın. Bir şey doğru değilse düzenleyicide düzeltin veya Claude’a yeniden sorun. Her şey iyi göründüğünde Kaydet düğmesine tıklayın.

Sonuç

İşte iki değişiklikten sonra Northwind Labs kariyer sayfası: düzenleyicide eklediğimiz Fraunces yazı tipi ve Claude’un yeni tasarımı. Bu kılavuzun başındaki varsayılan tasarımla karşılaştırın.

Fraunces yazı tipiyle yeniden tasarlanmış Northwind Labs kariyer sayfası: “Careers at Northwind Labs” etiketi, “Come build what's next with us” başlığı, şirket açıklaması, bir karşılama cümlesi, açık pozisyon sayısını gösteren bir “See open roles” düğmesi ve dört kartlı bir “Why join us” bölümü: “Remote-friendly”, “Learning budget”, “30 days off” ve “Team offsites”. — Kariyer sayfasının son hâli; açık pozisyonlar daha aşağıda.

Telefonda ise şöyle görünüyor:

Telefonda yeniden tasarlanmış kariyer sayfası: başlık, şirket açıklaması ve tam genişlikte bir “See open roles” düğmesi; altında “Why join us” bölümü başlıyor. — Aynı sayfa telefonda.

Bilgisayarınızda önizleyin (isteğe bağlı)

Değişiklikleri yüklemeden önce bilgisayarınızda denemek isterseniz, ZIP dosyasındaki önizleme kiti kariyer sayfanızı tıpkı Emploist’in önizlemesi gibi örnek ilanlarla gösterir. Bunun için Node.js 22 veya üzeri bir sürüm gerekir.

careers-page.zip dosyasını bir klasöre çıkarın.
Bu klasörde bir terminal açın ve node preview.mjs komutunu çalıştırın.
Tarayıcınızda http://localhost:4321 adresini açın ve her değişiklikten sonra sayfayı yeniden yükleyin.

Kodunuzu Emploist’in kaydetmeden önce yaptığı gibi sorunlara karşı kontrol etmek için node preview.mjs check komutunu çalıştırın. Claude Code gibi bilgisayarınızdaki dosyalarla çalışan bir yapay zekâ asistanı kullanıyorsanız, bu komutları sizin yerinize çalıştırmasını isteyebilirsiniz.

Bilmeniz gerekenler

Kodu yalnızca yöneticiler düzenleyebilir. Diğer ekip üyeleri Tasarım sekmesini görebilir, ancak değiştiremez.
Kariyer sayfalarında JavaScript çalışmaz. Bu, sayfanızı ve adaylarınızı güvende tutar. Bu kılavuzdaki her şey JavaScript olmadan çalışır.
Görseller, yazı tipleri ve stil sayfaları başka web sitelerinden yüklenebilir, yeter ki adresleri https:// ile başlasın. Google Fonts da bu şekilde çalışır.
Başvuru formları çalışmaya devam eder; tasarımı nasıl değiştirirseniz değiştirin, başvurular her ilanın gelen kutusuna düşmeye devam eder.

Kendi kariyer sayfanızı görmek ister misiniz? Ücretsiz denemenizi başlatın; şirketinizi kurduğunuz anda sayfanız hazır olur. Sonra onu kendinize göre şekillendirin.