-y<\/code> parametresi, t\u00fcm ba\u015flang\u0131\u00e7 sorular\u0131na varsay\u0131lan yan\u0131tlar\u0131 verir.<\/p>\nTailwind CSS'i Kurma ve Yap\u0131land\u0131rma<\/h3>\n
S\u0131rada Tailwind CSS'i projenize eklemek var. Bunun i\u00e7in Tailwind CSS, PostCSS ve Autoprefixer paketlerini geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak kurmal\u0131y\u0131z:<\/p>\n
\nnpm install -D tailwindcss postcss autoprefixer\n <\/pre>\n<\/code><\/p>\n
Kurulum tamamland\u0131ktan sonra, Tailwind CSS ve PostCSS i\u00e7in yap\u0131land\u0131rma dosyalar\u0131n\u0131 olu\u015fturmal\u0131y\u0131z:<\/p>\n
\nnpx tailwindcss init -p\n <\/pre>\n<\/code><\/p>\n
Bu komut, projenizin k\u00f6k dizinine iki dosya olu\u015fturacakt\u0131r: tailwind.config.js<\/code> ve postcss.config.js<\/code>. -p<\/code> bayra\u011f\u0131 PostCSS yap\u0131land\u0131rma dosyas\u0131n\u0131 da otomatik olarak olu\u015fturur.<\/p>\nTailwind CSS'i Projenize Entegre Etme<\/h3>\n
tailwind.config.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve Tailwind'in CSS s\u0131n\u0131flar\u0131n\u0131 tarayaca\u011f\u0131 dosyalar\u0131n yollar\u0131n\u0131 belirtin. Genellikle bu, HTML, JavaScript veya hatta Vue\/React bile\u015fenleri gibi dosyalar olacakt\u0131r:<\/p>\n\n\/\/ tailwind.config.js\n\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n content: [\n \".\/*.html\",\n \".\/src\/**\/*.{html,js}\",\n \/\/ Gelecekte ekleyebilece\u011finiz di\u011fer dosya t\u00fcrleri:\n \/\/ \".\/**\/*.{html,js,ts,jsx,tsx,vue}\"\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n <\/pre>\n<\/code><\/p>\n
Bu yap\u0131land\u0131rma, Tailwind'in projenizin k\u00f6k dizinindeki t\u00fcm HTML dosyalar\u0131n\u0131 ve src<\/code> klas\u00f6r\u00fc alt\u0131ndaki t\u00fcm HTML ve JS dosyalar\u0131n\u0131 taramas\u0131n\u0131 sa\u011flar. \u015eimdi, Tailwind'in temel stillerini import edece\u011fimiz bir CSS dosyas\u0131 olu\u015ftural\u0131m. Genellikle .\/src\/input.css<\/code> gibi bir yol izlenir:<\/p>\n\n\/* .\/src\/input.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n <\/pre>\n<\/code><\/p>\n
Bu \u00fc\u00e7 @tailwind<\/code> y\u00f6nergesi, Tailwind'in t\u00fcm temel stillerini, bile\u015fen stillerini ve yard\u0131mc\u0131 s\u0131n\u0131flar\u0131n\u0131 projenize dahil eder.<\/p>\nTailwind CSS'i Derleme<\/h3>\n
Son olarak, Tailwind CSS'i izleyecek ve girdi CSS dosyan\u0131z\u0131 (.\/src\/input.css<\/code>) i\u015fleyerek nihai \u00e7\u0131kt\u0131 CSS dosyan\u0131z\u0131 olu\u015fturacak bir komut tan\u0131mlamam\u0131z gerekiyor. package.json<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve scripts<\/code> b\u00f6l\u00fcm\u00fcne a\u015fa\u011f\u0131daki komutu ekleyin:<\/p>\n\n\/\/ package.json\n{\n \"name\": \"benim-portfoyum\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"build\": \"tailwindcss -i .\/src\/input.css -o .\/dist\/output.css\",\n \"watch\": \"tailwindcss -i .\/src\/input.css -o .\/dist\/output.css --watch\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.19\",\n \"postcss\": \"^8.4.38\",\n \"tailwindcss\": \"^3.4.3\"\n }\n}\n <\/pre>\n<\/code><\/p>\n
build<\/code> komutu, CSS dosyan\u0131z\u0131 tek seferlik derlerken, watch<\/code> komutu de\u011fi\u015fiklikleri s\u00fcrekli izler ve otomatik olarak yeniden derler. Geli\u015ftirme s\u00fcrecinde npm run watch<\/code> komutunu \u00e7al\u0131\u015ft\u0131rmak size b\u00fcy\u00fck kolayl\u0131k sa\u011flayacakt\u0131r. Art\u0131k .\/dist\/output.css<\/code> dosyas\u0131n\u0131 HTML dosyan\u0131za ba\u011flayarak Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 kullanmaya ba\u015flayabilirsiniz:<\/p>\n\n\n\n\n\n \n \n Ki\u015fisel Portf\u00f6y\u00fcm<\/title>\n <link href=\".\/dist\/output.css\" rel=\"stylesheet\">\n<\/head>\n<body>\n <h1 class=\"text-3xl font-bold underline\">Merhaba Tailwind!<\/h1>\n<\/body>\n<\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>Projenizi bu \u015fekilde kurduktan sonra, <code>npm run watch<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131n ve <code>index.html<\/code> dosyan\u0131z\u0131 bir taray\u0131c\u0131da a\u00e7\u0131n. Ba\u015fl\u0131\u011f\u0131n bekledi\u011finiz gibi stilize edildi\u011fini g\u00f6rmelisiniz. Bu kurulum, ki\u015fisel portf\u00f6y\u00fcn\u00fcz i\u00e7in sa\u011flam bir temel olu\u015fturur ve Tailwind CSS'in t\u00fcm g\u00fcc\u00fcnden yararlanman\u0131z\u0131 sa\u011flar.<\/p>\n<h2>Portf\u00f6y\u00fcn\u00fcz\u00fcn Ana B\u00f6l\u00fcmlerini Tailwind CSS ile Nas\u0131l \u015eekillendirirsiniz?<\/h2>\n<p>Proje ortam\u0131n\u0131z\u0131 ba\u015far\u0131yla kurdu\u011funuza g\u00f6re, \u015fimdi portf\u00f6y\u00fcn\u00fcz\u00fcn ana b\u00f6l\u00fcmlerini Tailwind CSS kullanarak in\u015fa etmeye ba\u015flayabiliriz. Bir ki\u015fisel portf\u00f6y sitesi genellikle ba\u015fl\u0131k (header), giri\u015f\/kahraman b\u00f6l\u00fcm\u00fc (hero section), hakk\u0131mda (about me), projeler (projects) ve ileti\u015fim (contact) gibi temel b\u00f6l\u00fcmlerden olu\u015fur. Her bir b\u00f6l\u00fcm\u00fc, mobil uyumlulu\u011fu ve esteti\u011fi g\u00f6z \u00f6n\u00fcnde bulundurarak nas\u0131l tasarlayaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyelim.<\/p>\n<h3>1. Navigasyon (Header) B\u00f6l\u00fcm\u00fcn\u00fc Olu\u015fturma<\/h3>\n<p>Header, sitenizin kimli\u011fini yans\u0131t\u0131r ve ziyaret\u00e7ilerin di\u011fer b\u00f6l\u00fcmlere kolayca eri\u015fmesini sa\u011flar. Logo, men\u00fc ve belki de bir \"\u0130leti\u015fime Ge\u00e7\" butonu i\u00e7erebilir. Tailwind CSS ile esnek d\u00fczenler olu\u015fturmak i\u00e7in <code>flexbox<\/code> s\u0131n\u0131flar\u0131n\u0131 yo\u011fun bir \u015fekilde kullan\u0131r\u0131z.<\/p>\n<pre><code>\n<!-- Header Section -->\n<nav class=\"bg-gray-800 p-4\">\n <div class=\"container mx-auto flex justify-between items-center\">\n <a href=\"#\" class=\"text-white text-2xl font-bold\">Ad\u0131n\u0131z Soyad\u0131n\u0131z<\/a>\n <ul class=\"flex space-x-4\">\n <li><a href=\"#hakkimda\" class=\"text-gray-300 hover:text-white\">Hakk\u0131mda<\/a><\/li>\n <li><a href=\"#projeler\" class=\"text-gray-300 hover:text-white\">Projeler<\/a><\/li>\n <li><a href=\"#iletisim\" class=\"text-gray-300 hover:text-white\">\u0130leti\u015fim<\/a><\/li>\n <\/ul>\n <\/div>\n<\/nav>\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, <code>container mx-auto<\/code> merkezi bir i\u00e7eri\u011fe sahip olman\u0131z\u0131 sa\u011flar, <code>flex justify-between items-center<\/code> ise elemanlar\u0131 yatayda da\u011f\u0131t\u0131r ve dikeyde hizalar. Bu, mobil cihazlarda bile men\u00fcn\u00fcn d\u00fczenli g\u00f6r\u00fcnmesini sa\u011flar. Daha geli\u015fmi\u015f men\u00fc sistemleri i\u00e7in (\u00f6rne\u011fin hamburger men\u00fc), JavaScript ile etkile\u015fime giren g\u00f6r\u00fcn\u00fcrl\u00fck s\u0131n\u0131flar\u0131n\u0131 (<code>hidden<\/code>, <code>block<\/code>, <code>md:flex<\/code> gibi) kullanabiliriz.<\/p>\n<h3>2. Giri\u015f (Hero) B\u00f6l\u00fcm\u00fcn\u00fc Tasarlama<\/h3>\n<p>Hero b\u00f6l\u00fcm\u00fc, sitenize gelen ziyaret\u00e7ilerin ilk g\u00f6rd\u00fc\u011f\u00fc aland\u0131r ve genellikle g\u00fc\u00e7l\u00fc bir mesaj, \u00e7a\u011fr\u0131ya-eylem (Call-to-Action) ve belki de bir profil foto\u011fraf\u0131 i\u00e7erir. Bu b\u00f6l\u00fcm\u00fc g\u00f6rsel olarak \u00e7ekici ve bilgilendirici hale getirmek \u00f6nemlidir.<\/p>\n<pre><code>\n<!-- Hero Section -->\n<section class=\"bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20 text-center\">\n <div class=\"container mx-auto\">\n <img decoding=\"async\" src=\"profil-fotografiniz.jpg\" alt=\"Profil Foto\u011fraf\u0131\" class=\"rounded-full w-32 h-32 mx-auto mb-6 object-cover border-4 border-white shadow-lg\">\n <h1 class=\"text-5xl font-extrabold mb-4\">Merhaba, Ben [Ad\u0131n\u0131z Soyad\u0131n\u0131z]<\/h1>\n <p class=\"text-xl mb-8 max-w-2xl mx-auto\">Bir [Mesle\u011finiz], [Uzmanl\u0131k Alanlar\u0131n\u0131z] konusunda tutkulu bir geli\u015ftiriciyim\/tasar\u0131mc\u0131y\u0131m.<\/p>\n <a href=\"#projeler\" class=\"bg-white text-blue-700 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-gray-200 transition duration-300\">Projelerimi G\u00f6r<\/a>\n <\/div>\n<\/section>\n <\/pre>\n<p><\/code><\/p>\n<p>Bu b\u00f6l\u00fcmde, <code>bg-gradient-to-r<\/code> ile g\u00fczel bir renk ge\u00e7i\u015fi, <code>rounded-full<\/code> ile dairesel bir profil foto\u011fraf\u0131 ve <code>text-5xl font-extrabold<\/code> ile dikkat \u00e7ekici bir ba\u015fl\u0131k kulland\u0131k. <code>mx-auto<\/code> ve <code>text-center<\/code> gibi s\u0131n\u0131flar i\u00e7eri\u011fi ortalamak i\u00e7in idealdir. Responsive tasar\u0131m i\u00e7in, \u00f6rne\u011fin, <code>md:text-6xl<\/code> gibi s\u0131n\u0131flarla ba\u015fl\u0131k boyutunu farkl\u0131 ekran boyutlar\u0131nda optimize edebiliriz.<\/p>\n<h3>3. Projeler B\u00f6l\u00fcm\u00fcn\u00fc D\u00fczenleme<\/h3>\n<p>Projeler b\u00f6l\u00fcm\u00fc, \u00e7al\u0131\u015fmalar\u0131n\u0131z\u0131 sergiledi\u011finiz yerdir. Genellikle bir grid (\u0131zgara) d\u00fczeninde her projenin kendi kart\u0131 bulunur. Her kart, projenin ad\u0131, k\u0131sa bir a\u00e7\u0131klamas\u0131 ve bir g\u00f6rselini i\u00e7ermelidir. Tailwind'in grid sistemi bu t\u00fcr d\u00fczenler i\u00e7in m\u00fckemmeldir.<\/p>\n<pre><code>\n<!-- Projects Section -->\n<section id=\"projeler\" class=\"py-20 bg-gray-100\">\n <div class=\"container mx-auto text-center\">\n <h2 class=\"text-4xl font-bold mb-12 text-gray-800\">\u00d6ne \u00c7\u0131kan Projelerim<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n <!-- Proje Kart\u0131 1 -->\n <div class=\"bg-white rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition duration-300\">\n <img decoding=\"async\" src=\"proje1.jpg\" alt=\"Proje 1\" class=\"w-full h-48 object-cover\">\n <div class=\"p-6\">\n <h3 class=\"text-2xl font-semibold mb-2 text-gray-900\">E-ticaret Platformu<\/h3>\n <p class=\"text-gray-700 mb-4\">Kullan\u0131c\u0131 dostu aray\u00fcz\u00fc ve g\u00fc\u00e7l\u00fc backend'i ile modern bir e-ticaret \u00e7\u00f6z\u00fcm\u00fc.<\/p>\n <a href=\"#\" class=\"text-blue-600 hover:underline font-medium\">Detaylar\u0131 \u0130ncele \u2192<\/a>\n <\/div>\n <\/div>\n <!-- Proje Kart\u0131 2 (ayn\u0131 yap\u0131ya sahip) -->\n <!-- Proje Kart\u0131 3 (ayn\u0131 yap\u0131ya sahip) -->\n <\/div>\n <\/div>\n<\/section>\n <\/pre>\n<p><\/code><\/p>\n<p><code>grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8<\/code> s\u0131n\u0131flar\u0131, k\u00fc\u00e7\u00fck ekranlarda tek s\u00fctun, orta ekranlarda iki s\u00fctun ve b\u00fcy\u00fck ekranlarda \u00fc\u00e7 s\u00fctunlu bir d\u00fczen olu\u015fturur. <code>gap-8<\/code> ile kartlar aras\u0131nda bo\u015fluk b\u0131rak\u0131l\u0131r. Her kart i\u00e7in <code>shadow-xl<\/code>, <code>rounded-lg<\/code> ve <code>transform hover:scale-105<\/code> gibi s\u0131n\u0131flar kullanarak g\u00f6rsel \u00e7ekicilik ve etkile\u015fim ekledik. Bu esneklik, projelerinizi estetik bir \u015fekilde sergilemenize olanak tan\u0131r ve mobil uyumlu bir deneyim sunar.<\/p>\n<p class=\"note\">Uzman \u0130pucu: Her bir projeniz i\u00e7in ayr\u0131 bir sayfa olu\u015fturarak detayl\u0131 vaka analizi eklemek, potansiyel i\u015fverenlerin sizin problem \u00e7\u00f6zme yetene\u011finizi ve d\u00fc\u015f\u00fcnce s\u00fcre\u00e7lerinizi anlamas\u0131na yard\u0131mc\u0131 olacakt\u0131r. Bu sayfalar\u0131 da Tailwind ile kolayca tasarlayabilirsiniz.<\/p>\n<h2>Estetik ve Fonksiyonellik: Portf\u00f6y\u00fcn\u00fcze \u00d6zel Dokunu\u015flar\u0131 Nas\u0131l Ekleyebilirsiniz?<\/h2>\n<p>Bir portf\u00f6y sitesi sadece bilgileri listelemekle kalmaz, ayn\u0131 zamanda estetik bir deneyim sunarak ziyaret\u00e7ilerin dikkatini \u00e7ekmelidir. Tailwind CSS, varsay\u0131lan olarak harika bir ba\u015flang\u0131\u00e7 noktas\u0131 sunsa da, sitenize ki\u015fisel bir dokunu\u015f katmak ve onu kalabal\u0131ktan ay\u0131rmak i\u00e7in \u00f6zelle\u015ftirme ve ek fonksiyonellikler eklemek \u00f6nemlidir. Bu b\u00f6l\u00fcmde, sitenizi daha \u00e7ekici ve kullan\u0131c\u0131 dostu hale getirecek ileri d\u00fczey ipu\u00e7lar\u0131na odaklanaca\u011f\u0131z.<\/p>\n<h3>Tailwind CSS'i Ki\u015fisel Markan\u0131za G\u00f6re \u00d6zelle\u015ftirme<\/h3>\n<p><code>tailwind.config.js<\/code> dosyas\u0131, Tailwind'in t\u00fcm varsay\u0131lan ayarlar\u0131n\u0131 ge\u00e7ersiz k\u0131labilece\u011finiz veya geni\u015fletebilece\u011finiz sihirli bir kutudur. Kendi renk paletinizi, fontlar\u0131n\u0131z\u0131, ara bo\u015fluk (spacing) de\u011ferlerinizi veya responsive k\u0131r\u0131lma noktalar\u0131n\u0131z\u0131 tan\u0131mlayarak sitenizin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamen de\u011fi\u015ftirebilirsiniz.<\/p>\n<pre><code>\n\/\/ tailwind.config.js\n\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n content: [\".\/*.html\", \".\/src\/**\/*.{html,js}\"],\n theme: {\n extend: {\n colors: {\n 'ozel-mavi': '#3490dc', \/\/ Kendi \u00f6zel mavi renginiz\n 'ozel-gri': '#f0f2f5', \/\/ Kendi \u00f6zel gri renginiz\n },\n fontFamily: {\n sans: ['\"Open Sans\"', 'sans-serif'], \/\/ Google Fonts'tan \u00f6zel font\n serif: ['\"Merriweather\"', 'serif'],\n },\n spacing: {\n '128': '32rem', \/\/ Yeni bir bo\u015fluk de\u011feri\n }\n },\n },\n plugins: [],\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, kendi renklerimizi (<code>ozel-mavi<\/code>, <code>ozel-gri<\/code>), <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\">Google Fonts<\/a>'tan gelen \u00f6zel fontlar\u0131 ve ek bir bo\u015fluk de\u011ferini tan\u0131mlad\u0131k. Bu de\u011fi\u015fiklikleri yapt\u0131ktan sonra, \u00f6rne\u011fin <code>bg-ozel-mavi<\/code> veya <code>font-serif<\/code> gibi s\u0131n\u0131flar\u0131 do\u011frudan HTML'inizde kullanabilirsiniz. Bu d\u00fczeyde bir \u00f6zelle\u015ftirme, portf\u00f6y sitenizin di\u011ferlerinden ayr\u0131lmas\u0131n\u0131 ve ki\u015fisel markan\u0131zla m\u00fckemmel bir uyum sa\u011flamas\u0131n\u0131 garantiler.<\/p>\n<h3>G\u00f6rsel Etkile\u015fimler ve Animasyonlar Ekleme<\/h3>\n<p>Statik bir sayfa yerine, hafif animasyonlar ve ge\u00e7i\u015flerle sitenizi daha dinamik hale getirebilirsiniz. Tailwind CSS, <code>hover<\/code>, <code>focus<\/code> gibi pseudo-s\u0131n\u0131flarla kolayca etkile\u015fimli stiller eklemenizi sa\u011flar. \u00d6rne\u011fin, bir butonun \u00fczerine gelindi\u011finde rengini de\u011fi\u015ftirmek veya bir kart\u0131n hafif\u00e7e b\u00fcy\u00fcmesini sa\u011flamak gibi:<\/p>\n<pre><code>\n<button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out\">\n Daha Fazla Bilgi\n<\/button>\n\n<div class=\"bg-white p-6 rounded-lg shadow-md transform hover:scale-105 transition duration-300\">\n <p>Proje A\u00e7\u0131klamas\u0131<\/p>\n<\/div>\n <\/pre>\n<p><\/code><\/p>\n<p>Burada, <code>transition duration-300 ease-in-out<\/code> s\u0131n\u0131flar\u0131, fare \u00fczerine gelindi\u011finde (hover) stil de\u011fi\u015fikliklerinin yumu\u015fak bir animasyonla ger\u00e7ekle\u015fmesini sa\u011flar. Ayr\u0131ca, \u00f6zel keyframe animasyonlar\u0131 tan\u0131mlayabilir ve bunlar\u0131 Tailwind konfig\u00fcrasyonunuza ekleyerek daha karma\u015f\u0131k efektler de olu\u015fturabilirsiniz. \u00d6rne\u011fin, bir elemenin fade-in animasyonu ile g\u00f6r\u00fcnmesini sa\u011flamak:<\/p>\n<pre><code>\n\/\/ tailwind.config.js i\u00e7indeki extend alt\u0131na\nkeyframes: {\n fadeIn: {\n '0%': { opacity: 0 },\n '100%': { opacity: 1 },\n }\n},\nanimation: {\n fadeIn: 'fadeIn 1s ease-out forwards',\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Sonra bunu HTML'de <code>class=\"animate-fadeIn\"<\/code> \u015feklinde kullanabilirsiniz. Bu t\u00fcr ince detaylar, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<h3>Eri\u015filebilirlik (Accessibility - A11y) ve Performans \u0130pu\u00e7lar\u0131<\/h3>\n<p>Modern bir web sitesi sadece iyi g\u00f6r\u00fcnmekle kalmamal\u0131, ayn\u0131 zamanda herkes taraf\u0131ndan eri\u015filebilir olmal\u0131 ve h\u0131zl\u0131 y\u00fcklenmelidir. Tailwind CSS, do\u011fru kullan\u0131ld\u0131\u011f\u0131nda eri\u015filebilirli\u011fi destekler, ancak baz\u0131 en iyi uygulamalar\u0131 takip etmek \u00f6nemlidir:<\/p>\n<ul>\n<li><strong>Semantik HTML Kullan\u0131m\u0131:<\/strong> <code><br \/>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><main><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<footer><\/code> gibi semantik etiketler kullanmak, ekran okuyucular\u0131n sayfan\u0131z\u0131n yap\u0131s\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong>Kontrast Oran\u0131:<\/strong> Metin ve arka plan renkleri aras\u0131nda yeterli kontrast oldu\u011fundan emin olun. Tailwind'in renk paleti, bu konuda size yard\u0131mc\u0131 olabilir, ancak \u00f6zel renkler kullan\u0131rken dikkatli olmal\u0131s\u0131n\u0131z.<\/li>\n<li><strong>Klavye Navigasyonu:<\/strong> T\u00fcm etkile\u015fimli \u00f6\u011felerin (butonlar, ba\u011flant\u0131lar) klavye ile eri\u015filebilir oldu\u011fundan emin olun. Tailwind'in <code>focus<\/code> varyantlar\u0131 bu konuda yard\u0131mc\u0131 olabilir.<\/li>\n<li><strong>G\u00f6rsel Odak Durumu:<\/strong> Klavye ile gezinirken odaklan\u0131lan \u00f6\u011felerin a\u00e7\u0131k\u00e7a belirtildi\u011finden emin olun (<code>focus:outline-none focus:ring-2 focus:ring-blue-500<\/code> gibi s\u0131n\u0131flar).<\/li>\n<\/ul>\n<p>Performans a\u00e7\u0131s\u0131ndan ise, Tailwind JIT (Just-In-Time) motoru sayesinde yaln\u0131zca kulland\u0131\u011f\u0131n\u0131z CSS'i derleyerek \u00e7\u0131kt\u0131 dosyas\u0131n\u0131n boyutunu minimumda tutar. Ancak yine de dikkat etmeniz gerekenler var:<\/p>\n<ul>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rselleri web i\u00e7in optimize edin (s\u0131k\u0131\u015ft\u0131r\u0131n, do\u011fru format\u0131 kullan\u0131n). <code><img><\/code> etiketlerinde <code>loading=\"lazy\"<\/code> kullanmak ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini azalt\u0131r.<\/li>\n<li><strong>Font Y\u00fcklemesi:<\/strong> \u00c7ok fazla \u00f6zel font kullanmaktan ka\u00e7\u0131n\u0131n veya sadece ger\u00e7ekten ihtiyac\u0131n\u0131z olan varyantlar\u0131 y\u00fckleyin.<\/li>\n<li><strong>Minimum JavaScript:<\/strong> M\u00fcmk\u00fcn oldu\u011funca az ve optimize edilmi\u015f JavaScript kullan\u0131n. Gerekti\u011finde defer veya async \u00f6zelliklerini kullan\u0131n.<\/li>\n<\/ul>\n<p>Bu ileri d\u00fczey \u00f6zelle\u015ftirmeler ve en iyi uygulamalar, ki\u015fisel portf\u00f6y\u00fcn\u00fcz\u00fc sadece g\u00fczel de\u011fil, ayn\u0131 zamanda i\u015flevsel, eri\u015filebilir ve y\u00fcksek performansl\u0131 bir hale getirerek ziyaret\u00e7ileriniz \u00fczerinde kal\u0131c\u0131 bir izlenim b\u0131rakman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h2>Projenizi Canl\u0131ya Alma ve Bak\u0131m: Portf\u00f6y\u00fcn\u00fcz\u00fc Nas\u0131l Yay\u0131nlars\u0131n\u0131z?<\/h2>\n<p>Ki\u015fisel portf\u00f6y\u00fcn\u00fcz\u00fc Tailwind CSS ile ba\u015far\u0131yla geli\u015ftirdikten sonra, son ad\u0131m onu d\u00fcnyaya a\u00e7mak ve potansiyel i\u015fverenlerin veya m\u00fc\u015fterilerin eri\u015fimine sunmakt\u0131r. Bu b\u00f6l\u00fcm, projenizi canl\u0131ya alma s\u00fcre\u00e7lerini, dikkat etmeniz gereken noktalar\u0131 ve gelecekteki bak\u0131m\u0131 ele alacakt\u0131r. Deployment (yay\u0131nlama) s\u00fcreci, geli\u015ftirme kadar \u00f6nemli bir a\u015famad\u0131r.<\/p>\n<h3>1. \u00dcretim \u0130\u00e7in Projeyi Olu\u015fturma (Building for Production)<\/h3>\n<p>Geli\u015ftirme a\u015famas\u0131nda <code>npm run watch<\/code> komutuyla anl\u0131k de\u011fi\u015fiklikleri izlerken, yay\u0131na almadan \u00f6nce projenizi \u00fcretim ortam\u0131 i\u00e7in optimize etmeniz gerekir. Tailwind CSS, \u00fcretim i\u00e7in derlendi\u011finde, kullan\u0131lmayan t\u00fcm CSS s\u0131n\u0131flar\u0131n\u0131 temizleyerek (purging) \u00e7\u0131kt\u0131 dosyas\u0131n\u0131n boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Bu, sitenizin daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar.<\/p>\n<p><code>package.json<\/code> dosyas\u0131nda tan\u0131mlad\u0131\u011f\u0131m\u0131z <code>build<\/code> komutunu kullanarak projenizi \u00fcretim i\u00e7in derleyin:<\/p>\n<pre><code>\nnpm run build\n <\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>.\/dist\/output.css<\/code> dosyas\u0131n\u0131 Tailwind CSS'in \u00fcretim optimizasyonlar\u0131 ile yeniden olu\u015fturacakt\u0131r. Bu sayede, taray\u0131c\u0131ya g\u00f6nderilecek CSS dosyas\u0131 sadece ger\u00e7ekten kulland\u0131\u011f\u0131n\u0131z stilleri i\u00e7erecek ve dosya boyutu ciddi oranda k\u00fc\u00e7\u00fclecektir.<\/p>\n<h3>2. Bar\u0131nd\u0131rma (Hosting) Se\u00e7enekleri<\/h3>\n<p>Portf\u00f6y sitenizi bar\u0131nd\u0131rmak i\u00e7in bir\u00e7ok m\u00fckemmel se\u00e7enek bulunmaktad\u0131r. Statik site bar\u0131nd\u0131rma hizmetleri, genellikle \u00fccretsiz katmanlar sunmalar\u0131 ve kurulumlar\u0131n\u0131n kolay olmas\u0131 nedeniyle ki\u015fisel portf\u00f6yler i\u00e7in idealdir:<\/p>\n<ul>\n<li><strong>Netlify:<\/strong> Otomatik da\u011f\u0131t\u0131m, \u00f6zel alan ad\u0131 deste\u011fi, \u00fccretsiz SSL ve basit bir kurulum s\u00fcreci sunar. GitHub, GitLab veya Bitbucket depolar\u0131n\u0131zla entegre olabilir. Bir projeyi Netlify'a da\u011f\u0131tmak, genellikle depo ba\u011flant\u0131s\u0131 kurmak ve build komutunu belirtmek kadar basittir.<\/li>\n<li><strong>Vercel:<\/strong> Netlify'a benzer \u015fekilde, h\u0131zl\u0131 da\u011f\u0131t\u0131mlar, \u00fccretsiz SSL ve kolay entegrasyonlar sunar. \u00d6zellikle React, Next.js gibi \u00e7er\u00e7evelerle \u00e7al\u0131\u015f\u0131yorsan\u0131z m\u00fckemmel bir se\u00e7enektir, ancak statik HTML\/CSS siteler i\u00e7in de harikad\u0131r.<\/li>\n<li><strong>GitHub Pages:<\/strong> E\u011fer projeniz zaten bir GitHub deposundaysa, GitHub Pages ile \u00fccretsiz ve basit bir \u015fekilde yay\u0131nlayabilirsiniz. Deponuzdaki <code>main<\/code> veya <code>gh-pages<\/code> dallar\u0131ndan birini se\u00e7erek sitenizi kolayca bar\u0131nd\u0131rabilirsiniz.<\/li>\n<li><strong>Firebase Hosting:<\/strong> Google'\u0131n sundu\u011fu bu hizmet, h\u0131zl\u0131 ve g\u00fcvenli statik site bar\u0131nd\u0131rma sa\u011flar. Geni\u015f bir ekosistemle entegrasyon arayanlar i\u00e7in iyi bir se\u00e7enektir.<\/li>\n<\/ul>\n<p><strong>Vaka Analizi:<\/strong> Bir web geli\u015ftirici olan Elif, ki\u015fisel portf\u00f6y\u00fcn\u00fc GitHub'da bar\u0131nd\u0131r\u0131yordu. Yeni projeleri ekledi\u011finde veya mevcut projelerinde de\u011fi\u015fiklik yapt\u0131\u011f\u0131nda, sadece GitHub deposuna push yaparak Vercel veya Netlify'\u0131n otomatik da\u011f\u0131t\u0131m (CI\/CD) \u00f6zelliklerinden yararlanarak sitenin an\u0131nda g\u00fcncellenmesini sa\u011flad\u0131. Bu sayede manuel da\u011f\u0131t\u0131m s\u00fcre\u00e7leriyle u\u011fra\u015fmak yerine do\u011frudan geli\u015ftirme odaklanabildi.<\/p>\n<h3>3. \u00d6zel Alan Ad\u0131 ve SSL Sertifikas\u0131<\/h3>\n<p>Profesyonel bir g\u00f6r\u00fcn\u00fcm i\u00e7in kendi \u00f6zel alan ad\u0131n\u0131z\u0131 (\u00f6rne\u011fin: <code>adinizsoyadiniz.com<\/code>) kullanman\u0131z \u015fiddetle tavsiye edilir. Alan ad\u0131 kay\u0131t \u015firketlerinden (GoDaddy, Namecheap vb.) bir alan ad\u0131 sat\u0131n ald\u0131ktan sonra, bar\u0131nd\u0131rma hizmetinizin ayarlar\u0131ndan DNS kay\u0131tlar\u0131n\u0131 y\u00f6nlendirmeniz gerekir. \u00c7o\u011fu modern bar\u0131nd\u0131rma hizmeti (Netlify, Vercel dahil) \u00fccretsiz SSL sertifikas\u0131 (HTTPS) sa\u011flar. Bu, sitenizin g\u00fcvenli oldu\u011funu g\u00f6sterir ve arama motorlar\u0131 i\u00e7in de \u00f6nemlidir. Kurulum genellikle otomatiktir veya birka\u00e7 t\u0131klamayla ger\u00e7ekle\u015ftirilebilir.<\/p>\n<h3>4. S\u00fcrekli Entegrasyon ve Da\u011f\u0131t\u0131m (CI\/CD)<\/h3>\n<p>Se\u00e7ti\u011finiz bar\u0131nd\u0131rma hizmeti (\u00f6rne\u011fin Netlify veya Vercel), genellikle GitHub\/GitLab\/Bitbucket deponuzdaki de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar ve sitenizi yeniden derleyip da\u011f\u0131t\u0131r. Bu, \"Continuous Integration\/Continuous Delivery\" (S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) s\u00fcrecinin bir par\u00e7as\u0131d\u0131r ve i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r. Sadece kodunuzu commit edip deponuza push yapman\u0131z yeterlidir, gerisini bar\u0131nd\u0131rma hizmeti halleder.<\/p>\n<h3>5. Portf\u00f6y\u00fcn\u00fcz\u00fcn Bak\u0131m\u0131 ve G\u00fcncellenmesi<\/h3>\n<p>Bir portf\u00f6y sitesi asla bitmi\u015f say\u0131lmaz. Yeni projeleriniz olduk\u00e7a veya mevcut becerileriniz geli\u015ftik\u00e7e sitenizi d\u00fczenli olarak g\u00fcncellemeniz \u00f6nemlidir. Yeni b\u00f6l\u00fcmler eklemek, mevcut projeleri g\u00fcncel detaylarla zenginle\u015ftirmek veya genel tasar\u0131m\u0131 yenilemek, portf\u00f6y\u00fcn\u00fcz\u00fcn her zaman g\u00fcncel ve ilgi \u00e7ekici kalmas\u0131n\u0131 sa\u011flar. Tailwind CSS'in mod\u00fcler yap\u0131s\u0131 sayesinde, bu t\u00fcr g\u00fcncellemeleri h\u0131zl\u0131 ve sorunsuz bir \u015fekilde yapabilirsiniz. Yeni bir proje ekledi\u011finizde, sadece projenin HTML kart\u0131n\u0131 olu\u015fturman\u0131z ve uygun Tailwind s\u0131n\u0131flar\u0131n\u0131 uygulaman\u0131z yeterli olacakt\u0131r.<\/p>\n<p>Bu ad\u0131mlar\u0131 takip ederek, Tailwind CSS ile olu\u015fturdu\u011funuz ki\u015fisel portf\u00f6y sitenizi ba\u015far\u0131l\u0131 bir \u015fekilde canl\u0131ya alabilir ve dijital d\u00fcnyadaki yerinizi sa\u011flamla\u015ft\u0131rabilirsiniz. Unutmay\u0131n, iyi bir portf\u00f6y sadece bir web sitesi de\u011fil, ayn\u0131 zamanda sizin profesyonel hikayenizin dijital bir temsilidir.<\/p>\n<h2>S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<dl>\n<dt><strong>Tailwind CSS \u00f6\u011frenmek zor mu?<\/strong><\/dt>\n<dd>Hay\u0131r, Tailwind CSS'in temel mant\u0131\u011f\u0131 olduk\u00e7a basittir. Utility-first yakla\u015f\u0131m\u0131n\u0131 kavrad\u0131ktan sonra, s\u0131n\u0131flar\u0131 birle\u015ftirerek h\u0131zla tasar\u0131mlar olu\u015fturmaya ba\u015flayabilirsiniz. \u00d6\u011frenme e\u011frisi d\u00fc\u015f\u00fckt\u00fcr ve geni\u015f dok\u00fcmantasyonu sayesinde kolayca ilerleyebilirsiniz.<\/dd>\n<dt><strong>Ki\u015fisel portf\u00f6y\u00fcm i\u00e7in neden haz\u0131r temalar yerine s\u0131f\u0131rdan Tailwind CSS kullanmal\u0131y\u0131m?<\/strong><\/dt>\n<dd>Haz\u0131r temalar h\u0131zl\u0131 olsa da, genellikle esneklikleri s\u0131n\u0131rl\u0131d\u0131r ve benzersiz bir g\u00f6r\u00fcn\u00fcm sunmazlar. Tailwind CSS ile s\u0131f\u0131rdan ba\u015flamak, portf\u00f6y\u00fcn\u00fcz\u00fc tamamen ki\u015fisel markan\u0131za ve esteti\u011finize g\u00f6re \u00f6zelle\u015ftirmenize olanak tan\u0131r. Bu sayede, tam olarak hayal etti\u011finiz gibi, size \u00f6zel bir site olu\u015fturabilirsiniz.<\/dd>\n<dt><strong>Tailwind CSS dosyam neden bu kadar b\u00fcy\u00fck g\u00f6r\u00fcn\u00fcyor?<\/strong><\/dt>\n<dd>Geli\u015ftirme a\u015famas\u0131nda (<code>npm run watch<\/code>), Tailwind t\u00fcm olas\u0131 s\u0131n\u0131flar\u0131 dahil etti\u011fi i\u00e7in dosya boyutu b\u00fcy\u00fck olabilir. Ancak, \u00fcretim i\u00e7in derleme (<code>npm run build<\/code>) yapt\u0131\u011f\u0131n\u0131zda, Tailwind CSS'in PostCSS tabanl\u0131 purge \u00f6zelli\u011fi sayesinde yaln\u0131zca HTML'inizde ger\u00e7ekten kulland\u0131\u011f\u0131n\u0131z s\u0131n\u0131flar \u00e7\u0131kt\u0131 dosyas\u0131na dahil edilir. Bu, nihai dosya boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/dd>\n<dt><strong>Tailwind CSS ile responsive tasar\u0131mlar yapmak zor mu?<\/strong><\/dt>\n<dd>Aksine, Tailwind CSS responsive tasar\u0131mlar i\u00e7in harika bir ara\u00e7t\u0131r. <code>sm:<\/code>, <code>md:<\/code>, <code>lg:<\/code>, <code>xl:<\/code> gibi \u00f6nekler kullanarak belirli ekran boyutlar\u0131 i\u00e7in farkl\u0131 stiller tan\u0131mlayabilirsiniz. Bu, mobil \u00f6ncelikli bir yakla\u015f\u0131mla tasar\u0131mlar\u0131n\u0131z\u0131 kolayca uyarlaman\u0131za olanak tan\u0131r ve media query yazma y\u00fck\u00fcn\u00fc ortadan kald\u0131r\u0131r.<\/dd>\n<dt><strong>Portf\u00f6y\u00fcmde JavaScript kullanmal\u0131 m\u0131y\u0131m?<\/strong><\/dt>\n<dd>Tamamen size ba\u011fl\u0131. Basit bir portf\u00f6y i\u00e7in saf HTML ve Tailwind CSS yeterli olabilir. Ancak, interaktif galeriler, form do\u011frulama veya dinamik men\u00fcler gibi \u00f6zellikler eklemek isterseniz, JavaScript kullanman\u0131z gerekecektir. Tailwind CSS, JavaScript k\u00fct\u00fcphaneleri ve \u00e7er\u00e7eveleriyle (React, Vue, Alpine.js gibi) m\u00fckemmel uyum sa\u011flar.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeteneklerinizi sergileyen etkileyici bir ki\u015fisel portf\u00f6y sitesi olu\u015fturmak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. \u0130\u015fverenlerin…","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":[126],"tags":[],"class_list":{"0":"post-32395","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","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>Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi<\/title>\n<meta name=\"description\" content=\"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeteneklerinizi sergileyen etkileyici bir ki\u015fisel portf\u00f6y sitesi olu\u015fturmak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. \u0130\u015fverenlerin veya potansiyel m\u00fc\u015fterilerin dikkatini \u00e7ekmek i\u00e7in dinamik ve kullan\u0131c\u0131 dostu bir platforma sahip olmak art\u0131k bir zorunluluktur. Bu kapsaml\u0131 rehber, pop\u00fcler ve g\u00fc\u00e7l\u00fc bir CSS framework'\u00fc olan Tailwind CSS kullanarak s\u0131f\u0131rdan ad\u0131m ad\u0131m nas\u0131l etkileyici bir ki\u015fisel portf\u00f6y sitesi tasarlayaca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirece\u011finizi ayr\u0131nt\u0131lar\u0131yla ele alacakt\u0131r.\" \/>\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\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi\" \/>\n<meta property=\"og:description\" content=\"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeteneklerinizi sergileyen etkileyici bir ki\u015fisel portf\u00f6y sitesi olu\u015fturmak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. \u0130\u015fverenlerin veya potansiyel m\u00fc\u015fterilerin dikkatini \u00e7ekmek i\u00e7in dinamik ve kullan\u0131c\u0131 dostu bir platforma sahip olmak art\u0131k bir zorunluluktur. Bu kapsaml\u0131 rehber, pop\u00fcler ve g\u00fc\u00e7l\u00fc bir CSS framework'\u00fc olan Tailwind CSS kullanarak s\u0131f\u0131rdan ad\u0131m ad\u0131m nas\u0131l etkileyici bir ki\u015fisel portf\u00f6y sitesi tasarlayaca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirece\u011finizi ayr\u0131nt\u0131lar\u0131yla ele alacakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-21T04:01:16+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=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi\",\"datePublished\":\"2025-10-21T04:01:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/\"},\"wordCount\":3490,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/\",\"name\":\"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-21T04:01:16+00:00\",\"description\":\"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeteneklerinizi sergileyen etkileyici bir ki\u015fisel portf\u00f6y sitesi olu\u015fturmak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. \u0130\u015fverenlerin veya potansiyel m\u00fc\u015fterilerin dikkatini \u00e7ekmek i\u00e7in dinamik ve kullan\u0131c\u0131 dostu bir platforma sahip olmak art\u0131k bir zorunluluktur. Bu kapsaml\u0131 rehber, pop\u00fcler ve g\u00fc\u00e7l\u00fc bir CSS framework'\u00fc olan Tailwind CSS kullanarak s\u0131f\u0131rdan ad\u0131m ad\u0131m nas\u0131l etkileyici bir ki\u015fisel portf\u00f6y sitesi tasarlayaca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirece\u011finizi ayr\u0131nt\u0131lar\u0131yla ele alacakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma 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":"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi","description":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeteneklerinizi sergileyen etkileyici bir ki\u015fisel portf\u00f6y sitesi olu\u015fturmak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. \u0130\u015fverenlerin veya potansiyel m\u00fc\u015fterilerin dikkatini \u00e7ekmek i\u00e7in dinamik ve kullan\u0131c\u0131 dostu bir platforma sahip olmak art\u0131k bir zorunluluktur. Bu kapsaml\u0131 rehber, pop\u00fcler ve g\u00fc\u00e7l\u00fc bir CSS framework'\u00fc olan Tailwind CSS kullanarak s\u0131f\u0131rdan ad\u0131m ad\u0131m nas\u0131l etkileyici bir ki\u015fisel portf\u00f6y sitesi tasarlayaca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirece\u011finizi ayr\u0131nt\u0131lar\u0131yla ele alacakt\u0131r.","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\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi","og_description":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeteneklerinizi sergileyen etkileyici bir ki\u015fisel portf\u00f6y sitesi olu\u015fturmak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. \u0130\u015fverenlerin veya potansiyel m\u00fc\u015fterilerin dikkatini \u00e7ekmek i\u00e7in dinamik ve kullan\u0131c\u0131 dostu bir platforma sahip olmak art\u0131k bir zorunluluktur. Bu kapsaml\u0131 rehber, pop\u00fcler ve g\u00fc\u00e7l\u00fc bir CSS framework'\u00fc olan Tailwind CSS kullanarak s\u0131f\u0131rdan ad\u0131m ad\u0131m nas\u0131l etkileyici bir ki\u015fisel portf\u00f6y sitesi tasarlayaca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirece\u011finizi ayr\u0131nt\u0131lar\u0131yla ele alacakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-21T04:01:16+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi","datePublished":"2025-10-21T04:01:16+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/"},"wordCount":3490,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/","name":"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-21T04:01:16+00:00","description":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeteneklerinizi sergileyen etkileyici bir ki\u015fisel portf\u00f6y sitesi olu\u015fturmak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. \u0130\u015fverenlerin veya potansiyel m\u00fc\u015fterilerin dikkatini \u00e7ekmek i\u00e7in dinamik ve kullan\u0131c\u0131 dostu bir platforma sahip olmak art\u0131k bir zorunluluktur. Bu kapsaml\u0131 rehber, pop\u00fcler ve g\u00fc\u00e7l\u00fc bir CSS framework'\u00fc olan Tailwind CSS kullanarak s\u0131f\u0131rdan ad\u0131m ad\u0131m nas\u0131l etkileyici bir ki\u015fisel portf\u00f6y sitesi tasarlayaca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirece\u011finizi ayr\u0131nt\u0131lar\u0131yla ele alacakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-kisisel-portfoy-olusturma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS ile Ki\u015fisel Portf\u00f6y Olu\u015fturma 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\/32395","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=32395"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32395\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}