Dijital d\u00fcnyada \u00f6ne \u00e7\u0131kmak, \u00f6zellikle yarat\u0131c\u0131 alanlarda faaliyet g\u00f6steren profesyoneller i\u00e7in giderek zorla\u015f\u0131yor. Potansiyel i\u015fverenlerin veya m\u00fc\u015fterilerin dikkatini \u00e7ekmek, sadece yeteneklerinizi sergilemekle kalmay\u0131p, ayn\u0131 zamanda bunu ak\u0131lda kal\u0131c\u0131 ve etkileyici bir bi\u00e7imde sunmay\u0131 gerektirir. Peki, portf\u00f6y\u00fcn\u00fcz\u00fc s\u0131radan bir web sayfas\u0131ndan, izleyicisini i\u00e7ine \u00e7eken sinematik bir deneyime nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz? \u0130\u015fte bu noktada, modern web geli\u015ftirmenin iki g\u00fc\u00e7l\u00fc arac\u0131 olan React ve Framer Motion devreye giriyor. Bu makalede, bu ikilinin g\u00fcc\u00fcn\u00fc kullanarak nas\u0131l dinamik, ak\u0131c\u0131 ve g\u00f6rsel olarak \u00e7arp\u0131c\u0131 bir portf\u00f6y olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, dijital ayak izinizi unutulmaz k\u0131lacak bu yolculu\u011fa birlikte \u00e7\u0131kal\u0131m.<\/p>\n
Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve kullan\u0131c\u0131 deneyimi (UX) beklentileri her ge\u00e7en g\u00fcn art\u0131yor. G\u00fcn\u00fcm\u00fcz\u00fcn dijital izleyicileri, etkile\u015fimli, h\u0131zl\u0131 ve g\u00f6rsel olarak zengin i\u00e7erikler ar\u0131yor. Statik web siteleri art\u0131k yeterli de\u011fil; bir portf\u00f6y\u00fcn sadece bilgiyi sunmas\u0131 de\u011fil, ayn\u0131 zamanda bir hikaye anlatmas\u0131 ve bir duygu uyand\u0131rmas\u0131 gerekiyor. \u0130\u015fte React ve Framer Motion bu ihtiyaca cevap veren m\u00fckemmel bir kombinasyon sunuyor. React, bile\u015fen tabanl\u0131 (component-based) yap\u0131s\u0131 sayesinde karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini (UI) y\u00f6netmeyi kolayla\u015ft\u0131r\u0131rken, Framer Motion ise bu aray\u00fczlere hayat veren ak\u0131c\u0131 ve performansl\u0131 animasyonlar olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir API (Uygulama Programlama Aray\u00fcz\u00fc) sa\u011flar.<\/p>\n
React, \u00f6zellikle tek sayfa uygulamalar\u0131 (Single Page Application – SPA) geli\u015ftirmek i\u00e7in tercih edilen bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde, portf\u00f6y\u00fcn\u00fcz\u00fcn her bir b\u00f6l\u00fcm\u00fcn\u00fc (\u00f6rne\u011fin, navigasyon \u00e7ubu\u011fu, proje kartlar\u0131, ileti\u015fim formu) ba\u011f\u0131ms\u0131z, yeniden kullan\u0131labilir par\u00e7alar olarak d\u00fc\u015f\u00fcnebilirsiniz. Bu, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, kodun bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r ve \u00f6l\u00e7eklenebilir bir yap\u0131 sunar. Sanal DOM (Virtual DOM) kullan\u0131m\u0131 sayesinde, sadece de\u011fi\u015fen bile\u015fenlerin g\u00fcncellenmesi sa\u011flan\u0131r, bu da sayfa performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, bir proje kart\u0131n\u0131n \u00fczerine gelindi\u011finde sadece o kart\u0131n durumunun g\u00fcncellenmesi, t\u00fcm sayfan\u0131n yeniden y\u00fcklenmesinden \u00e7ok daha verimlidir. Bu yap\u0131, \u00f6zellikle \u00e7ok say\u0131da etkile\u015fimli \u00f6\u011fe i\u00e7eren sinematik bir portf\u00f6y i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Framer Motion ise React uygulamalar\u0131na deklaratif (bildirimsel) animasyonlar eklemek i\u00e7in tasarlanm\u0131\u015f, kullan\u0131m\u0131 kolay ve performansl\u0131 bir animasyon k\u00fct\u00fcphanesidir. Geleneksel CSS animasyonlar\u0131na k\u0131yasla \u00e7ok daha g\u00fc\u00e7l\u00fc yetenekler sunar ve JavaScript’in esnekli\u011fiyle birle\u015fir. Framer Motion ile karma\u015f\u0131k animasyon dizilerini, s\u00fcr\u00fckle-b\u0131rak etkile\u015fimlerini, sayfa ge\u00e7i\u015flerini ve hatta kayd\u0131rma tabanl\u0131 (scroll-based) animasyonlar\u0131 \u00e7ok az kodla hayata ge\u00e7irebilirsiniz. K\u00fct\u00fcphanenin sundu\u011fu Bu iki teknolojinin birle\u015fimi, geli\u015ftiricilere hem yap\u0131sal sa\u011flaml\u0131k hem de g\u00f6rsel esneklik sunar. React’in mod\u00fcler yap\u0131s\u0131 sayesinde, her bir animasyonlu bile\u015feni ayr\u0131 ayr\u0131 tasarlayabilir ve y\u00f6netebiliriz. Framer Motion ise bu bile\u015fenlere hayat vererek, kullan\u0131c\u0131lar\u0131n portf\u00f6y\u00fcn\u00fczde gezinirken adeta bir film izliyormu\u015f gibi hissetmelerini sa\u011flar. Bu sinerji, sadece teknik bir avantaj de\u011fil, ayn\u0131 zamanda portf\u00f6y\u00fcn\u00fcz\u00fcn ziyaret\u00e7iler \u00fczerinde b\u0131rakaca\u011f\u0131 etki a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck bir fark yarat\u0131r. Sonu\u00e7 olarak, React’in sa\u011flam temelini Framer Motion’\u0131n dinamik animasyon yetenekleriyle birle\u015ftirmek, sadece profesyonel de\u011fil, ayn\u0131 zamanda sanatsal bir ifade bi\u00e7imi sunan bir portf\u00f6y olu\u015fturman\u0131n en etkili yollar\u0131ndan biridir.<\/p>\n Modern web geli\u015ftirmeye ad\u0131m atarken, React ve Framer Motion gibi g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131 anlamak, projelerinizi bir sonraki seviyeye ta\u015f\u0131man\u0131n anahtar\u0131d\u0131r. Bu b\u00f6l\u00fcmde, her iki teknolojinin ne oldu\u011funu, temel prensiplerini ve projenize nas\u0131l dahil edilece\u011fini inceleyece\u011fiz.<\/p>\n React, Facebook taraf\u0131ndan geli\u015ftirilen ve kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. “K\u00fct\u00fcphane” olarak adland\u0131r\u0131lsa da, genellikle bir “framework (yaz\u0131l\u0131m \u00e7er\u00e7evesi)” gibi i\u015flev g\u00f6r\u00fcr ve modern web uygulamalar\u0131n\u0131n geli\u015ftirilmesinde merkezi bir rol oynar. React’in en temel prensibi, bile\u015fen tabanl\u0131 (component-based) mimarisidir. Bir web sayfas\u0131n\u0131, her biri kendi mant\u0131\u011f\u0131na ve g\u00f6r\u00fcn\u00fcm\u00fcne sahip k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara (bile\u015fenlere) ay\u0131r\u0131r\u0131z. \u00d6rne\u011fin, bir navigasyon \u00e7ubu\u011fu, bir kart, bir d\u00fc\u011fme veya bir form alan\u0131 ayr\u0131 birer bile\u015fen olabilir. Bu yakla\u015f\u0131m, kodun daha d\u00fczenli, bak\u0131m\u0131 daha kolay ve \u00f6l\u00e7eklenebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n React’in bir di\u011fer \u00f6nemli \u00f6zelli\u011fi ise Sanal DOM (Virtual DOM) kullanmas\u0131d\u0131r. Geleneksel web geli\u015ftirmede, bir de\u011fi\u015fiklik oldu\u011funda taray\u0131c\u0131 t\u00fcm DOM’u (Belge Nesne Modeli) yeniden olu\u015fturur, bu da performans d\u00fc\u015f\u00fc\u015flerine neden olabilir. React ise, bir bile\u015fenin durumu de\u011fi\u015fti\u011finde, \u00f6nce sanal bir DOM \u00fczerinde bu de\u011fi\u015fikli\u011fi uygular. Ard\u0131ndan, ger\u00e7ek DOM ile sanal DOM aras\u0131ndaki farklar\u0131 ak\u0131ll\u0131ca hesaplar ve yaln\u0131zca gerekli olan minimum de\u011fi\u015fiklikleri ger\u00e7ek DOM’a yans\u0131t\u0131r. Bu optimizasyon, \u00f6zellikle dinamik ve etkile\u015fimli uygulamalarda, \u00e7ok daha h\u0131zl\u0131 ve ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar.<\/p>\n Framer Motion, React i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f, \u00fcretim d\u00fczeyinde animasyonlar olu\u015fturmay\u0131 sa\u011flayan bir animasyon k\u00fct\u00fcphanesidir. Framer, \u00f6ncelikle tasar\u0131m ara\u00e7lar\u0131yla tan\u0131nsa da, Framer Motion k\u00fct\u00fcphanesi React geli\u015ftiricilerine karma\u015f\u0131k animasyonlar\u0131 sade ve deklaratif bir s\u00f6zdizimi (syntax) ile yazma imkan\u0131 sunar. Temel amac\u0131, animasyonlar\u0131 React bile\u015fenlerinizin bir par\u00e7as\u0131 haline getirerek, durum y\u00f6netimiyle (state management) sorunsuz bir \u015fekilde entegre olmas\u0131n\u0131 sa\u011flamakt\u0131r. Bu sayede, animasyonlar\u0131n\u0131z\u0131 bile\u015fenlerinizin ya\u015fam d\u00f6ng\u00fcs\u00fcyle (lifecycle) uyumlu bir \u015fekilde kontrol edebilirsiniz.<\/p>\n Framer Motion, animasyonlar\u0131 React ve Framer Motion ile yeni bir portf\u00f6y projesi ba\u015flatmak olduk\u00e7a basittir. \u0130lk olarak, bir React projesi olu\u015fturman\u0131z gerekir. Bunun i\u00e7in genellikle Create React App<\/a> veya Next.js<\/a> gibi ara\u00e7lar kullan\u0131l\u0131r. Bu makalede, Create React App ile ilerleyece\u011fiz:<\/p>\n Bu komutlar, Veya e\u011fer Yarn kullan\u0131yorsan\u0131z:<\/p>\n Art\u0131k projeniz hem React’in g\u00fcc\u00fcne hem de Framer Motion’\u0131n animasyon yeteneklerine sahip. Projenizi ba\u015flatmak i\u00e7in:<\/p>\n Bu komut, projenizi yerel geli\u015ftirme sunucusunda \u00e7al\u0131\u015ft\u0131racak ve taray\u0131c\u0131n\u0131zda otomatik olarak a\u00e7acakt\u0131r. Bu temel kurulum ile, sinematik portf\u00f6y\u00fcn\u00fcz\u00fc in\u015fa etmeye haz\u0131rs\u0131n\u0131z demektir. \u0130lerleyen b\u00f6l\u00fcmlerde, bu ara\u00e7lar\u0131 kullanarak somut \u00f6rneklerle animasyonlar eklemeyi ve portf\u00f6y\u00fcn\u00fcz\u00fc hayata ge\u00e7irmeyi \u00f6\u011frenece\u011fiz.<\/p>\n Portf\u00f6y\u00fcn\u00fcz\u00fc sinematik bir deneyime d\u00f6n\u00fc\u015ft\u00fcrmek, sadece estetik a\u00e7\u0131dan de\u011fil, ayn\u0131 zamanda ziyaret\u00e7ilerinizin dikkatini \u00e7ekmek ve onlar\u0131 etkilemek a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu b\u00f6l\u00fcmde, React ve Framer Motion’\u0131 kullanarak bir portf\u00f6y\u00fcn temel yap\u0131s\u0131n\u0131 nas\u0131l kuraca\u011f\u0131m\u0131z\u0131 ve ona nas\u0131l etkileyici animasyonlar ekleyece\u011fimizi ad\u0131m ad\u0131m inceleyece\u011fiz. Bu s\u00fcre\u00e7, hem temiz kod yaz\u0131m\u0131n\u0131 hem de ak\u0131c\u0131 kullan\u0131c\u0131 deneyimini bir araya getirmeyi hedefler.<\/p>\n Herhangi bir React projesinde oldu\u011fu gibi, portf\u00f6y\u00fcn\u00fcz\u00fc de mant\u0131ksal bile\u015fenlere ay\u0131rmak, geli\u015ftirme s\u00fcrecini d\u00fczenli ve y\u00f6netilebilir k\u0131lar. Temel bir portf\u00f6y genellikle a\u015fa\u011f\u0131daki ana bile\u015fenleri i\u00e7erir:<\/p>\n Bu bile\u015fenleri ayr\u0131 ayr\u0131 dosyalar halinde olu\u015fturmak, kodunuzu daha okunabilir ve bak\u0131m\u0131 daha kolay hale getirir. \u00d6rne\u011fin, Framer Motion, React bile\u015fenlerinize animasyonlar eklemeyi son derece kolayla\u015ft\u0131r\u0131r. Temel olarak, animasyon eklemek istedi\u011finiz HTML elementini veya React bile\u015fenini Bir elementin sayfaya girerken animasyonla belirmesi, sinematik bir etki yaratman\u0131n ilk ad\u0131m\u0131d\u0131r. \u00d6rne\u011fin, Hero b\u00f6l\u00fcm\u00fcndeki ba\u015fl\u0131\u011f\u0131n ve a\u00e7\u0131klaman\u0131n hafif\u00e7e yukar\u0131dan kayarak ve yava\u015f\u00e7a belirerek gelmesini sa\u011flayabiliriz:<\/p>\n Burada, Tek sayfa uygulamalar\u0131nda, bir sayfadan di\u011ferine ge\u00e7erken ak\u0131c\u0131 animasyonlar sa\u011flamak, sinematik deneyimin \u00f6nemli bir par\u00e7as\u0131d\u0131r. Framer Motion’\u0131n Bu \u00f6rnekte, Portf\u00f6y\u00fcn\u00fczdeki proje kartlar\u0131, ziyaret\u00e7ilerinizi etkilemek i\u00e7in harika bir f\u0131rsatt\u0131r. Statik kartlar yerine, fare etkile\u015fimleriyle canlanan ve detaylar\u0131 g\u00f6steren kartlar tasarlayabiliriz. \u0130\u015fte basit bir proje kart\u0131 animasyonu \u00f6rne\u011fi:<\/p>\n Bu Sinematik bir portf\u00f6y olu\u015ftururken estetik kadar performans da kritik \u00f6neme sahiptir. Harika g\u00f6r\u00fcnen ancak yava\u015f y\u00fcklenen veya tak\u0131lan bir site, ziyaret\u00e7iyi h\u0131zla uzakla\u015ft\u0131rabilir. Bu b\u00f6l\u00fcmde, Framer Motion animasyonlar\u0131n\u0131z\u0131n ve genel React uygulaman\u0131z\u0131n performans\u0131n\u0131 nas\u0131l optimize edebilece\u011finizi ve daha karma\u015f\u0131k senaryolar i\u00e7in ileri d\u00fczey teknikleri nas\u0131l kullanabilece\u011finizi inceleyece\u011fiz.<\/p>\n Framer Motion, varsay\u0131lan olarak optimize edilmi\u015f animasyonlar sunsa da, baz\u0131 en iyi uygulamalar\u0131 takip ederek daha da ak\u0131c\u0131 bir deneyim sa\u011flayabilirsiniz:<\/p>\n Framer Motion, basit animasyonlar\u0131n \u00f6tesine ge\u00e7mek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Kendi \u00f6zel hook’lar\u0131n\u0131z\u0131 (kancalar\u0131n\u0131z\u0131) yazarak veya k\u00fct\u00fcphanenin sundu\u011fu daha geli\u015fmi\u015f \u00f6zelliklerle karma\u015f\u0131k etkile\u015fimler olu\u015fturabilirsiniz:<\/p>\n Bu ileri d\u00fczey teknikler ve optimizasyon stratejileri, portf\u00f6y\u00fcn\u00fcz\u00fcn sadece g\u00f6rsel olarak \u00e7ekici olmas\u0131n\u0131 de\u011fil, ayn\u0131 zamanda her cihazda h\u0131zl\u0131 ve ak\u0131c\u0131 bir deneyim sunmas\u0131n\u0131 sa\u011flar. Unutmay\u0131n, en iyi animasyonlar, kullan\u0131c\u0131y\u0131 etkilerken ayn\u0131 zamanda site performans\u0131n\u0131 da g\u00f6z ard\u0131 etmeyenlerdir. Bu dengeyi kurmak, sinematik bir portf\u00f6y\u00fcn ba\u015far\u0131s\u0131n\u0131n anahtar\u0131d\u0131r.<\/p>\n Bu makale boyunca, React’in sa\u011flam ve bile\u015fen tabanl\u0131 yap\u0131s\u0131n\u0131 Framer Motion’\u0131n etkileyici animasyon yetenekleriyle birle\u015ftirerek nas\u0131l sinematik bir portf\u00f6y olu\u015fturulabilece\u011fini detayl\u0131ca inceledik. Modern web geli\u015ftirmenin bu iki g\u00fc\u00e7l\u00fc arac\u0131n\u0131n bir araya gelmesi, sadece estetik a\u00e7\u0131dan zengin de\u011fil, ayn\u0131 zamanda performansl\u0131 ve ak\u0131lda kal\u0131c\u0131 kullan\u0131c\u0131 deneyimleri yaratman\u0131n kap\u0131lar\u0131n\u0131 aral\u0131yor. React sayesinde mod\u00fcler ve y\u00f6netilebilir bir kod taban\u0131 olu\u015ftururken, Framer Motion ile bu kod taban\u0131na hayat veren ak\u0131c\u0131 ve etkile\u015fimli animasyonlar ekleyebilece\u011fimizi g\u00f6rd\u00fck. Giri\u015f animasyonlar\u0131ndan sayfa ge\u00e7i\u015flerine, fare etkile\u015fimlerinden kayd\u0131rma tabanl\u0131 efektlere kadar bir\u00e7ok farkl\u0131 senaryoda bu ikilinin g\u00fcc\u00fcn\u00fc ke\u015ffettik.<\/p>\n Ki\u015fisel markala\u015fma ve kariyer a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, sinematik bir portf\u00f6y, sizi rakiplerinizden ay\u0131rarak potansiyel i\u015fverenlerin veya m\u00fc\u015fterilerin g\u00f6z\u00fcnde daha profesyonel ve yenilik\u00e7i bir imaj \u00e7izmenizi sa\u011flar. Sadece ne yapt\u0131\u011f\u0131n\u0131z\u0131 g\u00f6stermekle kalmaz, ayn\u0131 zamanda nas\u0131l yapt\u0131\u011f\u0131n\u0131z\u0131 ve teknolojiyi ne kadar yarat\u0131c\u0131 kullanabildi\u011finizi de sergilersiniz. Bu, \u00f6zellikle tasar\u0131m odakl\u0131 veya kullan\u0131c\u0131 deneyimini \u00f6n planda tutan roller i\u00e7in kritik bir avantajd\u0131r.<\/pf\u00f6y\u00fcn\u00fcz, sadece bir referans noktas\u0131 olmaktan \u00e7\u0131karak, adeta dijital bir sanat eserine d\u00f6n\u00fc\u015f\u00fcr.<\/p>\n Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli de\u011fi\u015fiyor ve gelecekte de yeni ara\u00e7lar ve teknikler ortaya \u00e7\u0131kmaya devam edecek. Ancak React ve Framer Motion gibi k\u00fct\u00fcphanelerin temel prensipleri ve sunduklar\u0131 geli\u015ftirici deneyimi, uzun s\u00fcre ge\u00e7erlili\u011fini koruyacak gibi g\u00f6r\u00fcn\u00fcyor. \u00d6zellikle WebAssembly, WebGL ve VR\/AR (Sanal Ger\u00e7eklik\/Art\u0131r\u0131lm\u0131\u015f Ger\u00e7eklik) gibi teknolojilerin web’e daha fazla entegre olmas\u0131yla, animasyon ve etkile\u015fim yetenekleri daha da \u00f6nem kazanacakt\u0131r. Bu nedenle, bu teknolojilere hakim olmak, gelece\u011fin web geli\u015ftirme trendlerine uyum sa\u011flamak i\u00e7in sa\u011flam bir temel olu\u015fturur. Kendi sinematik portf\u00f6y\u00fcn\u00fcz\u00fc in\u015fa ederek, sadece yeteneklerinizi sergilemekle kalmayacak, ayn\u0131 zamanda modern web’in sundu\u011fu s\u0131n\u0131rs\u0131z yarat\u0131c\u0131 potansiyeli de ke\u015ffetmi\u015f olacaks\u0131n\u0131z.<\/p>\n React ve Framer Motion \u00f6\u011frenmek zor mu?<\/strong><\/p>\n React, JavaScript bilgisi olanlar i\u00e7in orta d\u00fczeyde bir \u00f6\u011frenme e\u011frisine sahiptir. Bile\u015fen tabanl\u0131 d\u00fc\u015f\u00fcnme ve durum y\u00f6netimi (state management) kavramlar\u0131n\u0131 anlamak biraz zaman alabilir. Framer Motion ise React’e k\u0131yasla daha kolay \u00f6\u011frenilebilir bir k\u00fct\u00fcphanedir, \u00e7\u00fcnk\u00fc deklaratif (bildirimsel) bir API sunar ve \u00e7o\u011fu animasyon karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlar. Temel React bilgisine sahipseniz, Framer Motion’\u0131 k\u0131sa s\u00fcrede projelerinize entegre etmeye ba\u015flayabilirsiniz.<\/p>\n Performans sorunlar\u0131 ya\u015far m\u0131y\u0131m?<\/strong><\/p>\n Herhangi bir animasyon k\u00fct\u00fcphanesinde oldu\u011fu gibi, Framer Motion ile de dikkatsiz kullan\u0131ld\u0131\u011f\u0131nda performans sorunlar\u0131 ya\u015fanabilir. Ancak Framer Motion, performans\u0131 optimize etmek i\u00e7in tasarlanm\u0131\u015ft\u0131r ve donan\u0131m h\u0131zland\u0131rma (hardware acceleration) gibi teknikleri kullan\u0131r. Makalede bahsedilen optimizasyon ipu\u00e7lar\u0131n\u0131 (transform ve opacity kullan\u0131m\u0131, SEO dostu bir portf\u00f6y olu\u015fturabilir miyim?<\/strong><\/p>\n Evet, React ile olu\u015fturulan tek sayfa uygulamalar\u0131 (SPA) varsay\u0131lan olarak SEO a\u00e7\u0131s\u0131ndan baz\u0131 zorluklar ya\u015fayabilir \u00e7\u00fcnk\u00fc i\u00e7erik JavaScript ile dinamik olarak y\u00fcklenir. Ancak bu sorunlar, Next.js veya Gatsby gibi server-side rendering (SSR – sunucu taraf\u0131 olu\u015fturma) veya static site generation (SSG – statik site olu\u015fturma) yetenekleri sunan React framework’leri kullan\u0131larak a\u015f\u0131labilir. Ayr\u0131ca, do\u011fru semantik HTML kullan\u0131m\u0131, meta etiketleri ve eri\u015filebilirlik (accessibility) standartlar\u0131na uyum, portf\u00f6y\u00fcn\u00fcz\u00fcn SEO performans\u0131n\u0131 art\u0131racakt\u0131r. Framer Motion animasyonlar\u0131 do\u011frudan SEO’yu etkilemez, ancak h\u0131zl\u0131 y\u00fcklenen ve ak\u0131c\u0131 bir site kullan\u0131c\u0131 deneyimini iyile\u015ftirerek dolayl\u0131 olarak SEO’ya katk\u0131da bulunabilir.<\/p>\n Mobil uyumluluk nas\u0131l sa\u011flan\u0131r?<\/strong><\/p>\n React ile geli\u015ftirilen uygulamalar, duyarl\u0131 (responsive) tasar\u0131m prensipleriyle kolayca mobil uyumlu hale getirilebilir. CSS media query’leri, Flexbox veya Grid gibi d\u00fczen sistemleri kullanarak farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flayabilirsiniz. Framer Motion animasyonlar\u0131 da varsay\u0131lan olarak duyarl\u0131d\u0131r ve CSS \u00f6zelliklerini kullanarak mobil cihazlarda daha hafif veya farkl\u0131 animasyonlar tetikleyebilirsiniz. \u00d6rne\u011fin, Framer Motion yerine ba\u015fka alternatifler var m\u0131?<\/strong><\/p>\n Evet, React ekosisteminde Framer Motion’a alternatif olarak kullanabilece\u011finiz ba\u015fka animasyon k\u00fct\u00fcphaneleri de bulunmaktad\u0131r. Bunlardan baz\u0131lar\u0131 #React #FramerMotion #WebGeli\u015ftirme #Portf\u00f6yTasar\u0131m\u0131 #Animasyon<\/p>\nmotion<\/code> bile\u015feni ve \u00e7e\u015fitli hook’lar (kancalar), animasyon durumlar\u0131n\u0131 y\u00f6netmeyi ve bile\u015fenler aras\u0131nda ak\u0131c\u0131 ge\u00e7i\u015fler olu\u015fturmay\u0131 son derece basitle\u015ftirir. \u00d6rne\u011fin, bir elementin ekrana girerken yava\u015f\u00e7a belirmesi veya bir butona t\u0131kland\u0131\u011f\u0131nda hafif\u00e7e b\u00fcy\u00fcmesi gibi efektler, Framer Motion ile saniyeler i\u00e7inde kodlanabilir. Bu, portf\u00f6y\u00fcn\u00fcze dinamik ve modern bir his katman\u0131n anahtar\u0131d\u0131r.<\/p>\nTemel Kavramlara Giri\u015f: React ve Framer Motion’\u0131 Tan\u0131yal\u0131m<\/h3>\n
React Nedir?<\/h4>\n
Framer Motion Nedir?<\/h4>\n
motion<\/code> bile\u015feni arac\u0131l\u0131\u011f\u0131yla y\u00f6netir. Herhangi bir HTML elementi veya React bile\u015feni, motion<\/code> ile sarmalanarak animasyon yetenekleri kazanabilir. \u00d6rne\u011fin, bir div<\/code> elementini motion.div<\/code> olarak kullanarak ona animasyon \u00f6zellikleri ekleyebilirsiniz. K\u00fct\u00fcphane, initial<\/code> (ba\u015flang\u0131\u00e7 durumu), animate<\/code> (hedef durum), transition<\/code> (ge\u00e7i\u015f \u00f6zellikleri), whileHover<\/code> (\u00fczerine gelindi\u011finde) gibi sezgisel \u00f6zellikler sunar. Ayr\u0131ca, s\u00fcr\u00fckle-b\u0131rak (drag-and-drop), sayfa ge\u00e7i\u015fleri, kayd\u0131rma tabanl\u0131 animasyonlar ve SVG animasyonlar\u0131 gibi geli\u015fmi\u015f \u00f6zellikler i\u00e7in de g\u00fc\u00e7l\u00fc ara\u00e7lar sa\u011flar. Framer Motion’\u0131n performans\u0131 optimize edilmi\u015f olmas\u0131, ak\u0131c\u0131 60fps (saniyedeki kare say\u0131s\u0131) animasyonlar sunmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar, bu da sinematik bir portf\u00f6y i\u00e7in vazge\u00e7ilmezdir.<\/p>\nKurulum ve \u0130lk Ad\u0131mlar<\/h4>\n
npx create-react-app my-cinematic-portfolio\ncd my-cinematic-portfolio<\/code><\/pre>\n<\/div>\nmy-cinematic-portfolio<\/code> ad\u0131nda yeni bir React projesi olu\u015fturacak ve projenin dizinine ge\u00e7menizi sa\u011flayacakt\u0131r. Ard\u0131ndan, Framer Motion k\u00fct\u00fcphanesini projenize eklemelisiniz:<\/p>\nnpm install framer-motion<\/code><\/pre>\n<\/div>\nyarn add framer-motion<\/code><\/pre>\n<\/div>\nnpm start<\/code><\/pre>\n<\/div>\nAd\u0131m Ad\u0131m Sinematik Portf\u00f6y Olu\u015fturma S\u00fcreci<\/h2>\n
Portf\u00f6y Yap\u0131s\u0131 ve Temel Bile\u015fenler (Components)<\/h3>\n
\n
App.js<\/code> veya Layout.js<\/code> olarak adland\u0131r\u0131l\u0131r. T\u00fcm sayfan\u0131n genel yap\u0131s\u0131n\u0131 (\u00f6rne\u011fin, navigasyon \u00e7ubu\u011fu, ana i\u00e7erik alan\u0131 ve altbilgi) tan\u0131mlar. Bu bile\u015fen, di\u011fer t\u00fcm bile\u015fenleri sarmalar.<\/li>\nsrc\/components<\/code> klas\u00f6r\u00fcnde Header.js<\/code>, Hero.js<\/code>, ProjectCard.js<\/code> gibi dosyalar olu\u015fturabilirsiniz. \u0130\u015fte basit bir App.js<\/code> yap\u0131s\u0131:<\/p>\nFramer Motion ile Etkileyici Animasyonlar Ekleme<\/h3>\n
motion<\/code> ile sarmalaman\u0131z ve animasyon \u00f6zelliklerini ona prop (\u00f6zellik) olarak ge\u00e7meniz yeterlidir. En s\u0131k kullan\u0131lan animasyon \u00f6zellikleri \u015funlard\u0131r:<\/p>\n\n
initial<\/code> (Ba\u015flang\u0131\u00e7 Durumu):<\/strong> Bile\u015fenin ilk render edildi\u011findeki durumu. Genellikle opacity (\u015feffafl\u0131k) 0 veya bir konum ofseti (offset) gibi de\u011ferler verilir.<\/li>\nanimate<\/code> (Hedef Durum):<\/strong> Bile\u015fenin animasyonun sonunda ula\u015faca\u011f\u0131 durum. initial<\/code> durumundan animate<\/code> durumuna ge\u00e7i\u015f, varsay\u0131lan olarak yumu\u015fak bir animasyonla ger\u00e7ekle\u015fir.<\/li>\ntransition<\/code> (Ge\u00e7i\u015f \u00d6zellikleri):<\/strong> Animasyonun nas\u0131l ger\u00e7ekle\u015fece\u011fini (s\u00fcre, gecikme, yumu\u015fatma e\u011frisi) belirler.<\/li>\nwhileHover<\/code> (\u00dczerine Gelindi\u011finde):<\/strong> Fare imleci bile\u015fenin \u00fczerine geldi\u011finde uygulanacak animasyon.<\/li>\nwhileTap<\/code> (T\u0131kland\u0131\u011f\u0131nda):<\/strong> Bile\u015fene t\u0131kland\u0131\u011f\u0131nda (veya dokunuldu\u011funda) uygulanacak animasyon.<\/li>\n<\/ul>\nElement Giri\u015f Animasyonlar\u0131<\/h4>\n
import React from 'react';\nimport { motion } from 'framer-motion';\n\nfunction Hero() {\n return (\n <section className=\"hero-section\">\n <motion.h1\n initial={{ opacity: 0, y: -50 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.8 }}\n >\n Yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 Ke\u015ffedin\n <\/motion.h1>\n <motion.p\n initial={{ opacity: 0, y: 50 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.8, delay: 0.3 }}\n >\n Benzersiz projelerle dijital d\u00fcnyada fark yarat\u0131n.\n <\/motion.p>\n <\/section>\n );\n}\n\nexport default Hero;<\/code><\/pre>\n<\/div>\nh1<\/code> ve p<\/code> etiketleri motion<\/code> ile sarmalanarak onlara initial<\/code> ve animate<\/code> \u00f6zellikleri atanm\u0131\u015ft\u0131r. transition<\/code> \u00f6zelli\u011fi, animasyonun ne kadar s\u00fcrece\u011fini ve p<\/code> etiketi i\u00e7in bir gecikme (delay) eklenerek daha dinamik bir giri\u015f sa\u011flanm\u0131\u015ft\u0131r.<\/p>\nSayfa Ge\u00e7i\u015f Animasyonlar\u0131 (AnimatePresence)<\/h4>\n
AnimatePresence<\/code> bile\u015feni, bir bile\u015fenin DOM’dan kald\u0131r\u0131lmadan \u00f6nce \u00e7\u0131k\u0131\u015f animasyonunu tamamlamas\u0131na olanak tan\u0131r. Bu, \u00f6zellikle y\u00f6nlendirme (routing) ile sayfa de\u011fi\u015ftirdi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nimport React from 'react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { Routes, Route, useLocation } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport ProjectsPage from '.\/pages\/ProjectsPage';\nimport ContactPage from '.\/pages\/ContactPage';\n\nconst pageVariants = {\n initial: { opacity: 0, x: \"100vw\" },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: \"-100vw\" }\n};\n\nconst pageTransition = {\n type: \"tween\",\n ease: \"easeInOut\",\n duration: 0.5\n};\n\nfunction AnimatedRoutes() {\n const location = useLocation();\n\n return (\n <AnimatePresence mode='wait'>\n <Routes location={location} key={location.pathname}>\n <Route path=\"\/\" element={\n <motion.div\n variants={pageVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n transition={pageTransition}\n >\n <Home \/>\n <\/motion.div>\n } \/>\n <Route path=\"\/projects\" element={\n <motion.div\n variants={pageVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n transition={pageTransition}\n >\n <ProjectsPage \/>\n <\/motion.div>\n } \/>\n <Route path=\"\/contact\" element={\n <motion.div\n variants={pageVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n transition={pageTransition}\n >\n <ContactPage \/>\n <\/motion.div>\n } \/>\n <\/Routes>\n <\/AnimatePresence>\n );\n}\n\nexport default AnimatedRoutes;<\/code><\/pre>\n<\/div>\nreact-router-dom<\/code> ile birlikte AnimatePresence<\/code> kullanarak sayfalar aras\u0131 ge\u00e7i\u015flerde kayd\u0131rma ve solma efekti uygulanm\u0131\u015ft\u0131r. mode='wait'<\/code> \u00f6zelli\u011fi, bir sayfa \u00e7\u0131k\u0131\u015f animasyonunu tamamlamadan di\u011ferinin giri\u015f animasyonunun ba\u015flamamas\u0131n\u0131 sa\u011flar. Bu, \u00e7ok daha kontroll\u00fc ve ak\u0131c\u0131 ge\u00e7i\u015fler yarat\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: Bir Proje Kart\u0131n\u0131n Canland\u0131r\u0131lmas\u0131<\/h3>\n
import React from 'react';\nimport { motion } from 'framer-motion';\n\nfunction ProjectCard({ title, description, image }) {\n return (\n <motion.div\n className=\"project-card\"\n whileHover={{ scale: 1.05, boxShadow: \"0px 10px 30px rgba(0, 0, 0, 0.3)\" }}\n whileTap={{ scale: 0.95 }}\n initial={{ opacity: 0, y: 20 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.5 }}\n >\n <img src={image} alt={title} className=\"project-image\" \/>\n <div className=\"project-info\">\n <h3>{title}<\/h3>\n <p>{description}<\/p>\n <motion.button\n whileHover={{ backgroundColor: '#007bff', color: '#ffffff' }}\n transition={{ duration: 0.2 }}\n >\n Detaylar\u0131 G\u00f6r\n <\/motion.button>\n <\/div>\n <\/motion.div>\n );\n}\n\nexport default ProjectCard;<\/code><\/pre>\n<\/div>\nProjectCard<\/code> bile\u015feninde, kart\u0131n \u00fczerine gelindi\u011finde (whileHover<\/code>) hafif\u00e7e b\u00fcy\u00fcmesini (scale: 1.05<\/code>) ve bir g\u00f6lge efekti kazanmas\u0131n\u0131 sa\u011flad\u0131k. T\u0131kland\u0131\u011f\u0131nda (whileTap<\/code>) ise hafif\u00e7e k\u00fc\u00e7\u00fclerek bir geri bildirim efekti veriyor. Ayr\u0131ca, her bir kart\u0131n sayfaya girerken yava\u015f\u00e7a belirmesi i\u00e7in initial<\/code> ve animate<\/code> \u00f6zellikleri de kullan\u0131ld\u0131. Butona da \u00fczerine gelindi\u011finde renk de\u011fi\u015fimi eklenerek etkile\u015fim art\u0131r\u0131ld\u0131. Bu t\u00fcr detaylar, portf\u00f6y\u00fcn\u00fcze sinematik bir derinlik ve profesyonel bir dokunu\u015f katarak ziyaret\u00e7ilerinizin deneyimini zenginle\u015ftirecektir. Bu basit ama etkili animasyonlar, ziyaret\u00e7ilerinizin portf\u00f6y\u00fcn\u00fczde daha fazla zaman ge\u00e7irmesini ve projelerinizle daha derinlemesine etkile\u015fim kurmas\u0131n\u0131 te\u015fvik edecektir.<\/p>\nPerformans Optimizasyonu ve \u0130leri D\u00fczey Teknikler<\/h2>\n
Ak\u0131c\u0131 Animasyonlar \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/h3>\n
\n
transform<\/code> (\u00f6rne\u011fin translate<\/code>, scale<\/code>, rotate<\/code>) ve opacity<\/code> gibi CSS \u00f6zelliklerini do\u011frudan GPU (Grafik \u0130\u015flem Birimi) \u00fczerinde i\u015fleyerek animasyonlar\u0131 donan\u0131m h\u0131zland\u0131rmal\u0131 hale getirebilir. Framer Motion, bu \u00f6zelliklere \u00f6ncelik vererek genellikle bu optimizasyonu otomatik olarak sa\u011flar. Ancak, width<\/code> veya height<\/code> gibi \u00f6zelliklerin animasyonunu yapmak, taray\u0131c\u0131n\u0131n d\u00fczeni (layout) ve boya (paint) i\u015flemlerini tetikleyerek performans\u0131 d\u00fc\u015f\u00fcrebilir. M\u00fcmk\u00fcn oldu\u011funca transform<\/code> ve opacity<\/code> kullanmaya \u00f6zen g\u00f6sterin.<\/li>\nuseMemo<\/code> ve useCallback<\/code> ile Gereksiz Yeniden Olu\u015fturmalar\u0131 Engelleyin:<\/strong> React’te bile\u015fenlerin gereksiz yere yeniden render edilmesi performans sorunlar\u0131na yol a\u00e7abilir. \u00d6zellikle animasyonlu bile\u015fenler i\u00e7inde veya \u00e7evresinde karma\u015f\u0131k hesaplamalar veya prop’lar (\u00f6zellikler) varsa, useMemo<\/code> ile de\u011ferleri, useCallback<\/code> ile fonksiyonlar\u0131 \u00f6nbelle\u011fe alarak (memoize) bu yeniden olu\u015fturmalar\u0131 engelleyebilirsiniz. Bu, \u00f6zellikle kayd\u0131rma tabanl\u0131 animasyonlar gibi s\u0131k g\u00fcncellenen durumlarda faydal\u0131d\u0131r.<\/li>\ntransition<\/code> \u00f6zelli\u011findeki ease<\/code> (yumu\u015fatma) de\u011ferini do\u011fru se\u00e7mek de animasyonun do\u011fal ak\u0131\u015f\u0131n\u0131 sa\u011flar.<\/li>\nReact.lazy<\/code> ve Suspense<\/code> \u00f6zellikleri veya \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneler bu konuda yard\u0131mc\u0131 olabilir.<\/li>\nstaggerChildren<\/code> Kullan\u0131n:<\/strong> Birden fazla elementin s\u0131rayla veya belirli bir gecikmeyle animasyon yapmas\u0131n\u0131 sa\u011flamak, sinematik bir etki yarat\u0131r. Framer Motion’\u0131n variants<\/code> (varyantlar) ve staggerChildren<\/code> \u00f6zellikleri, bu t\u00fcr grup animasyonlar\u0131n\u0131 kolayca y\u00f6netmenizi sa\u011flar. \u00d6rne\u011fin, bir liste \u00f6\u011felerinin tek tek belirmesi i\u00e7in bir ana konteyner bile\u015fenine staggerChildren<\/code> de\u011feri ekleyebilirsiniz.<\/li>\n<\/ul>\n\u00d6zel Hook’lar ve Karma\u015f\u0131k Senaryolar<\/h3>\n
\n
useAnimateOnScroll<\/code> hook’u yazabilirsiniz. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve animasyon mant\u0131\u011f\u0131n\u0131 daha mod\u00fcler hale getirir.<\/li>\npath<\/code> (yol) \u00f6zelliklerini canland\u0131rmak i\u00e7in harika destek sunar. \u00d6rne\u011fin, bir logonun \u00e7izim animasyonunu veya bir ikonun \u015fekil de\u011fi\u015ftirmesini Framer Motion ile kolayca yapabilirsiniz. Bu, portf\u00f6y\u00fcn\u00fcze benzersiz ve markan\u0131za \u00f6zel animasyonlar eklemenizi sa\u011flar.<\/li>\nuseMediaQuery<\/code> gibi hook’lar kullanarak ekran boyutuna g\u00f6re farkl\u0131 animasyonlar tetiklemenize olanak tan\u0131r. \u00d6rne\u011fin, mobil cihazlarda daha hafif animasyonlar kullan\u0131rken, masa\u00fcst\u00fcnde daha karma\u015f\u0131k efektler uygulayabilirsiniz.<\/li>\nuseScroll<\/code>):<\/strong> Framer Motion’\u0131n useScroll<\/code> hook’u, kayd\u0131rma konumuna (scroll position) dayal\u0131 olarak elementleri canland\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bir elementin ne kadar\u0131n\u0131n ekranda g\u00f6r\u00fcnd\u00fc\u011f\u00fcne ba\u011fl\u0131 olarak animasyonlar\u0131 tetikleyebilir, paralaks efektleri olu\u015fturabilir veya kayd\u0131rma \u00e7ubu\u011funun ilerlemesine g\u00f6re bir ilerleme \u00e7ubu\u011funu canland\u0131rabilirsiniz. Bu, portf\u00f6y\u00fcn\u00fczde interaktif bir hikaye anlat\u0131m\u0131 i\u00e7in harika bir yoldur.<\/li>\n<\/ul>\nSonu\u00e7 ve Gelecek Perspektifi<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
useMemo<\/code>\/useCallback<\/code>, tembel y\u00fckleme) uygulayarak \u00e7o\u011fu performans sorununu \u00f6nleyebilirsiniz. B\u00fcy\u00fck ve karma\u015f\u0131k animasyonlar i\u00e7in daha dikkatli planlama ve test yapmak \u00f6nemlidir.<\/p>\nuseMediaQuery<\/code> hook’unu kullanarak belirli bir ekran boyutunun alt\u0131nda animasyonlar\u0131 devre d\u0131\u015f\u0131 b\u0131rakabilir veya de\u011fi\u015ftirebilirsiniz.<\/p>\nReact Spring<\/code>, GSAP (GreenSock Animation Platform)<\/code> ve React Transition Group<\/code>‘dur. Her bir k\u00fct\u00fcphanenin kendine \u00f6zg\u00fc avantajlar\u0131 ve kullan\u0131m felsefeleri vard\u0131r. Framer Motion, \u00f6zellikle kullan\u0131m kolayl\u0131\u011f\u0131, deklaratif API’si ve performans\u0131yla \u00f6ne \u00e7\u0131kar, bu da onu sinematik portf\u00f6yler gibi g\u00f6rsel odakl\u0131 projeler i\u00e7in pop\u00fcler bir se\u00e7im yapar.<\/p>\n