<!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 Practical Full-Stack Engineer &mdash; Shipping since 2005
            </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">
                    Veteran full-stack engineer and open-source contributor with over two decades of hands-on
                    web development. Shipping continuously since 2005, I have lived through the entire evolution
                    of the modern web stack&mdash;which gives me a grounded intuition for why today's patterns
                    exist and when to reach for them.
                </p>
                <p class="text-gray-600 dark:text-slate-300 leading-relaxed text-sm">
                    My strength is breadth paired with pragmatism. I work across paradigms and pick the right
                    tool for the job rather than forcing everything through a single lens.
                </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-globe-hemisphere-west text-base text-purple-500"></i>
                        Decentralized Web
                    </h2>
                    <p class="text-gray-600 dark:text-slate-300 text-sm leading-relaxed">
                        Open-source contributor and application builder on top of the <span class="font-medium text-slate-800 dark:text-slate-100">Nostr protocol</span>.
                    </p>
                </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-code text-base text-primary-500"></i>
                        Polyglot Backend Engineering
                    </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">Haskell</span> &mdash; strongly-typed functional programming</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">PHP / Symfony</span> &mdash; structured enterprise frameworks</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">Python / Django</span> &mdash; rapid application development</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">Node.js</span> &mdash; asynchronous runtime environments</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-wrench text-base text-teal-500"></i>
                        Reproducible Infrastructure &amp; DevOps
                    </h2>
                    <p class="text-gray-600 dark:text-slate-300 text-sm leading-relaxed">
                        <span class="font-medium text-slate-800 dark:text-slate-100">Nix</span> for bulletproof local environments;
                        <span class="font-medium text-slate-800 dark:text-slate-100">Docker</span> for application isolation and predictable production deployments.
                    </p>
                </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-browser text-base text-pink-500"></i>
                        Frontend &amp; Commercial Stacks
                    </h2>
                    <p class="text-gray-600 dark:text-slate-300 text-sm leading-relaxed">
                        <span class="font-medium text-slate-800 dark:text-slate-100">React, Next.js, Tailwind CSS</span> for optimised UIs;
                        extensive customisation of <span class="font-medium text-slate-800 dark:text-slate-100">Shopify</span> (plugins &amp; templates),
                        <span class="font-medium text-slate-800 dark:text-slate-100">WordPress</span>, and <span class="font-medium text-slate-800 dark:text-slate-100">Webflow</span>.
                    </p>
                </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-map-trifold 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;I look at technical documentation not as a crutch, but as a map to rapidly deploy stable, scalable, and decentralised web systems.&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#2852684d455a4d06505152" 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="7e043e1b130c1b50060704">[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>

            <!-- IMDB -->
            <a href="https://www.imdb.com/user/p.febeayahsjg2oatzn5bvzjwngm?ref_=hm_nv_profile" 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-yellow-500 dark:hover:border-yellow-400 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-film-strip text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-yellow-600 dark:group-hover:text-yellow-400 transition-colors">
                        IMDB</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Movies &amp; Watchlist</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-yellow-500 transition-colors"></i>
            </a>

            <!-- Goodreads -->
            <a href="https://www.goodreads.com/user/show/25148560-emre" 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-amber-700 dark:hover:border-amber-500 transition-all duration-200">
                <div
                    class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 group-hover:scale-110 transition-transform duration-200">
                    <i class="ph-duotone ph-books text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3
                        class="font-semibold text-slate-900 dark:text-white group-hover:text-amber-800 dark:group-hover:text-amber-400 transition-colors">
                        Goodreads</h3>
                    <p class="text-sm text-gray-500 dark:text-slate-400">Books &amp; Reading list</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-amber-700 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>
