<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emre Yılmaz (@delirehberi) - Personal Hub</title>
    <meta name="description"
        content="Personal landing page of Emre Yılmaz (delirehberi), Senior Fullstack Developer. Links to blog, projects, and social profiles.">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Tailwind Configuration for Custom Colors/Fonts if needed -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        slate: {
                            850: '#1e293b', // Custom darker slate
                            900: '#0f172a',
                        },
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Phosphor Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>

    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        /* Custom Scrollbar for a cleaner look */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #475569;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>

<body
    class="bg-gray-50 text-slate-800 transition-colors duration-300 dark:bg-slate-900 dark:text-slate-100 min-h-screen flex flex-col">

    <!-- Top Navigation / Dark Mode Toggle -->
    <nav class="w-full max-w-3xl mx-auto p-4 flex justify-end items-center">
        <button id="theme-toggle"
            class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-slate-800 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500"
            aria-label="Toggle Dark Mode">
            <!-- Sun Icon (shows in dark mode) -->
            <i class="ph-fill ph-sun text-xl hidden dark:block text-yellow-400"></i>
            <!-- Moon Icon (shows in light mode) -->
            <i class="ph-fill ph-moon text-xl block dark:hidden text-slate-600"></i>
        </button>
    </nav>

    <!-- Main Content -->
    <main class="flex-grow w-full max-w-2xl mx-auto px-6 py-8 md:py-16">

        <!-- Hero / Introduction -->
        <header class="text-center mb-12">
            <div class="relative inline-block mb-6 group">
                <!-- Profile Image sourced from GitHub -->
                <div
                    class="w-32 h-32 md:w-40 md:h-40 mx-auto rounded-full overflow-hidden border-4 border-white dark:border-slate-800 shadow-lg transition-transform duration-300 group-hover:scale-105">
                    <img src="https://github.com/delirehberi.png" alt="Emre Yılmaz" class="w-full h-full object-cover">
                </div>
                <!-- Status indicator (optional aesthetic touch) -->
                <div class="absolute bottom-2 right-2 md:right-4 w-5 h-5 bg-green-500 border-4 border-white dark:border-slate-900 rounded-full"
                    title="Available for work"></div>
            </div>

            <h1 class="text-3xl md:text-4xl font-bold tracking-tight mb-2 text-slate-900 dark:text-white">
                Emre Yılmaz
            </h1>
            <p class="text-primary-600 dark:text-primary-400 font-medium mb-4">@delirehberi</p>

            <p class="text-sm font-semibold uppercase tracking-widest text-primary-600 dark:text-primary-400 mb-6">
                Senior Fullstack Developer &mdash; 15+ Years Experience
            </p>

            <div class="text-left max-w-xl mx-auto space-y-5">
                <p class="text-gray-600 dark:text-slate-300 leading-relaxed text-sm">
                    A seasoned architect and engineer specializing in the design, development, and deployment of
                    high-scale, resilient systems. With over a decade and a half of experience, I bridge the gap
                    between robust backend architecture and intuitive frontend experiences.
                </p>

                <div class="rounded-xl border border-gray-100 dark:border-slate-700 bg-white dark:bg-slate-800/60 p-4 space-y-3">
                    <h2 class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                        <i class="ph-duotone ph-wrench text-base text-primary-500"></i>
                        Core Competencies
                    </h2>
                    <ul class="space-y-2 text-gray-600 dark:text-slate-300 text-sm leading-relaxed">
                        <li class="flex gap-2"><i class="ph-fill ph-caret-right text-primary-400 mt-0.5 flex-shrink-0"></i><span><span class="font-medium text-slate-800 dark:text-slate-100">Fullstack Architecture:</span> Expert in building end-to-end applications using modern frameworks and distributed systems.</span></li>
                        <li class="flex gap-2"><i class="ph-fill ph-caret-right text-primary-400 mt-0.5 flex-shrink-0"></i><span><span class="font-medium text-slate-800 dark:text-slate-100">DevOps &amp; Automation:</span> Streamlining CI/CD pipelines, Infrastructure as Code (IaC), and container orchestration to maximize developer velocity.</span></li>
                        <li class="flex gap-2"><i class="ph-fill ph-caret-right text-primary-400 mt-0.5 flex-shrink-0"></i><span><span class="font-medium text-slate-800 dark:text-slate-100">Scalability:</span> Proven track record of optimizing applications to handle millions of requests and massive datasets.</span></li>
                        <li class="flex gap-2"><i class="ph-fill ph-caret-right text-primary-400 mt-0.5 flex-shrink-0"></i><span><span class="font-medium text-slate-800 dark:text-slate-100">Open-Source Advocacy:</span> Active contributor to the global developer community, maintaining and improving shared tooling.</span></li>
                    </ul>
                </div>

                <div class="rounded-xl border border-gray-100 dark:border-slate-700 bg-white dark:bg-slate-800/60 p-4 space-y-3">
                    <h2 class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                        <i class="ph-duotone ph-globe-hemisphere-west text-base text-purple-500"></i>
                        Special Interests &amp; Innovation
                    </h2>
                    <ul class="space-y-2 text-gray-600 dark:text-slate-300 text-sm leading-relaxed">
                        <li class="flex gap-2"><i class="ph-fill ph-caret-right text-purple-400 mt-0.5 flex-shrink-0"></i><span><span class="font-medium text-slate-800 dark:text-slate-100">Decentralized Web:</span> Deeply involved in the evolution of the Nostr protocol and other censorship-resistant, sovereign communication layers.</span></li>
                        <li class="flex gap-2"><i class="ph-fill ph-caret-right text-purple-400 mt-0.5 flex-shrink-0"></i><span><span class="font-medium text-slate-800 dark:text-slate-100">Web3 &amp; P2P:</span> Exploring the intersection of peer-to-peer networking, cryptography, and decentralized identity.</span></li>
                        <li class="flex gap-2"><i class="ph-fill ph-caret-right text-purple-400 mt-0.5 flex-shrink-0"></i><span><span class="font-medium text-slate-800 dark:text-slate-100">Performance Engineering:</span> Obsessed with O(n) complexity, reducing latency, and squeezing every millisecond out of the critical path.</span></li>
                    </ul>
                </div>

                <blockquote class="flex gap-3 rounded-xl border border-primary-100 dark:border-primary-900/40 bg-primary-50 dark:bg-primary-900/20 p-4">
                    <i class="ph-duotone ph-rocket-launch text-xl text-primary-500 flex-shrink-0 mt-0.5"></i>
                    <p class="italic text-gray-500 dark:text-slate-400 text-sm leading-relaxed">
                        &ldquo;Complexity is the enemy of reliability. My goal is to build systems that are as simple as possible, but no simpler&mdash;ensuring they remain maintainable long after the initial commit.&rdquo;
                    </p>
                </blockquote>
            </div>
        </header>

        <!-- Links Grid -->
        <section class="grid gap-4 md:grid-cols-2">

            <!-- Blog -->
            <a href="https://blog.emre.xyz" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-500 dark:hover:border-primary-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-notebook text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                        My Blog</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Thoughts on tech &amp; life</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-primary-500 transition-colors"></i>
            </a>
            <!--Upwork-->
            <a href="https://www.upwork.com/freelancers/~0193fd6a7c0c7d5cb0" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-500 dark:hover:border-primary-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-file-code text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                        Upwork</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Freelance Profile</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-primary-500 transition-colors"></i>
            </a>

            <!--Lobsters-->
            <a href="https://lobste.rs/~delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-500 dark:hover:border-primary-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-link text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                        Lobsters</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Link sharing</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-primary-500 transition-colors"></i>
            </a>

            <!-- GitHub -->
            <a href="https://github.com/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-gray-900 dark:hover:border-white transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-gray-100 text-gray-900 dark:bg-slate-700 dark:text-white group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-github-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="font-semibold text-slate-900 dark:text-white">GitHub</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Code &amp; Open Source</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-gray-900 dark:group-hover:text-white transition-colors"></i>
            </a>

            <!-- Nostr -->
            <a href="https://nostr.emre.xyz" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-purple-500 dark:hover:border-purple-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400 group-hover:scale-110 transition-transform duration-200">
                    <!-- Using ChatCircle or a Network icon for Nostr -->
                    <i class="ph-duotone ph-chat-circle-dots text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
                        Nostr Client</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Decentralized social</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-purple-500 transition-colors"></i>
            </a>

            <!-- Resume -->
            <a href="https://emre.xyz/resume.pdf" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-file-text text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                        Resume</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Professional CV</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-blue-500 transition-colors"></i>
            </a>

            <!-- LinkedIn -->
            <a href="https://linkedin.com/in/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-blue-700 dark:hover:border-blue-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-linkedin-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">
                        LinkedIn</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Connect professionally</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-blue-700 transition-colors"></i>
            </a>

            <!-- YouTube -->
            <a href="https://youtube.com/@delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-red-500 dark:hover:border-red-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-youtube-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                        YouTube</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Tech talks &amp; Tutorials</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-red-500 transition-colors"></i>
            </a>

            <!--Soundcloud-->
            <a href="https://soundcloud.com/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-500 dark:hover:border-primary-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-soundcloud-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                        Soundcloud</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Some poetry records</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-primary-500 transition-colors"></i>
            </a>
            <!--Envelope-->
            <a href="/cdn-cgi/l/email-protection#9fe5dffaf2edfab1e7e6e5" target="_blank" rel="noopener noreferrer" class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-500 dark:hover:border-primary-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-envelope text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                        Mail</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400"><span class="__cf_email__" data-cfemail="740e34111906115a0c0d0e">[email&#160;protected]</span></p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-primary-500 transition-colors"></i>
            </a>

            <!-- Bluesky -->
            <a href="https://bsky.app/profile/emre.xyz" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-sky-500 dark:hover:border-sky-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-sky-100 text-sky-600 dark:bg-sky-900/30 dark:text-sky-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-butterfly text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors">
                        Bluesky</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">@emre.xyz</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-sky-500 transition-colors"></i>
            </a>

            <!-- Instagram -->
            <a href="https://www.instagram.com/delirehberi_th" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-pink-500 dark:hover:border-pink-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-pink-100 text-pink-600 dark:bg-pink-900/30 dark:text-pink-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-instagram-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors">
                        Instagram</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">@delirehberi_th</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-pink-500 transition-colors"></i>
            </a>

            <!-- Telegram -->
            <a href="https://t.me/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-sky-400 dark:hover:border-sky-300 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-sky-50 text-sky-500 dark:bg-sky-900/30 dark:text-sky-300 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-telegram-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-sky-500 dark:group-hover:text-sky-300 transition-colors">
                        Telegram</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">@delirehberi</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-sky-400 transition-colors"></i>
            </a>

            <!-- TikTok -->
            <a href="https://www.tiktok.com/@delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-slate-900 dark:hover:border-white transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-gray-100 text-slate-900 dark:bg-slate-700 dark:text-white group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-tiktok-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="font-semibold text-slate-900 dark:text-white">TikTok</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">@delirehberi</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-slate-900 dark:group-hover:text-white transition-colors"></i>
            </a>

            <!-- Spotify -->
            <a href="https://creators.spotify.com/pod/profile/delirehberi/" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-green-500 dark:hover:border-green-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-spotify-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">
                        Spotify</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Podcast</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-green-500 transition-colors"></i>
            </a>

            <!-- Medium -->
            <a href="https://delirehberi.medium.com/" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-slate-900 dark:hover:border-white transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-gray-100 text-slate-900 dark:bg-slate-700 dark:text-white group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-medium-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="font-semibold text-slate-900 dark:text-white">Medium</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Articles</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-slate-900 dark:group-hover:text-white transition-colors"></i>
            </a>

            <!-- Dev.to -->
            <a href="https://dev.to/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-slate-900 dark:hover:border-white transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-gray-100 text-slate-900 dark:bg-slate-700 dark:text-white group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-dev-to-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="font-semibold text-slate-900 dark:text-white">Dev.to</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Technical writing</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-slate-900 dark:group-hover:text-white transition-colors"></i>
            </a>

            <!-- Stack Overflow -->
            <a href="https://stackoverflow.com/users/673223/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-orange-500 dark:hover:border-orange-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-stack-overflow-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">
                        Stack Overflow</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Q&amp;A</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-orange-500 transition-colors"></i>
            </a>

            <!-- Reddit -->
            <a href="https://www.reddit.com/user/aybarscengaver/" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-orange-600 dark:hover:border-orange-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-reddit-logo text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-orange-700 dark:group-hover:text-orange-400 transition-colors">
                        Reddit</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">u/aybarscengaver</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-orange-600 transition-colors"></i>
            </a>

            <!-- Docker Hub -->
            <a href="https://hub.docker.com/u/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-cube text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                        Docker Hub</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Container images</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-blue-500 transition-colors"></i>
            </a>

            <!-- Flickr -->
            <a href="https://www.flickr.com/people/theylmz/" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-pink-600 dark:hover:border-pink-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-camera text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-pink-700 dark:group-hover:text-pink-400 transition-colors">
                        Flickr</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Photography</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-pink-600 transition-colors"></i>
            </a>

            <!-- SlideShare -->
            <a href="https://www.slideshare.net/AybarsCENGAVER" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-blue-600 dark:hover:border-blue-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-presentation-chart text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">
                        SlideShare</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Presentations</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-blue-600 transition-colors"></i>
            </a>

            <!-- Wikipedia -->
            <a href="https://tr.wikipedia.org/wiki/Kullan%C4%B1c%C4%B1:Delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-gray-500 dark:hover:border-gray-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-gray-100 text-gray-700 dark:bg-slate-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-book-open text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                        Wikipedia</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">TR contributor</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-gray-500 transition-colors"></i>
            </a>

            <!-- Guru -->
            <a href="https://www.guru.com/freelancers/delirehberi" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-teal-500 dark:hover:border-teal-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-teal-100 text-teal-600 dark:bg-teal-900/30 dark:text-teal-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-briefcase text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-teal-600 dark:group-hover:text-teal-400 transition-colors">
                        Guru</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Freelance Profile</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-teal-500 transition-colors"></i>
            </a>

            <!-- Arguman -->
            <a href="https://arguman.org/users/aybarscengaver" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-violet-500 dark:hover:border-violet-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-chat-teardrop-dots text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Arg&uuml;man</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Argument mapping</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-violet-500 transition-colors"></i>
            </a>

            <!-- Ekşi Sözlük -->
            <a href="https://eksisozluk.com/biri/theylmz" target="_blank" rel="noopener noreferrer"
                class="group relative flex items-center p-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-green-600 dark:hover:border-green-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-hash text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-green-700 dark:group-hover:text-green-400 transition-colors">
                        Ek&#351;i S&ouml;zl&uuml;k</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Turkish social dictionary</p>
                </div>
                <i
                    class="ph-bold ph-arrow-up-right absolute top-4 right-4 text-gray-300 dark:text-slate-600 group-hover:text-green-600 transition-colors"></i>
            </a>

        </section>
        <section class="mt-12 text-center text-sm text-gray-500 dark:text-slate-400">
            <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="module" src="https://esm.sh/@getalby/lightning-messageboard@latest"></script>
        <lightning-messageboard nwc-url="nostr+walletconnect://4581b6bd679f5e0eabab26bf32b78cbf877dfef83bb52970fff8109fcb5be726?relay=wss://relay.getalby.com/v1&secret=252326d9f945d3566e74ce1b7c75def7c327b07513b4718c7f9f27734a049ff4"></lightning-messageboard>
        </section>
    </main>

    <!-- Simple Footer -->
    <footer class="w-full text-center py-6 text-sm text-gray-400 dark:text-slate-600">
        <p>&copy;
            <script>document.write(new Date().getFullYear())</script> Emre Yılmaz. All rights reserved.
        </p>
    </footer>

    <!-- Dark Mode Script -->
    <script>
        const themeToggleBtn = document.getElementById('theme-toggle');
        const htmlElement = document.documentElement;

        // Check local storage or system preference
        const savedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
            htmlElement.classList.add('dark');
        } else {
            htmlElement.classList.remove('dark');
        }

        // Toggle logic
        themeToggleBtn.addEventListener('click', () => {
            if (htmlElement.classList.contains('dark')) {
                htmlElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            } else {
                htmlElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            }
        });
    </script>
</body>

</html>
