Atilla Demir : développeur Web, concepteur et blog créatif

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 June 2025

Effets d'arrière-plan et de chargement animés CSS

25 April 2025

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atilla Demir | Yaratıcı Zihin Günlüğü</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* Custom styles & Tailwind overrides */
        :root {
            --primary-color: #7B68EE; /* MediumSlateBlue - Canlı mor */
            --secondary-color: #5F4B8B; /* Rebeccapurple - Koyu mor */
            --dark-bg: #1A1C2E; /* Koyu lacivert */
            --light-text: #E0E0E0; /* Açık gri */
            --accent-color: #FF7043; /* Canlı Turuncu */
            --card-bg: rgba(255, 255, 255, 0.08); /* Hafif şeffaf kart */
            --border-color: rgba(255, 255, 255, 0.15); /* Hafif beyaz çerçeve */
            --transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

body {
            font-family: 'Inter', sans-serif;
            background-color: var(--dark-bg);
            color: var(--light-text);
            line-height: 1.6;
            scroll-behavior: smooth;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif; /* Başlıklar için Playfair Display */
            color: var(--light-text);
        }

/* Particles.js Background */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: 0;
            background: linear-gradient(135deg, var(--dark-bg) 0%, #3a3f6f 100%);
        }

/* Sticky Header */
        .main-header.scrolled {
            background-color: rgba(26, 28, 46, 0.9);
            backdrop-filter: blur(12px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            padding-top: 0.75rem; /* py-3 */
            padding-bottom: 0.75rem; /* py-3 */
        }

/* Custom underline for nav links */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: width 0.3s var(--transition-timing);
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        
        /* Hamburger Menu Animation */
        .hamburger-menu.active .line:nth-child(1) {
            transform: translateY(9.5px) rotate(45deg);
        }
        .hamburger-menu.active .line:nth-child(2) {
            opacity: 0;
        }
        .hamburger-menu.active .line:nth-child(3) {
            transform: translateY(-9.5px) rotate(-45deg);
        }

/* Typed.js Cursor */
        .typed-cursor {
            color: var(--primary-color) !important;
            font-size: 1em; /* Adjust relative to parent h1 font size */
            opacity: 1;
            animation: blink 0.7s infinite;
        }
        @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* Skill Bar Animation */
        .skill-progress {
            width: 0; /* Initial width for animation */
            transition: width 1.5s ease-out;
        }

/* Form success message */
        .form-message {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }
        .form-message.show {
            opacity: 1;
            visibility: visible;
        }

/* Enhanced Button Styles based on "Live Demo" code */
        .btn-custom {
            display: inline-block;
            padding: 0.8rem 2.2rem;
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 50px; /* More rounded as per "Live Demo" buttons */
            transition: all 0.3s var(--transition-timing);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Base shadow for pop */
            border: 2px solid transparent; /* Added border */
        }

.btn-primary-custom {
            background-color: var(--primary-color);
            color: var(--light-text);
            border-color: var(--primary-color); /* Match border to background initially */
        }
        .btn-primary-custom:hover {
            background-color: var(--secondary-color);
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(123, 104, 238, 0.5); /* Stronger shadow */
            border-color: var(--secondary-color);
        }

.btn-secondary-custom {
            background-color: transparent;
            color: var(--light-text);
            border-color: var(--light-text); /* White border */
        }
        .btn-secondary-custom:hover {
            background-color: var(--light-text);
            color: var(--dark-bg);
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(224, 224, 224, 0.3); /* Stronger shadow */
            border-color: var(--light-text);
        }

.btn-accent-custom {
            background-color: var(--accent-color);
            color: var(--light-text);
            border-color: var(--accent-color);
        }
        .btn-accent-custom:hover {
            background-color: #e85c34; /* Slightly darker accent on hover */
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255, 112, 67, 0.5); /* Stronger shadow */
            border-color: #e85c34;
        }

.submit-btn {
            background-color: var(--primary-color);
            color: var(--light-text);
            border: none;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s var(--transition-timing);
            display: inline-block;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .submit-btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(123, 104, 238, 0.5); /* Stronger shadow */
        }

/* Podcast platform buttons */
        .platform-btn {
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            transition: all 0.3s var(--transition-timing);
        }
        .platform-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.3);
        }
        /* Scroll to top button */
        #scroll-top-btn {
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        #scroll-top-btn:hover {
            transform: translateY(-5px) scale(1.05); /* Added scale on hover */
            box-shadow: 0 10px 20px rgba(123, 104, 238, 0.4);
        }
    </style>
</head>
<body class="antialiased">
    
    <div id="particles-js"></div>

<header class="main-header fixed w-full top-0 left-0 z-50 py-4 md:py-6 px-4 md:px-8 transition-all duration-300 ease-out">
        <div class="container mx-auto flex justify-between items-center">
            <a href="#home" class="text-3xl font-bold text-white flex items-center">
                Yaratıcı<span class="text-[var(--primary-color)]">Zihin</span>
                <i class="fas fa-brain text-[var(--primary-color)] text-2xl ml-2"></i>
            </a>

<nav class="hidden md:flex space-x-8 lg:space-x-12">
                <a href="#home" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">Anasayfa</a>
                <a href="#about" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">Hakkımda</a>
                <a href="#blog" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">Blog</a>
                <a href="#podcast" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">Podcast</a>
                <a href="#contact" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">İletişim</a>
            </nav>

<button id="hamburger-menu" class="md:hidden flex flex-col justify-between w-7 h-6 focus:outline-none z-50">
                <span class="line block w-full h-0.5 bg-white rounded transition-all duration-300"></span>
                <span class="line block w-full h-0.5 bg-white rounded transition-all duration-300"></span>
                <span class="line block w-full h-0.5 bg-white rounded transition-all duration-300"></span>
            </button>
        </div>

<div id="mobile-nav" class="fixed top-0 right-[-100%] w-3/4 h-full bg-[var(--dark-bg)] bg-opacity-95 backdrop-blur-md flex flex-col items-center justify-center transition-all duration-300 ease-in-out md:hidden z-40">
            <ul class="flex flex-col space-y-8 text-center">
                <li><a href="#home" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Anasayfa</a></li>
                <li><a href="#about" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Hakkımda</a></li>
                <li><a href="#blog" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Blog</a></li>
                <li><a href="#podcast" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Podcast</a></li>
                <li><a href="#contact" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">İletişim</a></li>
            </ul>
        </div>
    </header>

<section id="home" class="min-h-screen flex items-center py-20 px-4 md:px-8 relative z-10">
        <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
            
            <div class="text-center md:text-left">
                <h4 class="text-xl md:text-2xl font-medium text-[var(--primary-color)] mb-4 animate-fadeInUp delay-200">MERHABA, BEN</h4>
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-tight mb-6 animate-fadeInUp delay-400">
                    Atilla Demir, <br> <span id="typed-text" class="text-[var(--primary-color)]"></span>
                </h1>
                <p class="text-lg md:text-xl text-[var(--light-text)] mb-8 animate-fadeInUp delay-600">
                    Dijital dünyanın derinliklerine dalmayı seven bir yaratıcıyım. Burada tasarım, teknoloji, inovasyon ve kişisel gelişim üzerine düşüncelerimi ve keşiflerimi paylaşıyorum.
                </p>
                <div class="flex flex-col sm:flex-row justify-center md:justify-start gap-4 animate-fadeInUp delay-800">
                    <a href="#blog" class="btn-custom btn-primary-custom">
                        Yazılarımı Keşfet
                    </a>
                    <a href="#contact" class="btn-custom btn-secondary-custom">
                        İletişime Geç
                    </a>
                </div>
            </div>

<div class="relative flex justify-center md:justify-end mt-12 md:mt-0 animate-fadeIn delay-1000">
                <img src="https://placehold.co/500x500/7B68EE/FFFFFF?text=Atilla+Demir+Profil" alt="Atilla Demir Profil Resmi" class="w-full max-w-sm md:max-w-md lg:max-w-lg h-auto rounded-3xl shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500 ease-out">
                
                <div class="social-links absolute bottom-4 left-1/2 -translate-x-1/2 md:bottom-auto md:left-auto md:top-1/2 md:right-[-40px] md:translate-x-0 md:-translate-y-1/2 flex flex-row md:flex-col gap-5 bg-[var(--card-bg)] p-3 rounded-full shadow-lg border border-[var(--border-color)]">
                    <a href="#" target="_blank" aria-label="GitHub" class="text-xl text-white hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-github"></i></a>
                    <a href="#" target="_blank" aria-label="LinkedIn" class="text-xl text-white hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" target="_blank" aria-label="Twitter" class="text-xl text-white hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-twitter"></i></a>
                    <a href="#" target="_blank" aria-label="Instagram" class="text-xl text-white hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="py-16 md:py-24 px-4 md:px-8 relative z-10">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">
                    Hakkımda
                    <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-[var(--primary-color)] rounded-full"></span>
                </h2>
            </div>

<div class="text-center md:text-left">
                    <h3 class="text-3xl md:text-4xl font-bold text-[var(--primary-color)] mb-6">Ben Kimim ve Neler Yaparım?</h3>
                    <p class="text-lg text-[var(--light-text)] mb-6">
                        Ben Atilla Demir, yazılım geliştirme ve dijital tasarım alanında tutkulu bir yaratıcıyım. Sistem Mühendisliği eğitimimle birlikte, web dünyasının dinamiklerine ve kullanıcı deneyimini zenginleştirmeye odaklanıyorum. HTML, CSS ve JavaScript ile modern, estetik ve işlevsel arayüzler tasarlamayı çok seviyorum.
                    </p>
                    <p class="text-lg text-[var(--light-text)] mb-8">
                        Bu blog, dijital sanat, yeni teknolojiler, yaratıcı problem çözme ve kişisel öğrenme yolculuğumu paylaştığım bir platform. Amacım, bilgi birikimimi ve deneyimlerimi aktarırken, aynı zamanda ilham verici içerikler sunarak sizin de yaratıcı potansiyelinizi keşfetmenize yardımcı olmak.
                    </p>

<div class="skills-container space-y-5">
                        
                        <div class="skill-item">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-semibold text-white">Web Geliştirme (HTML, CSS, JS)</span>
                                <span class="font-bold text-[var(--primary-color)]">95%</span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2">
                                <div class="skill-progress h-full bg-[var(--primary-color)] rounded-full" data-progress="95%"></div>
                            </div>
                        </div>
                        
                        <div class="skill-item">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-semibold text-white">UX/UI Tasarım</span>
                                <span class="font-bold text-[var(--primary-color)]">85%</span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2">
                                <div class="skill-progress h-full bg-[var(--primary-color)] rounded-full" data-progress="85%"></div>
                            </div>
                        </div>
                        
                        <div class="skill-item">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-semibold text-white">Mobil Uygulama Geliştirme (Temel)</span>
                                <span class="font-bold text-[var(--primary-color)]">75%</span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2">
                                <div class="skill-progress h-full bg-[var(--primary-color)] rounded-full" data-progress="75%"></div>
                            </div>
                        </div>
                        
                        <div class="skill-item">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-semibold text-white">İçerik Üretimi & Blog Yazarlığı</span>
                                <span class="font-bold text-[var(--primary-color)]">90%</span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2">
                                <div class="skill-progress h-full bg-[var(--primary-color)] rounded-full" data-progress="90%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <a href="#" class="btn-custom btn-accent-custom mt-10">
                        CV'mi İndir
                    </a>
                </div>
            </div>
        </div>
    </section>

<section id="blog" class="py-16 md:py-24 px-4 md:px-8 relative z-10">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">
                    Son Blog Yazılarım
                    <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-[var(--primary-color)] rounded-full"></span>
                </h2>
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                
                <article class="blog-card bg-[var(--card-bg)] backdrop-blur-md rounded-2xl p-6 shadow-xl border border-[var(--border-color)] flex flex-col transition-all duration-300 hover:scale-[1.02] hover:bg-opacity-15 hover:shadow-2xl">
                    <div class="h-48 overflow-hidden rounded-xl mb-6">
                        <img src="https://placehold.co/800x500/FF7043/FFFFFF?text=Renk+Psikolojisi" alt="Markalaşmada Renk Psikolojisi" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Renk Psikolojisi ve Marka Kimliği</h3>
                    <div class="flex items-center justify-center sm:justify-start text-sm text-gray-400 mb-4 gap-x-4">
                        <span><i class="far fa-calendar-alt text-[var(--accent-color)] mr-2"></i> 15 Haz 2024</span>
                        <span><i class="far fa-clock text-[var(--accent-color)] mr-2"></i> 7 dk.</span>
                    </div>
                    <p class="text-[var(--light-text)] mb-6 flex-grow">
                        Renklerin markaların bilinirliği ve tüketici algısı üzerindeki derin etkilerini keşfedin. Logodan web sitesine, doğru renk seçimi markanızın ruhunu nasıl yansıtır?
                    </p>
                    <a href="#" class="read-more-btn text-[var(--accent-color)] font-semibold flex items-center justify-center sm:justify-start hover:underline group">
                        Devamını Oku
                        <i class="fas fa-arrow-right ml-2 transition-all duration-300 group-hover:ml-4"></i>
                    </a>
                </article>
                
                <article class="blog-card bg-[var(--card-bg)] backdrop-blur-md rounded-2xl p-6 shadow-xl border border-[var(--border-color)] flex flex-col transition-all duration-300 hover:scale-[1.02] hover:bg-opacity-15 hover:shadow-2xl">
                    <div class="h-48 overflow-hidden rounded-xl mb-6">
                        <img src="https://placehold.co/800x500/7B68EE/FFFFFF?text=Minimalist+Tasarım" alt="Web Tasarımında Minimalizm" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Web Tasarımında Minimalist Yaklaşım</h3>
                    <div class="flex items-center justify-center sm:justify-start text-sm text-gray-400 mb-4 gap-x-4">
                        <span><i class="far fa-calendar-alt text-[var(--accent-color)] mr-2"></i> 28 May 2024</span>
                        <span><i class="far fa-clock text-[var(--accent-color)] mr-2"></i> 9 dk.</span>
                    </div>
                    <p class="text-[var(--light-text)] mb-6 flex-grow">
                        Daha azın daha çok olduğu felsefesiyle, sade ve işlevsel web tasarımlarının kullanıcı deneyimini nasıl iyileştirdiğini inceleyin.
                    </p>
                    <a href="#" class="read-more-btn text-[var(--accent-color)] font-semibold flex items-center justify-center sm:justify-start hover:underline group">
                        Devamını Oku
                        <i class="fas fa-arrow-right ml-2 transition-all duration-300 group-hover:ml-4"></i>
                    </a>
                </article>
                
                <article class="blog-card bg-[var(--card-bg)] backdrop-blur-md rounded-2xl p-6 shadow-xl border border-[var(--border-color)] flex flex-col transition-all duration-300 hover:scale-[1.02] hover:bg-opacity-15 hover:shadow-2xl">
                    <div class="h-48 overflow-hidden rounded-xl mb-6">
                        <img src="https://placehold.co/800x500/FF7043/FFFFFF?text=Yaratıcı+Blok" alt="Yaratıcı Blok: Üstesinden Nasıl Gelinir?" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Yaratıcı Bloklarla Başa Çıkma Yolları</h3>
                    <div class="flex items-center justify-center sm:justify-start text-sm text-gray-400 mb-4 gap-x-4">
                        <span><i class="far fa-calendar-alt text-[var(--accent-color)] mr-2"></i> 12 Nis 2024</span>
                        <span><i class="far fa-clock text-[var(--accent-color)] mr-2"></i> 6 dk.</span>
                    </div>
                    <p class="text-[var(--light-text)] mb-6 flex-grow">
                        İlhamın tükendiği anlar herkesin başına gelebilir. Bu yazıda, yaratıcı tıkanıklıkları aşmak ve yeniden akışa geçmek için pratik teknikleri keşfedin.
                    </p>
                    <a href="#" class="read-more-btn text-[var(--accent-color)] font-semibold flex items-center justify-center sm:justify-start hover:underline group">
                        Devamını Oku
                        <i class="fas fa-arrow-right ml-2 transition-all duration-300 group-hover:ml-4"></i>
                    </a>
                </article>
                
                <article class="blog-card bg-[var(--card-bg)] backdrop-blur-md rounded-2xl p-6 shadow-xl border border-[var(--border-color)] flex flex-col transition-all duration-300 hover:scale-[1.02] hover:bg-opacity-15 hover:shadow-2xl">
                    <div class="h-48 overflow-hidden rounded-xl mb-6">
                        <img src="https://placehold.co/800x500/7B68EE/FFFFFF?text=Frontend+Araçları" alt="Modern Frontend Araçları" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">2025'ün Gözde Frontend Araçları</h3>
                    <div class="flex items-center justify-center sm:justify-start text-sm text-gray-400 mb-4 gap-x-4">
                        <span><i class="far fa-calendar-alt text-[var(--accent-color)] mr-2"></i> 29 Mar 2024</span>
                        <span><i class="far fa-clock text-[var(--accent-color)] mr-2"></i> 10 dk.</span>
                    </div>
                    <p class="text-[var(--light-text)] mb-6 flex-grow">
                        Frontend geliştirme dünyasındaki en son trendleri ve projelerinizi hızlandıracak popüler kütüphaneleri ve framework'leri yakından tanıyın.
                    </p>
                    <a href="#" class="read-more-btn text-[var(--accent-color)] font-semibold flex items-center justify-center sm:justify-start hover:underline group">
                        Devamını Oku
                        <i class="fas fa-arrow-right ml-2 transition-all duration-300 group-hover:ml-4"></i>
                    </a>
                </article>
            </div>
            <div class="text-center mt-12">
                <a href="#" class="btn-custom btn-primary-custom px-10 py-4">
                    Tüm Yazıları Görüntüle
                </a>
            </div>
        </div>
    </section>

<section id="podcast" class="py-16 md:py-24 px-4 md:px-8 relative z-10">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">
                    Yaratıcı Sohbetler Podcast'i
                    <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-[var(--primary-color)] rounded-full"></span>
                </h2>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                
                <div class="podcast-image flex justify-center md:justify-start order-2 md:order-1">
                    <img src="https://placehold.co/600x400/FF7043/FFFFFF?text=Podcast+Stüdyosu" alt="Podcast Kayıt Stüdyosu" class="w-full max-w-lg rounded-3xl shadow-2xl transform -rotate-3 hover:rotate-0 transition-transform duration-500 ease-out">
                </div>
                
                
                <div class="podcast-text text-center md:text-left order-1 md:order-2">
                    <h3 class="text-3xl md:text-4xl font-bold text-[var(--primary-color)] mb-6">Fikirlerden İlham Alan Sohbetler</h3>
                    <p class="text-lg text-[var(--light-text)] mb-8">
                        Farklı sektörlerden başarılı yaratıcılarla, onların ilham kaynakları, kariyer yolculukları ve projeleri hakkında derinlemesine sohbetler. Her bölümde yeni bir bakış açısı ve motivasyon bulacaksınız.
                    </p>

<div class="latest-episode-card bg-[var(--card-bg)] p-6 rounded-2xl shadow-xl border border-[var(--border-color)] mb-8 text-left">
                        <h4 class="text-xl font-bold text-white mb-3">Son Bölüm: Episode 24 - Sürdürülebilir Tasarım ve Lisa Chen</h4>
                        <p class="text-base text-gray-400 mb-4">10 Haziran 2024 • 45 dk.</p>
                        <audio controls class="w-full rounded-lg bg-gray-800">
                            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
                            Tarayıcınız ses öğesini desteklemiyor.
                        </audio>
                    </div>

<div class="podcast-platforms flex flex-wrap justify-center md:justify-start gap-4">
                        <a href="#" class="flex items-center px-6 py-3 rounded-full font-semibold text-white bg-[#1DB954] hover:bg-[#158f40] transition-transform duration-300 hover:scale-105 platform-btn">
                            <i class="fab fa-spotify mr-3 text-lg"></i> Spotify
                        </a>
                        <a href="#" class="flex items-center px-6 py-3 rounded-full font-semibold text-white bg-[#FD3A69] hover:bg-[#c92f55] transition-transform duration-300 hover:scale-105 platform-btn">
                            <i class="fab fa-apple mr-3 text-lg"></i> Apple Podcasts
                        </a>
                        <a href="#" class="flex items-center px-6 py-3 rounded-full font-semibold text-white bg-[#4285F4] hover:bg-[#346dc4] transition-transform duration-300 hover:scale-105 platform-btn">
                            <i class="fab fa-google-play mr-3 text-lg"></i> Google Podcasts
                        </a>
                        <a href="#" class="flex items-center px-6 py-3 rounded-full font-semibold text-white bg-[#F26522] hover:bg-[#c1501b] transition-transform duration-300 hover:scale-105 platform-btn">
                            <i class="fas fa-rss mr-3 text-lg"></i> RSS Beslemesi
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-16 md:py-24 px-4 md:px-8 relative z-10">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">
                    İletişime Geçin
                    <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-[var(--primary-color)] rounded-full"></span>
                </h2>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                
                <div class="contact-info flex flex-col gap-8">
                    <div class="flex items-start gap-6 bg-[var(--card-bg)] p-6 rounded-2xl shadow-xl border border-[var(--border-color)]">
                        <div class="contact-icon text-3xl text-[var(--primary-color)] flex-shrink-0">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-details">
                            <h3 class="text-2xl font-bold text-white mb-2">Konum</h3>
                            <p class="text-lg text-gray-300">İstanbul, Türkiye</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-6 bg-[var(--card-bg)] p-6 rounded-2xl shadow-xl border border-[var(--border-color)]">
                        <div class="contact-icon text-3xl text-[var(--primary-color)] flex-shrink-0">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-details">
                            <h3 class="text-2xl font-bold text-white mb-2">E-posta</h3>
                            <p class="text-lg text-gray-300">info@atillademirblog.com</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-6 bg-[var(--card-bg)] p-6 rounded-2xl shadow-xl border border-[var(--border-color)]">
                        <div class="contact-icon text-3xl text-[var(--primary-color)] flex-shrink-0">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="contact-details">
                            <h3 class="text-2xl font-bold text-white mb-2">Telefon</h3>
                            <p class="text-lg text-gray-300">+90 (5XX) XXX-XXXX</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-6 bg-[var(--card-bg)] p-6 rounded-2xl shadow-xl border border-[var(--border-color)]">
                        <div class="contact-icon text-3xl text-[var(--primary-color)] flex-shrink-0">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="contact-details">
                            <h3 class="text-2xl font-bold text-white mb-2">Çalışma Saatleri</h3>
                            <p class="text-lg text-gray-300">Pzt-Cum: 09:00 - 17:00</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="contact-form-container bg-[var(--card-bg)] p-8 rounded-2xl shadow-xl border border-[var(--border-color)]">
                    <h3 class="text-3xl font-bold text-white mb-8 text-center">Bana Bir Mesaj Gönderin</h3>
                    <form id="contact-form" class="space-y-6">
                        <div>
                            <input type="text" id="name" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-[var(--primary-color)] focus:ring-2 focus:ring-[var(--primary-color)] transition-all duration-300" placeholder="Adınız Soyadınız" required>
                        </div>
                        <div>
                            <input type="email" id="email" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-[var(--primary-color)] focus:ring-2 focus:ring-[var(--primary-color)] transition-all duration-300" placeholder="E-posta Adresiniz" required>
                        </div>
                        <div>
                            <input type="text" id="subject" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-[var(--primary-color)] focus:ring-2 focus:ring-[var(--primary-color)] transition-all duration-300" placeholder="Konu (Opsiyonel)">
                        </div>
                        <div>
                            <input id="message" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-[var(--primary-color)] focus:ring-2 focus:ring-[var(--primary-color)] transition-all duration-300 min-h-[150px] resize-y" placeholder="Mesajınız" required/>
                        </div>
                        <button type="submit" class="submit-btn w-full">
                            Mesajı Gönder
                        </button>
                    </form>
                    
                    <div id="form-success-message" class="form-message mt-6 p-4 bg-green-600 text-white rounded-lg text-center">
                        <i class="fas fa-check-circle mr-2"></i> Mesajınız başarıyla gönderildi! Teşekkür ederiz.
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-gray-900 py-12 px-4 md:px-8 relative z-10">
        <div class="container mx-auto text-center">
            <a href="#home" class="footer-logo text-4xl font-bold text-white mb-6 inline-block">
                Yaratıcı<span class="text-[var(--primary-color)]">Zihin</span>
            </a>
            
            <ul class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg mb-8">
                <li><a href="#home" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">Anasayfa</a></li>
                <li><a href="#about" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">Hakkımda</a></li>
                <li><a href="#blog" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">Blog</a></li>
                <li><a href="#podcast" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">Podcast</a></li>
                <li><a href="#contact" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">İletişim</a></li>
            </ul>
            
            <div class="flex justify-center gap-6 text-2xl mb-8">
                <a href="#" target="_blank" aria-label="GitHub" class="text-gray-300 hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-github"></i></a>
                <a href="#" target="_blank" aria-label="LinkedIn" class="text-gray-300 hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" target="_blank" aria-label="Twitter" class="text-gray-300 hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-twitter"></i></a>
                <a href="#" target="_blank" aria-label="Dribbble" class="text-gray-300 hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-dribbble"></i></a>
                <a href="#" target="_blank" aria-label="Instagram" class="text-gray-300 hover:text-[var(--primary-color)] transition-transform hover:scale-110"><i class="fab fa-instagram"></i></a>
            </div>
            
            <p class="text-gray-500 text-sm">
                © 2025 Yaratıcı Zihin. Tüm Hakları Saklıdır. Atilla Demir tarafından sevgiyle tasarlandı.
            </p>
        </div>
    </footer>

<button id="scroll-top-btn" class="fixed bottom-8 right-8 w-14 h-14 bg-[var(--primary-color)] text-white rounded-full flex items-center justify-center text-2xl shadow-lg opacity-0 invisible transition-all duration-300 ease-in-out z-50 hover:bg-[var(--secondary-color)] hover:scale-110">
        <i class="fas fa-arrow-up"></i>
    </button>

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <script>
        // Mobile Navigation Toggle
        const hamburger = document.getElementById('hamburger-menu');
        const mobileNav = document.getElementById('mobile-nav');
        const mobileNavLinks = mobileNav.querySelectorAll('.nav-link');

hamburger.addEventListener('click', () => {
            mobileNav.classList.toggle('right-[-100%]');
            mobileNav.classList.toggle('right-0');
            hamburger.classList.toggle('active');
        });

mobileNavLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileNav.classList.remove('right-0');
                mobileNav.classList.add('right-[-100%]');
                hamburger.classList.remove('active');
            });
        });

// Sticky Header on Scroll
        const mainHeader = document.querySelector('.main-header');
        window.addEventListener('scroll', () => {
            mainHeader.classList.toggle('scrolled', window.scrollY > 80);
        });

// Scroll to Top Button
        const scrollTopBtn = document.getElementById('scroll-top-btn');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 500) {
                scrollTopBtn.classList.add('opacity-100', 'visible');
            } else {
                scrollTopBtn.classList.remove('opacity-100', 'visible');
            }
        });
        scrollTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Typed.js Initialization for Hero Section
        // Ensures Typed.js is initialized only after the DOM is ready
        document.addEventListener('DOMContentLoaded', () => {
            if (document.getElementById('typed-text')) {
                new Typed("#typed-text", {
                    strings: ["Yaratıcı Geliştirici", "Web Tasarımcısı", "İçerik Üreticisi", "Dijital Sanatçı"],
                    typeSpeed: 60,
                    backSpeed: 45,
                    loop: true,
                    showCursor: true,
                    cursorChar: '|',
                });
            }
        });

// Skill Bars Animation on Scroll (Intersection Observer)
        const skillProgressBars = document.querySelectorAll('.skill-progress');
        const aboutSection = document.getElementById('about');

if (aboutSection) {
            skillObserver.observe(aboutSection);
        }

// Contact Form Submission (without backend)
        const contactForm = document.getElementById('contact-form');
        const formSuccessMessage = document.getElementById('form-success-message');

if (contactForm) {
            contactForm.addEventListener('submit', (e) => {
                e.preventDefault(); // Prevent default form submission

// Display success message
                formSuccessMessage.classList.add('show');

// Hide message after 5 seconds
                setTimeout(() => {
                    formSuccessMessage.classList.remove('show');
                }, 5000);

contactForm.reset(); // Clear the form fields
            });
        }

// Smooth Scroll for Navigation Links & Active Link Highlighting
        const navLinks = document.querySelectorAll('.nav-link');
        const sections = document.querySelectorAll('section[id]');
        const mainHeaderElement = document.querySelector('.main-header'); // Reference to the header

function smoothScrollAndHighlight(e) {
            if (e.target.matches('a[href^="#"]')) {
                e.preventDefault();
                const targetId = e.target.getAttribute('href');
                const targetElement = document.querySelector(targetId);

if (targetElement) {
                    const headerHeight = mainHeaderElement.offsetHeight; // Get dynamic header height
                    const offsetPosition = targetElement.offsetTop - headerHeight - 20; // Extra padding
                    window.scrollTo({
                        top: offsetPosition,
                        behavior: 'smooth'
                    });
                }
            }
        }

function highlightNavLink() {
            let currentActiveSection = '';
            const headerHeight = mainHeaderElement.offsetHeight; // Get dynamic header height
            sections.forEach(section => {
                const sectionTop = section.offsetTop - headerHeight - 30; // Adjusted offset
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {
                    currentActiveSection = section.getAttribute('id');
                }
            });

navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === `#${currentActiveSection}`) {
                    link.classList.add('active');
                } else if (currentActiveSection === '' && link.getAttribute('href') === '#home') {
                    // Default to 'home' if at the very top or no section is active
                    link.classList.add('active');
                }
            });
        }

document.addEventListener('DOMContentLoaded', () => {
            // Add click listeners to all nav links (desktop and mobile)
            document.querySelectorAll('nav a').forEach(link => {
                link.addEventListener('click', smoothScrollAndHighlight);
            });
            highlightNavLink(); // Initial call
        });
        window.addEventListener('scroll', highlightNavLink);

// Particles.js Configuration
        particlesJS("particles-js", {
            "particles": {
                "number": {
                    "value": 80,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": "#7B68EE" /* Primary color for particles */
                },
                "shape": {
                    "type": "circle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    }
                },
                "opacity": {
                    "value": 0.5,
                    "random": false,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 3,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#7B68EE", /* Primary color for lines */
                    "opacity": 0.4,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 2,
                    "direction": "none",
                    "random": false,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": false,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": true,
                        "mode": "grab"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 140,
                        "line_linked": {
                            "opacity": 1
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 40,
                        "duration": 2,
                        "opacity": 8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });
    </script>
</body>
</html>

Atilla Demir : développeur Web, concepteur et blog créatif

Recommandé

Un code de Metehan

Effets d'arrière-plan et de chargement animés CSS

Un code de Metehan

HTML

CSS

JS

Recommandé

Un code de Metehan

Effets d'arrière-plan et de chargement animés CSS

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS