
Şık Tek Renkli Portföy Sitesi
Best for design studio, branding agency and etc.
Talimatlar
ADIM 1 — Marka kimliğini kesinleştirin ve içerik taslağını hazırlayın (çok az soru sorarak).
Öncelikle daha sonra ihtiyaç duyacağınız ertelenmiş araçları yükleyin: generateImage ve generateWebpage için toolSearch fonksiyonunu çağırın, böylece 2. ve 3. adımlardan önce hazır olurlar.
Ardından, kullanıcının mesajını ve @referanslarını şu hususlar açısından tarayın: marka/stüdyo adı, markanın ne yaptığı (odak noktası), slogan, proje adları, hizmet listesi ve yüklenen/referans verilen görseller (bunları 2. Adım için takip edin - kapsadıkları alanları YENİDEN OLUŞTURMAYIN).
Soru sorma kuralları (lütfen kısa ve öz sorular sorun; kullanıcı kısa etkileşimleri tercih eder):
- Hem marka adı hem de marka odağı eksikse, askUserQuestion fonksiyonunu iki toplu soruyla BİR KEZ çağırın:
S1 "Stüdyo/marka adı?" — 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject' gibi seçenekler.
S2 "Marka ne iş yapıyor?" — 'tasarım ajansı', 'fotoğraf stüdyosu', 'mimarlık firması', 'moda markası', 'kişisel portföy' gibi seçenekler.
- Eğer yalnızca bir kişi eksikse, sadece o kişiyi sorun.
- Eğer kullanıcının mesajında her ikisi de mevcutsa, hiçbir şey sormayın — doğrudan devam edin.
Marka adı ve odak noktası belli olduktan sonra, geri kalanını kendiniz yazın, başka soru sormayın. Üslup: editoryal, kendinden emin, minimalist, üst düzey. Metni kısa tutun — bu stil, gereksiz ayrıntılarla değil, boşluklarla canlanır.
Taslak:
- Slogan: Tek bir ifade gibi okunan iki kısa satır, örneğin 'Geleceği tasarla', 'Dünyayı çerçevele', 'Kalıcı olanı inşa et', 'Onu kalıcı kıl'. Her satır 1-2 kelime içerir. Satır sonunu italik serif + normal serif yazı tipiyle eşleştirin.
- Tanıtım metni hakkında: Yaklaşık 80 kelime, iki kısa paragraf. Kuruluş döneminden (örneğin '80'lerden beri'), birkaç hizmetten ve küresel müşteri/sektör ödülleri havasından bahsedin.
- ÜÇ vaka çalışması. Her biri için: odak noktasına uygun, özgün bir proje adı (tasarım ajansı için 'Schematiq', 'Commercial Co.', 'Sprig & Sky' gibi isimleri yeniden kullanın; diğer odak noktaları için benzer his uyandıran isimler seçin), 1-2 hizmet etiketi, yaklaşık 30 kelimelik bir Arka Plan cümlesi, yaklaşık 30 kelimelik bir Çözüm cümlesi.
- Odak noktasıyla ilgili ALTI hizmet etiketi (varsayılanlar: Marka Aktivasyonu, Entegre Pazarlama, Web Sitesi Geliştirme, Video Prodüksiyonu, Marka Kimliği, Marka Stratejisi — ajans dışı odak noktaları için uyarlayın).
- Kapanış eylem çağrısı sloganı (tek satır, ~10-14 kelime), örneğin 'Markanızı yükseltin ve tarihe adınızı yazdırın.'
- Altbilgi öğeleri: stüdyo adı, 'Şartlar ve Destek', 'Gizlilik Politikası'.
3. adım için tüm içeriği bellekte tutun. Henüz generateWebpage fonksiyonunu çağırmayın.
ADIM 2 — Tam olarak 6 adet birbiriyle uyumlu siyah beyaz görsel oluşturun.
Slot haritası: kahraman, hakkında, proje_1, proje_2, proje_3, özellik.
A) Kullanıcı daha önce görseller (yüklemeler, @referanslar, mesajdaki URL'ler) sağladıysa, bunları alındıkları sıraya göre ilgili alanlara atayın ve bu alanlar için oluşturma işlemini atlayın. Yalnızca kalan alanlar için oluşturma işlemini gerçekleştirin.
B) Her boş yuva için generateImage fonksiyonunu çağırın. Mümkünse, bunları tek bir araç grubu içinde PARALEL olarak çalıştırın.
Her slot için değiştirilemez görsel stil:
- Sadece saf siyah beyaz. Renk tonu yok, sepya yok, duotone yok. Editöryel / sinematik / üst düzey dergi kalitesi. Altı fotoğrafın tamamında tutarlı kontrast ve gren. Düzenlemenin gerektirdiği yerlerde bol miktarda boş alan.
Slot istemi şablonları — [DISCIPLINE] yerine 1. Adımdaki marka odak noktasını (örneğin 'tasarım ajansı', 'fotoğraf stüdyosu', 'mimarlık firması') ve [DISCIPLINE_SUBJECT] yerine uygun bir konuyu (örneğin tasarım için: kağıt heykel / tipografi yakın çekim; mimarlık için: gölge geometrisi; moda için: silüet; fotoğrafçılık için: natürmort) yazın:
1. kahraman (en boy 16:9): "[KONU_DİSİPLİNİ]'nin sinematik siyah beyaz fotoğrafı, dramatik editoryal kompozisyon, şık minimalist monokrom estetik, yumuşak üst aydınlatma, geniş boş alan, üstün dergi kalitesi, renksiz, yüksek kontrast."
2. Hakkında (4:3 en boy oranı): "Çağdaş bir [DISCIPLINE] stüdyo iç mekanının siyah beyaz belgesel fotoğrafı; yumuşak gün ışığı alan büyük pencereler, minimalist masa ve aletler, editoryal röportaj tarzı, yalnızca monokrom, yüksek kontrast."
3. proje_1 (en boy 1:1): "Temiz beyaz bir yüzey üzerinde marka kimliği maketlerinin (kartvizitler, antetli kağıtlar, basılı kırtasiye malzemeleri) siyah beyaz düz yerleşimi, keskin yukarıdan aşağıya editoryal tasarım fotoğrafçılığı, yalnızca tek renkli."
4. proje_2 (en boy 1:1): "[DİSİPLİN] ile ilgili siyah beyaz minimalist natürmort (örneğin film klaket tahtası, maket, stilize ürün), sinematik stüdyo aydınlatması, keskin gölgeler, yalnızca monokrom."
5. proje_3 (en boy 1:1): "[DISCIPLINE] ile ilgili, minimal tarzda tasarlanmış, üst düzey dergi estetiğine sahip, siyah beyaz editoryal yaşam tarzı fotoğrafçılığı, yalnızca monokrom."
6. özellik (en boy 16:9): "[DISCIPLINE] ile ilgili geniş siyah beyaz soyut kompozisyon, dramatik perspektif, atmosferik editoryal monokrom, renksiz."
Altı URL'nin tamamı elinizde olduktan sonra, her birini slot numarasıyla etiketleyin ve 3. adıma geçin.
3. ADIM — Web sayfasını oluşturun.
`generateWebpage` işlevini `as_artifact: true` parametresiyle çağırın. Aşağıdaki her şeyi kelimesi kelimesine içeren tek bir ayrıntılı talimat istemi iletin; `generateWebpage` işlevini yerine getiren aracı, bunu harfiyen takip etmelidir.
--- WEB SAYFASI İSTEMİ BAŞLANGICI ---
Şık, tek renkli, editoryal tarzda, uzun ve kaydırılabilir bir portföy web sitesi oluşturun. Kesinlikle görsel kurala uyun — bu kuraldan sapmayın.
PALET (özel — başka hiçbir yerde renk paleti yok):
- Beyaz arka plan: #FFFFFF
- Siyah mürekkep ve metin: #000000
- Koyu renkli bir bölüm neredeyse siyah renkte olabilir: #0A0A0A
- İçe aktarılan herhangi bir öğenin kesinlikle tek renkli kalması için, her öğesine CSS `filter: grayscale(1) contrast(1.02)` uygulayın.
TİPOGRAFİ:
- Görüntüleme: Google Font 'Fraunces' (300 ve 700 kalınlıklarını, opsz 144'ü kullanın). Vurgulanan ana kelime için italik varyantı mevcuttur.
- Gövde: Google Font 'Inter' (kalınlıklar 400, 500). 16–18 piksel gövde, satır yüksekliği ~1,6.
- Başlıklar çok büyük: clamp(56px, 12vw, 180px). Ekranda izleme -0.02em.
- Navigasyon, servis etiketleri ve altbilgi bağlantıları için küçük harf kullanımı (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`).
DÜZENLEME RİTMİ:
- Bölüm dikey dolgusu: clamp(80px, 12vh, 200px).
- Konteyner maksimum genişliği: 1280 piksel, yan oluk kelepçesi (24 piksel, 6 görünüm, 96 piksel).
- Bolca boş alan bırakın; çok kalabalıklaştırmayın.
ETKİLEŞİM:
- Kaydırma sırasında arka planın hafifçe bulanıklaştığı, sabit üst gezinme çubuğu.
- Hap şeklindeki düğmeler: 1 piksel düz renk #000, şeffaf dolgu, kenar yarıçapı: 9999 piksel, dolgu 14 piksel 28 piksel. Üzerine gelindiğinde arka plan #000 + #FFF rengine döner, 200 ms yumuşama süresi.
- Her ana blokta kaydırma hareketiyle tetiklenen hafif bir solma efekti + 24 piksel dikey kaydırma (Intersection Observer).
- Servis satırları: fareyle üzerine gelindiğinde metin ve ok sağa doğru kaydırılır (~12px, 200ms yumuşatma).
DUYARLI:
- 768 pikselin altında: başlıklar ~64–88 piksele küçülür, iki sütunlu ızgaralar tek sütuna daralır, resimler dolgu alanları içinde tam ekran olarak kalır.
BÖLÜMLER (tam olarak bu sırayla):
1. NAV (sabit): Stüdyo adı sol üst köşede küçük harflerle; 'Bizimle çalışın' düğmesi sağ üst köşede.
2. KAHRAMAN (tamamen beyaz): Kullanıcının sloganını kullanarak iki satıra bölünmüş başlık — 1. satır Fraunces italik, 2. satır Fraunces normal yazı tipinde. Büyük yazı tipi. İsteğe bağlı olarak sağ altta yüzen küçük tek renkli vurgu resmi (burada kahraman resmini küçük olarak kullanın VEYA kahraman resmini bir sonraki bölüm için saklayın). Altta ince bir kaydırma çubuğu.
3. HAKKINDA: Fraunces 700 yazı tipinde 'Hakkımızda [stüdyo]' başlığı. 6 sütunlu düzen: solda hakkımızda metni (1-3. sütunlar), sağda 4:3 oranında hakkımızda görseli (4-6. sütunlar). İki kısa paragraf.
4. BÖLÜM BAŞLIĞI: 'Çalışmalarımız', Fraunces 700 yazı tipinde, büyük harfle.
5. ÖRNEK OLAY 1: Proje adı (büyük harflerle Fraunces), küçük harflerle yazılmış hizmet etiketleri satırı (ortadaki nokta · veya boşlukla ayrılmış). Adın altında: tam genişlikte proje görseli (project_1 kullanın, 1:1 oranında 16:9 çerçeveye kırpılmış). Görselin altında: iki sütunlu tablo — sol sütunda büyük harfle yazılmış '01' numarası (Fraunces 300, clamp(100px, 18vw, 220px)), küçük harflerle 'Arka Plan' etiketi ve ardından yaklaşık 30 kelimelik metin. Sağ sütunda aynı şekilde '02' ve 'Çözüm'.
6. ÖRNEK OLAY 2: CS1 ile aynı yapıya sahip ancak project_2 görüntüsünü kullanın. İsteğe bağlı olarak görüntüyü ters çevirerek, hafif beyazımsı bir bant üzerinde konumlandırın — renkleri kesinlikle palet sınırları içinde tutun.
7. ÖRNEK OLAY 3: Aynı yapı, project_3 görselini kullanın.
8. ÖNE ÇIKAN RESM: Tam ekran geniş resim (16:9 öne çıkan resim alanını kullanın). Metin yerleşimi yok.
9. NE YAPIYORUZ: Fraunces 700 yazı tipinde 'Ne yapıyoruz' başlığı. Aşağıda, 6 hizmet etiketinin dikey bir listesi. Her satır: üstte 1 piksel ince çizgi ayırıcı (#000), solda Fraunces yazı tipinde hizmet adı ~clamp(36px, 6vw, 80px), sağda '→' oku. İşaretçi imleç. Fareyle üzerine gelindiğinde sağa doğru kaydırılır.
10. CTA: Tam sayfa koyu bölüm, arka plan #000. Büyük Fraunces başlığı, kapanış CTA sloganı kullanılarak #FFF yazı tipinde ortalanmış. Dolgu (120px, 20vh, 240px). Başlığın altında 'Bizimle Çalışın' hap düğmesi (beyaz kenarlık, şeffaf dolgu, üzerine gelindiğinde beyaz arka plan + siyah metin).
11. ALT BİLGİ: Beyaz arka plan, küçük harflerle yazılmış grotesk metin. Solda stüdyo adı, sağda bağlantılar ('Şartlar ve Destek', 'Gizlilik Politikası'). Üstte ince çizgi çerçeve (#000, 1px). İkinci satırda küçük yazı tipiyle telif hakkı bilgisi.
GÖRSELLER — Aşağıdaki veri bölümünde verilen URL'leri ilgili yuvalara ekleyin. Her öğesine object-fit: cover ve gri tonlama güvenlik filtresini uygulayın. Ek dekoratif görseller eklemeyin.
VERİ — bunları sayfaya ekleyin:
- stüdyo_adı: <1. Adımdaki stüdyo adı>
- slogan: <1. Adımdaki iki satırlık slogan, '/' işareti iki satırı ayırır>
- about_copy: <1. Adımdaki paragraflar hakkında>
- vaka çalışmaları: 1. Adımdan { ad, etiketler[], arka plan, çözüm } olmak üzere üç öğeden oluşan dizi
- Hizmetler: 1. Adımdaki altı hizmet etiketi dizesinden oluşan dizi
- cta_tagline: <1. Adımdaki kapanış CTA'sı>
- Resimler: { kahraman, hakkında, proje_1, proje_2, proje_3, özellik } 2. Adımdan
- footer_links: ['Şartlar ve Destek', 'Gizlilik Politikası']
--- WEB SAYFASI UYARISI SONU ---
generateWebpage fonksiyonunu çağırırken as_artifact: true parametresini kullanın. Fonksiyon döndükten sonra, kullanıcıya tercih ettiği dilde tek satırlık bir özet verin ve herhangi bir resmi değiştirme, metni değiştirme veya projeleri yeniden adlandırma talebinde bulunabileceklerini bildirin.
Açıklama
Şık, siyah beyaz bir editoryal portföy web sitesi oluşturun. Tamamen siyah beyaz palet, büyük boyutlu serif başlıklar, numaralandırılmış örnek olay incelemeleri, bol beyaz alan. Hiçbir görsel sağlanmadığında altı adet uyumlu tek renkli görseli otomatik olarak oluşturur.
Bu beceriyi neden öneriyoruz
Bu beceri, tasarım stüdyoları veya ajanslar için mükemmel olan, üst düzey, tek renkli web portföyleri oluşturur. Editöryel ve minimalist tarzı, sofistike ve profesyonel bir estetik sunar.

Şık Tek Renkli Portföy Sitesi
Best for design studio, branding agency and etc.
Talimatlar
ADIM 1 — Marka kimliğini kesinleştirin ve içerik taslağını hazırlayın (çok az soru sorarak).
Öncelikle daha sonra ihtiyaç duyacağınız ertelenmiş araçları yükleyin: generateImage ve generateWebpage için toolSearch fonksiyonunu çağırın, böylece 2. ve 3. adımlardan önce hazır olurlar.
Ardından, kullanıcının mesajını ve @referanslarını şu hususlar açısından tarayın: marka/stüdyo adı, markanın ne yaptığı (odak noktası), slogan, proje adları, hizmet listesi ve yüklenen/referans verilen görseller (bunları 2. Adım için takip edin - kapsadıkları alanları YENİDEN OLUŞTURMAYIN).
Soru sorma kuralları (lütfen kısa ve öz sorular sorun; kullanıcı kısa etkileşimleri tercih eder):
- Hem marka adı hem de marka odağı eksikse, askUserQuestion fonksiyonunu iki toplu soruyla BİR KEZ çağırın:
S1 "Stüdyo/marka adı?" — 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject' gibi seçenekler.
S2 "Marka ne iş yapıyor?" — 'tasarım ajansı', 'fotoğraf stüdyosu', 'mimarlık firması', 'moda markası', 'kişisel portföy' gibi seçenekler.
- Eğer yalnızca bir kişi eksikse, sadece o kişiyi sorun.
- Eğer kullanıcının mesajında her ikisi de mevcutsa, hiçbir şey sormayın — doğrudan devam edin.
Marka adı ve odak noktası belli olduktan sonra, geri kalanını kendiniz yazın, başka soru sormayın. Üslup: editoryal, kendinden emin, minimalist, üst düzey. Metni kısa tutun — bu stil, gereksiz ayrıntılarla değil, boşluklarla canlanır.
Taslak:
- Slogan: Tek bir ifade gibi okunan iki kısa satır, örneğin 'Geleceği tasarla', 'Dünyayı çerçevele', 'Kalıcı olanı inşa et', 'Onu kalıcı kıl'. Her satır 1-2 kelime içerir. Satır sonunu italik serif + normal serif yazı tipiyle eşleştirin.
- Tanıtım metni hakkında: Yaklaşık 80 kelime, iki kısa paragraf. Kuruluş döneminden (örneğin '80'lerden beri'), birkaç hizmetten ve küresel müşteri/sektör ödülleri havasından bahsedin.
- ÜÇ vaka çalışması. Her biri için: odak noktasına uygun, özgün bir proje adı (tasarım ajansı için 'Schematiq', 'Commercial Co.', 'Sprig & Sky' gibi isimleri yeniden kullanın; diğer odak noktaları için benzer his uyandıran isimler seçin), 1-2 hizmet etiketi, yaklaşık 30 kelimelik bir Arka Plan cümlesi, yaklaşık 30 kelimelik bir Çözüm cümlesi.
- Odak noktasıyla ilgili ALTI hizmet etiketi (varsayılanlar: Marka Aktivasyonu, Entegre Pazarlama, Web Sitesi Geliştirme, Video Prodüksiyonu, Marka Kimliği, Marka Stratejisi — ajans dışı odak noktaları için uyarlayın).
- Kapanış eylem çağrısı sloganı (tek satır, ~10-14 kelime), örneğin 'Markanızı yükseltin ve tarihe adınızı yazdırın.'
- Altbilgi öğeleri: stüdyo adı, 'Şartlar ve Destek', 'Gizlilik Politikası'.
3. adım için tüm içeriği bellekte tutun. Henüz generateWebpage fonksiyonunu çağırmayın.
ADIM 2 — Tam olarak 6 adet birbiriyle uyumlu siyah beyaz görsel oluşturun.
Slot haritası: kahraman, hakkında, proje_1, proje_2, proje_3, özellik.
A) Kullanıcı daha önce görseller (yüklemeler, @referanslar, mesajdaki URL'ler) sağladıysa, bunları alındıkları sıraya göre ilgili alanlara atayın ve bu alanlar için oluşturma işlemini atlayın. Yalnızca kalan alanlar için oluşturma işlemini gerçekleştirin.
B) Her boş yuva için generateImage fonksiyonunu çağırın. Mümkünse, bunları tek bir araç grubu içinde PARALEL olarak çalıştırın.
Her slot için değiştirilemez görsel stil:
- Sadece saf siyah beyaz. Renk tonu yok, sepya yok, duotone yok. Editöryel / sinematik / üst düzey dergi kalitesi. Altı fotoğrafın tamamında tutarlı kontrast ve gren. Düzenlemenin gerektirdiği yerlerde bol miktarda boş alan.
Slot istemi şablonları — [DISCIPLINE] yerine 1. Adımdaki marka odak noktasını (örneğin 'tasarım ajansı', 'fotoğraf stüdyosu', 'mimarlık firması') ve [DISCIPLINE_SUBJECT] yerine uygun bir konuyu (örneğin tasarım için: kağıt heykel / tipografi yakın çekim; mimarlık için: gölge geometrisi; moda için: silüet; fotoğrafçılık için: natürmort) yazın:
1. kahraman (en boy 16:9): "[KONU_DİSİPLİNİ]'nin sinematik siyah beyaz fotoğrafı, dramatik editoryal kompozisyon, şık minimalist monokrom estetik, yumuşak üst aydınlatma, geniş boş alan, üstün dergi kalitesi, renksiz, yüksek kontrast."
2. Hakkında (4:3 en boy oranı): "Çağdaş bir [DISCIPLINE] stüdyo iç mekanının siyah beyaz belgesel fotoğrafı; yumuşak gün ışığı alan büyük pencereler, minimalist masa ve aletler, editoryal röportaj tarzı, yalnızca monokrom, yüksek kontrast."
3. proje_1 (en boy 1:1): "Temiz beyaz bir yüzey üzerinde marka kimliği maketlerinin (kartvizitler, antetli kağıtlar, basılı kırtasiye malzemeleri) siyah beyaz düz yerleşimi, keskin yukarıdan aşağıya editoryal tasarım fotoğrafçılığı, yalnızca tek renkli."
4. proje_2 (en boy 1:1): "[DİSİPLİN] ile ilgili siyah beyaz minimalist natürmort (örneğin film klaket tahtası, maket, stilize ürün), sinematik stüdyo aydınlatması, keskin gölgeler, yalnızca monokrom."
5. proje_3 (en boy 1:1): "[DISCIPLINE] ile ilgili, minimal tarzda tasarlanmış, üst düzey dergi estetiğine sahip, siyah beyaz editoryal yaşam tarzı fotoğrafçılığı, yalnızca monokrom."
6. özellik (en boy 16:9): "[DISCIPLINE] ile ilgili geniş siyah beyaz soyut kompozisyon, dramatik perspektif, atmosferik editoryal monokrom, renksiz."
Altı URL'nin tamamı elinizde olduktan sonra, her birini slot numarasıyla etiketleyin ve 3. adıma geçin.
3. ADIM — Web sayfasını oluşturun.
`generateWebpage` işlevini `as_artifact: true` parametresiyle çağırın. Aşağıdaki her şeyi kelimesi kelimesine içeren tek bir ayrıntılı talimat istemi iletin; `generateWebpage` işlevini yerine getiren aracı, bunu harfiyen takip etmelidir.
--- WEB SAYFASI İSTEMİ BAŞLANGICI ---
Şık, tek renkli, editoryal tarzda, uzun ve kaydırılabilir bir portföy web sitesi oluşturun. Kesinlikle görsel kurala uyun — bu kuraldan sapmayın.
PALET (özel — başka hiçbir yerde renk paleti yok):
- Beyaz arka plan: #FFFFFF
- Siyah mürekkep ve metin: #000000
- Koyu renkli bir bölüm neredeyse siyah renkte olabilir: #0A0A0A
- İçe aktarılan herhangi bir öğenin kesinlikle tek renkli kalması için, her öğesine CSS `filter: grayscale(1) contrast(1.02)` uygulayın.
TİPOGRAFİ:
- Görüntüleme: Google Font 'Fraunces' (300 ve 700 kalınlıklarını, opsz 144'ü kullanın). Vurgulanan ana kelime için italik varyantı mevcuttur.
- Gövde: Google Font 'Inter' (kalınlıklar 400, 500). 16–18 piksel gövde, satır yüksekliği ~1,6.
- Başlıklar çok büyük: clamp(56px, 12vw, 180px). Ekranda izleme -0.02em.
- Navigasyon, servis etiketleri ve altbilgi bağlantıları için küçük harf kullanımı (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`).
DÜZENLEME RİTMİ:
- Bölüm dikey dolgusu: clamp(80px, 12vh, 200px).
- Konteyner maksimum genişliği: 1280 piksel, yan oluk kelepçesi (24 piksel, 6 görünüm, 96 piksel).
- Bolca boş alan bırakın; çok kalabalıklaştırmayın.
ETKİLEŞİM:
- Kaydırma sırasında arka planın hafifçe bulanıklaştığı, sabit üst gezinme çubuğu.
- Hap şeklindeki düğmeler: 1 piksel düz renk #000, şeffaf dolgu, kenar yarıçapı: 9999 piksel, dolgu 14 piksel 28 piksel. Üzerine gelindiğinde arka plan #000 + #FFF rengine döner, 200 ms yumuşama süresi.
- Her ana blokta kaydırma hareketiyle tetiklenen hafif bir solma efekti + 24 piksel dikey kaydırma (Intersection Observer).
- Servis satırları: fareyle üzerine gelindiğinde metin ve ok sağa doğru kaydırılır (~12px, 200ms yumuşatma).
DUYARLI:
- 768 pikselin altında: başlıklar ~64–88 piksele küçülür, iki sütunlu ızgaralar tek sütuna daralır, resimler dolgu alanları içinde tam ekran olarak kalır.
BÖLÜMLER (tam olarak bu sırayla):
1. NAV (sabit): Stüdyo adı sol üst köşede küçük harflerle; 'Bizimle çalışın' düğmesi sağ üst köşede.
2. KAHRAMAN (tamamen beyaz): Kullanıcının sloganını kullanarak iki satıra bölünmüş başlık — 1. satır Fraunces italik, 2. satır Fraunces normal yazı tipinde. Büyük yazı tipi. İsteğe bağlı olarak sağ altta yüzen küçük tek renkli vurgu resmi (burada kahraman resmini küçük olarak kullanın VEYA kahraman resmini bir sonraki bölüm için saklayın). Altta ince bir kaydırma çubuğu.
3. HAKKINDA: Fraunces 700 yazı tipinde 'Hakkımızda [stüdyo]' başlığı. 6 sütunlu düzen: solda hakkımızda metni (1-3. sütunlar), sağda 4:3 oranında hakkımızda görseli (4-6. sütunlar). İki kısa paragraf.
4. BÖLÜM BAŞLIĞI: 'Çalışmalarımız', Fraunces 700 yazı tipinde, büyük harfle.
5. ÖRNEK OLAY 1: Proje adı (büyük harflerle Fraunces), küçük harflerle yazılmış hizmet etiketleri satırı (ortadaki nokta · veya boşlukla ayrılmış). Adın altında: tam genişlikte proje görseli (project_1 kullanın, 1:1 oranında 16:9 çerçeveye kırpılmış). Görselin altında: iki sütunlu tablo — sol sütunda büyük harfle yazılmış '01' numarası (Fraunces 300, clamp(100px, 18vw, 220px)), küçük harflerle 'Arka Plan' etiketi ve ardından yaklaşık 30 kelimelik metin. Sağ sütunda aynı şekilde '02' ve 'Çözüm'.
6. ÖRNEK OLAY 2: CS1 ile aynı yapıya sahip ancak project_2 görüntüsünü kullanın. İsteğe bağlı olarak görüntüyü ters çevirerek, hafif beyazımsı bir bant üzerinde konumlandırın — renkleri kesinlikle palet sınırları içinde tutun.
7. ÖRNEK OLAY 3: Aynı yapı, project_3 görselini kullanın.
8. ÖNE ÇIKAN RESM: Tam ekran geniş resim (16:9 öne çıkan resim alanını kullanın). Metin yerleşimi yok.
9. NE YAPIYORUZ: Fraunces 700 yazı tipinde 'Ne yapıyoruz' başlığı. Aşağıda, 6 hizmet etiketinin dikey bir listesi. Her satır: üstte 1 piksel ince çizgi ayırıcı (#000), solda Fraunces yazı tipinde hizmet adı ~clamp(36px, 6vw, 80px), sağda '→' oku. İşaretçi imleç. Fareyle üzerine gelindiğinde sağa doğru kaydırılır.
10. CTA: Tam sayfa koyu bölüm, arka plan #000. Büyük Fraunces başlığı, kapanış CTA sloganı kullanılarak #FFF yazı tipinde ortalanmış. Dolgu (120px, 20vh, 240px). Başlığın altında 'Bizimle Çalışın' hap düğmesi (beyaz kenarlık, şeffaf dolgu, üzerine gelindiğinde beyaz arka plan + siyah metin).
11. ALT BİLGİ: Beyaz arka plan, küçük harflerle yazılmış grotesk metin. Solda stüdyo adı, sağda bağlantılar ('Şartlar ve Destek', 'Gizlilik Politikası'). Üstte ince çizgi çerçeve (#000, 1px). İkinci satırda küçük yazı tipiyle telif hakkı bilgisi.
GÖRSELLER — Aşağıdaki veri bölümünde verilen URL'leri ilgili yuvalara ekleyin. Her öğesine object-fit: cover ve gri tonlama güvenlik filtresini uygulayın. Ek dekoratif görseller eklemeyin.
VERİ — bunları sayfaya ekleyin:
- stüdyo_adı: <1. Adımdaki stüdyo adı>
- slogan: <1. Adımdaki iki satırlık slogan, '/' işareti iki satırı ayırır>
- about_copy: <1. Adımdaki paragraflar hakkında>
- vaka çalışmaları: 1. Adımdan { ad, etiketler[], arka plan, çözüm } olmak üzere üç öğeden oluşan dizi
- Hizmetler: 1. Adımdaki altı hizmet etiketi dizesinden oluşan dizi
- cta_tagline: <1. Adımdaki kapanış CTA'sı>
- Resimler: { kahraman, hakkında, proje_1, proje_2, proje_3, özellik } 2. Adımdan
- footer_links: ['Şartlar ve Destek', 'Gizlilik Politikası']
--- WEB SAYFASI UYARISI SONU ---
generateWebpage fonksiyonunu çağırırken as_artifact: true parametresini kullanın. Fonksiyon döndükten sonra, kullanıcıya tercih ettiği dilde tek satırlık bir özet verin ve herhangi bir resmi değiştirme, metni değiştirme veya projeleri yeniden adlandırma talebinde bulunabileceklerini bildirin.
Açıklama
Şık, siyah beyaz bir editoryal portföy web sitesi oluşturun. Tamamen siyah beyaz palet, büyük boyutlu serif başlıklar, numaralandırılmış örnek olay incelemeleri, bol beyaz alan. Hiçbir görsel sağlanmadığında altı adet uyumlu tek renkli görseli otomatik olarak oluşturur.
Bu beceriyi neden öneriyoruz
Bu beceri, tasarım stüdyoları veya ajanslar için mükemmel olan, üst düzey, tek renkli web portföyleri oluşturur. Editöryel ve minimalist tarzı, sofistike ve profesyonel bir estetik sunar.
Bir sonraki favori becerini bul
Araştırma, üretim ve günlük işler için özenle seçilmiş daha fazla AI becerisini keşfet.