{"id":30388,"date":"2025-09-27T06:01:53","date_gmt":"2025-09-27T03:01:53","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/"},"modified":"2025-09-27T06:01:53","modified_gmt":"2025-09-27T03:01:53","slug":"%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/","title":{"rendered":"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi"},"content":{"rendered":"<p><body><\/p>\n<p>Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi yads\u0131namaz. HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici bir portf\u00f6y klonu olu\u015fturarak becerilerinizi sergileyin ve kariyerinize h\u0131z kat\u0131n.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i i\u015f d\u00fcnyas\u0131nda, yeteneklerinizi sergilemenin ve potansiyel i\u015fverenler veya m\u00fc\u015fterilerle ba\u011flant\u0131 kurman\u0131n en etkili yollar\u0131ndan biri, profesyonel ve etkileyici bir \u00e7evrimi\u00e7i portf\u00f6ye sahip olmakt\u0131r. Peki, neden haz\u0131r bir \u015fablon kullanmak yerine kendi portf\u00f6y klonunuzu s\u0131f\u0131rdan in\u015fa etmelisiniz? Cevap olduk\u00e7a basit: Bu s\u00fcre\u00e7, yaln\u0131zca kodlama becerilerinizi g\u00f6stermekle kalmaz, ayn\u0131 zamanda tasar\u0131m anlay\u0131\u015f\u0131n\u0131z\u0131, problem \u00e7\u00f6zme yetene\u011finizi ve en yeni web teknolojilerini kullanma kabiliyetinizi de sergiler. Kendi benzersiz portf\u00f6y\u00fcn\u00fcz\u00fc olu\u015fturmak, size projenin her a\u015famas\u0131nda tam kontrol sa\u011flar; bu da ki\u015fisel markan\u0131z\u0131 ve esteti\u011finizi tam olarak yans\u0131tabilece\u011finiz anlam\u0131na gelir. Ayr\u0131ca, pop\u00fcler web sitelerinin veya ba\u015far\u0131l\u0131 portf\u00f6ylerin dinamik \u00f6zelliklerini ve g\u00f6rsel \u00e7ekicili\u011fini taklit etme (klonlama) s\u00fcreci, sizi sekt\u00f6rdeki en iyi uygulamalar\u0131 \u00f6\u011frenmeye ve uygulamaya zorlar. Bu rehberde, HTML, CSS ve JavaScript&#8217;in temel g\u00fcc\u00fcn\u00fc, modern web animasyonlar\u0131n\u0131n vazge\u00e7ilmezi GSAP ile birle\u015ftirerek, ziyaret\u00e7ilerinizi etkileyecek ak\u0131c\u0131 ve dinamik bir kullan\u0131c\u0131 deneyimi sunan bir portf\u00f6y klonunu nas\u0131l ad\u0131m ad\u0131m geli\u015ftirebilece\u011finizi ke\u015ffedece\u011fiz. Bu yolculuk, sadece bir web sitesi in\u015fa etmekten \u00e7ok daha fazlas\u0131n\u0131 vaat ediyor; bu, ki\u015fisel geli\u015fiminizi ve teknik yetkinli\u011finizi en \u00fcst d\u00fczeye \u00e7\u0131karma f\u0131rsat\u0131d\u0131r. Dolay\u0131s\u0131yla, sadece bir site olu\u015fturmakla kalmayacak, ayn\u0131 zamanda projenin her a\u015famas\u0131nda kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z zorluklar ve edinece\u011finiz yeni bilgilerle kendinizi daha da geli\u015ftireceksiniz. Sonu\u00e7 olarak, bu proje hem pratik kodlama becerilerinizi peki\u015ftirmenize hem de sekt\u00f6rde fark yaratman\u0131za olanak tan\u0131yacakt\u0131r. Web geli\u015ftirme d\u00fcnyas\u0131nda kendinizi kan\u0131tlamak ve \u00f6ne \u00e7\u0131kmak i\u00e7in bu t\u00fcr projeler hayati bir \u00f6neme sahiptir.<\/p>\n<h2>Temel Kavramlar Nelerdir? HTML, CSS, JavaScript ve GSAP&#8217;e Yak\u0131n Bak\u0131\u015f<\/h2>\n<p>Herhangi bir web projesine ba\u015flamadan \u00f6nce, projenin temel yap\u0131 ta\u015flar\u0131n\u0131 olu\u015fturan teknolojileri anlamak hayati \u00f6nem ta\u015f\u0131r. Bu portf\u00f6y klonu projesi i\u00e7in d\u00f6rt ana teknolojiden faydalanaca\u011f\u0131z: HTML, CSS, JavaScript ve GSAP. Her biri, projenizin farkl\u0131 bir y\u00f6n\u00fcn\u00fc ele alarak, size kapsaml\u0131 ve etkileyici bir sonu\u00e7 sunmak \u00fczere tasarlanm\u0131\u015ft\u0131r.<\/p>\n<p>\u00d6ncelikle, <strong>HTML (HyperText Markup Language)<\/strong>, web sayfalar\u0131n\u0131n iskeletidir. T\u0131pk\u0131 bir binan\u0131n kolonlar\u0131 ve duvarlar\u0131 gibi, HTML de i\u00e7eri\u011fimizin yap\u0131sal d\u00fczenini ve anlamsal anlam\u0131n\u0131 belirler. Ba\u015fl\u0131klar, paragraflar, resimler, ba\u011flant\u0131lar ve listeler gibi t\u00fcm \u00f6\u011feler HTML etiketleri arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r. \u00d6rne\u011fin, bir <\/p>\n<header> etiketi sayfan\u0131n \u00fcst k\u0131sm\u0131n\u0131, bir <\/p>\n<section> etiketi ba\u011f\u0131ms\u0131z bir i\u00e7erik b\u00f6l\u00fcm\u00fcn\u00fc ve <\/p>\n<nav> etiketi navigasyon men\u00fclerini belirtir. Semantik HTML kullan\u0131m\u0131, arama motorlar\u0131n\u0131n sitenizi daha iyi anlamas\u0131na yard\u0131mc\u0131 olur ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck faydalar sa\u011flar. Bu nedenle, projemizde modern ve anlaml\u0131 HTML etiketlerini tercih edece\u011fiz.<\/p>\n<p>\u0130kinci olarak, <strong>CSS (Cascading Style Sheets)<\/strong>, HTML taraf\u0131ndan olu\u015fturulan iskelete g\u00f6rsel bir estetik kazand\u0131ran ara\u00e7t\u0131r. CSS olmadan, web sayfalar\u0131 s\u0131k\u0131c\u0131 ve d\u00fcz metin y\u0131\u011f\u0131nlar\u0131ndan ibaret olurdu. Renkler, yaz\u0131 tipleri, boyutlar, bo\u015fluklar, konumland\u0131rmalar ve d\u00fczenler gibi t\u00fcm g\u00f6rsel \u00f6zellikler CSS ile kontrol edilir. Projemizin \u00e7ekicili\u011fini art\u0131rmak ve farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flamak (duyarl\u0131 tasar\u0131m) i\u00e7in Flexbox ve Grid gibi modern CSS d\u00fczenleme tekniklerini kullanaca\u011f\u0131z. Ayr\u0131ca, &commat;media query&#8217;ler arac\u0131l\u0131\u011f\u0131yla mobil cihazlardan masa\u00fcst\u00fc bilgisayarlara kadar t\u00fcm ekranlarda sorunsuz bir deneyim sunmay\u0131 hedefleyece\u011fiz. G\u00f6rsel olarak etkileyici bir portf\u00f6y olu\u015fturmak, potansiyel i\u015fverenlerin dikkatini \u00e7ekmek i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc olarak, <strong>JavaScript<\/strong>, web sayfalar\u0131n\u0131 dinamik ve etkile\u015fimli hale getiren programlama dilidir. HTML ve CSS statik g\u00f6rsellik sunarken, JavaScript kullan\u0131c\u0131 eylemlerine yan\u0131t veren, i\u00e7erik de\u011fi\u015ftiren, animasyonlar ba\u015flatan ve sunucuyla ileti\u015fim kuran &#8220;beyni&#8221; temsil eder. Bir men\u00fcy\u00fc a\u00e7\u0131p kapatmak, bir forma do\u011frulama eklemek veya bir galeriye kayd\u0131rma \u00f6zelli\u011fi katmak gibi t\u00fcm etkile\u015fimler JavaScript ile m\u00fcmk\u00fcn olur. Projemizde, kullan\u0131c\u0131lar\u0131n portf\u00f6y\u00fcn\u00fczle ak\u0131c\u0131 bir \u015fekilde etkile\u015fim kurmas\u0131n\u0131 sa\u011flamak i\u00e7in JavaScript&#8217;i aktif olarak kullanaca\u011f\u0131z. Bu, ziyaret\u00e7ilerin sitenizde daha uzun s\u00fcre kalmas\u0131na ve i\u00e7eri\u011finizle daha derinlemesine etkile\u015fim kurmas\u0131na yol a\u00e7ar.<\/p>\n<p>Son olarak, <strong>GSAP (GreenSock Animation Platform)<\/strong>, \u00f6zellikle karma\u015f\u0131k ve y\u00fcksek performansl\u0131 web animasyonlar\u0131 olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Saf CSS animasyonlar\u0131na k\u0131yasla \u00e7ok daha esnek, g\u00fcvenilir ve taray\u0131c\u0131lar aras\u0131 uyumlu animasyonlar sunar. GSAP ile nesnelerin pozisyonunu, boyutunu, opakl\u0131\u011f\u0131n\u0131, rengini ve daha bir\u00e7ok \u00f6zelli\u011fini kolayca canland\u0131rabilirsiniz. \u00d6zellikle ScrollTrigger eklentisi sayesinde, sayfa kayd\u0131rma hareketlerine duyarl\u0131 etkileyici animasyonlar olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. Portf\u00f6y klonumuzda, GSAP&#8217;i kullanarak giri\u015f animasyonlar\u0131, b\u00f6l\u00fcm ge\u00e7i\u015fleri ve genel UI\/UX ak\u0131c\u0131l\u0131\u011f\u0131 i\u00e7in profesyonel dokunu\u015flar ekleyece\u011fiz. Bu, projenize ger\u00e7ekten &#8220;wow&#8221; fakt\u00f6r\u00fcn\u00fc katacak ve onu di\u011ferlerinden ay\u0131racakt\u0131r. Bu d\u00f6rt teknolojinin birle\u015fimi, sadece estetik olarak ho\u015f de\u011fil, ayn\u0131 zamanda i\u015flevsel ve kullan\u0131c\u0131 dostu bir web sitesi olu\u015fturmam\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h2>Portf\u00f6y Klonu Projesine Nereden Ba\u015flamal\u0131y\u0131z? Geli\u015ftirme Ortam\u0131 ve Temel Kurulum<\/h2>\n<p>Herhangi bir ba\u015far\u0131l\u0131 web projesinin temelinde sa\u011flam bir ba\u015flang\u0131\u00e7 yatar. Portf\u00f6y klonu projenize ba\u015flarken, do\u011fru geli\u015ftirme ortam\u0131n\u0131 kurmak ve temel dosya yap\u0131s\u0131n\u0131 olu\u015fturmak, ilerleyen a\u015famalarda kar\u015f\u0131la\u015fabilece\u011finiz olas\u0131 sorunlar\u0131 minimize eder ve projenizi daha d\u00fczenli hale getirir. \u0130lk ad\u0131m\u0131m\u0131z, projemiz i\u00e7in bir \u00e7al\u0131\u015fma klas\u00f6r\u00fc olu\u015fturmak olmal\u0131d\u0131r. Bu klas\u00f6r, t\u00fcm HTML, CSS, JavaScript ve muhtemel g\u00f6rselleri i\u00e7erecektir.<\/p>\n<p>\u00c7al\u0131\u015fma klas\u00f6r\u00fcn\u00fcz\u00fc olu\u015fturduktan sonra, i\u00e7erisine temel dosyalar\u0131m\u0131z\u0131 ekleyelim:<\/p>\n<ul>\n<li><code>index.html<\/code>: Web sitemizin ana sayfas\u0131 ve t\u00fcm i\u00e7eri\u011fi bar\u0131nd\u0131racak HTML dosyam\u0131z.<\/li>\n<li><code>style.css<\/code>: Web sitemizin t\u00fcm g\u00f6rsel stil tan\u0131mlamalar\u0131n\u0131 i\u00e7erecek CSS dosyam\u0131z.<\/li>\n<li><code>script.js<\/code>: Web sitemizin dinamik etkile\u015fimlerini ve GSAP animasyonlar\u0131n\u0131 y\u00f6netecek JavaScript dosyam\u0131z.<\/li>\n<li>\u0130ste\u011fe ba\u011fl\u0131 olarak <code>images\/<\/code> veya <code>assets\/<\/code> gibi klas\u00f6rler, projenizde kullanaca\u011f\u0131n\u0131z g\u00f6rselleri ve di\u011fer medya dosyalar\u0131n\u0131 d\u00fczenli tutmak i\u00e7in eklenebilir.<\/li>\n<\/ul>\n<p>Bir sonraki \u00f6nemli ad\u0131m, kod yazmak i\u00e7in bir metin d\u00fczenleyici se\u00e7mektir. <strong>Visual Studio Code (VS Code)<\/strong>, web geli\u015ftiricileri aras\u0131nda pop\u00fclerli\u011fini kan\u0131tlam\u0131\u015f, zengin \u00f6zelliklere sahip, \u00fccretsiz ve a\u00e7\u0131k kaynakl\u0131 bir edit\u00f6rd\u00fcr. Canl\u0131 sunucu (Live Server) eklentisi gibi pek \u00e7ok faydal\u0131 uzant\u0131s\u0131yla geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131r\u0131r. Bu rehber boyunca VS Code kulland\u0131\u011f\u0131n\u0131z varsay\u0131lmaktad\u0131r.<\/p>\n<p>GSAP entegrasyonu, projemizin dinamik animasyonlar a\u00e7\u0131s\u0131ndan kalbini olu\u015fturacakt\u0131r. GSAP&#8217;i projenize eklemenin iki yayg\u0131n yolu vard\u0131r: CDN (Content Delivery Network) veya bir paket y\u00f6neticisi (NPM\/Yarn) arac\u0131l\u0131\u011f\u0131yla. H\u0131zl\u0131 ba\u015flang\u0131\u00e7 ve basit projeler i\u00e7in CDN kullan\u0131m\u0131 olduk\u00e7a pratiktir. <code>index.html<\/code> dosyan\u0131z\u0131n <body> kapan\u0131\u015f etiketinden hemen \u00f6nce a\u015fa\u011f\u0131daki CDN ba\u011flant\u0131lar\u0131n\u0131 ekleyerek GSAP&#8217;i projenize dahil edebilirsiniz:<\/p>\n<pre><code class=\"language-html\">\n<!-- GSAP Core Library -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<!-- GSAP ScrollTrigger Plugin (e\u011fer kayd\u0131rma tabanl\u0131 animasyonlar kullanacaksan\u0131z) -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n<!-- Kendi JavaScript dosyan\u0131z en sona eklenmelidir -->\n<script src=\"script.js\"><\/script>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu \u015fekilde, <code>script.js<\/code> dosyan\u0131zdaki kodlar GSAP k\u00fct\u00fcphanesine eri\u015febilecek ve animasyonlar\u0131n\u0131z\u0131 tan\u0131mlayabilecektir. Proje klonlama a\u015famas\u0131nda, orijinal sitenin genel d\u00fczenini, renk paletini ve tipografisini dikkatlice incelemek \u00f6nemlidir. Bu, kendi tasar\u0131m kararlar\u0131n\u0131z\u0131 verirken size rehberlik edecek ve klonunuzun otantikli\u011fini art\u0131racakt\u0131r. Unutmay\u0131n, iyi bir ba\u015flang\u0131\u00e7, projenizin geri kalan\u0131n\u0131n sa\u011flam temeller \u00fczerinde y\u00fckselmesini sa\u011flar. Bu y\u00fczden bu ad\u0131mlar\u0131 \u00f6zenle takip etmek, sizi ba\u015far\u0131ya ta\u015f\u0131yacakt\u0131r.<\/p>\n<div class=\"uzman-ipucu\">\n      Uzman \u0130pucu: Projenizin kaynak kontrol\u00fcn\u00fc sa\u011flamak i\u00e7in Git ve GitHub kullanmay\u0131 ihmal etmeyin. Bu, versiyon kontrol\u00fc yapman\u0131za, farkl\u0131 \u00f6zellikler \u00fczerinde g\u00fcvenle \u00e7al\u0131\u015fman\u0131za ve olas\u0131 hatalar\u0131 geri alman\u0131za olanak tan\u0131r.\n    <\/div>\n<h2>HTML \u0130skeletini Nas\u0131l Olu\u015ftururuz? Semantik Yap\u0131 ve Temel B\u00f6l\u00fcmler<\/h2>\n<p>Bir portf\u00f6y web sitesinin omurgas\u0131n\u0131 olu\u015fturan HTML yap\u0131s\u0131, projenizin hem i\u015flevselli\u011fi hem de arama motoru optimizasyonu (SEO) a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Semantik HTML5 etiketlerini kullanarak, web sitemizin i\u00e7eri\u011fini anlaml\u0131 bir \u015fekilde d\u00fczenleyecek ve b\u00f6ylece hem taray\u0131c\u0131lar hem de yard\u0131mc\u0131 teknolojiler (ekran okuyucular gibi) i\u00e7in daha eri\u015filebilir hale getirece\u011fiz. Bu b\u00f6l\u00fcmde, tipik bir portf\u00f6y web sitesinin ana b\u00f6l\u00fcmlerini ve bunlar\u0131n semantik HTML etiketleri ile nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n<p>Her HTML belgesi standart bir yap\u0131ya sahiptir. A\u015fa\u011f\u0131daki temel \u015fablon, projemizin ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r:<\/p>\n<pre><code class=\"language-html\">\n<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>[Ad\u0131n\u0131z\/Proje Ad\u0131] Portf\u00f6y<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <!-- Header ve Navigasyon -->\n    <header>\n        <nav>\n            <div class=\"logo\">\n                <a href=\"#\">[Ad\u0131n\u0131z]<\/a>\n            <\/div>\n            <ul class=\"nav-links\">\n                <li><a href=\"#anasayfa\">Anasayfa<\/a><\/li>\n                <li><a href=\"#hakkimda\">Hakk\u0131mda<\/a><\/li>\n                <li><a href=\"#projeler\">Projeler<\/a><\/li>\n                <li><a href=\"#iletisim\">\u0130leti\u015fim<\/a><\/li>\n            <\/ul>\n            <div class=\"burger-menu\">\n                <div class=\"line1\"><\/div>\n                <div class=\"line2\"><\/div>\n                <div class=\"line3\"><\/div>\n            <\/div>\n        <\/nav>\n    <\/header>\n\n    <!-- Hero B\u00f6l\u00fcm\u00fc -->\n    <section id=\"anasayfa\" class=\"hero\">\n        <div class=\"hero-content\">\n            <h1>Merhaba, Ben [Ad\u0131n\u0131z Soyad\u0131n\u0131z]<\/h1>\n            <p>Yarat\u0131c\u0131 bir [Mesle\u011finiz] olarak, dijital deneyimler tasarl\u0131yorum.<\/p>\n            <a href=\"#projeler\" class=\"btn\">Projelerimi G\u00f6r<\/a>\n        <\/div>\n    <\/section>\n\n    <!-- Hakk\u0131mda B\u00f6l\u00fcm\u00fc -->\n    <section id=\"hakkimda\" class=\"about\">\n        <h2>Hakk\u0131mda<\/h2>\n        <p>[K\u0131sa bir \u00f6zge\u00e7mi\u015f veya kendini tan\u0131tma yaz\u0131s\u0131]<\/p>\n        <img decoding=\"async\" src=\"images\/profil.jpg\" alt=\"Profil Resmi\">\n    <\/section>\n\n    <!-- Projeler B\u00f6l\u00fcm\u00fc -->\n    <section id=\"projeler\" class=\"projects\">\n        <h2>Projelerim<\/h2>\n        <div class=\"project-grid\">\n            <!-- \u00d6rnek bir proje kart\u0131 -->\n            <article class=\"project-card\">\n                <img decoding=\"async\" src=\"images\/proje1.jpg\" alt=\"Proje 1\">\n                <h3>Proje Ba\u015fl\u0131\u011f\u0131 1<\/h3>\n                <p>[Proje hakk\u0131nda k\u0131sa a\u00e7\u0131klama]<\/p>\n                <a href=\"#\" target=\"_blank\">Detaylar\u0131 G\u00f6r<\/a>\n            <\/article>\n            <!-- Daha fazla proje kart\u0131 eklenebilir -->\n        <\/div>\n    <\/section>\n\n    <!-- \u0130leti\u015fim B\u00f6l\u00fcm\u00fc -->\n    <section id=\"iletisim\" class=\"contact\">\n        <h2>Bana Ula\u015f\u0131n<\/h2>\n        <form>\n            <input type=\"text\" placeholder=\"Ad\u0131n\u0131z\">\n            <input type=\"email\" placeholder=\"E-posta Adresiniz\">\n            <textarea placeholder=\"Mesaj\u0131n\u0131z\"><\/textarea>\n            <button type=\"submit\">G\u00f6nder<\/button>\n        <\/form>\n    <\/section>\n\n    <!-- Footer -->\n    <footer>\n        <p>\u00a9 2024 [Ad\u0131n\u0131z]. T\u00fcm haklar\u0131 sakl\u0131d\u0131r.<\/p>\n    <\/footer>\n\n    <!-- GSAP ve kendi JavaScript dosyalar\u0131m\u0131z buraya gelecek -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu temel iskelet, modern bir portf\u00f6y web sitesinde bulunmas\u0131 gereken t\u00fcm ana b\u00f6l\u00fcmleri i\u00e7ermektedir:<\/p>\n<ul>\n<li><code><br \/>\n<header><\/code>: Sayfan\u0131n \u00fcst k\u0131sm\u0131nda yer alan bu b\u00f6l\u00fcm, genellikle logo ve ana navigasyon men\u00fcs\u00fcn\u00fc (<\/p>\n<nav>) i\u00e7erir. Responsive tasar\u0131m i\u00e7in burger men\u00fc iconlar\u0131 da burada konumland\u0131r\u0131labilir.<\/li>\n<li><code><br \/>\n<section id=\"anasayfa\" class=\"hero\"><\/code>: Ziyaret\u00e7ilerinizi kar\u015f\u0131layan ve projenizin ana mesaj\u0131n\u0131 ileten ilk b\u00f6l\u00fcmd\u00fcr. Genellikle b\u00fcy\u00fck bir ba\u015fl\u0131k, k\u0131sa bir a\u00e7\u0131klama ve bir \u00e7a\u011fr\u0131-eylem (Call-to-Action) butonu i\u00e7erir.<\/li>\n<li><code><br \/>\n<section id=\"hakkimda\" class=\"about\"><\/code>: Kendinizi tan\u0131tt\u0131\u011f\u0131n\u0131z, yeteneklerinizi ve deneyimlerinizi \u00f6zetledi\u011finiz b\u00f6l\u00fcmd\u00fcr. Bir profil foto\u011fraf\u0131 veya k\u0131sa bir biyografi i\u00e7erebilir.<\/li>\n<li><code><br \/>\n<section id=\"projeler\" class=\"projects\"><\/code>: En \u00f6nemli b\u00f6l\u00fcmlerden biridir. \u00c7al\u0131\u015fmalar\u0131n\u0131z\u0131 g\u00f6rsel olarak \u00e7ekici kartlar (<\/p>\n<article class=\"project-card\">) halinde sergiledi\u011finiz yerdir. Her kart, projenin k\u00fc\u00e7\u00fck bir resmini, ba\u015fl\u0131\u011f\u0131n\u0131 ve k\u0131sa bir a\u00e7\u0131klamas\u0131n\u0131 i\u00e7ermelidir.<\/li>\n<li><code><br \/>\n<section id=\"iletisim\" class=\"contact\"><\/code>: Potansiyel i\u015fverenlerin veya m\u00fc\u015fterilerin sizinle ileti\u015fime ge\u00e7ebilece\u011fi bir form veya ileti\u015fim bilgileri i\u00e7erir.<\/li>\n<li><code><br \/>\n<footer><\/code>: Sayfan\u0131n alt k\u0131sm\u0131nda yer alan bu b\u00f6l\u00fcm, telif hakk\u0131 bilgileri, sosyal medya ba\u011flant\u0131lar\u0131 veya di\u011fer ek bilgiler i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<p>Bu semantik etiketlerin kullan\u0131m\u0131, sadece web sitenizin yap\u0131s\u0131n\u0131 organize etmekle kalmaz, ayn\u0131 zamanda eri\u015filebilirlik standartlar\u0131n\u0131 kar\u015f\u0131lamas\u0131na ve arama motorlar\u0131 taraf\u0131ndan daha kolay indekslenmesine yard\u0131mc\u0131 olur. Bu, sizin i\u00e7in SEO a\u00e7\u0131s\u0131ndan \u00f6nemli bir avantaj sa\u011flayacakt\u0131r. Gelecek b\u00f6l\u00fcmlerde bu HTML yap\u0131s\u0131na CSS ile stil kazand\u0131racak ve JavaScript ile dinamik etkile\u015fimler ekleyece\u011fiz.<\/p>\n<h2>CSS ile Portf\u00f6y\u00fcm\u00fcze Stil Nas\u0131l Katar\u0131z? Duyarl\u0131 Tasar\u0131m ve Modern Yakla\u015f\u0131mlar<\/h2>\n<p>HTML iskeletini olu\u015fturduktan sonra, s\u0131ra geldi bu yap\u0131ya hayat vermeye: CSS ile g\u00f6rsel bir estetik kazand\u0131rmaya. Portf\u00f6y\u00fcn\u00fcz\u00fcn sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda g\u00f6rsel olarak da \u00e7ekici olmas\u0131, ziyaret\u00e7iler \u00fczerinde b\u0131rakaca\u011f\u0131n\u0131z ilk izlenim a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, projemize nas\u0131l stil verece\u011fimizi, duyarl\u0131 tasar\u0131m\u0131 nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 ve modern CSS yakla\u015f\u0131mlar\u0131n\u0131 nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 detayl\u0131ca inceleyece\u011fiz.<\/p>\n<p><code>style.css<\/code> dosyam\u0131zda ba\u015flayarak, t\u00fcm taray\u0131c\u0131larda tutarl\u0131 bir ba\u015flang\u0131\u00e7 noktas\u0131 sa\u011flamak i\u00e7in genellikle bir \"CSS Reset\" veya \"Normalize.css\" uygulamak iyi bir y\u00f6ntemdir. Ayr\u0131ca, projemizde s\u0131k\u00e7a kullanaca\u011f\u0131m\u0131z renkler ve yaz\u0131 tipi boyutlar\u0131 gibi de\u011fi\u015fkenleri tan\u0131mlamak i\u00e7in CSS \u00f6zel \u00f6zelliklerini (CSS Custom Properties veya de\u011fi\u015fkenler) kullanabiliriz. Bu, tasar\u0131mda esneklik sa\u011flar ve ileride de\u011fi\u015fiklik yapmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<pre><code class=\"language-css\">\n\/* CSS Reset *\/\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n\/* K\u00f6k de\u011fi\u015fkenler *\/\n:root {\n    --primary-color: #007bff; \/* Ana renk *\/\n    --secondary-color: #6c757d; \/* \u0130kincil renk *\/\n    --background-dark: #1a1a1a; \/* Koyu arka plan *\/\n    --text-light: #f8f9fa; \/* A\u00e7\u0131k metin rengi *\/\n    --font-family-sans: 'Montserrat', sans-serif;\n    --font-family-serif: 'Merriweather', serif;\n}\n\nbody {\n    font-family: var(--font-family-sans);\n    line-height: 1.6;\n    background-color: var(--background-dark);\n    color: var(--text-light);\n    overflow-x: hidden; \/* Yatay kayd\u0131rmay\u0131 engelle *\/\n}\n\n\/* Navigasyon Stilleri *\/\nheader {\n    background-color: var(--background-dark);\n    padding: 1rem 0;\n    position: fixed;\n    width: 100%;\n    z-index: 1000;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n}\n\nnav {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 2rem;\n}\n\n.logo a {\n    color: var(--primary-color);\n    text-decoration: none;\n    font-size: 1.8rem;\n    font-weight: bold;\n}\n\n.nav-links {\n    display: flex;\n    list-style: none;\n}\n\n.nav-links li a {\n    color: var(--text-light);\n    text-decoration: none;\n    padding: 0.5rem 1rem;\n    transition: color 0.3s ease;\n}\n\n.nav-links li a:hover {\n    color: var(--primary-color);\n}\n\n\/* Hero B\u00f6l\u00fcm\u00fc *\/\n.hero {\n    height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    background-color: #222; \/* Koyu bir hero arka plan\u0131 *\/\n    background-size: cover;\n    background-position: center;\n    position: relative;\n    padding-top: 80px; \/* Header y\u00fcksekli\u011fi kadar bo\u015fluk *\/\n}\n\n.hero-content h1 {\n    font-size: 3.5rem;\n    margin-bottom: 1rem;\n    color: var(--primary-color);\n}\n\n.hero-content p {\n    font-size: 1.5rem;\n    margin-bottom: 2rem;\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.btn {\n    display: inline-block;\n    background-color: var(--primary-color);\n    color: var(--text-light);\n    padding: 1rem 2rem;\n    text-decoration: none;\n    border-radius: 5px;\n    transition: background-color 0.3s ease;\n}\n\n.btn:hover {\n    background-color: darken(var(--primary-color), 10%); \/* Daha koyu bir ton *\/\n}\n\n\/* Genel B\u00f6l\u00fcm Stilleri *\/\nsection {\n    padding: 6rem 2rem;\n    max-width: 1200px;\n    margin: 0 auto;\n    text-align: center;\n}\n\nsection h2 {\n    font-size: 2.5rem;\n    margin-bottom: 3rem;\n    color: var(--primary-color);\n}\n\n\/* Duyarl\u0131 Tasar\u0131m (Media Queries) *\/\n.burger-menu {\n    display: none; \/* Masa\u00fcst\u00fcnde gizle *\/\n    cursor: pointer;\n}\n\n.burger-menu div {\n    width: 25px;\n    height: 3px;\n    background-color: var(--text-light);\n    margin: 5px;\n    transition: all 0.3s ease;\n}\n\n@media (max-width: 768px) {\n    nav {\n        padding: 0 1rem;\n    }\n\n    .nav-links {\n        position: fixed;\n        right: 0;\n        top: 0;\n        height: 100vh;\n        width: 70%;\n        background-color: var(--background-dark);\n        flex-direction: column;\n        justify-content: space-around;\n        align-items: center;\n        transform: translateX(100%); \/* Ba\u015flang\u0131\u00e7ta sa\u011fda gizle *\/\n        transition: transform 0.5s ease-in;\n        z-index: 999;\n    }\n\n    .nav-links li {\n        opacity: 0;\n    }\n\n    .nav-links.nav-active {\n        transform: translateX(0%); \/* Aktif oldu\u011funda g\u00f6r\u00fcn\u00fcr yap *\/\n    }\n\n    .burger-menu {\n        display: block; \/* Mobil cihazlarda g\u00f6ster *\/\n    }\n\n    \/* Burger men\u00fc animasyonu *\/\n    .toggle .line1 {\n        transform: rotate(-45deg) translate(-5px, 6px);\n    }\n    .toggle .line2 {\n        opacity: 0;\n    }\n    .toggle .line3 {\n        transform: rotate(45deg) translate(-5px, -6px);\n    }\n\n    .hero-content h1 {\n        font-size: 2.5rem;\n    }\n\n    .hero-content p {\n        font-size: 1.2rem;\n    }\n\n    section {\n        padding: 4rem 1rem;\n    }\n}\n    <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki CSS kod blo\u011fu, projemizin genel stilini, navigasyonunu ve hero b\u00f6l\u00fcm\u00fcn\u00fc \u015fekillendiriyor. \u00d6zellikle <code>&commat;media<\/code> query, web sitemizin farkl\u0131 ekran boyutlar\u0131na nas\u0131l uyum sa\u011flad\u0131\u011f\u0131n\u0131 g\u00f6steriyor. Mobil cihazlarda, geleneksel navigasyon men\u00fcs\u00fc gizlenerek yerine bir \"burger men\u00fc\" ikonu \u00e7\u0131k\u0131yor. Bu ikon t\u0131kland\u0131\u011f\u0131nda, navigasyon ba\u011flant\u0131lar\u0131 ekran\u0131n sa\u011f taraf\u0131ndan i\u00e7eri kayarak a\u00e7\u0131l\u0131yor. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftiren modern bir yakla\u015f\u0131md\u0131r.<\/p>\n<p>Duyarl\u0131 tasar\u0131m, g\u00fcn\u00fcm\u00fcz web geli\u015ftiricili\u011finin olmazsa olmaz\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n\u0131z\u0131n tablet, telefon veya masa\u00fcst\u00fc bilgisayar gibi farkl\u0131 cihazlardan sitenize eri\u015febilece\u011fini unutmay\u0131n. Bu nedenle, CSS'inizi yazarken \"mobil \u00f6ncelikli\" bir yakla\u015f\u0131m benimsemek, yani \u00f6nce k\u00fc\u00e7\u00fck ekranlar i\u00e7in stil yaz\u0131p daha sonra daha b\u00fcy\u00fck ekranlar i\u00e7in stilleri \u00f6zelle\u015ftirmek, en iyi uygulamalardan biridir.<\/p>\n<p>Ayr\u0131ca, tipografi se\u00e7imi ve renk paleti, portf\u00f6y\u00fcn\u00fcz\u00fcn profesyonel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc b\u00fcy\u00fck \u00f6l\u00e7\u00fcde etkiler. Okunakl\u0131 yaz\u0131 tipleri ve uyumlu renkler se\u00e7mek, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Flexbox ve CSS Grid gibi modern d\u00fczenleme ara\u00e7lar\u0131n\u0131 kullanarak, i\u00e7eriklerinizi esnek ve d\u00fczenli bir \u015fekilde konumland\u0131rabilirsiniz. Proje kartlar\u0131 veya galeri b\u00f6l\u00fcmleri gibi \u00f6\u011feleri d\u00fczenlerken bu \u00f6zellikler paha bi\u00e7ilmezdir. \u00d6zellikle <code>.project-grid<\/code> s\u0131n\u0131f\u0131 i\u00e7in CSS Grid kullanarak, farkl\u0131 boyutlardaki ekranlarda projelerinizi otomatik olarak uygun s\u00fctunlara yerle\u015ftirebilirsiniz.<\/p>\n<p>K\u0131sacas\u0131, CSS sadece bir stil dili de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) ve kullan\u0131c\u0131 deneyimi (UX) tasar\u0131m\u0131n\u0131n temel arac\u0131d\u0131r. Do\u011fru CSS yakla\u015f\u0131mlar\u0131yla, portf\u00f6y klonunuz sadece fonksiyonel de\u011fil, ayn\u0131 zamanda g\u00f6z al\u0131c\u0131 ve eri\u015filebilir olacakt\u0131r.<\/p>\n<h2>JavaScript ile Etkile\u015fimi Nas\u0131l Sa\u011flar\u0131z? DOM Manip\u00fclasyonu ve Olay Dinleyicileri<\/h2>\n<p>HTML ve CSS ile portf\u00f6y\u00fcm\u00fcz\u00fcn iskeletini ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc olu\u015fturduktan sonra, s\u0131ra geldi web sitemize dinamik etkile\u015fimler katmaya. JavaScript, bir web sitesini statik bir belge olmaktan \u00e7\u0131kar\u0131p, kullan\u0131c\u0131 eylemlerine yan\u0131t veren, canl\u0131 ve etkile\u015fimli bir deneyime d\u00f6n\u00fc\u015ft\u00fcren programlama dilidir. Bu b\u00f6l\u00fcmde, JavaScript'i kullanarak DOM (Document Object Model) manip\u00fclasyonunu nas\u0131l yapaca\u011f\u0131m\u0131z\u0131, olay dinleyicilerini (event listeners) nas\u0131l ekleyece\u011fimizi ve \u00f6zellikle mobil men\u00fc (burger men\u00fc) i\u015flevselli\u011fini nas\u0131l hayata ge\u00e7irece\u011fimizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n<p>JavaScript'in g\u00fcc\u00fc, web sayfas\u0131n\u0131n t\u00fcm \u00f6\u011felerine (HTML elemanlar\u0131na) eri\u015fme, onlar\u0131 de\u011fi\u015ftirme, kald\u0131rma veya yenilerini ekleme yetene\u011finde yatar. Bu i\u015fleme DOM manip\u00fclasyonu denir. \u00d6rne\u011fin, bir butona t\u0131kland\u0131\u011f\u0131nda bir metni de\u011fi\u015ftirebilir, bir resmi gizleyebilir veya yeni bir i\u00e7erik y\u00fckleyebilirsiniz. Olay dinleyicileri ise, belirli bir olay (t\u0131klama, fare hareketi, klavye giri\u015fi vb.) ger\u00e7ekle\u015fti\u011finde \u00e7al\u0131\u015facak fonksiyonlar\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r.<\/p>\n<p><code>script.js<\/code> dosyam\u0131zda ba\u015flayarak, ilk olarak HTML elemanlar\u0131m\u0131za JavaScript ile eri\u015fmemiz gerekiyor. Bunu <code>document.querySelector()<\/code> veya <code>document.querySelectorAll()<\/code> gibi metotlarla yapar\u0131z. Portf\u00f6y projemizde, navigasyon men\u00fcs\u00fcn\u00fc a\u00e7\u0131p kapatmak i\u00e7in burger men\u00fc ikonunu ve men\u00fc ba\u011flant\u0131lar\u0131n\u0131 se\u00e7ece\u011fiz.<\/p>\n<pre><code class=\"language-javascript\">\nconst navSlide = () => {\n    const burger = document.querySelector('.burger-menu');\n    const nav = document.querySelector('.nav-links');\n    const navLinks = document.querySelectorAll('.nav-links li');\n\n    \/\/ Burger Men\u00fcye T\u0131klama Olay\u0131\n    burger.addEventListener('click', () => {\n        \/\/ Navigasyonu A\u00e7\/Kapat\n        nav.classList.toggle('nav-active');\n\n        \/\/ Navigasyon Ba\u011flant\u0131lar\u0131na Animasyon Ekle\n        navLinks.forEach((link, index) => {\n            if (link.style.opacity) {\n                link.style.opacity = ''; \/\/ Stili temizle\n            } else {\n                link.style.opacity = '1';\n                link.style.transition = <code>opacity 0.5s ease forwards ${index \/ 7 + 0.5}s<\/code>;\n            }\n        });\n\n        \/\/ Burger Men\u00fc Animasyonu\n        burger.classList.toggle('toggle');\n    });\n\n    \/\/ Navigasyon ba\u011flant\u0131lar\u0131na t\u0131kland\u0131\u011f\u0131nda men\u00fcy\u00fc kapat\n    navLinks.forEach(link => {\n        link.addEventListener('click', () => {\n            if (nav.classList.contains('nav-active')) {\n                nav.classList.remove('nav-active');\n                burger.classList.remove('toggle');\n                navLinks.forEach(item => {\n                    item.style.opacity = ''; \/\/ Stili temizle\n                    item.style.transition = ''; \/\/ Ge\u00e7i\u015fi de temizle\n                });\n            }\n        });\n    });\n};\n\nnavSlide(); \/\/ Fonksiyonu \u00e7a\u011f\u0131r\n    <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod blo\u011funda, <code>navSlide<\/code> ad\u0131nda bir fonksiyon tan\u0131mlad\u0131k. Bu fonksiyonun i\u00e7inde:<\/p>\n<ul>\n<li><code>burger<\/code> de\u011fi\u015fkeni, hamburger men\u00fc ikonunu temsil eden HTML \u00f6\u011fesini se\u00e7er.<\/li>\n<li><code>nav<\/code> de\u011fi\u015fkeni, navigasyon ba\u011flant\u0131lar\u0131n\u0131 i\u00e7eren listeyi se\u00e7er.<\/li>\n<li><code>navLinks<\/code> de\u011fi\u015fkeni ise, her bir navigasyon ba\u011flant\u0131s\u0131n\u0131 (<code>li<\/code>) toplar.<\/li>\n<\/ul>\n<p><code>burger.addEventListener('click', ...)<\/code> sat\u0131r\u0131, burger men\u00fc ikonuna her t\u0131kland\u0131\u011f\u0131nda belirli bir fonksiyonun \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu fonksiyonun i\u00e7inde:<\/p>\n<ul>\n<li><code>nav.classList.toggle('nav-active')<\/code>: Navigasyon men\u00fcs\u00fcn\u00fcn <code>nav-active<\/code> s\u0131n\u0131f\u0131n\u0131 ekler veya kald\u0131r\u0131r. Bu s\u0131n\u0131f, CSS'imizde men\u00fcy\u00fc g\u00f6r\u00fcn\u00fcr hale getirmek veya gizlemek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li><code>navLinks.forEach(...)<\/code>: Men\u00fc a\u00e7\u0131ld\u0131\u011f\u0131nda, her bir navigasyon ba\u011flant\u0131s\u0131n\u0131n belirli bir gecikmeyle g\u00f6r\u00fcnmesini sa\u011flayan basit bir animasyon ekler. Bu, kullan\u0131c\u0131ya daha ak\u0131c\u0131 ve modern bir deneyim sunar.<\/li>\n<li><code>burger.classList.toggle('toggle')<\/code>: Burger men\u00fc ikonunun kendi animasyonunu (\u00e7izgilerin \u00e7arp\u0131 \u015feklini almas\u0131 gibi) tetikler.<\/li>\n<\/ul>\n<p>Ayr\u0131ca, mobil men\u00fc a\u00e7\u0131kken herhangi bir navigasyon ba\u011flant\u0131s\u0131na t\u0131kland\u0131\u011f\u0131nda men\u00fcn\u00fcn otomatik olarak kapanmas\u0131n\u0131 sa\u011flayan ek bir olay dinleyici ekledik. Bu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan olduk\u00e7a \u00f6nemlidir, \u00e7\u00fcnk\u00fc kullan\u0131c\u0131lar\u0131n her seferinde men\u00fcy\u00fc manuel olarak kapatmas\u0131na gerek kalmaz.<\/p>\n<p>JavaScript ile yap\u0131labilecekler bunlarla s\u0131n\u0131rl\u0131 de\u011fil. \u00d6rne\u011fin, bir ileti\u015fim formunun g\u00f6nderilmeden \u00f6nce alanlar\u0131n\u0131n dolu olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek (form do\u011frulama), sayfa i\u00e7inde sorunsuz kayd\u0131rma (smooth scroll) efektleri eklemek veya kullan\u0131c\u0131 belirli bir b\u00f6l\u00fcme geldi\u011finde bir \u00f6\u011fenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek gibi pek \u00e7ok etkile\u015fimi JavaScript ile y\u00f6netebiliriz. Bu dinamik \u00f6\u011feler, portf\u00f6y\u00fcn\u00fcz\u00fc s\u0131radan olmaktan \u00e7\u0131kar\u0131p, ziyaret\u00e7ilerin akl\u0131nda kalan unutulmaz bir deneyime d\u00f6n\u00fc\u015ft\u00fcrecektir.<\/p>\n<h2>GSAP ile Animasyonlar\u0131 Nas\u0131l Canland\u0131r\u0131r\u0131z? Ak\u0131c\u0131 Ge\u00e7i\u015fler ve ScrollTrigger B\u00fcy\u00fcs\u00fc<\/h2>\n<p>Portf\u00f6y\u00fcn\u00fcz\u00fcn sadece i\u015flevsel olmas\u0131 yeterli de\u011fildir; ayn\u0131 zamanda estetik ve ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunmas\u0131 da gerekir. \u0130\u015fte bu noktada GSAP (GreenSock Animation Platform) devreye giriyor. GSAP, web sitenize profesyonel d\u00fczeyde, y\u00fcksek performansl\u0131 ve taray\u0131c\u0131lar aras\u0131 uyumlu animasyonlar eklemenizi sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Bu b\u00f6l\u00fcmde, GSAP'in temel \u00f6zelliklerini, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve \u00f6zellikle ScrollTrigger eklentisiyle kayd\u0131rma tabanl\u0131 etkileyici animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011fimizi ke\u015ffedece\u011fiz.<\/p>\n<p>GSAP'in CDN ba\u011flant\u0131s\u0131n\u0131 <code>index.html<\/code> dosyam\u0131za ekledi\u011fimizden emin olduktan sonra, <code>script.js<\/code> dosyam\u0131zda animasyonlar\u0131m\u0131z\u0131 tan\u0131mlamaya ba\u015flayabiliriz. GSAP'in temel animasyon y\u00f6ntemleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><code>gsap.to()<\/code>: Bir \u00f6\u011feyi mevcut durumundan hedefledi\u011finiz duruma do\u011fru canland\u0131r\u0131r.<\/li>\n<li><code>gsap.from()<\/code>: Bir \u00f6\u011feyi hedefledi\u011finiz durumdan mevcut durumuna do\u011fru canland\u0131r\u0131r (genellikle sayfa y\u00fcklenirken gizli olan bir \u00f6\u011feyi g\u00f6r\u00fcn\u00fcr hale getirmek i\u00e7in kullan\u0131l\u0131r).<\/li>\n<li><code>gsap.fromTo()<\/code>: Bir \u00f6\u011feyi ba\u015flang\u0131\u00e7 durumundan hedef duruma do\u011fru canland\u0131r\u0131r.<\/li>\n<\/ul>\n<p>Her animasyon metodunda, ilk parametre animasyon uygulanacak hedef \u00f6\u011fe (bir CSS se\u00e7icisi veya DOM nesnesi), ikinci parametre ise animasyon \u00f6zelliklerini i\u00e7eren bir obje (duration, x, y, opacity, rotation vb.) olur.<\/p>\n<p>\u00d6rnek olarak, sayfa y\u00fcklendi\u011finde \"Hero\" b\u00f6l\u00fcm\u00fcm\u00fczdeki metinleri a\u015fa\u011f\u0131dan yukar\u0131ya do\u011fru ve opakla\u015farak g\u00f6r\u00fcn\u00fcr hale getiren bir animasyon olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ GSAP ile ba\u015flang\u0131\u00e7 animasyonlar\u0131\ngsap.from(\".hero-content h1\", {\n    duration: 1,\n    y: 50, \/\/ Y ekseninde 50px a\u015fa\u011f\u0131dan ba\u015fla\n    opacity: 0,\n    ease: \"power3.out\" \/\/ Animasyon h\u0131zland\u0131rma e\u011frisi\n});\n\ngsap.from(\".hero-content p\", {\n    duration: 1,\n    y: 50,\n    opacity: 0,\n    ease: \"power3.out\",\n    delay: 0.3 \/\/ Biraz gecikmeyle ba\u015fla\n});\n\ngsap.from(\".hero-content .btn\", {\n    duration: 1,\n    y: 50,\n    opacity: 0,\n    ease: \"power3.out\",\n    delay: 0.6\n});\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu kod, hero b\u00f6l\u00fcm\u00fcndeki ba\u015fl\u0131\u011f\u0131, paragraf\u0131 ve butonu sayfa y\u00fcklendi\u011finde kademeli olarak canland\u0131r\u0131r. <code>delay<\/code> \u00f6zelli\u011fi, her bir \u00f6\u011fenin animasyonunun farkl\u0131 zamanlarda ba\u015flamas\u0131n\u0131 sa\u011flayarak daha dinamik bir giri\u015f efekti yarat\u0131r. <code>ease<\/code> \u00f6zelli\u011fi ise animasyonun h\u0131zlanma\/yava\u015flama e\u011frisini kontrol eder, b\u00f6ylece daha do\u011fal bir hareket sa\u011flar.<\/p>\n<h3>ScrollTrigger ile Kayd\u0131rma Tabanl\u0131 Animasyonlar<\/h3>\n<p>GSAP'in en g\u00fc\u00e7l\u00fc eklentilerinden biri olan ScrollTrigger, sayfa kayd\u0131rma hareketlerine duyarl\u0131 animasyonlar olu\u015fturman\u0131za olanak tan\u0131r. Bir \u00f6\u011fenin g\u00f6r\u00fcn\u00fcr hale gelmesiyle tetiklenen (on-scroll reveal) animasyonlar, bir \u00f6\u011feyi kayd\u0131rma \u00e7ubu\u011funun ilerlemesine g\u00f6re hareket ettirme (pinning) veya bir video animasyonunu kayd\u0131rma h\u0131z\u0131na g\u00f6re kontrol etme gibi karma\u015f\u0131k senaryolar\u0131 kolayca uygulayabilirsiniz.<\/p>\n<p>\u00d6rnek olarak, \"Projelerim\" b\u00f6l\u00fcm\u00fcm\u00fcz sayfada g\u00f6r\u00fcn\u00fcr hale geldi\u011finde her bir proje kart\u0131n\u0131n alttan yukar\u0131 do\u011fru u\u00e7arak gelmesini sa\u011flayal\u0131m:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ ScrollTrigger kay\u0131t\ngsap.registerPlugin(ScrollTrigger);\n\n\/\/ Proje kartlar\u0131 i\u00e7in ScrollTrigger animasyonu\ngsap.utils.toArray(\".project-card\").forEach(card => {\n    gsap.from(card, {\n        opacity: 0,\n        y: 100, \/\/ Alttan 100px yukar\u0131dan ba\u015fla\n        duration: 1,\n        ease: \"power3.out\",\n        scrollTrigger: {\n            trigger: card, \/\/ Animasyonu tetikleyecek \u00f6\u011fe\n            start: \"top 80%\", \/\/ \u00d6\u011fenin \u00fcst k\u0131sm\u0131 viewport'un %80'ine geldi\u011finde ba\u015fla\n            end: \"bottom 20%\",\n            toggleActions: \"play none none none\" \/\/ Animasyonun nas\u0131l tetiklenece\u011fini belirle (play, pause, resume, reverse)\n            \/\/ markers: true \/\/ Geli\u015ftirme i\u00e7in tetikleyici i\u015faretleri g\u00f6sterir\n        }\n    });\n});\n\n\/\/ Hakk\u0131mda b\u00f6l\u00fcm\u00fc i\u00e7in daha basit bir animasyon\ngsap.from(\".about img\", {\n    opacity: 0,\n    scale: 0.8,\n    duration: 1,\n    ease: \"power2.out\",\n    scrollTrigger: {\n        trigger: \".about\",\n        start: \"top 75%\",\n        toggleActions: \"play none none none\"\n    }\n});\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu kod blo\u011fu, <code>.project-card<\/code> s\u0131n\u0131f\u0131na sahip her bir \u00f6\u011fe i\u00e7in ayr\u0131 bir ScrollTrigger animasyonu olu\u015fturur. <code>trigger: card<\/code> ifadesi, her bir kart\u0131n kendi g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc ile animasyonu tetiklemesini sa\u011flar. <code>start: \"top 80%\"<\/code>, kart\u0131n \u00fcst kenar\u0131 ekran\u0131n \u00fcst\u00fcnden %80 a\u015fa\u011f\u0131ya indi\u011finde animasyonun ba\u015flayaca\u011f\u0131n\u0131 belirtir. <code>toggleActions: \"play none none none\"<\/code> ise animasyonun sadece bir kez oynanaca\u011f\u0131n\u0131 (sayfa a\u015fa\u011f\u0131 kayd\u0131r\u0131ld\u0131\u011f\u0131nda) ve geri kayd\u0131r\u0131ld\u0131\u011f\u0131nda veya di\u011fer durumlarda tekrar oynamayaca\u011f\u0131n\u0131 belirtir.<\/p>\n<div class=\"uzman-ipucu\">\n        Uzman \u0130pucu: GSAP animasyonlar\u0131n\u0131 optimize etmek i\u00e7in 'will-change' CSS \u00f6zelli\u011fini kullanabilirsiniz. Animasyon ba\u015flayana kadar bu \u00f6zelli\u011fi 'transform' veya 'opacity' gibi de\u011ferlere ayarlamak, taray\u0131c\u0131ya render i\u00e7in \u00f6nceden haz\u0131rl\u0131k yapmas\u0131n\u0131 s\u00f6yleyerek performans\u0131 art\u0131rabilir. Ancak, animasyon bitince bu \u00f6zelli\u011fi kald\u0131rmay\u0131 unutmay\u0131n, aksi takdirde bellekte yer i\u015fgal edebilir.\n    <\/div>\n<p>GSAP, sadece basit giri\u015f\/\u00e7\u0131k\u0131\u015f animasyonlar\u0131yla s\u0131n\u0131rl\u0131 de\u011fildir. <code>Timeline<\/code> \u00f6zelli\u011fi ile birden fazla animasyonu s\u0131ral\u0131 veya e\u015fzamanl\u0131 olarak y\u00fcr\u00fctebilir, daha karma\u015f\u0131k ve senaryolu animasyon ak\u0131\u015flar\u0131 olu\u015fturabilirsiniz. Ayr\u0131ca, <code>Draggable<\/code>, <code>Flip<\/code> gibi di\u011fer eklentileriyle de kullan\u0131c\u0131 deneyiminizi zenginle\u015ftirebilirsiniz. Bu k\u00fct\u00fcphane sayesinde, portf\u00f6y klonunuz s\u0131radan bir web sitesi olmaktan \u00e7\u0131k\u0131p, ziyaret\u00e7ileri b\u00fcy\u00fcleyen, dinamik ve ak\u0131lda kal\u0131c\u0131 bir deneyime d\u00f6n\u00fc\u015fecektir. Profesyonel bir g\u00f6r\u00fcn\u00fcm i\u00e7in GSAP'ten faydalanmak, projelerinizi di\u011ferlerinden ay\u0131rman\u0131n en etkili yollar\u0131ndan biridir.<\/p>\n<h2>\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve Optimizasyon Teknikleri Nelerdir? Performans, Eri\u015filebilirlik ve SEO<\/h2>\n<p>Bir portf\u00f6y klonu olu\u015fturmak sadece kod yazmakla bitmez; ayn\u0131 zamanda projenizin sadece g\u00f6rsel olarak de\u011fil, ayn\u0131 zamanda teknik olarak da optimize edilmi\u015f olmas\u0131n\u0131 sa\u011flamak gerekir. Performans, eri\u015filebilirlik ve arama motoru optimizasyonu (SEO), modern web geli\u015ftirmenin temel ta\u015flar\u0131d\u0131r ve projenizin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, portf\u00f6y klonunuzu daha iyi hale getirecek ileri d\u00fczey ipu\u00e7lar\u0131n\u0131 ve optimizasyon tekniklerini inceleyece\u011fiz.<\/p>\n<h3>1. Performans Optimizasyonu<\/h3>\n<p>H\u0131zl\u0131 y\u00fcklenen bir web sitesi, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan olmazsa olmazd\u0131r. Kimse yava\u015f bir siteyi beklemek istemez. Performans\u0131 art\u0131rmak i\u00e7in \u015funlar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131s\u0131n\u0131z:<\/p>\n<ul>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> Portf\u00f6y\u00fcn\u00fczdeki t\u00fcm resimlerin (profil foto\u011fraf\u0131, proje g\u00f6rselleri vb.) boyutlar\u0131 ve formatlar\u0131 optimize edilmi\u015f olmal\u0131d\u0131r. JPEG, PNG, WebP gibi modern formatlar kullanarak dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcn. G\u00f6rsel s\u0131k\u0131\u015ft\u0131rma ara\u00e7lar\u0131 (TinyPNG, Compressor.io) bu konuda size yard\u0131mc\u0131 olabilir. Ayr\u0131ca, resimler i\u00e7in <code>loading=\"lazy\"<\/code> \u00f6zelli\u011fini kullanarak \"tembel y\u00fckleme\" (lazy loading) uygulay\u0131n. Bu, sadece ekran\u0131n g\u00f6r\u00fcn\u00fcr alan\u0131ndaki resimlerin y\u00fcklenmesini sa\u011flayarak ilk y\u00fckleme s\u00fcresini k\u0131salt\u0131r.<\/li>\n<li><strong>Kod S\u0131k\u0131\u015ft\u0131rma (Minification):<\/strong> CSS ve JavaScript dosyalar\u0131n\u0131z\u0131 \u00fcretim ortam\u0131na da\u011f\u0131tmadan \u00f6nce s\u0131k\u0131\u015ft\u0131r\u0131n. Bu, dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcr ve taray\u0131c\u0131n\u0131n indirme s\u00fcresini azalt\u0131r. Webpack, Parcel gibi derleyiciler veya online minification ara\u00e7lar\u0131 bu i\u015flemi otomatikle\u015ftirir.<\/li>\n<li><strong>CDN Kullan\u0131m\u0131:<\/strong> GSAP gibi k\u00fct\u00fcphaneleri ve di\u011fer statik varl\u0131klar\u0131 (fontlar, ikonlar) CDN (Content Delivery Network) \u00fczerinden sunmak, kullan\u0131c\u0131ya en yak\u0131n sunucudan y\u00fckleme yaparak performans\u0131 art\u0131r\u0131r.<\/li>\n<li><strong>Taray\u0131c\u0131 \u00d6nbellekleme:<\/strong> Sunucunuzu statik varl\u0131klar i\u00e7in do\u011fru \u00f6nbellekleme ba\u015fl\u0131klar\u0131n\u0131 g\u00f6nderecek \u015fekilde yap\u0131land\u0131r\u0131n. Bu, tekrar eden ziyaretlerde taray\u0131c\u0131n\u0131n bu dosyalar\u0131 indirmesine gerek kalmamas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n<pre><code class=\"language-html\">\n<!-- Lazy loading \u00f6rne\u011fi -->\n<img decoding=\"async\" src=\"images\/profil.jpg\" alt=\"Profil Resmi\" loading=\"lazy\">\n    <\/pre>\n<p><\/code><\/p>\n<h3>2. Eri\u015filebilirlik (Accessibility - A11y)<\/h3>\n<p>Web sitenizin herkes taraf\u0131ndan kullan\u0131labilir olmas\u0131, modern web geli\u015ftirmenin etik ve yasal bir gereklili\u011fidir. Eri\u015filebilirli\u011fi art\u0131rmak i\u00e7in:<\/p>\n<ul>\n<li><strong>Semantik HTML:<\/strong> Daha \u00f6nce de vurgulad\u0131\u011f\u0131m\u0131z gibi, <code><br \/>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><main><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<footer><\/code> gibi anlaml\u0131 etiketler kullan\u0131n. Bu, ekran okuyucular\u0131n site yap\u0131s\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong><code>alt<\/code> Nitelikleri:<\/strong> T\u00fcm resimleriniz i\u00e7in a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri sa\u011flay\u0131n. Bu, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n resmin i\u00e7eri\u011fini anlamas\u0131na olanak tan\u0131r.<\/li>\n<li><strong>Klavye Navigasyonu:<\/strong> Web sitenizin sadece fareyle de\u011fil, klavye ile de tam olarak gezilebilir oldu\u011fundan emin olun (Tab tu\u015fu ile elementler aras\u0131nda ge\u00e7i\u015f, Enter ile butonlara t\u0131klama vb.).<\/li>\n<li><strong>Renk Kontrast\u0131:<\/strong> Metin ve arka plan renkleriniz aras\u0131nda yeterli kontrast oldu\u011fundan emin olun. WCAG (Web Content Accessibility Guidelines) standartlar\u0131na uygun renkleri tercih edin.<\/li>\n<li><strong>ARIA Nitelikleri:<\/strong> Dinamik i\u00e7erik veya \u00f6zel widget'lar kullan\u0131yorsan\u0131z, ARIA (Accessible Rich Internet Applications) niteliklerini (<code>aria-label<\/code>, <code>aria-expanded<\/code> vb.) kullanarak bu \u00f6\u011felerin amac\u0131n\u0131 ve durumunu yard\u0131mc\u0131 teknolojilere bildirin.<\/li>\n<\/ul>\n<h3>3. Arama Motoru Optimizasyonu (SEO)<\/h3>\n<p>Portf\u00f6y\u00fcn\u00fcz\u00fcn bulunabilirli\u011fi, kariyeriniz i\u00e7in hayati \u00f6neme sahiptir. SEO, web sitenizin arama motoru sonu\u00e7lar\u0131nda \u00fcst s\u0131ralarda yer almas\u0131na yard\u0131mc\u0131 olur:<\/p>\n<ul>\n<li><strong>Meta Etiketleri:<\/strong> <code><title><\/code> etiketi ve <code><meta name=\"description\"><\/code> etiketi, arama motorlar\u0131na sayfan\u0131z\u0131n ne hakk\u0131nda oldu\u011funu bildirir. Ba\u015fl\u0131\u011f\u0131n\u0131z 60 karakteri, a\u00e7\u0131klaman\u0131z ise 150-160 karakteri ge\u00e7memeli ve anahtar kelimelerinizi do\u011fal bir \u015fekilde i\u00e7ermelidir.<\/li>\n<li><strong>Anlaml\u0131 URL'ler:<\/strong> Sayfalar\u0131n\u0131z i\u00e7in a\u00e7\u0131klay\u0131c\u0131 ve anahtar kelime i\u00e7eren URL'ler kullan\u0131n (\u00f6rn: <code>\/projelerim<\/code> yerine <code>\/web-tasarim-projeleri<\/code>).<\/li>\n<li><strong>Ba\u015fl\u0131k Hiyerar\u015fisi:<\/strong> <code><br \/>\n<h1><\/code> (e\u011fer kullan\u0131l\u0131yorsa, tek olmal\u0131), <code><\/p>\n<h2><\/code>, <code><\/p>\n<h3><\/code> etiketlerini do\u011fru ve hiyerar\u015fik bir s\u0131rayla kullan\u0131n. Bu, hem okunabilirli\u011fi art\u0131r\u0131r hem de arama motorlar\u0131na sayfan\u0131z\u0131n yap\u0131s\u0131n\u0131 bildirir.<\/li>\n<li><strong>Mobil Dostu Tasar\u0131m:<\/strong> Google, mobil uyumlu siteleri \u00f6d\u00fcllendirir. Duyarl\u0131 tasar\u0131m (responsive design) kullanman\u0131z bu a\u00e7\u0131dan kritik \u00f6neme sahiptir.<\/li>\n<li><strong>Site Haritas\u0131 (Sitemap) ve robots.txt:<\/strong> Bir <code>sitemap.xml<\/code> dosyas\u0131 olu\u015fturarak arama motorlar\u0131n\u0131n sitenizdeki t\u00fcm sayfalar\u0131 ke\u015ffetmesini sa\u011flay\u0131n. <code>robots.txt<\/code> dosyas\u0131yla da hangi sayfalar\u0131n taran\u0131p taranmayaca\u011f\u0131n\u0131 kontrol edin.<\/li>\n<\/ul>\n<div class=\"uzman-ipucu\">\n        Uzman \u0130pucu: Web sitenizin performans, eri\u015filebilirlik, en iyi uygulamalar ve SEO puanlar\u0131n\u0131 \u00f6l\u00e7mek i\u00e7in Google Lighthouse arac\u0131n\u0131 kullan\u0131n. Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131nda bulabilir ve d\u00fczenli olarak denetim yaparak iyile\u015ftirme alanlar\u0131n\u0131 belirleyebilirsiniz.\n    <\/div>\n<p>Bu ileri d\u00fczey teknikleri projenize entegre etmek, sadece bir portf\u00f6y klonu olu\u015fturmakla kalmayacak, ayn\u0131 zamanda onu sekt\u00f6r standartlar\u0131na uygun, y\u00fcksek kaliteli ve etkili bir dijital varl\u0131\u011fa d\u00f6n\u00fc\u015ft\u00fcrecektir. Unutmay\u0131n, iyi bir web sitesi sadece iyi g\u00f6r\u00fcnmekle kalmaz, ayn\u0131 zamanda iyi performans g\u00f6sterir ve herkese a\u00e7\u0131k olur.<\/p>\n<h2>Sonu\u00e7: Web Geli\u015ftirme Yolculu\u011funuzda Portf\u00f6y Klonunun G\u00fcc\u00fc<\/h2>\n<p>Bu kapsaml\u0131 rehber boyunca, HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici ve i\u015flevsel bir portf\u00f6y klonu olu\u015fturman\u0131n inceliklerini ke\u015ffettik. Projenizin temelini sa\u011flam bir HTML iskeletiyle atmaktan, CSS ile g\u00f6rsel bir \u015fahesere d\u00f6n\u00fc\u015ft\u00fcrmeye, JavaScript ile dinamik etkile\u015fimler katmaya ve GSAP ile ak\u0131c\u0131 animasyonlarla zenginle\u015ftirmeye kadar her ad\u0131mda detayl\u0131 bilgiler edindiniz. Ayr\u0131ca, projenizin sadece teknik olarak do\u011fru de\u011fil, ayn\u0131 zamanda performans, eri\u015filebilirlik ve SEO a\u00e7\u0131s\u0131ndan da optimize edilmi\u015f olmas\u0131n\u0131n \u00f6nemini vurgulad\u0131k. Kendi portf\u00f6y klonunuzu olu\u015fturma s\u00fcreci, size sadece kodlama becerileri kazand\u0131rmakla kalmayacak, ayn\u0131 zamanda problem \u00e7\u00f6zme yetene\u011finizi, tasar\u0131m anlay\u0131\u015f\u0131n\u0131z\u0131 ve modern web teknolojilerini derinlemesine anlama kapasitenizi de geli\u015ftirecektir. Bu proje, pratik bilginizi art\u0131rman\u0131n, sekt\u00f6re \u00f6zel en iyi uygulamalar\u0131 \u00f6\u011frenmenin ve potansiyel i\u015fverenlere veya m\u00fc\u015fterilere yeteneklerinizi etkili bir \u015fekilde sergilemenin en iyi yollar\u0131ndan biridir. Unutmay\u0131n, web geli\u015ftirme s\u00fcrekli bir \u00f6\u011frenme s\u00fcrecidir. Bu portf\u00f6y klonu, sizin i\u00e7in m\u00fckemmel bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Onu kendi ki\u015fisel dokunu\u015flar\u0131n\u0131zla \u00f6zelle\u015ftirmekten, yeni \u00f6zellikler eklemekten ve farkl\u0131 teknolojileri denemekten \u00e7ekinmeyin. Ba\u015far\u0131ya ula\u015fmak i\u00e7in pratik yapmak, denemek ve hatalar\u0131n\u0131zdan ders \u00e7\u0131karmak \u00e7ok \u00f6nemlidir. \u015eimdi bu bilgileri prati\u011fe d\u00f6kme ve kendi dijital imzan\u0131z\u0131 olu\u015fturma zaman\u0131!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ol>\n<li>\n            <strong>Neden GSAP yerine saf CSS animasyonlar\u0131n\u0131 kullanmamal\u0131y\u0131m?<\/strong><\/p>\n<p>Saf CSS animasyonlar\u0131 basit ge\u00e7i\u015fler ve efektler i\u00e7in harikad\u0131r, ancak GSAP, karma\u015f\u0131k zamanlamal\u0131, s\u0131ral\u0131 veya kayd\u0131rma tabanl\u0131 animasyonlar i\u00e7in \u00e7ok daha fazla kontrol ve esneklik sunar. Taray\u0131c\u0131lar aras\u0131 uyumluluk konusunda daha g\u00fcvenilirdir ve performans a\u00e7\u0131s\u0131ndan genellikle daha optimize edilmi\u015f sonu\u00e7lar verir. \u00d6zellikle \"ScrollTrigger\" gibi eklentileriyle, CSS ile yap\u0131lmas\u0131 \u00e7ok zor veya imkans\u0131z olan etkile\u015fimli animasyonlar olu\u015fturabilirsiniz.<\/p>\n<\/li>\n<li>\n            <strong>Portf\u00f6y\u00fcm i\u00e7in haz\u0131r bir \u015fablon kullanmak yerine s\u0131f\u0131rdan klon yapmak neden daha iyi?<\/strong><\/p>\n<p>S\u0131f\u0131rdan klon yapmak, her bir kod sat\u0131r\u0131n\u0131 anlaman\u0131za ve nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 \u00f6\u011frenmenize olanak tan\u0131r. Bu, problem \u00e7\u00f6zme becerilerinizi geli\u015ftirir, yeni teknolojilere a\u015fina olman\u0131z\u0131 sa\u011flar ve kendi ki\u015fisel tarz\u0131n\u0131z\u0131 projenize yans\u0131tma \u00f6zg\u00fcrl\u00fc\u011f\u00fc verir. Haz\u0131r \u015fablonlar h\u0131zl\u0131 olsa da, genellikle fazla kod i\u00e7erir, istedi\u011finiz gibi \u00f6zelle\u015ftirilemez ve size s\u0131n\u0131rl\u0131 \u00f6\u011frenme f\u0131rsat\u0131 sunar. Kendi klonunuz, yeteneklerinizi ve bilginizi g\u00f6stermenin \u00e7ok daha g\u00fc\u00e7l\u00fc bir yoludur.<\/p>\n<\/li>\n<li>\n            <strong>SEO i\u00e7in portf\u00f6y\u00fcmde nelere dikkat etmeliyim?<\/strong><\/p>\n<p>SEO i\u00e7in semantik HTML kullanmaya (do\u011fru ba\u015fl\u0131k hiyerar\u015fisi, anlaml\u0131 etiketler), resimler i\u00e7in a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> nitelikleri eklemeye, mobil uyumlu bir tasar\u0131ma sahip olmaya ve site h\u0131z\u0131n\u0131 optimize etmeye dikkat edin. Ayr\u0131ca, benzersiz ve anahtar kelime a\u00e7\u0131s\u0131ndan zengin <code><title><\/code> ve <code><meta description><\/code> etiketleri kullan\u0131n ve URL'lerinizi anlaml\u0131 hale getirin.<\/p>\n<\/li>\n<li>\n            <strong>Portf\u00f6y\u00fcm\u00fc yay\u0131na almak i\u00e7in en iyi y\u00f6ntem nedir?<\/strong><\/p>\n<p>Portf\u00f6y\u00fcn\u00fcz\u00fc yay\u0131na almak i\u00e7in GitHub Pages, Netlify, Vercel veya Firebase Hosting gibi \u00fccretsiz veya uygun maliyetli platformlar\u0131 kullanabilirsiniz. Bu hizmetler, statik web sitelerinizi dakikalar i\u00e7inde canl\u0131ya alman\u0131za olanak tan\u0131r ve genellikle otomatik da\u011f\u0131t\u0131m gibi ek \u00f6zellikler sunar. Projenizi bir Git deposuna y\u00fckledikten sonra bu platformlara ba\u011flamak olduk\u00e7a kolayd\u0131r.<\/p>\n<\/li>\n<li>\n            <strong>Mobil uyumluluk neden bu kadar \u00f6nemli?<\/strong><\/p>\n<p>G\u00fcn\u00fcm\u00fczde internet kullan\u0131c\u0131lar\u0131n\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131 web sitelerine mobil cihazlardan eri\u015fiyor. Mobil uyumlu bir portf\u00f6y, her boyuttaki ekranda iyi g\u00f6r\u00fcnerek ve d\u00fczg\u00fcn \u00e7al\u0131\u015farak kullan\u0131c\u0131 deneyimini art\u0131r\u0131r. Ayr\u0131ca, Google gibi arama motorlar\u0131 mobil uyumlu siteleri arama sonu\u00e7lar\u0131nda daha \u00fcst s\u0131ralara \u00e7\u0131kar\u0131r; bu da SEO a\u00e7\u0131s\u0131ndan kritik bir avantaj sa\u011flar. K\u0131sacas\u0131, mobil uyumluluk hem kullan\u0131c\u0131 hem de arama motorlar\u0131 i\u00e7in olmazsa olmazd\u0131r.<\/p>\n<\/li>\n<\/ol>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-30388","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi<\/title>\n<meta name=\"description\" content=\"Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi yads\u0131namaz. HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici bir portf\u00f6y klonu olu\u015fturarak becerilerinizi sergileyin ve kariyerinize h\u0131z kat\u0131n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/\ud83d\ude80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi\" \/>\n<meta property=\"og:description\" content=\"Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi yads\u0131namaz. HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici bir portf\u00f6y klonu olu\u015fturarak becerilerinizi sergileyin ve kariyerinize h\u0131z kat\u0131n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/\ud83d\ude80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-27T03:01:53+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi\",\"datePublished\":\"2025-09-27T03:01:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/\"},\"wordCount\":5077,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/\",\"name\":\"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-27T03:01:53+00:00\",\"description\":\"Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi yads\u0131namaz. HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici bir portf\u00f6y klonu olu\u015fturarak becerilerinizi sergileyin ve kariyerinize h\u0131z kat\u0131n.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi","description":"Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi yads\u0131namaz. HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici bir portf\u00f6y klonu olu\u015fturarak becerilerinizi sergileyin ve kariyerinize h\u0131z kat\u0131n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/\ud83d\ude80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi","og_description":"Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi yads\u0131namaz. HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici bir portf\u00f6y klonu olu\u015fturarak becerilerinizi sergileyin ve kariyerinize h\u0131z kat\u0131n.","og_url":"https:\/\/fatihsoysal.com\/blog\/\ud83d\ude80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-27T03:01:53+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"29 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi","datePublished":"2025-09-27T03:01:53+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/"},"wordCount":5077,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/","name":"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-27T03:01:53+00:00","description":"Dijital d\u00fcnyada kendinizi en iyi nas\u0131l ifade edersiniz? \u0130\u015f aray\u0131\u015f\u0131nda veya freelance projelerde dikkat \u00e7ekici bir portf\u00f6y\u00fcn \u00f6nemi yads\u0131namaz. HTML, CSS, JavaScript ve GSAP kullanarak s\u0131f\u0131rdan etkileyici bir portf\u00f6y klonu olu\u015fturarak becerilerinizi sergileyin ve kariyerinize h\u0131z kat\u0131n.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-html-css-javascript-ve-gsap-ile-etkileyici-portfoy-klonu-gelistirme-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\ud83d\ude80 HTML, CSS, JavaScript ve GSAP ile Etkileyici Portf\u00f6y Klonu Geli\u015ftirme Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30388"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30388\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}