perf(images): serve optimized portfolio media

app/[locale]/animation-sources/page.tsx

@@ -20,7 +20,7 @@ export async function generateMetadata({
   ]);
   const localizedPath = locale === "en" ? "/en/animation-sources" : "/animation-sources";
   const url = `${SITE_URL}${localizedPath}`;
-  const socialImagePath = sources[0]?.coverImage ?? "/logo/logo.png";
+  const socialImagePath = sources[0]?.coverImage ?? "/logo/logo.webp";
   const socialImageUrl = new URL(socialImagePath, SITE_URL).toString();
   const isGif = socialImagePath.toLowerCase().endsWith(".gif");
 

app/[locale]/layout.tsx

@@ -36,10 +36,10 @@ export async function generateMetadata({
     icons: {
       icon: [
         { url: "/favicon.ico", sizes: "any" },
-        { url: "/logo/logo.png", type: "image/jpeg" },
+        { url: "/logo/logo.webp", type: "image/webp" },
       ],
       shortcut: "/favicon.ico",
-      apple: "/logo/logo.png",
+      apple: "/logo/apple-touch-icon.png",
     },
     authors: [{ name: "Poyraz Avsever" }],
     creator: "Poyraz Avsever",
@@ -53,7 +53,7 @@ export async function generateMetadata({
       description: description,
       images: [
         {
-          url: "/logo/logo.png",
+          url: "/logo/logo.webp",
           width: 1200,
           height: 1200,
           alt: "Poyraz Avsever Logo",
@@ -64,7 +64,7 @@ export async function generateMetadata({
       card: "summary_large_image",
       title: title,
       description: description,
-      images: ["/logo/logo.png"],
+      images: ["/logo/logo.webp"],
       creator: "@poyrazavsever",
     },
     keywords: [

components/ataturk-widget-modal.tsx

@@ -28,7 +28,7 @@ export function AtaturkWidgetModal({ theme }: AtaturkWidgetModalProps) {
         >
           <div className="relative h-full w-full">
             <Image
-              src="/ataturk.png"
+              src="/ataturk.webp"
               alt={t("alt")}
               fill
               sizes="56px"

components/blog-content.tsx

@@ -156,7 +156,7 @@ export function BlogContent({ data, section = "blog" }: BlogContentProps) {
                   readTime={post.readTime}
                   href={post.href}
                   className="rounded-sm border-border [&_h3]:line-clamp-2 [&_h3]:min-h-[2.5rem] [&_p]:line-clamp-3"
-                  author={{ name: post.author, avatar: "/logo/logo.png" }}
+                  author={{ name: post.author, avatar: "/logo/logo.webp" }}
                 />
               </StaggerItem>
             ))}

components/blog-detail-content.tsx

@@ -45,15 +45,13 @@ function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
           className="h-auto w-full object-cover"
         />
       ) : (
-        <img
+        <Image
           src={src}
           alt={caption}
           width={1200}
           height={675}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 900px"
           loading="lazy"
-          decoding="async"
-          fetchPriority="low"
-          referrerPolicy="strict-origin-when-cross-origin"
           className="h-auto w-full object-cover"
         />
       )}

components/json-ld.tsx

@@ -11,7 +11,7 @@ export type PersonJsonLdProps = {
 export function PersonJsonLd({
   name,
   url = SITE_URL,
-  image = `${SITE_URL}/logo/logo.png`,
+  image = `${SITE_URL}/logo/logo.webp`,
   jobTitle = "Fullstack Developer",
   sameAs = [],
 }: PersonJsonLdProps) {
@@ -68,7 +68,7 @@ export function ArticleJsonLd({
       name: authorName,
       logo: {
         "@type": "ImageObject",
-        url: `${SITE_URL}/logo/logo.png`,
+        url: `${SITE_URL}/logo/logo.webp`,
       },
     },
   };

components/links-content.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Icon } from "@iconify/react";
+import Image from "next/image";
 import { Link } from "@/i18n/routing";
 import { useLocale, useTranslations } from "next-intl";
 import { useMemo, useState } from "react";
@@ -124,9 +125,13 @@ export function LinksContent({
       <div className="relative mx-auto flex w-full max-w-xl justify-center">
         <Card className="w-full overflow-hidden rounded-[28px] border-border/80 bg-background/95 shadow-[0_24px_80px_rgba(15,23,42,0.16)] backdrop-blur">
           <div className="relative aspect-1878/410 overflow-hidden border-b border-border/70">
-            <img
+            <Image
               src="/logo/cover.png"
               alt="Poyraz Avsever kapak görseli"
+              fill
+              priority
+              sizes="(max-width: 640px) 100vw, 576px"
+              className="object-cover"
             />
             <div className="absolute inset-0 bg-linear-to-t from-background/20 via-transparent to-transparent" />
           </div>
@@ -134,7 +139,7 @@ export function LinksContent({
           <div className="px-5 pb-5 pt-0 sm:px-6 sm:pb-6">
             <div className="-mt-14 flex flex-col gap-4">
               <Avatar className="h-24 w-24 rounded-[28px] border-4 border-background bg-background shadow-lg sm:h-28 sm:w-28">
-                <AvatarImage src="/logo/logo.png" alt="Poyraz Avsever" />
+                <AvatarImage src="/logo/logo.webp" alt="Poyraz Avsever" />
                 <AvatarFallback className="rounded-3xl bg-muted text-lg font-semibold">
                   PA
                 </AvatarFallback>

components/media-kit-content.tsx

@@ -185,7 +185,7 @@ export function MediaKitContent({ locale }: { locale: MediaKitLocale }) {
         <header className="flex items-center justify-between gap-4 border-b border-border pb-4">
           <a href={`/${locale}`} className="inline-flex items-center gap-3">
             <Image
-              src="/logo/logo.png"
+              src="/logo/logo.webp"
               alt="Poyraz Avsever"
               width={36}
               height={36}

components/site-navbar.tsx

@@ -204,7 +204,7 @@ export function SiteNavbar({
           className="inline-flex shrink-0 items-center"
         >
           <Logo
-            src="/logo/logo.png"
+            src="/logo/logo.webp"
             alt="Poyraz Avsever"
             width={40}
             height={40}

content/animation-sources/poyraz-cursor-portrait.en.md

@@ -2,7 +2,7 @@
 title: "How to Build an AI Avatar That Follows the Pointer"
 slug: "poyraz-cursor-portrait"
 excerpt: "Build the effect from start to finish with the prompts, Wiro AI and MiniMax H3 video workflow, FFmpeg preparation, and React integration I used."
-coverImage: "/animation-sources/poyraz-cursor-portrait/avatar-mouse-follow.gif"
+coverImage: "/animation-sources/poyraz-cursor-portrait/avatar-mouse-follow.webp"
 platform: "Web"
 tools:
   - "Wiro AI"

content/animation-sources/poyraz-cursor-portrait.tr.md

@@ -2,7 +2,7 @@
 title: "Fareyi Takip Eden AI Avatar Nasıl Yapılır?"
 slug: "poyraz-cursor-portrait"
 excerpt: "Wiro AI üzerinde MiniMax H3 ile ürettiğim 1:1 avatar videosunu, promptlardan FFmpeg optimizasyonuna ve React entegrasyonuna kadar adım adım oluşturun."
-coverImage: "/animation-sources/poyraz-cursor-portrait/avatar-mouse-follow.gif"
+coverImage: "/animation-sources/poyraz-cursor-portrait/avatar-mouse-follow.webp"
 platform: "Web"
 tools:
   - "Wiro AI"

content/blog/css-frameworkleri-tan-yoruz-5-b-l-m-materialize.md

@@ -6,7 +6,7 @@ readTime: "6 min read"
 author: "Poyraz Avsever"
 slug: "css-frameworkleri-tan-yoruz-5-b-l-m-materialize"
 excerpt: "CSS Frameworkleri Tanıyoruz | 5. Bölüm: Materialize Merhaba arkadaşlar, bugün 5.bölümde sizlerle “Materialize” ile tanışıyoruz. Dilerseniz başlayalım. Google’ın Material Design …"
-coverImage: "/blog/images/css-frameworkleri-tan-yoruz-5-b-l-m-materialize-cover.jpg"
+coverImage: "/blog/images/css-frameworkleri-tan-yoruz-5-b-l-m-materialize-cover.webp"
 canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoruz-5-b%C3%B6l%C3%BCm-materialize-5fd3c99862c2"
 ---
 
@@ -271,4 +271,4 @@ Materialize CSS’in resmi web sitesinde, farklı kullanım senaryolarına uygun
 
 Materialize CSS, sade yapısı ve Google’ın Material Design ilkelerine olan sadakatiyle, özellikle görsel olarak güçlü ve modern arayüzler oluşturmak isteyen geliştiriciler için büyük bir kolaylık sağlar. Hazır bileşenleri, responsive grid sistemi ve basit sözdizimi sayesinde hem yeni başlayanlar hem de hızlı prototipleme yapmak isteyen deneyimli geliştiriciler tarafından tercih edilebilir.
 
-Ancak framework’ün büyük projelerdeki sınırlılıkları, özelleştirme konusundaki kısıtlamaları ve topluluk desteğinin sınırlı oluşu gibi dezavantajlarını da göz ardı etmemek gerekir. Eğer sade, hızlı ve estetik bir çözüm arıyorsan, Materialize CSS tam sana göre olabilir.
+Ancak framework’ün büyük projelerdeki sınırlılıkları, özelleştirme konusundaki kısıtlamaları ve topluluk desteğinin sınırlı oluşu gibi dezavantajlarını da göz ardı etmemek gerekir. Eğer sade, hızlı ve estetik bir çözüm arıyorsan, Materialize CSS tam sana göre olabilir.

content/blog/frontend-mimarisinde-en-zor-k-s-m-karar-vermek.md

@@ -145,7 +145,7 @@ Bu bakış açısını öğrendiğimden ve uygulamaya başladığımdan beri fro
 Frontend mimarisinde güven veren şey, hatasız olmak değil; **hatalarla yaşayabilecek bir yapı kurmaktır**.
 
 
-![](/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-7.jpg)
+![](/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-7.webp)
 
 ## Frontend Mimarisinde Olgunluğumun Gelişimi
 
@@ -209,4 +209,4 @@ Bu değişim bir anda olmadı. Projeler büyüdükçe, bazı kararların yük ha
 
 Eğer bu yazı, senin de bir kararın üzerine biraz daha düşünmene ya da “ben bunu neden böyle yapmıştım?” diye sormana sebep olduysa, amacına ulaşmış demektir. Frontend mimarisi çoğu zaman sessiz ilerler ama verdiğimiz kararlar uzun süre bizimle kalır.
 
-Okuduğun için teşekkür ederim. Umarım bir yerinde sana da dokunmuştur
+Okuduğun için teşekkür ederim. Umarım bir yerinde sana da dokunmuştur

content/blog/newsletter0612072026-en.md

@@ -6,7 +6,7 @@ readTime: "5 min read"
 author: "Poyraz Avsever"
 slug: "newsletter0612072026-en"
 excerpt: "This week, we have a packed agenda, ranging from OpenAI's changing model strategies to the historic trade secret theft lawsuit filed by Apple, and from new technologies running in the browser to useful open-source projects."
-coverImage: "/blog/images/newsletter0612072026-cover.png"
+coverImage: "/blog/images/newsletter0612072026-cover.webp"
 lang: "en"
 ---
 

content/blog/newsletter0612072026.md

@@ -6,7 +6,7 @@ readTime: "5 min read"
 author: "Poyraz Avsever"
 slug: "newsletter0612072026"
 excerpt: "Bu hafta OpenAI'ın değişen model stratejilerinden Apple'ın açtığı sır hırsızlığı davasına, tarayıcıda çalışan yeni teknolojilerden açık kaynak projelere kadar dolu dolu bir gündemimiz var."
-coverImage: "/blog/images/newsletter0612072026-cover.png"
+coverImage: "/blog/images/newsletter0612072026-cover.webp"
 lang: "tr"
 ---
 
@@ -114,4 +114,4 @@ Ajanların sayfa trafiğini artırması ama reklamlara tıklamaması sorununu ç
 
 [Kaynak linki](https://mashable.com/tech/biggest-cybersecurity-data-breaches-2026)
 
-Hackerlar artık sistem açığı bulmak yerine doğrudan yapay zeka asistanlarını manipüle ediyor. Örneğin Meta'nın destek botu manipüle edilerek hesapların ele geçirilmesi sağlandı. Dil modellerinin dışarıdan gelen talimatlara "ikna olma" zafiyeti, en az geleneksel yazılım açıkları kadar tehlikeli bir boyuta ulaştı. Prompt injection türü saldırılar önümüzdeki dönemin en büyük siber güvenlik problemi olacak.
+Hackerlar artık sistem açığı bulmak yerine doğrudan yapay zeka asistanlarını manipüle ediyor. Örneğin Meta'nın destek botu manipüle edilerek hesapların ele geçirilmesi sağlandı. Dil modellerinin dışarıdan gelen talimatlara "ikna olma" zafiyeti, en az geleneksel yazılım açıkları kadar tehlikeli bir boyuta ulaştı. Prompt injection türü saldırılar önümüzdeki dönemin en büyük siber güvenlik problemi olacak.

content/blog/newsletter2702082026-en.md

@@ -6,7 +6,7 @@ readTime: "5 min read"
 author: "Poyraz Avsever"
 slug: "newsletter2702082026-en"
 excerpt: "This week, we have a packed agenda, from autonomous AI models and data center water consumption to major shifts in design tools, next-generation batteries, and chip technologies."
-coverImage: "/blog/images/newsletter2702082026-cover.png"
+coverImage: "/blog/images/newsletter2702082026-cover.webp"
 lang: "en"
 ---
 

content/blog/newsletter2702082026.md

@@ -6,7 +6,7 @@ readTime: "5 min read"
 author: "Poyraz Avsever"
 slug: "newsletter2702082026"
 excerpt: "Bu hafta otonom hareket eden yapay zeka modellerinden veri merkezlerinin su tüketimine, tasarım araçlarındaki dönüşümden yeni nesil batarya ve çip teknolojilerine kadar yoğun bir gündemimiz var."
-coverImage: "/blog/images/newsletter2702082026-cover.png"
+coverImage: "/blog/images/newsletter2702082026-cover.webp"
 lang: "tr"
 ---
 

content/blog/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir.md

@@ -6,7 +6,7 @@ readTime: "5 min read"
 author: "Poyraz Avsever"
 slug: "next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir"
 excerpt: "Next.js ile Edge Functions: Hızlı Web Uygulamaları Nasıl Geliştirilir? TL;DR (Too Long; Didn’t Read): Edge Functions, kullanıcıya en yakın konumda çalışan, hızlı serverless …"
-coverImage: "/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-cover.jpg"
+coverImage: "/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-cover.webp"
 canonicalUrl: "https://medium.com/@poyrazavsever/next-js-ile-edge-functions-h%C4%B1zl%C4%B1-web-uygulamalar%C4%B1-nas%C4%B1l-geli%C5%9Ftirilir-d94eafacf50e"
 ---
 
@@ -245,4 +245,4 @@ Bir sonraki yazıda görüşmek üzere, **sağlıcakla!**
 
 ![](/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-7.jpg)
 
-> _Görseller_ **_Gemini_** _ile oluşturulmuştur._
+> _Görseller_ **_Gemini_** _ile oluşturulmuştur._

content/blog/poyraz-ile-yazilima-dair-0309082026.md

@@ -6,7 +6,7 @@ readTime: "7 min read"
 author: "Poyraz Avsever"
 slug: "poyraz-ile-yazilima-dair-0309082026"
 excerpt: "Bu hafta yapay zeka maliyet savaşlarından DeepMind liderlik değişimine, 100x geliştirici tartışmasından Figma dosya mimarisine ve teknoloji sektöründeki güç dengelerine kadar yoğun bir gündemimiz var."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-0309082026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-0309082026-cover.webp"
 lang: "tr"
 ---
 

content/blog/poyraz-ile-yazilima-dair-1319072026.md

@@ -6,7 +6,7 @@ readTime: "6 min read"
 author: "Poyraz Avsever"
 slug: "poyraz-ile-yazilima-dair-1319072026"
 excerpt: "Bu hafta yapay zeka model fiyat savaşlarından kurumsal ajan protokollerine, HTTP QUERY metodundan Figma ve Cloudflare güncellemelerine kadar yoğun bir teknoloji gündemimiz var."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-1319072026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-1319072026-cover.webp"
 lang: "tr"
 ---
 

content/blog/poyraz-ile-yazilima-dair-2430082026.md

@@ -6,7 +6,7 @@ readTime: "13 min read"
 author: "Poyraz Avsever"
 slug: "poyraz-ile-yazilima-dair-2430082026"
 excerpt: "Bu hafta kontrolden çıkan yapay zekâ ajanlarından fiziksel cihazları yöneten sistemlere, Kubernetes 1.37'den Apple M6'ya kadar yoğun bir teknoloji gündemimiz var."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-2430082026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-2430082026-cover.webp"
 lang: "tr"
 ---
 

content/blog/poyraz-ile-yazilima-dair-26072026.md

@@ -6,7 +6,7 @@ readTime: "7 min read"
 author: "Poyraz Avsever"
 slug: "poyraz-ile-yazilima-dair-26072026"
 excerpt: "Bu hafta otonom yapay zeka güvenliğinden kamu kurumlarında üretken yapay zekaya, sıfır tıklama açıklarından Figma'nın tasarım araçlarındaki liderliğine kadar yoğun bir teknoloji gündemimiz var."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-26072026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-26072026-cover.webp"
 lang: "tr"
 ---
 

content/blog/software-with-poyraz-0309082026.md

@@ -6,7 +6,7 @@ readTime: "7 min read"
 author: "Poyraz Avsever"
 slug: "software-with-poyraz-0309082026"
 excerpt: "This week, we have a packed agenda, from AI cost competition and DeepMind's leadership shift to the 100x developer debate, Figma's file architecture updates, and changing power dynamics in tech."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-0309082026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-0309082026-cover.webp"
 lang: "en"
 ---
 

content/blog/software-with-poyraz-1319072026.md

@@ -6,7 +6,7 @@ readTime: "6 min read"
 author: "Poyraz Avsever"
 slug: "software-with-poyraz-1319072026"
 excerpt: "This week, we have a packed tech agenda, from AI model price wars and enterprise agent protocols to HTTP QUERY, Figma updates, and Cloudflare's machine-economy push."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-1319072026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-1319072026-cover.webp"
 lang: "en"
 ---
 

content/blog/software-with-poyraz-2430082026.md

@@ -6,7 +6,7 @@ readTime: "13 min read"
 author: "Poyraz Avsever"
 slug: "software-with-poyraz-2430082026"
 excerpt: "This week, we cover rogue AI agents, systems that connect models to physical devices, Kubernetes 1.37, Apple's M6, and the growing importance of control across technology."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-2430082026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-2430082026-cover.webp"
 lang: "en"
 ---
 

content/blog/software-with-poyraz-26072026.md

@@ -6,7 +6,7 @@ readTime: "7 min read"
 author: "Poyraz Avsever"
 slug: "software-with-poyraz-26072026"
 excerpt: "This week, we have a packed tech agenda, from autonomous AI safety and generative AI in public institutions to zero-click vulnerabilities and Figma's leadership in design tools."
-coverImage: "/blog/images/poyraz-ile-yazilima-dair-26072026-cover.png"
+coverImage: "/blog/images/poyraz-ile-yazilima-dair-26072026-cover.webp"
 lang: "en"
 ---
 

content/blog/vuejs-dokumantasyon-ceviri-projesi.md

@@ -6,12 +6,12 @@ readTime: "5 min read"
 author: "Poyraz Avsever"
 slug: "vuejs-dokumantasyon-ceviri-projesi"
 excerpt: "Vue.js öğrenme sürecimde hissettiğim Türkçe kaynak eksikliğini gidermek için başlattığım topluluk çeviri projesine davetlisiniz."
-coverImage: "/blog/images/vuejs-ceviri-bolum1.png"
+coverImage: "/blog/images/vuejs-ceviri-bolum1.webp"
 ---
 
 # Vue.js Dokümantasyonunu Birlikte Türkçeye Çeviriyoruz!
 
-![]( /blog/images/vuejs-ceviri-bolum1.png)
+![]( /blog/images/vuejs-ceviri-bolum1.webp)
 
 Merhaba,
 
@@ -25,7 +25,7 @@ Son zamanlarda kendimi frontend alanında geliştirmeye devam ediyorum ve rotam
 
 ## Peki Bunu Nasıl Düzenliyoruz?
 
-![]( /blog/images/vuejs-ceviri-bolum2.png)
+![]( /blog/images/vuejs-ceviri-bolum2.webp)
 
 Açıkçası projeye ilk başladığımda "Bunu nasıl yöneteceğim?" sorusu kafamı biraz kurcaladı. Markdown dosyalarını tek tek kendi kendime çevirip commit atmak yerine, başkalarının da kolayca katılıp iş bölümü yapabileceği bir düzen kurmam gerekiyordu. 
 
@@ -35,7 +35,7 @@ Yani dokümantasyondaki her sayfa, projemizde tamamlanmayı bekleyen bir görev
 
 ## Süreci Takip Etmek İçin Ne Yaptım?
 
-![]( /blog/images/vuejs-ceviri-bolum3.png)
+![]( /blog/images/vuejs-ceviri-bolum3.webp)
 
 Issue açmak güzeldi ama "şu an kim ne yapıyor, hangi sayfa boşta?" sorularının yanıtı hala belirsizdi. Bu yüzden GitHub üzerinde bir **Kanban board** kurdum. Benim gibi projeler üretmeyi seven biriyseniz, o "Done" sütununun dolmaya başlamasının ne kadar motive edici olduğunu bilirsiniz.
 
@@ -49,7 +49,7 @@ Böylece kimse "acaba bu sayfayı çeviren var mı?" diye düşünmüyor. Her ş
 
 ## Nasıl Dahil Olabilirsiniz?
 
-![]( /blog/images/vuejs-ceviri-bolum4.png)
+![]( /blog/images/vuejs-ceviri-bolum4.webp)
 
 Bu projeyi tek başıma yürütmemin çok uzun süreceğini söylemiştim. O yüzden eğer Vue.js öğreniyorsanız, İngilizce okuma pratiği yapmak istiyorsanız veya sadece açık kaynağa destek olmanın o güzel hissini yaşamak istiyorsanız sizi de bekliyoruz. Süreç inanın çok basit:
 
@@ -62,7 +62,7 @@ Gördüğünüz gibi aslında son derece standart bir açık kaynak katkı süre
 
 ## Çevirirken Dikkat Ettiğimiz Birkaç Şey
 
-![]( /blog/images/vuejs-ceviri-bolum5.png)
+![]( /blog/images/vuejs-ceviri-bolum5.webp)
 
 Herkesin farklı bir çeviri tarzı olduğu için ortaya tutarlı bir Türkçe kaynak çıkması adına ufak tefek kurallarımız var elbette. Çok göz korkutucu şeyler değil; örneğin kod bloklarının içini çevirmemeye özen gösteriyoruz veya "component", "props", "render" gibi Türkçeye çevrildiğinde kafa karıştırabilecek teknik terimleri orijinal haliyle bırakmayı tercih ediyoruz.
 
@@ -70,7 +70,7 @@ Bütün bu detayları repomuzdaki `CONTRIBUTING.md` dosyasında derledik. Çevir
 
 ## Son Söz
 
-![]( /blog/images/vuejs-ceviri-bolum6.png)
+![]( /blog/images/vuejs-ceviri-bolum6.webp)
 
 Eğer siz de benim gibi Vue.js dünyasını keşfediyorsanız veya halihazırda tecrübeli bir geliştiriciyseniz, bu projede herkese yetecek kadar sayfa var. Birlikte, ekosisteme değer katacak sağlam bir Türkçe kaynak bırakabiliriz.
 

data/certificates.ts

@@ -13,7 +13,7 @@ export const certificates = [
       tr: "Scrimba üzerindeki JavaScript'in Zor Kısımları sertifikasıyla scope, closure, hoisting ve asenkron akış gibi temel JavaScript kavramlarını daha derinlemesine pekiştirdim.",
       en: "With this Scrimba Tricky Parts of JavaScript certificate, I deepened my understanding of core JavaScript concepts such as scope, closures, hoisting, and asynchronous flow.",
     },
-    image: "/certificates/trickyPartsOfJavascriptScrimba.png",
+    image: "/certificates/trickyPartsOfJavascriptScrimba.webp",
     category: "web",
   },
   {
@@ -30,7 +30,7 @@ export const certificates = [
       tr: "Scrimba üzerindeki JavaScript sertifikasıyla temel programlama becerilerimi geliştirdim.",
       en: "With this Scrimba JavaScript certificate, I improved my foundational programming skills.",
     },
-    image: "/certificates/javascriptScrimba.png",
+    image: "/certificates/javascriptScrimba.webp",
     category: "web",
   },
   {
@@ -47,7 +47,7 @@ export const certificates = [
       tr: "Scrimba üzerindeki CSS Animasyonları sertifikasıyla geçişler, hareket ve etkileşimli arayüz animasyonları oluşturma becerilerimi geliştirdim.",
       en: "With this Scrimba CSS Animations certificate, I improved my skills in transitions, motion, and interactive interface animations.",
     },
-    image: "/certificates/cssAnimationsScrimba.png",
+    image: "/certificates/cssAnimationsScrimba.webp",
     category: "web",
   },
   {
@@ -64,7 +64,7 @@ export const certificates = [
       tr: "Scrimba üzerindeki CSS Grid sertifikasıyla modern ve duyarlı yerleşim sistemleri kurma becerilerimi geliştirdim.",
       en: "With this Scrimba CSS Grid certificate, I improved my ability to build modern and responsive layout systems.",
     },
-    image: "/certificates/cssGridScrimba.png",
+    image: "/certificates/cssGridScrimba.webp",
     category: "web",
   },
   {
@@ -81,7 +81,7 @@ export const certificates = [
       tr: "Scrimba üzerindeki HTML ve CSS sertifikasıyla semantik yapı kurma ve arayüz stil verme konularında temel yetkinlik kazandım.",
       en: "With this Scrimba HTML and CSS certificate, I gained foundational skills in semantic structure and interface styling.",
     },
-    image: "/certificates/htmlCssScrimba.png",
+    image: "/certificates/htmlCssScrimba.webp",
     category: "web",
   },
   {
@@ -217,7 +217,7 @@ export const certificates = [
       tr: "Git ve GitHub üzerine aldığım bu eğitimde sürüm kontrol süreçleri, proje yönetimi ve ekip çalışmasında değişiklik takibi konularında yetkinliğimi artırdım.",
       en: "In this training on Git and GitHub, I increased my competence in version control processes, project management, and tracking changes in teamwork.",
     },
-    image: "/certificates/git.png",
+    image: "/certificates/git.webp",
     category: "yazılım",
   },
   {
@@ -251,7 +251,7 @@ export const certificates = [
       tr: "Profesyonel profil oluşturma, networking stratejileri geliştirme ve LinkedIn'i daha verimli kullanma konularında bilgi kazandım.",
       en: "I gained knowledge about creating a professional profile, developing networking strategies, and using LinkedIn more efficiently.",
     },
-    image: "/certificates/linkedin.png",
+    image: "/certificates/linkedin.webp",
     category: "kişisel",
   },
   {

data/gallery.ts

@@ -1,18 +1,18 @@
 // Galeri resimleri – public/gallery/ klasörüne eklenen dosyaların yolları
 export const GALLERY_IMAGES: string[] = [
-  "/gallery/1.jpg",
+  "/gallery/1.webp",
-  "/gallery/2.jpg",
+  "/gallery/2.webp",
-  "/gallery/3.jpg",
+  "/gallery/3.webp",
-  "/gallery/4.jpg",
+  "/gallery/4.webp",
-  "/gallery/5.jpg",
+  "/gallery/5.webp",
-  "/gallery/6.jpg",
+  "/gallery/6.webp",
-  "/gallery/7.jpeg",
+  "/gallery/7.webp",
-  "/gallery/8.jpeg",
+  "/gallery/8.webp",
-  "/gallery/9.jpeg",
+  "/gallery/9.webp",
-  "/gallery/10.jpeg",
+  "/gallery/10.webp",
-  "/gallery/11.jpeg",
+  "/gallery/11.webp",
-  "/gallery/12.jpeg",
+  "/gallery/12.webp",
-  "/gallery/13.jpeg",
+  "/gallery/13.webp",
-  "/gallery/14.png",
+  "/gallery/14.webp",
-  "/gallery/15.png",
+  "/gallery/15.webp",
 ];

data/projects.ts

@@ -59,7 +59,7 @@ export const WEB_APPS: ProjectItem[] = [
       tr: "Kurumsal Portal",
       en: "Corporate Portal",
     },
-    image: "/projects/ostim.png",
+    image: "/projects/ostim.webp",
     href: "https://ostim.org.tr",
     technologies: OSTIM_TECHNOLOGIES,
     architecture: {
@@ -81,7 +81,7 @@ export const WEB_APPS: ProjectItem[] = [
       tr: "İstihdam Portalı",
       en: "Employment Portal",
     },
-    image: "/projects/ostim-istihdam.png",
+    image: "/projects/ostim-istihdam.webp",
     href: "https://ostimistihdam.com",
     technologies: OSTIM_TECHNOLOGIES,
     architecture: {
@@ -103,7 +103,7 @@ export const WEB_APPS: ProjectItem[] = [
       tr: "Dış Ticaret Portalı",
       en: "Foreign Trade Portal",
     },
-    image: "/projects/ostim-dis-ticaret.png",
+    image: "/projects/ostim-dis-ticaret.webp",
     href: "https://ostimdisticaret.net",
     technologies: OSTIM_TECHNOLOGIES,
     architecture: {
@@ -122,7 +122,7 @@ export const WEB_APPS: ProjectItem[] = [
       tr: "Freelance",
       en: "Freelance",
     },
-    image: "/projects/arc.png",
+    image: "/projects/arc.webp",
     technologies: ["Wix"],
     architecture: {
       tr: "Wix üzerinde yönetilebilir içerik ve kurumsal tanıtım sayfalarından oluşan, ihracat odaklı web sitesi yapısı.",
@@ -144,7 +144,7 @@ export const WEB_APPS: ProjectItem[] = [
       tr: "Açık Kaynak",
       en: "Open Source",
     },
-    image: "/projects/ataturk.png",
+    image: "/projects/ataturk.webp",
     technologies: ["React"],
     architecture: {
       tr: "React ile geliştirilen, kronoloji verisini etkileşimli bir zaman çizelgesi arayüzünde sunan istemci taraflı uygulama.",

data/references.ts

@@ -24,7 +24,7 @@ export const REFERENCES: Reference[] = [
       en: "Client - 2025",
     },
     rating: 5,
-    avatar: "/avatars/ali.png",
+    avatar: "/avatars/ali.webp",
     quote: {
       tr: "Web sitesi tam olarak istediğim gibi oldu. Poyraz benim gözden kaçırdığım detayları da düşündü, her kararı şeffaf şekilde anlattı ve beklentimin üstünde bir iş teslim etti.",
       en: "The website turned out exactly as I wanted. Poyraz thought of the details I missed, explained every decision transparently, and delivered a job beyond my expectations.",

next.config.ts

@@ -17,6 +17,38 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "i.ytimg.com",
       },
+      {
+        protocol: "https",
+        hostname: "images.pexels.com",
+      },
+      {
+        protocol: "https",
+        hostname: "miro.medium.com",
+      },
+      {
+        protocol: "https",
+        hostname: "www.c-sharpcorner.com",
+      },
+      {
+        protocol: "https",
+        hostname: "media.geeksforgeeks.org",
+      },
+      {
+        protocol: "https",
+        hostname: "edward-huang.com",
+      },
+      {
+        protocol: "https",
+        hostname: "encrypted-tbn0.gstatic.com",
+      },
+      {
+        protocol: "https",
+        hostname: "cdn.hashnode.com",
+      },
+      {
+        protocol: "https",
+        hostname: "i.sstatic.net",
+      },
     ],
   },
 };