Dijital \u00e7a\u011fda kendinizi en iyi \u015fekilde ifade etmenin yollar\u0131n\u0131 m\u0131 ar\u0131yorsunuz? Bir web geli\u015ftiricisi, tasar\u0131mc\u0131 ya da herhangi bir yarat\u0131c\u0131 profesyonel olarak, yeteneklerinizi sergileyecek ve potansiyel i\u015fverenlerinizin veya m\u00fc\u015fterilerinizin dikkatini \u00e7ekecek bir portfolyo sitesi olu\u015fturmak hi\u00e7 bu kadar kritik olmam\u0131\u015ft\u0131. Bu makale, HTML, CSS ve JavaScript’in g\u00fcc\u00fcn\u00fc kullanarak s\u0131f\u0131rdan kendi benzersiz portfolyo web sitenizi nas\u0131l geli\u015ftirece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor ve dijital kimli\u011finizi g\u00fc\u00e7lendirmenize yard\u0131mc\u0131 oluyor.<\/p>\n
Bug\u00fcn\u00fcn rekabet\u00e7i d\u00fcnyas\u0131nda, sadece CV’niz veya LinkedIn profilinizle \u00f6ne \u00e7\u0131kmak giderek zorla\u015f\u0131yor. Potansiyel i\u015fverenler veya m\u00fc\u015fteriler, sizin ne yapabildi\u011finizi<\/strong> g\u00f6rmek isterler, sadece ne yapt\u0131\u011f\u0131n\u0131z\u0131 okumak de\u011fil. \u0130\u015fte bu noktada ki\u015fisel bir portfolyo web sitesi devreye girer. Kendi web siteniz, sadece \u00e7al\u0131\u015fmalar\u0131n\u0131z\u0131 sergilemekle kalmaz, ayn\u0131 zamanda teknik bilginizi, estetik anlay\u0131\u015f\u0131n\u0131z\u0131 ve problem \u00e7\u00f6zme becerilerinizi de ortaya koyar. Bu, sizin i\u00e7in bir nevi dijital kartvizit, online \u00f6zge\u00e7mi\u015f ve yetenek galerisidir.<\/p>\n Bir portfolyo sitesi olu\u015fturmak, sadece teknik bir g\u00f6rev olman\u0131n \u00f6tesinde, ki\u015fisel markan\u0131z\u0131 in\u015fa etme s\u00fcrecinin \u00f6nemli bir par\u00e7as\u0131d\u0131r. Kendi alan ad\u0131n\u0131zla, tamamen sizin kontrol\u00fcn\u00fczde olan bir platformda projelerinizi detayl\u0131ca anlatabilir, kulland\u0131\u011f\u0131n\u0131z teknolojileri belirtebilir, hatta her projenin arkas\u0131ndaki d\u00fc\u015f\u00fcnce s\u00fcrecini payla\u015fabilirsiniz. Bu, bir i\u015f g\u00f6r\u00fc\u015fmesi s\u0131ras\u0131nda bile konu\u015facak somut bir referans noktas\u0131 sunar. Ayr\u0131ca, sitenizin tasar\u0131m\u0131 ve kullan\u0131c\u0131 deneyimi (UX), sizin bir profesyonel olarak detaylara ne kadar \u00f6nem verdi\u011finizi ve kullan\u0131c\u0131 odakl\u0131 d\u00fc\u015f\u00fcnebildi\u011finizi g\u00f6sterir. Bu y\u00fczden, kendi portfolyo sitenizi olu\u015fturmak, kariyer yolculu\u011funuzda atabilece\u011finiz en de\u011ferli ad\u0131mlardan biridir. Bu, sadece bir dizi kod sat\u0131r\u0131 de\u011fil, ayn\u0131 zamanda sizin i\u00e7in yeni f\u0131rsat kap\u0131lar\u0131 aralayacak g\u00fc\u00e7l\u00fc bir ileti\u015fim arac\u0131d\u0131r.<\/p>\n \u00d6rne\u011fin, bir i\u015f ba\u015fvurusu yapt\u0131\u011f\u0131n\u0131zda, di\u011fer adaylar sadece bir metin belgesi sunarken, siz etkile\u015fimli, g\u00f6rsel olarak zengin bir deneyim sunabilirsiniz. Bu durum, sizi an\u0131nda di\u011ferlerinden ay\u0131r\u0131r ve ak\u0131lda kal\u0131c\u0131 hale getirir. Bir potfolyo sitesi, ayn\u0131 zamanda kendinizi s\u00fcrekli geli\u015ftirdi\u011finizin ve en yeni teknolojileri takip etti\u011finizin bir g\u00f6stergesi olabilir. Projelerinizi g\u00fcncel tutmak, yeni becerilerinizi eklemek ve sitenizin kendisini bile bir proje olarak ele al\u0131p iyile\u015ftirmek, sizin \u00f6\u011frenme iste\u011finizi ve proaktif yap\u0131n\u0131z\u0131 yans\u0131t\u0131r. Dolay\u0131s\u0131yla, bu sadece bir web sitesi de\u011fil, sizin profesyonel geli\u015fiminizin ve potansiyelinizin bir kan\u0131t\u0131d\u0131r.<\/p>\n Kendi portfolyo sitenizi geli\u015ftirme yolculu\u011funa \u00e7\u0131kmadan \u00f6nce, web’in temel yap\u0131 ta\u015flar\u0131 olan HTML, CSS ve JavaScript’i iyi anlamak \u00f6nemlidir. Bu \u00fc\u00e7 teknoloji, her web sayfas\u0131n\u0131n omurgas\u0131n\u0131 olu\u015fturur ve birlikte \u00e7al\u0131\u015farak kullan\u0131c\u0131lar\u0131n g\u00f6rd\u00fc\u011f\u00fc ve etkile\u015fimde bulundu\u011fu deneyimi yarat\u0131r. Bu b\u00f6l\u00fcm, bu temel teknolojileri ba\u015flang\u0131\u00e7 seviyesinden itibaren a\u00e7\u0131klayarak, web geli\u015ftirmenin mant\u0131\u011f\u0131n\u0131 kavraman\u0131za yard\u0131mc\u0131 olacak.<\/p>\n HTML (HyperText Markup Language)<\/strong>, bir web sayfas\u0131n\u0131n iskeletini olu\u015fturan i\u015faretleme dilidir. T\u0131pk\u0131 bir binan\u0131n betonarme yap\u0131s\u0131 gibi, HTML de sayfan\u0131n i\u00e7eri\u011fini (metinler, resimler, ba\u011flant\u0131lar, videolar vb.) ve bu i\u00e7eri\u011fin hiyerar\u015fisini tan\u0131mlar. HTML etiketleri (< Bir portfolyo sitesinde, HTML kullanarak ana ba\u015fl\u0131klar\u0131n\u0131z\u0131, hakk\u0131n\u0131zda b\u00f6l\u00fcm\u00fcn\u00fc, proje kartlar\u0131n\u0131z\u0131, ileti\u015fim formunuzu ve navigasyon men\u00fcn\u00fcz\u00fc tan\u0131mlars\u0131n\u0131z. Her proje i\u00e7in bir ba\u015fl\u0131k (< CSS (Cascading Style Sheets)<\/strong>, HTML ile olu\u015fturulan iskelete renk, yaz\u0131 tipi, bo\u015fluk, boyut ve d\u00fczen gibi g\u00f6rsel stilleri uygulamak i\u00e7in kullan\u0131l\u0131r. E\u011fer HTML bir binan\u0131n iskeletiyse, CSS bu binan\u0131n i\u00e7 ve d\u0131\u015f tasar\u0131m\u0131n\u0131, duvar ka\u011f\u0131tlar\u0131n\u0131, boyalar\u0131n\u0131, mobilyalar\u0131n\u0131 ve pencerelerini belirleyen mimaridir. CSS olmadan bir web sitesi sadece bi\u00e7imsiz bir metin ve ba\u011flant\u0131 y\u0131\u011f\u0131n\u0131 olarak g\u00f6r\u00fcn\u00fcr.<\/p>\n Portfolyo siteniz i\u00e7in CSS kullanarak, se\u00e7ti\u011finiz bir renk paletini uygulayabilir, yaz\u0131 tiplerini markan\u0131zla uyumlu hale getirebilir, resimlerin k\u00f6\u015felerini yuvarlayabilir veya elementler aras\u0131nda bo\u015fluklar b\u0131rakarak okunabilirli\u011fi art\u0131rabilirsiniz. Ayr\u0131ca, men\u00fclerin nas\u0131l g\u00f6r\u00fcnece\u011fini, butonlar\u0131n \u00fczerine gelindi\u011finde nas\u0131l tepki verece\u011fini ve sayfan\u0131n farkl\u0131 ekran boyutlar\u0131nda (mobil, tablet, masa\u00fcst\u00fc) nas\u0131l d\u00fczenlenece\u011fini de CSS ile belirlersiniz. Mobil uyumluluk, yani responsive tasar\u0131m, g\u00fcn\u00fcm\u00fczde bir web sitesinin olmazsa olmaz\u0131d\u0131r ve CSS’in media query’leri bu konuda kritik bir rol oynar. B\u00f6ylece siteniz her cihazda m\u00fckemmel g\u00f6r\u00fcn\u00fcr.<\/p>\n .project-card { .project-card:hover { JavaScript (JS)<\/strong>, bir web sitesine dinamiklik ve etkile\u015fim katmak i\u00e7in kullan\u0131lan programlama dilidir. HTML sayfan\u0131n iskeleti, CSS g\u00f6r\u00fcn\u00fcm\u00fcyken, JavaScript sitenin davran\u0131\u015flar\u0131n\u0131 kontrol eden beynidir. Bir web sitesinde g\u00f6rd\u00fc\u011f\u00fcn\u00fcz a\u00e7\u0131l\u0131r men\u00fcler, animasyonlar, form do\u011frulamalar\u0131, dinamik i\u00e7erik y\u00fcklemeleri veya kullan\u0131c\u0131 etkile\u015fimine tepki veren her \u015fey genellikle JavaScript sayesinde m\u00fcmk\u00fcn olur.<\/p>\n Portfolyo sitenizde JavaScript kullanarak, \u00f6rne\u011fin bir “Hakk\u0131mda” b\u00f6l\u00fcm\u00fcn\u00fc t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131l\u0131p kapanan bir akordeon men\u00fcs\u00fc haline getirebilirsiniz. Proje galerinizde resimlerin otomatik olarak d\u00f6nmesini veya bir butona t\u0131kland\u0131\u011f\u0131nda karanl\u0131k moda ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flayabilirsiniz. \u0130leti\u015fim formunuzu kullan\u0131c\u0131 veri girmeden \u00f6nce kontrol edebilir ve hatal\u0131 girdilerde uyar\u0131 verebilirsiniz. JavaScript, kullan\u0131c\u0131 deneyimini zenginle\u015ftirerek sitenizi daha modern, kullan\u0131\u015fl\u0131 ve ak\u0131lda kal\u0131c\u0131 hale getirir. Front-end geli\u015ftirmenin ayr\u0131lmaz bir par\u00e7as\u0131 olan JavaScript, kullan\u0131c\u0131n\u0131n do\u011frudan taray\u0131c\u0131da etkile\u015fim kurdu\u011fu her noktada devreye girer.<\/p>\n if (darkModeToggle) { \/\/ Sayfa y\u00fcklendi\u011finde kullan\u0131c\u0131 tercihini kontrol et Bu \u00fc\u00e7 teknoloji, web geli\u015ftirmenin temelini olu\u015fturur. Birlikte uyum i\u00e7inde \u00e7al\u0131\u015farak, basit bir metin belgesinden karma\u015f\u0131k, etkile\u015fimli ve g\u00f6rsel olarak \u00e7arp\u0131c\u0131 web siteleri yaratman\u0131za olanak tan\u0131rlar. Kendi portfolyo sitenizi olu\u015ftururken, her birinin rol\u00fcn\u00fc ve nas\u0131l bir araya geldiklerini anlamak, sizi ba\u015far\u0131ya g\u00f6t\u00fcrecek ilk ad\u0131md\u0131r.<\/p>\n Her b\u00fcy\u00fck projenin temelinde sa\u011flam bir planlama ve d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f bir tasar\u0131m s\u00fcreci yatar. Portfolyo web siteniz de bir istisna de\u011fildir. Koda dalmadan \u00f6nce, ne in\u015fa etti\u011finizi, kimin i\u00e7in in\u015fa etti\u011finizi ve nas\u0131l bir mesaj iletmek istedi\u011finizi netle\u015ftirmek, hem zamandan tasarruf etmenizi sa\u011flayacak hem de sonucun \u00e7ok daha profesyonel olmas\u0131n\u0131 garanti edecektir. Bu b\u00f6l\u00fcm, bu kritik a\u015famalar\u0131 ad\u0131m ad\u0131m ele alarak, sitenizin temelini sa\u011flam atman\u0131za yard\u0131mc\u0131 olacak.<\/p>\n Sitenizi kimin ziyaret edece\u011fini belirlemek, tasar\u0131m ve i\u00e7erik se\u00e7imlerinizde size rehberlik edecektir. Potansiyel i\u015fverenler mi, freelancer olarak \u00e7al\u0131\u015faca\u011f\u0131n\u0131z m\u00fc\u015fteriler mi, yoksa sadece merakl\u0131 akranlar\u0131n\u0131z m\u0131? Hedef kitleniz ne olursa olsun, sitenizin onlar\u0131n ihtiya\u00e7lar\u0131na ve beklentilerine uygun olmas\u0131 gerekir. \u00d6rne\u011fin, bir yaz\u0131l\u0131m \u015firketine ba\u015fvuruyorsan\u0131z, kod \u00f6rnekleri, teknik detaylar ve problem \u00e7\u00f6zme s\u00fcre\u00e7lerinize odaklanmal\u0131s\u0131n\u0131z. Bir grafik tasar\u0131mc\u0131ysan\u0131z, g\u00f6rsel a\u011f\u0131rl\u0131kl\u0131 ve yarat\u0131c\u0131 bir tasar\u0131m daha uygun olacakt\u0131r.<\/p>\n \u0130\u00e7erik stratejisi, sitenizde hangi bilgilerin yer alaca\u011f\u0131n\u0131 ve bu bilgilerin nas\u0131l sunulaca\u011f\u0131n\u0131 kapsar. Tipik bir portfolyo sitesi \u015fu b\u00f6l\u00fcmleri i\u00e7erir:<\/p>\n Her b\u00f6l\u00fcm\u00fcn i\u00e7eri\u011fini \u00f6nceden planlamak, kodlama a\u015famas\u0131nda hangi bile\u015fenlere ihtiyac\u0131n\u0131z olaca\u011f\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olur.<\/p>\n \u0130\u00e7eri\u011fi netle\u015ftirdikten sonra, sitenizin g\u00f6rsel d\u00fczenini planlamaya ge\u00e7ebilirsiniz. Bu s\u00fcre\u00e7te iki \u00f6nemli ara\u00e7 devreye girer: wireframe ve mockup.<\/p>\n Bu ad\u0131mlar, kod yazmaya ba\u015flamadan \u00f6nce tasar\u0131m kararlar\u0131n\u0131z\u0131 vermenizi sa\u011flar. B\u00f6ylece, kodlama a\u015famas\u0131nda s\u00fcrekli de\u011fi\u015fiklik yapmak zorunda kalmaz, daha verimli ilerlersiniz. Ayr\u0131ca, sitenizin mobil ve masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcmlerini de bu a\u015famada planlaman\u0131z, responsive tasar\u0131m i\u00e7in temel olu\u015fturur.<\/p>\n Harika bir portfolyo sitesi sadece g\u00fczel g\u00f6r\u00fcnmekle kalmaz, ayn\u0131 zamanda kolay kullan\u0131l\u0131r ve etkili bir deneyim sunar. \u0130\u015fte UX (User Experience – Kullan\u0131c\u0131 Deneyimi) ve UI (User Interface – Kullan\u0131c\u0131 Aray\u00fcz\u00fc) prensipleri devreye girer:<\/p>\n Bu a\u015famalar\u0131 dikkatlice tamamlamak, sadece g\u00fczel g\u00f6r\u00fcnen de\u011fil, ayn\u0131 zamanda i\u015flevsel ve kullan\u0131c\u0131 dostu bir portfolyo web sitesi olu\u015fturman\u0131z i\u00e7in sa\u011flam bir temel sa\u011flayacakt\u0131r. Kodlama a\u015famas\u0131na ge\u00e7ti\u011finizde, bu \u00f6n \u00e7al\u0131\u015fmalar size b\u00fcy\u00fck kolayl\u0131k sa\u011flayacak ve hata olas\u0131l\u0131\u011f\u0131n\u0131 en aza indirecektir.<\/p>\n Tasar\u0131m ve planlama a\u015famas\u0131n\u0131 tamamlad\u0131ktan sonra, art\u0131k ellerinizi kirletme ve kod yazma zaman\u0131 geldi! Bu b\u00f6l\u00fcmde, bir portfolyo sitesinin temel yap\u0131s\u0131n\u0131 HTML ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, CSS ile nas\u0131l stil verece\u011finizi ve JavaScript ile nas\u0131l etkile\u015fim kataca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu pratik k\u0131s\u0131m, size somut \u00f6rnekler sunarak kendi sitenizi in\u015fa etme s\u00fcrecinde rehberlik edecek.<\/p>\n Bir web sitesinin temelini olu\u015fturan HTML, i\u00e7eri\u011finizi d\u00fczenlemenin ve anlamsal bir yap\u0131 kazand\u0131rman\u0131n anahtar\u0131d\u0131r. \u0130\u015fte tipik bir portfolyo sitesinin HTML yap\u0131s\u0131:<\/p>\nTemelleri Anlamak: HTML, CSS ve JavaScript Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
HTML \u0130le Yap\u0131 Ta\u015f\u0131 Olu\u015fturma: \u0130\u00e7eri\u011fin Anlamsal \u00c7at\u0131s\u0131<\/h3>\n
p<\/code>>, <h1<\/code>>, <a<\/code>>, <img<\/code>>, <div<\/code>> gibi) taray\u0131c\u0131lara sayfan\u0131n hangi b\u00f6l\u00fcm\u00fcn\u00fcn ne anlama geldi\u011fini s\u00f6yler. \u00d6rne\u011fin, bir <h2<\/code>> etiketi, o metnin bir alt ba\u015fl\u0131k oldu\u011funu belirtirken, bir <ul<\/code>> etiketi s\u0131ras\u0131z bir liste olu\u015fturur. Do\u011fru ve anlamsal HTML kullan\u0131m\u0131, sadece sitenizin yap\u0131s\u0131n\u0131 d\u00fczenlemekle kalmaz, ayn\u0131 zamanda arama motorlar\u0131 taraf\u0131ndan daha iyi anla\u015f\u0131lmas\u0131n\u0131 da sa\u011flar.<\/p>\nh3<\/code>>), k\u0131sa bir a\u00e7\u0131klama (<p<\/code>>), projenin g\u00f6rseli (<img<\/code>>) ve canl\u0131 demo veya GitHub deposuna bir ba\u011flant\u0131 (<a<\/code>>) gibi elementler kullanabilirsiniz. HTML’in temel prensiplerini anlamak, daha sonra CSS ve JavaScript ile \u00e7al\u0131\u015f\u0131rken sa\u011flam bir temel olu\u015fturman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\nCSS \u0130le Estetik Dokunu\u015flar: Sitenize G\u00f6rsel Kimlik Kazand\u0131rma<\/h3>\n
\n \/* \u00d6rnek bir CSS kural\u0131 *\/
\n body {
\n \u00a0\u00a0font-family: 'Open Sans', sans-serif;
\n \u00a0\u00a0background-color: #f4f4f4;
\n \u00a0\u00a0color: #333;
\n }<\/p>\n
\n \u00a0\u00a0border: 1px solid #ddd;
\n \u00a0\u00a0border-radius: 8px;
\n \u00a0\u00a0padding: 20px;
\n \u00a0\u00a0margin: 15px;
\n \u00a0\u00a0box-shadow: 0 2px 5px rgba(0,0,0,0.1);
\n \u00a0\u00a0transition: transform 0.3s ease-in-out;
\n }<\/p>\n
\n \u00a0\u00a0transform: translateY(-5px);
\n }
\n <\/code>\n <\/div>\n<\/p>\nJavaScript \u0130le Etkile\u015fimli Deneyimler: Sitenize Hayat Katma<\/h3>\n
\n \/\/ \u00d6rnek bir JavaScript kodu: Bir butona t\u0131kland\u0131\u011f\u0131nda karanl\u0131k modu a\u00e7ma\/kapama
\n const darkModeToggle = document.getElementById('darkModeToggle');
\n const body = document.body;<\/p>\n
\n \u00a0\u00a0darkModeToggle.addEventListener('click', () => {
\n \u00a0\u00a0\u00a0\u00a0body.classList.toggle('dark-theme');
\n \u00a0\u00a0\u00a0\u00a0const isDark = body.classList.contains('dark-theme');
\n \u00a0\u00a0\u00a0\u00a0localStorage.setItem('dark-mode', isDark); \/\/ Kullan\u0131c\u0131 tercihini kaydet
\n \u00a0\u00a0});
\n }<\/p>\n
\n document.addEventListener('DOMContentLoaded', () => {
\n \u00a0\u00a0if (localStorage.getItem('dark-mode') === 'true') {
\n \u00a0\u00a0\u00a0\u00a0body.classList.add('dark-theme');
\n \u00a0\u00a0}
\n });
\n <\/code>\n <\/div>\n<\/p>\nProje Planlama ve Tasar\u0131m A\u015famas\u0131: Ba\u015far\u0131l\u0131 Bir Ba\u015flang\u0131\u00e7 \u0130\u00e7in Neler Gerekli?<\/h2>\n
Hedef Kitlenizi Belirlemek ve \u0130\u00e7erik Stratejisi Olu\u015fturmak<\/h3>\n
\n
Wireframe ve Mockup Olu\u015fturma: G\u00f6rsel Bir Yol Haritas\u0131<\/h3>\n
\n
Kullan\u0131c\u0131 Deneyimi (UX) ve Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Prensipleri<\/h3>\n
\n
Ad\u0131m Ad\u0131m Kodlama: Portfolyo Sitenizi Hayata Ge\u00e7irme Prati\u011fi<\/h2>\n
HTML \u0130le \u0130skelet Olu\u015fturma: Sayfa Yap\u0131s\u0131n\u0131 Kurma<\/h3>\n
\n
\n
\n
\n \u00a0\u00a0
\n \u00a0\u00a0
\n \u00a0\u00a0