Bu ad\u0131mlar\u0131 izleyerek, sadece g\u00f6rsel olarak \u00e7arp\u0131c\u0131 de\u011fil, ayn\u0131 zamanda i\u015flevsel ve kullan\u0131c\u0131 dostu bir Bento Grid portf\u00f6y\u00fc i\u00e7in sa\u011flam bir temel olu\u015fturabilirsiniz. Unutmay\u0131n, iyi bir tasar\u0131m, iyi bir planlama ile ba\u015flar.<\/p>\n
CSS Grid ile Modern Bir Bento Yap\u0131s\u0131 Olu\u015fturma Rehberi<\/h2>\n
Tasar\u0131m a\u015famas\u0131n\u0131 tamamlad\u0131ktan sonra s\u0131ra, bu g\u00f6rsel vizyonu koda d\u00f6kmeye gelir. Modern web geli\u015ftirmenin sundu\u011fu en g\u00fc\u00e7l\u00fc ara\u00e7lardan biri olan CSS Grid, Bento Grid gibi karma\u015f\u0131k ve duyarl\u0131 d\u00fczenleri olu\u015fturmak i\u00e7in ideal bir \u00e7\u00f6z\u00fcmd\u00fcr. CSS Grid, hem sat\u0131rlar\u0131 hem de s\u00fctunlar\u0131 ayn\u0131 anda kontrol etme yetene\u011fi sayesinde, esnek ve karma\u015f\u0131k \u0131zgara yap\u0131lar\u0131n\u0131 \u00e7ok daha kolay ve verimli bir \u015fekilde olu\u015fturman\u0131za olanak tan\u0131r. Geleneksel float veya flexbox tabanl\u0131 yakla\u015f\u0131mlara g\u00f6re \u00e7ok daha g\u00fc\u00e7l\u00fc ve sezgiseldir, bu da onu Bento Grid i\u00e7in vazge\u00e7ilmez k\u0131lar.<\/p>\n
\u0130\u015fte CSS Grid kullanarak bir Bento yap\u0131s\u0131 olu\u015fturman\u0131n temel ad\u0131mlar\u0131 ve kod \u00f6rnekleri:<\/p>\n
Temel Grid Yap\u0131s\u0131n\u0131 Kurmak<\/h3>\n
\u00d6ncelikle, t\u00fcm Bento kutular\u0131n\u0131z\u0131 i\u00e7ine alacak bir kapsay\u0131c\u0131 (container) elementine ihtiyac\u0131n\u0131z var. Bu kapsay\u0131c\u0131ya <\/code><\/p>\n Bu temel yap\u0131, bize 4 s\u00fctunlu bir \u0131zgara ve kutular aras\u0131nda 15 piksellik bir bo\u015fluk sa\u011flar. Her Belirli kutular\u0131n birden fazla s\u00fctun veya sat\u0131r kaplamas\u0131n\u0131 sa\u011flamak i\u00e7in <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Bento Grid'inizin farkl\u0131 ekran boyutlar\u0131nda da m\u00fckemmel g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in medya sorgular\u0131 (media queries) kullanman\u0131z zorunludur. K\u00fc\u00e7\u00fck ekranlarda, \u00f6rne\u011fin mobil cihazlarda, kutular\u0131n alt alta s\u0131ralanmas\u0131 veya daha basit bir \u0131zgara d\u00fczenine ge\u00e7ilmesi gerekebilir.<\/p>\n <\/code><\/p>\n Bu medya sorgular\u0131, ekran geni\u015fli\u011fi 768 pikselin alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde \u0131zgaray\u0131 2 s\u00fctuna, 480 pikselin alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde ise tek s\u00fctuna indirir. Ayn\u0131 zamanda, b\u00fcy\u00fck kutular\u0131n bu yeni d\u00fczende nas\u0131l davranaca\u011f\u0131n\u0131 da yeniden tan\u0131mlayarak i\u00e7eri\u011fin okunabilirli\u011fini ve kullan\u0131c\u0131 deneyimini koruruz. CSS Grid ile Bento Grid olu\u015fturmak, esnekli\u011fi, g\u00fcc\u00fc ve geli\u015ftirme kolayl\u0131\u011f\u0131 sayesinde modern portf\u00f6yler i\u00e7in ideal bir y\u00f6ntemdir. Bu yap\u0131y\u0131 kullanarak, portf\u00f6y\u00fcn\u00fcz\u00fc sadece g\u00f6rsel olarak de\u011fil, yap\u0131sal olarak da gelece\u011fe haz\u0131r hale getirebilirsiniz.<\/p>\n Bir Bento Grid'i ger\u00e7ekten \"interaktif\" yapan \u015fey, statik bir CSS d\u00fczeninden \u00f6teye ge\u00e7erek kullan\u0131c\u0131yla dinamik bir diyalog kurabilmesidir. \u0130\u015fte bu noktada JavaScript ve onun zengin k\u00fct\u00fcphane ekosistemi devreye girer. JavaScript, kutular\u0131n \u00fczerine gelindi\u011finde veya t\u0131kland\u0131\u011f\u0131nda ger\u00e7ekle\u015fen animasyonlardan, dinamik i\u00e7erik y\u00fcklemeye, hatta kullan\u0131c\u0131 tercihlerine g\u00f6re d\u00fczenin de\u011fi\u015fmesine kadar pek \u00e7ok geli\u015fmi\u015f etkile\u015fim t\u00fcr\u00fcn\u00fc m\u00fcmk\u00fcn k\u0131lar. Bu eklemeler, portf\u00f6y\u00fcn\u00fcz\u00fcn sadece g\u00fczel g\u00f6r\u00fcnmesini sa\u011flamakla kalmaz, ayn\u0131 zamanda ziyaret\u00e7ilerinize unutulmaz ve ilgi \u00e7ekici bir deneyim sunar.<\/p>\n En temel interaktif \u00f6\u011felerden biri, bir Bento kutusunun \u00fczerine gelindi\u011finde (hover) ger\u00e7ekle\u015fen g\u00f6rsel de\u011fi\u015fikliklerdir. CSS <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, basit JavaScript ile Daha sofistike animasyonlar ve durum y\u00f6netimi gerekti\u011finde, k\u00fct\u00fcphaneler imdad\u0131m\u0131za yeti\u015fir. \u00d6rne\u011fin, GSAP (GreenSock Animation Platform)<\/a>, taray\u0131c\u0131 performans\u0131 ve esnekli\u011fi a\u00e7\u0131s\u0131ndan sekt\u00f6r standard\u0131 kabul edilen g\u00fc\u00e7l\u00fc bir animasyon k\u00fct\u00fcphanesidir. GSAP ile, kutular\u0131n i\u00e7eri\u011finin yava\u015f\u00e7a belirmesi, ard\u0131\u015f\u0131k animasyonlar veya s\u00fcr\u00fckle-b\u0131rak (drag-and-drop) gibi etkile\u015fimler kolayca olu\u015fturulabilir.<\/p>\n E\u011fer portf\u00f6y\u00fcn\u00fcz daha fazla dinamik veri ve karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fcz\u00fc gerektiriyorsa, React<\/a>, Vue.js<\/a> veya Angular<\/a> gibi modern JavaScript \u00e7er\u00e7evelerini kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu \u00e7er\u00e7eveler, her bir Bento kutusunu ba\u011f\u0131ms\u0131z bir bile\u015fen (component) olarak ele alman\u0131z\u0131, durumlar\u0131n\u0131 y\u00f6netmenizi ve API'lerden dinamik olarak i\u00e7erik \u00e7ekmenizi sa\u011flar. \u00d6rne\u011fin, bir \"proje\" bile\u015feni, kendi i\u00e7inde bir g\u00f6rsel, ba\u015fl\u0131k ve k\u0131sa a\u00e7\u0131klama bar\u0131nd\u0131rabilir ve t\u0131kland\u0131\u011f\u0131nda bir \"proje detaylar\u0131\" bile\u015fenini tetikleyebilir.<\/p>\n {description}<\/p>} {\/* Hover'da a\u00e7\u0131klama g\u00f6ster *\/}\n <\/code><\/p>\n Bu React \u00f6rne\u011fi, her bir Bento kutusunun kendi durumunu (hover olup olmad\u0131\u011f\u0131 gibi) y\u00f6netebilen ve t\u0131kland\u0131\u011f\u0131nda belirli bir eylemi tetikleyebilen ba\u011f\u0131ms\u0131z bir bile\u015fen olarak nas\u0131l ele al\u0131nabilece\u011fini g\u00f6sterir. Bu yakla\u015f\u0131m, b\u00fcy\u00fck ve karma\u015f\u0131k portf\u00f6ylerde kodun daha d\u00fczenli ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n JavaScript ve modern k\u00fct\u00fcphanelerin entegrasyonu, Bento Grid portf\u00f6y\u00fcn\u00fcz\u00fc sadece estetik bir vitrin olmaktan \u00e7\u0131kar\u0131p, ziyaret\u00e7ilerinizle ger\u00e7ek bir etkile\u015fim kuran dinamik bir deneyime d\u00f6n\u00fc\u015ft\u00fcrecektir. Bu sayede, projeleriniz hakk\u0131nda daha derinlemesine bilgi sa\u011flayabilir, yeteneklerinizi daha dinamik bir \u015fekilde sergileyebilir ve potansiyel m\u00fc\u015fterilerinizin veya i\u015fverenlerinizin akl\u0131nda kal\u0131c\u0131 bir iz b\u0131rakabilirsiniz.<\/p>\n Bento Grid konseptinin g\u00fcc\u00fcn\u00fc ve interaktifli\u011fini daha iyi anlamak i\u00e7in, bu yakla\u015f\u0131m\u0131n ger\u00e7ek d\u00fcnyada nas\u0131l uyguland\u0131\u011f\u0131na dair baz\u0131 senaryolar\u0131 inceleyelim. Bu vaka analizleri, farkl\u0131 disiplinlerden profesyonellerin kendi portf\u00f6ylerini nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fc ve hedeflerine ula\u015fmak i\u00e7in Bento Grid'i nas\u0131l kulland\u0131\u011f\u0131n\u0131 ortaya koyacakt\u0131r.<\/p>\n Duygu, deneyimli bir UI\/UX tasar\u0131mc\u0131s\u0131d\u0131r ve \u00f6nceki portf\u00f6y\u00fc, projelerini standart bir kart d\u00fczeninde sergilemekteydi. Bu d\u00fczen, projelerinin \u00e7e\u015fitlili\u011fini ve her birinin ard\u0131ndaki tasar\u0131m s\u00fcrecinin derinli\u011fini yans\u0131tm\u0131yordu. Duygu, yeni portf\u00f6y\u00fcnde Bento Grid'i benimseyerek, projelerini g\u00f6rsel bir hiyerar\u015fi ile sunmay\u0131 hedefledi. En b\u00fcy\u00fck kutuyu, en prestijli ve kapsaml\u0131 mobil uygulama tasar\u0131m projesine ay\u0131rd\u0131. Bu kutunun \u00fczerine gelindi\u011finde, uygulaman\u0131n temel ak\u0131\u015f\u0131n\u0131 g\u00f6steren k\u0131sa bir GIF animasyonu oynat\u0131l\u0131yordu. T\u0131kland\u0131\u011f\u0131nda ise, projenin problem tan\u0131m\u0131ndan \u00e7\u00f6z\u00fcm \u00f6nerilerine, kullan\u0131c\u0131 ara\u015ft\u0131rmalar\u0131ndan prototipleme s\u00fcre\u00e7lerine kadar t\u00fcm detaylar\u0131n\u0131 i\u00e7eren \u00f6zel bir sayfaya y\u00f6nlendirme yap\u0131l\u0131yordu.<\/p>\n Di\u011fer kutulara ise daha k\u00fc\u00e7\u00fck web sitesi projeleri, etkile\u015fimli prototip \u00f6rnekleri, kullan\u0131c\u0131 ak\u0131\u015f \u00e7izelgeleri ve hatta \"tasar\u0131m sistemleri \u00fczerine d\u00fc\u015f\u00fcncelerim\" ba\u015fl\u0131\u011f\u0131 alt\u0131nda bir blog yaz\u0131s\u0131 ba\u011flant\u0131s\u0131 yerle\u015ftirdi. Bir kutunun i\u00e7ine, belirli bir yetene\u011fini (\u00f6rne\u011fin, \"Kullan\u0131c\u0131 Ara\u015ft\u0131rmas\u0131\") temsil eden bir ikon yerle\u015ftirdi ve \u00fczerine gelindi\u011finde bu yetene\u011fi kulland\u0131\u011f\u0131 birka\u00e7 projenin k\u00fc\u00e7\u00fck \u00f6nizlemeleri belirdi. Duygu'nun Bento Grid portf\u00f6y\u00fc, sadece projelerini sergilemekle kalmad\u0131, ayn\u0131 zamanda her bir projenin arkas\u0131ndaki d\u00fc\u015f\u00fcnce s\u00fcrecini ve tasar\u0131m metodolojisini de dinamik bir \u015fekilde aktararak, ziyaret\u00e7ilere zengin ve bilgilendirici bir deneyim sundu. Potansiyel i\u015fverenler, onun sadece g\u00f6rsel tasar\u0131mlar\u0131n\u0131 de\u011fil, ayn\u0131 zamanda problem \u00e7\u00f6zme ve kullan\u0131c\u0131 odakl\u0131 d\u00fc\u015f\u00fcnme yetene\u011fini de hemen fark edebildiler.<\/p>\n Can, hem \u00f6n y\u00fcz hem de arka y\u00fcz geli\u015ftirme konusunda uzmanla\u015fm\u0131\u015f bir full-stack geli\u015ftiriciydi. Standart portf\u00f6y siteleri, genellikle ya \u00f6n y\u00fcz g\u00f6rselle\u015ftirmelerine odaklan\u0131r ya da arka y\u00fcz\u00fcn karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 yeterince g\u00f6steremezdi. Can, Bento Grid'i kullanarak, portf\u00f6y\u00fcn\u00fc iki ana kategoriye ay\u0131rd\u0131 ve bunlar\u0131 g\u00f6rsel olarak belirgin hale getirdi. Sol taraftaki b\u00fcy\u00fck kutular\u0131 \u00f6n y\u00fcz projelerine, sa\u011f taraftaki kutular\u0131 ise arka y\u00fcz, veritaban\u0131 ve API geli\u015ftirme yeteneklerine adad\u0131.<\/p>\n Bir \u00f6n y\u00fcz projesinin kutusuna t\u0131kland\u0131\u011f\u0131nda, projenin \u00e7al\u0131\u015fan bir demo ba\u011flant\u0131s\u0131 ve kullan\u0131lan teknolojiler (React, Next.js, Tailwind CSS gibi) hakk\u0131nda k\u0131sa bilgiler i\u00e7eren bir modal pencere a\u00e7\u0131l\u0131yordu. Arka y\u00fcz projelerinin kutular\u0131na t\u0131kland\u0131\u011f\u0131nda ise, projenin mimarisi hakk\u0131nda bir diyagram, kullan\u0131lan teknolojilerin (Node.js, Python, MongoDB, AWS Lambda gibi) bir listesi ve GitHub reposuna do\u011frudan bir ba\u011flant\u0131 sunuluyordu. Ayr\u0131ca, \"Yeteneklerim\" ba\u015fl\u0131kl\u0131 interaktif bir kutu, \u00fczerine gelindi\u011finde farkl\u0131 programlama dillerinin ve \u00e7er\u00e7evelerin logolar\u0131n\u0131 g\u00f6steren dinamik bir liste a\u00e7\u0131yordu. Can'\u0131n portf\u00f6y\u00fc, teknik derinli\u011fini ve \u00e7e\u015fitli projelerdeki rol\u00fcn\u00fc a\u00e7\u0131k\u00e7a ortaya koyarak, i\u015fverenlerin onun tam yelpazedeki yeteneklerini bir bak\u0131\u015fta anlamas\u0131n\u0131 sa\u011flad\u0131.<\/p>\n Elif, ill\u00fcstrasyon ve dijital boyama alan\u0131nda \u00e7al\u0131\u015fan bir sanat\u00e7\u0131yd\u0131. Sanat eserlerini geleneksel bir galeri format\u0131nda sergilemek yerine, Bento Grid'in sundu\u011fu asimetrik yap\u0131y\u0131 kullanarak her bir esere hak etti\u011fi g\u00f6rsel a\u011f\u0131rl\u0131\u011f\u0131 vermek istedi. En b\u00fcy\u00fck kutular\u0131, en be\u011fenilen ve \u00f6d\u00fcll\u00fc eserlerine ay\u0131rd\u0131. Bu b\u00fcy\u00fck kutular\u0131n \u00fczerine gelindi\u011finde, eserin yap\u0131m a\u015famalar\u0131n\u0131 g\u00f6steren h\u0131zland\u0131r\u0131lm\u0131\u015f bir video belirdi, bu da sanat eserinin yarat\u0131m s\u00fcrecine bir pencere a\u00e7\u0131yordu.<\/p>\n Daha k\u00fc\u00e7\u00fck kutulara ise tematik koleksiyonlar (\u00f6rne\u011fin, \"Fantastik Yarat\u0131klar\", \"\u015eehir Manzaralar\u0131\"), m\u00fc\u015fteri sipari\u015fleri i\u00e7in \u00f6zel olarak tasarlad\u0131\u011f\u0131 eserler ve hatta kulland\u0131\u011f\u0131 f\u0131r\u00e7a setleri veya teknikler hakk\u0131nda k\u0131sa bilgiler yerle\u015ftirdi. Bir kutuya t\u0131kland\u0131\u011f\u0131nda, eserin y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir g\u00f6r\u00fcnt\u00fcs\u00fc ve esin kayna\u011f\u0131 hakk\u0131nda k\u0131sa bir hikaye i\u00e7eren bir \u0131\u015f\u0131k kutusu (lightbox) a\u00e7\u0131l\u0131yordu. Elif'in portf\u00f6y\u00fc, ziyaret\u00e7ilere sadece g\u00f6rsel bir \u015f\u00f6len sunmakla kalmad\u0131, ayn\u0131 zamanda her bir eserin ard\u0131ndaki hikayeyi ve sanatsal s\u00fcrecini de ke\u015ffetme f\u0131rsat\u0131 vererek, onunla daha derin bir duygusal ba\u011f kurmalar\u0131n\u0131 sa\u011flad\u0131.<\/p>\n Bu \u00f6rnekler de g\u00f6steriyor ki, Bento Grid, sadece estetik bir d\u00fczenleme arac\u0131 de\u011fil, ayn\u0131 zamanda ki\u015fisel veya profesyonel hikayenizi anlatmak, yeteneklerinizi vurgulamak ve hedef kitlenizle g\u00fc\u00e7l\u00fc bir etkile\u015fim kurmak i\u00e7in stratejik bir platformdur. Her bir kutunun, bir ileti\u015fim f\u0131rsat\u0131 oldu\u011funu unutmay\u0131n ve yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 kullanarak bu f\u0131rsatlar\u0131 en iyi \u015fekilde de\u011ferlendirin.<\/p>\n Harika g\u00f6r\u00fcnen ve interaktif bir Bento Grid portf\u00f6y\u00fc olu\u015fturmak kadar, bu portf\u00f6y\u00fcn h\u0131zl\u0131 y\u00fcklenmesi ve arama motorlar\u0131 taraf\u0131ndan kolayca ke\u015ffedilmesi de b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Zira yava\u015f y\u00fcklenen bir site, en iyi tasar\u0131m\u0131 bile g\u00f6lgede b\u0131rakabilir ve SEO a\u00e7\u0131s\u0131ndan olumsuz etki yaratabilir. Bu b\u00f6l\u00fcmde, Bento Grid portf\u00f6y\u00fcn\u00fcz\u00fcn performans\u0131n\u0131 art\u0131rmak ve arama motorlar\u0131ndaki g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc iyile\u015ftirmek i\u00e7in uygulayabilece\u011finiz temel optimizasyon tekniklerine odaklanaca\u011f\u0131z.<\/p>\n Bento Grid, do\u011fas\u0131 gere\u011fi bir\u00e7ok g\u00f6rsel \u00f6\u011fe i\u00e7erir. Bu g\u00f6rsellerin boyutu ve format\u0131, sayfa y\u00fckleme h\u0131z\u0131n\u0131 do\u011frudan etkiler. \u0130\u015fte yapabilecekleriniz:<\/p>\n <\/code><\/p>\n Temiz, d\u00fczenli ve optimize edilmi\u015f bir kod taban\u0131, hem performans hem de s\u00fcrd\u00fcr\u00fclebilirlik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\ndisplay: grid;<\/code> \u00f6zelli\u011fini uygulayarak CSS Grid’i aktif hale getiririz. Ard\u0131ndan, grid-template-columns<\/code> ve grid-template-rows<\/code> \u00f6zellikleriyle \u0131zgaran\u0131z\u0131n temel s\u00fctun ve sat\u0131r yap\u0131s\u0131n\u0131 tan\u0131mlars\u0131n\u0131z. fr<\/code> (fraction) birimi, mevcut alan\u0131n bir k\u0131sm\u0131n\u0131 kaplayan esnek s\u00fctun ve sat\u0131rlar olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n\n.bento-container {\n display: grid;\n grid-template-columns: repeat(4, 1fr); \/* 4 e\u015fit geni\u015flikte s\u00fctun *\/\n grid-template-rows: auto; \/* Otomatik y\u00fcksekli\u011fe sahip sat\u0131rlar *\/\n gap: 15px; \/* Kutular aras\u0131 bo\u015fluk *\/\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.bento-item {\n background-color: #f0f2f5;\n border-radius: 12px;\n padding: 20px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n}\n\n.bento-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n}\n<\/pre>\n.bento-item<\/code> (Bento kutusu), varsay\u0131lan olarak bir \u0131zgara h\u00fccresini kaplayacakt\u0131r. Ancak, Bento Grid'in g\u00fczelli\u011fi, bu kutular\u0131n farkl\u0131 boyutlarda olabilmesidir. \u0130\u015fte bu noktada grid-column<\/code> ve grid-row<\/code> \u00f6zellikleri devreye girer.<\/p>\nKutular\u0131n Boyutunu ve Konumunu Ayarlamak<\/h3>\n
grid-column<\/code> ve grid-row<\/code> \u00f6zelliklerini kullan\u0131r\u0131z. Bu \u00f6zellikler, kutunun ba\u015flang\u0131\u00e7 ve biti\u015f \u0131zgara \u00e7izgilerini belirterek \u00e7al\u0131\u015f\u0131r.<\/p>\n\n.item-1 {\n grid-column: span 2; \/* 2 s\u00fctun kapla *\/\n grid-row: span 2; \/* 2 sat\u0131r kapla *\/\n background-color: #aed6f1; \/* Ana proje *\/\n}\n\n.item-2 {\n grid-column: span 1; \/* 1 s\u00fctun kapla *\/\n grid-row: span 1; \/* 1 sat\u0131r kapla *\/\n background-color: #b3e6b3; \/* K\u00fc\u00e7\u00fck yetenek *\/\n}\n\n.item-3 {\n grid-column: span 3; \/* 3 s\u00fctun kapla *\/\n grid-row: span 1; \/* 1 sat\u0131r kapla *\/\n background-color: #f7dc6f; \/* Referans veya blog yaz\u0131s\u0131 *\/\n}\n\n.item-4 {\n grid-column: span 1;\n grid-row: span 2;\n background-color: #f1948a; \/* Yan proje *\/\n}\n\n\/* Di\u011fer .bento-item'ler i\u00e7in benzer stiller... *\/\n<\/pre>\n.item-1<\/code> ana projenizi temsil edebilir ve 2x2'lik bir alan kaplayarak dikkat \u00e7eker. .item-3<\/code> ise geni\u015f bir referans veya son blog yaz\u0131s\u0131n\u0131 sergileyebilir. Bu \u015fekilde, i\u00e7eri\u011finizin \u00f6nemine g\u00f6re kutulara farkl\u0131 a\u011f\u0131rl\u0131klar ve boyutlar atayabilirsiniz.<\/p>\nDuyarl\u0131 Tasar\u0131m (Responsive Design) i\u00e7in Medya Sorgular\u0131<\/h3>\n
\n@media (max-width: 768px) {\n .bento-container {\n grid-template-columns: repeat(2, 1fr); \/* Tabletlerde 2 s\u00fctuna d\u00fc\u015f\u00fcr *\/\n }\n\n .item-1, .item-3, .item-4 {\n grid-column: span 2; \/* Tabletlerde b\u00fcy\u00fck kutular\u0131n tamam\u0131n\u0131 kaplamas\u0131n\u0131 sa\u011fla *\/\n grid-row: span 1; \/* Sat\u0131r kaplamas\u0131n\u0131 tek sat\u0131ra d\u00fc\u015f\u00fcr *\/\n }\n}\n\n@media (max-width: 480px) {\n .bento-container {\n grid-template-columns: 1fr; \/* Mobil cihazlarda tek s\u00fctun *\/\n gap: 10px;\n }\n\n .bento-item {\n grid-column: span 1 !important; \/* T\u00fcm kutular\u0131n tek s\u00fctun kaplamas\u0131n\u0131 sa\u011fla *\/\n grid-row: span 1 !important;\n }\n}\n<\/pre>\n!important<\/code> kullan\u0131m\u0131, medya sorgular\u0131nda \u00f6nceki tan\u0131mlar\u0131 ge\u00e7ersiz k\u0131lmak i\u00e7in bazen gerekli olabilir, ancak m\u00fcmk\u00fcn oldu\u011funca ka\u00e7\u0131nmak ve daha \u00f6zg\u00fcl se\u00e7iciler kullanmak daha iyi bir pratiktir.<\/p>\nJavaScript ve K\u00fct\u00fcphanelerle Etkile\u015fimi Zenginle\u015ftirme Yollar\u0131<\/h2>\n
Basit Etkile\u015fimler: Hover Efektleri ve Mikro Animasyonlar<\/h3>\n
transition<\/code> \u00f6zellikleri ile harika sonu\u00e7lar elde edilebilirken, daha karma\u015f\u0131k animasyonlar i\u00e7in JavaScript'ten faydalanmak daha g\u00fc\u00e7l\u00fc kontrol sa\u011flar. \u00d6rne\u011fin, bir kutunun b\u00fcy\u00fcmesi, i\u00e7eri\u011finin g\u00f6r\u00fcn\u00fcr hale gelmesi veya bir ikonun d\u00f6nmesi gibi efektler, kullan\u0131c\u0131lar\u0131n dikkatini \u00e7eker.<\/p>\n\n\/\/ HTML yap\u0131s\u0131: Proje ID'si: ${projectId} olan \u00f6\u011feye t\u0131kland\u0131.<\/code>);\n openProjectModal(projectId); \/\/ Farazi bir fonksiyon\n });\n});\n\nfunction openProjectModal(id) {\n \/\/ Burada projenin detaylar\u0131n\u0131 API'den \u00e7ekip bir modalda g\u00f6sterebiliriz\n alert(Proje ${id} detaylar\u0131 y\u00fckleniyor...<\/code>);\n \/\/ Ger\u00e7ek bir uygulamada, burada bir modal i\u00e7eri\u011fi olu\u015fturulur ve g\u00f6sterilir.\n}\n<\/pre>\nmouseenter<\/code> ve mouseleave<\/code> olaylar\u0131n\u0131 dinleyerek kutulara dinamik transform<\/code> ve box-shadow<\/code> efektleri ekliyoruz. Ayr\u0131ca, bir kutuya t\u0131kland\u0131\u011f\u0131nda data-project-id<\/code> \u00f6zelli\u011finden proje kimli\u011fini alarak bir openProjectModal<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131yoruz. Bu fonksiyon, ger\u00e7ek bir uygulamada ilgili projenin detaylar\u0131n\u0131 i\u00e7eren bir modal penceresi a\u00e7abilir.<\/p>\nGeli\u015fmi\u015f Animasyonlar ve Durum Y\u00f6netimi i\u00e7in K\u00fct\u00fcphaneler<\/h3>\n
\n\/\/ React ile bir Bento Item bile\u015feni \u00f6rne\u011fi (pseudocode)\nimport React, { useState } from 'react';\n\nconst BentoItem = ({ title, description, imageUrl, projectId }) => {\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = () => {\n \/\/ Proje detay modal\u0131n\u0131 a\u00e7ma veya yeni sayfaya y\u00f6nlendirme\n console.log(React: T\u0131klanan Proje ID: ${projectId}<\/code>);\n \/\/ openModal(projectId);\n };\n\n return (\n {title}<\/h3>\n {isHovered &&
\n <\/div>\n );\n};\n\n\/\/ Ana Bento Grid bile\u015feni\nconst BentoGrid = ({ projects }) => {\n return (\n
requestAnimationFrame<\/code>) kullanmaya \u00f6zen g\u00f6sterin.\n<\/div>\nGer\u00e7ek D\u00fcnya Uygulamalar\u0131: Ba\u015far\u0131l\u0131 Bento Grid Portf\u00f6y \u00d6rnekleri<\/h2>\n
Vaka Analizi 1: Bir UI\/UX Tasar\u0131mc\u0131s\u0131n\u0131n Hikayesi<\/h3>\n
Vaka Analizi 2: Bir Full-Stack Geli\u015ftiricinin Ak\u0131ll\u0131 Portf\u00f6y\u00fc<\/h3>\n
Vaka Analizi 3: Dijital Sanat\u00e7\u0131n\u0131n G\u00f6rsel \u015e\u00f6leni<\/h3>\n
Performans Optimizasyonu ve SEO \u0130pu\u00e7lar\u0131<\/h2>\n
1. G\u00f6rsel Optimizasyonu: H\u0131z\u0131n Anahtar\u0131<\/h3>\n
\n
loading=\"lazy\"<\/code> \u00f6zelli\u011fini kullanabilir veya JavaScript tabanl\u0131 k\u00fct\u00fcphanelerden faydalanabilirsiniz.<\/li>\n<\/ul>\n\n![\"A\u00e7\u0131klay\u0131c\u0131](\"resim.jpg\")
\n<\/pre>\n2. Kod Optimizasyonu: Temiz ve Verimli Kod<\/h3>\n
\n
async<\/code> veya defer<\/code> nitelikleriyle y\u00fckleyerek HTML ayr\u0131\u015ft\u0131rmas\u0131n\u0131 engellemeyin. Bu, sayfa i\u00e7eri\u011finin daha h\u0131zl\u0131 g\u00f6r\u00fcnmesini sa\u011flar.<\/li>\n<\/ul>\n\n