Fix website loading issues

Author: SametDulger

next.config.ts

@@ -7,43 +7,55 @@ const nextConfig: NextConfig = {
     trailingSlash: true,
     skipTrailingSlashRedirect: true,
     distDir: 'out',
+    generateBuildId: () => 'build',
     // Custom domain - no basePath/assetPrefix needed
   }),
 
-  // Security Headers
-  async headers() {
-    return [
-      {
-        source: '/(.*)',
-        headers: [
-          {
-            key: 'X-Frame-Options',
-            value: 'DENY'
-          },
-          {
-            key: 'X-Content-Type-Options',
-            value: 'nosniff'
-          },
-          {
-            key: 'Referrer-Policy',
-            value: 'origin-when-cross-origin'
-          },
-          {
-            key: 'X-DNS-Prefetch-Control',
-            value: 'on'
-          },
-          {
-            key: 'Strict-Transport-Security',
-            value: 'max-age=31536000; includeSubDomains'
-          },
-          {
-            key: 'Permissions-Policy',
-            value: 'camera=(), microphone=(), geolocation=()'
-          }
-        ]
-      }
-    ]
-  },
+  // Security Headers (disabled for static export - handled by hosting provider)
+  ...(process.env.NODE_ENV !== 'production' && {
+    async headers() {
+      return [
+        {
+          source: '/(.*)',
+          headers: [
+            {
+              key: 'X-Frame-Options',
+              value: 'DENY'
+            },
+            {
+              key: 'X-Content-Type-Options',
+              value: 'nosniff'
+            },
+            {
+              key: 'Referrer-Policy',
+              value: 'origin-when-cross-origin'
+            },
+            {
+              key: 'X-DNS-Prefetch-Control',
+              value: 'on'
+            },
+            {
+              key: 'Cache-Control',
+              value: 'public, max-age=31536000, immutable'
+            },
+            {
+              key: 'Permissions-Policy',
+              value: 'camera=(), microphone=(), geolocation=()'
+            }
+          ]
+        },
+        {
+          source: '/_next/static/(.*)',
+          headers: [
+            {
+              key: 'Cache-Control',
+              value: 'public, max-age=31536000, immutable'
+            }
+          ]
+        }
+      ]
+    }
+  }),
 
   // Performance optimizations
   compress: true,

public/favicon.ico

@@ -1,16 +1,27 @@
 {
   "name": "Samet Dulger - Full Stack Developer",
   "short_name": "Samet Dulger",
-  "description": "Full Stack Developer Portfolio",
+  "description": "Full Stack Developer Portfolio - .NET & React Expert",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#000000",
   "theme_color": "#000000",
+  "orientation": "portrait-primary",
+  "scope": "/",
+  "lang": "en",
   "icons": [
     {
-      "src": "/icon.png",
-      "sizes": "any",
-      "type": "image/png"
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
-  ]
+  ],
+  "categories": ["productivity", "developer-tools", "portfolio"]
 } 

public/icon-192.png

@@ -0,0 +1,85 @@
+// Service Worker for font caching and offline support
+const CACHE_NAME = 'sametdulger-v1';
+const FONT_CACHE_NAME = 'fonts-v1';
+
+// Cache fonts and critical assets
+const FONTS_TO_CACHE = [
+  '/_next/static/media/',
+];
+
+const CRITICAL_ASSETS = [
+  '/',
+  '/manifest.json',
+  '/_next/static/css/',
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    Promise.all([
+      caches.open(CACHE_NAME).then((cache) => {
+        return cache.addAll(CRITICAL_ASSETS).catch(err => {
+          console.warn('Cache addAll failed:', err);
+        });
+      }),
+      caches.open(FONT_CACHE_NAME)
+    ])
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME && cacheName !== FONT_CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Handle font requests with aggressive caching
+  if (request.destination === 'font' || url.pathname.includes('.woff2') || url.pathname.includes('.woff')) {
+    event.respondWith(
+      caches.open(FONT_CACHE_NAME).then((cache) => {
+        return cache.match(request).then((cachedResponse) => {
+          if (cachedResponse) {
+            return cachedResponse;
+          }
+          
+          return fetch(request).then((response) => {
+            // Only cache successful font responses
+            if (response.status === 200) {
+              cache.put(request, response.clone());
+            }
+            return response;
+          }).catch(() => {
+            // Return a basic response if font fails to load
+            return new Response('', {
+              status: 204,
+              statusText: 'Font not available'
+            });
+          });
+        });
+      })
+    );
+    return;
+  }
+
+  // Handle other requests with network-first strategy
+  if (url.origin === location.origin) {
+    event.respondWith(
+      fetch(request).catch(() => {
+        return caches.match(request);
+      })
+    );
+  }
+}); 

public/icon-512.png

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function FontLoader() {
+  useEffect(() => {
+    // Font loading error handling
+    const handleFontLoadError = () => {
+      // Add fallback font loading logic
+      const style = document.createElement('style')
+      style.textContent = `
+        body {
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+        }
+        .font-mono {
+          font-family: Monaco, Consolas, 'Courier New', monospace !important;
+        }
+      `
+      document.head.appendChild(style)
+    }
+
+    // Check if fonts are loaded
+    if ('fonts' in document) {
+      document.fonts.ready.then(() => {
+        console.log('All fonts loaded successfully')
+      }).catch((error) => {
+        console.warn('Font loading failed, using fallback fonts:', error)
+        handleFontLoadError()
+      })
+
+      // Listen for font loading events
+      document.fonts.addEventListener('loadingdone', (event) => {
+        console.log(`Font loading completed: ${event.fontfaces.length} fonts loaded`)
+      })
+
+      document.fonts.addEventListener('loadingerror', (event) => {
+        console.warn('Font loading error detected, applying fallbacks')
+        handleFontLoadError()
+      })
+    }
+
+    // Fallback timeout - if fonts don't load within 3 seconds, use fallbacks
+    const fontTimeout = setTimeout(() => {
+      if (document.fonts && document.fonts.status !== 'loaded') {
+        console.warn('Font loading timeout, using fallback fonts')
+        handleFontLoadError()
+      }
+    }, 3000)
+
+    return () => {
+      clearTimeout(fontTimeout)
+    }
+  }, [])
+
+  return null
+} 

public/manifest.json

@@ -10,6 +10,15 @@
 
   body {
     line-height: 1.6;
+    font-display: swap; /* Ensure font-display swap for all fonts */
+  }
+  
+  /* Font loading optimizations */
+  .font-optimized {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   /* Critical above-the-fold styles */