<!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>

            <div class="max-w-lg mx-auto prose dark:prose-invert">
                <p class="text-gray-600 dark:text-slate-300 leading-relaxed">
                    Senior Fullstack Developer with 15+ years of experience building scalable solutions.
                    Passionate about open-source, DevOps automation, and exploring decentralized web protocols like
                    Nostr.
                </p>
            </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#512b11343c23347f29282b" 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="b1cbf1d4dcc3d49fc9c8cb">[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>

        </section>
    </main>

    <!-- Simple Footer -->
    <footer class="w-full text-center py-6 text-sm text-gray-400 dark:text-slate-600">
        <p>&copy;
            <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><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>