Spaces:
Running
Running
'€', '₺', '%', '∞', '∑', '∫', '∏', '∂']; function createElement() { const element = document.createElement('div'); element.className = 'bg-element'; // Randomly decide if it's a formula or number if (Math.random() > 0.5) { element.textContent = formulas[Math.floor(Math.random() * formulas.length)]; element.classList.add('formula'); } else { element.textContent = numbers[Math.floor(Math.random() * numbers.length)]; } // Random position and size element.style.left = Math.random() * 100 + 'vw'; element.style.top = Math.random() * 100 + 'vh'; element.style.fontSize = (Math.random() * 1 + 0.5) + 'rem'; // Random animation duration and delay const duration = Math.random() * 20 + 10; const delay = Math.random() * 5; element.style.animation = `float ${duration}s ${delay}s infinite linear`; bgElements.appendChild(element); } // Create initial elements for (let i = 0; i < 30; i++) { createElement(); } // Add new elements periodically setInterval(createElement, 3000); // Highlight active navigation link const sections = document.querySelectorAll('section'); const navLinks = document.querySelectorAll('.nav-link'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (pageYOffset >= (sectionTop - 300)) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active-nav'); if (link.getAttribute('href') === `#${current}`) { link.classList.add('active-nav'); } }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); window.scrollTo({ top: targetElement.offsetTop - 100, behavior: 'smooth' }); }); }); - Initial Deployment
372261a
verified
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prof. Dr. Arif Yavuz - Akademik Profil</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| .bg-elements { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .bg-element { | |
| position: absolute; | |
| color: rgba(102, 126, 234, 0.1); | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| opacity: 0.15; | |
| user-select: none; | |
| animation: float 15s infinite linear; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 100% { | |
| transform: translateY(-1000px) rotate(720deg); | |
| } | |
| } | |
| @keyframes sway { | |
| 0%, 100% { | |
| transform: translateX(0); | |
| } | |
| 50% { | |
| transform: translateX(100px); | |
| } | |
| } | |
| .formula { | |
| font-style: italic; | |
| font-family: 'Times New Roman', serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -38px; | |
| top: 0; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #667eea; | |
| border: 4px solid #764ba2; | |
| } | |
| .publication-item { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .publication-item:hover { | |
| border-left-color: #667eea; | |
| background-color: rgba(102, 126, 234, 0.05); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #667eea; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .active-nav::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Animated Background Elements --> | |
| <div class="bg-elements" id="bgElements"> | |
| <!-- Elements will be added dynamically --> | |
| </div> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-12 md:py-20"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 flex justify-center mb-8 md:mb-0"> | |
| <div class="w-48 h-48 md:w-64 md:h-64 rounded-full border-4 border-white shadow-xl overflow-hidden"> | |
| <img src="https://via.placeholder.com/300" alt="Prof. Dr. Arif Yavuz" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 text-center md:text-left px-4"> | |
| <h1 class="text-3xl md:text-5xl font-bold mb-2">Prof. Dr. Arif Yavuz</h1> | |
| <p class="text-xl md:text-2xl mb-4">Çalışma Ekonomisi ve Endüstri İlişkileri Uzmanı</p> | |
| <div class="flex flex-wrap justify-center md:justify-start gap-2 mb-6"> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Ekonomi</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Finans</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Şirket Yönetimi</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Endüstri İlişkileri</span> | |
| </div> | |
| <div class="flex justify-center md:justify-start space-x-4"> | |
| <a href="#contact" class="bg-white text-indigo-700 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition duration-300 shadow-md">İletişim</a> | |
| <a href="#publications" class="border-2 border-white text-white px-6 py-2 rounded-full font-semibold hover:bg-white hover:text-indigo-700 transition duration-300">Yayınlar</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="sticky top-0 bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex justify-center md:justify-start space-x-1 md:space-x-6 overflow-x-auto py-4 hide-scrollbar"> | |
| <a href="#about" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600 font-medium">Hakkında</a> | |
| <a href="#education" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600 font-medium">Eğitim</a> | |
| <a href="#experience" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600 font-medium">Deneyim</a> | |
| <a href="#expertise" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600 font-medium">Uzmanlık</a> | |
| <a href="#publications" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600 font-medium">Yayınlar</a> | |
| <a href="#projects" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600 font-medium">Projeler</a> | |
| <a href="#contact" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600 font-medium">İletişim</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-12"> | |
| <!-- About Section --> | |
| <section id="about" class="mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <div class="h-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full w-12"></div> | |
| <h2 class="ml-4 text-3xl font-bold text-gray-800">Hakkında</h2> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8"> | |
| <p class="text-gray-700 leading-relaxed mb-4"> | |
| Prof. Dr. Arif Yavuz, 1965 yılında Rize'de doğmuş olup lise eğitimini Deniz Lisesi'nde tamamlamıştır. Lisans eğitimini İstanbul Üniversitesi İktisat Fakültesi Çalışma Ekonomisi ve Endüstri İlişkileri Bölümünde birincilikle tamamlayan Yavuz, aynı bölümde 1989 yılında araştırma görevlisi olarak akademik kariyerine adım atmıştır. | |
| </p> | |
| <p class="text-gray-700 leading-relaxed mb-4"> | |
| İstanbul Üniversitesi Sosyal Bilimler Enstitüsü'nde Çalışma Ekonomisi ve Endüstri İlişkileri alanında yüksek lisansını (1989-1991) ve doktorasını (1991-1995) tamamlayarak <span class="font-semibold text-indigo-600">"Esnek Çalışma ve Endüstri İlişkilerine Etkisi"</span> başlıklı doktora tezini 1995 yılında başarıyla savunmuştur. | |
| </p> | |
| <p class="text-gray-700 leading-relaxed"> | |
| Akademik yükselişine aynı üniversitede devam eden Yavuz, 1995'te doktorasını tamamladıktan sonra öğretim üyesi olarak görev almış; 2005 yılında doçent, 2010 yılında profesör unvanını elde etmiştir. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-indigo-100 rounded-xl p-6 flex items-start card-hover transition duration-300"> | |
| <div class="bg-indigo-600 text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-graduation-cap text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800 mb-2">30+ Yıllık Akademik Kariyer</h3> | |
| <p class="text-gray-600">1989'dan beri İstanbul Üniversitesi'nde akademisyenlik</p> | |
| </div> | |
| </div> | |
| <div class="bg-purple-100 rounded-xl p-6 flex items-start card-hover transition duration-300"> | |
| <div class="bg-purple-600 text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-book text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800 mb-2">200+ Akademik Yayın</h3> | |
| <p class="text-gray-600">Ulusal ve uluslararası dergilerde yayınlanmış makaleler</p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-100 rounded-xl p-6 flex items-start card-hover transition duration-300"> | |
| <div class="bg-blue-600 text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-chalkboard-teacher text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800 mb-2">9 Araştırma Projesi</h3> | |
| <p class="text-gray-600">Çalışma yaşamı ve ekonomi üzerine araştırmalar</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <div class="h-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full w-12"></div> | |
| <h2 class="ml-4 text-3xl font-bold text-gray-800">Eğitim</h2> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute left-8 md:left-1/2 h-full w-1 bg-gradient-to-b from-indigo-400 to-purple-500 transform -translate-x-1/2"></div> | |
| <div class="mb-8 flex justify-between items-center w-full"> | |
| <div class="order-1 md:w-5/12"></div> | |
| <div class="order-1 md:w-5/12 px-4 py-4"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h3 class="text-lg font-bold text-indigo-600 mb-2">Doktora</h3> | |
| <p class="text-gray-600 mb-1">Çalışma Ekonomisi ve Endüstri İlişkileri</p> | |
| <p class="text-gray-500 text-sm">1991 - 1995</p> | |
| <p class="text-gray-700 mt-2">"Esnek Çalışma ve Endüstri İlişkilerine Etkisi" tezi</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8 flex justify-between items-center w-full"> | |
| <div class="order-1 md:w-5/12 px-4 py-4"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h3 class="text-lg font-bold text-indigo-600 mb-2">Yüksek Lisans</h3> | |
| <p class="text-gray-600 mb-1">Çalışma Ekonomisi ve Endüstri İlişkileri</p> | |
| <p class="text-gray-500 text-sm">1989 - 1991</p> | |
| <p class="text-gray-700 mt-2">İstanbul Üniversitesi Sosyal Bilimler Enstitüsü</p> | |
| </div> | |
| </div> | |
| <div class="order-1 md:w-5/12"></div> | |
| </div> | |
| <div class="mb-8 flex justify-between items-center w-full"> | |
| <div class="order-1 md:w-5/12"></div> | |
| <div class="order-1 md:w-5/12 px-4 py-4"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h3 class="text-lg font-bold text-indigo-600 mb-2">Lisans</h3> | |
| <p class="text-gray-600 mb-1">Çalışma Ekonomisi ve Endüstri İlişkileri</p> | |
| <p class="text-gray-500 text-sm">1985 - 1989</p> | |
| <p class="text-gray-700 mt-2">İstanbul Üniversitesi İktisat Fakültesi (Birincilik)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center w-full"> | |
| <div class="order-1 md:w-5/12 px-4 py-4"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h3 class="text-lg font-bold text-indigo-600 mb-2">Lise</h3> | |
| <p class="text-gray-600 mb-1">Deniz Lisesi</p> | |
| <p class="text-gray-500 text-sm">1979 - 1985</p> | |
| <p class="text-gray-700 mt-2">Rize'den İstanbul'a eğitim için geldi</p> | |
| </div> | |
| </div> | |
| <div class="order-1 md:w-5/12"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <div class="h-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full w-12"></div> | |
| <h2 class="ml-4 text-3xl font-bold text-gray-800">Akademik ve Mesleki Deneyim</h2> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8"> | |
| <div class="relative pl-12"> | |
| <div class="absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-indigo-400 to-purple-500"></div> | |
| <div class="mb-10 timeline-item relative"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Profesör</h3> | |
| <p class="text-gray-600 mb-1">İstanbul Üniversitesi İktisat Fakültesi</p> | |
| <p class="text-gray-500 text-sm mb-3">2010 - Günümüz</p> | |
| <p class="text-gray-700">Endüstri İlişkileri Anabilim Dalı Başkanı olarak görev yapmaktadır.</p> | |
| </div> | |
| <div class="mb-10 timeline-item relative"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Doçent</h3> | |
| <p class="text-gray-600 mb-1">İstanbul Üniversitesi İktisat Fakültesi</p> | |
| <p class="text-gray-500 text-sm mb-3">2005 - 2010</p> | |
| <p class="text-gray-700">2006-2008 yılları arasında Endüstri İlişkileri Anabilim Dalı Başkanlığı yaptı.</p> | |
| </div> | |
| <div class="mb-10 timeline-item relative"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Yardımcı Doçent</h3> | |
| <p class="text-gray-600 mb-1">İstanbul Üniversitesi İktisat Fakültesi</p> | |
| <p class="text-gray-500 text-sm mb-3">1995 - 2005</p> | |
| <p class="text-gray-700">Doktora sonrası öğretim üyesi olarak göreve başladı.</p> | |
| </div> | |
| <div class="timeline-item relative"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Araştırma Görevlisi</h3> | |
| <p class="text-gray-600 mb-1">İstanbul Üniversitesi İktisat Fakültesi</p> | |
| <p class="text-gray-500 text-sm mb-3">1989 - 1995</p> | |
| <p class="text-gray-700">Akademik kariyerine araştırma görevlisi olarak başladı.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-university text-indigo-600 mr-3"></i> | |
| Akademik İdari Görevler | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Endüstri İlişkileri Anabilim Dalı Başkanı (2006-2008, 2011-Günümüz)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>İstanbul Üniversitesi Rektör Danışmanı (2011-2015)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Üniversite araştırma ve yardım vakıflarında yönetim kurulu üyeliği</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-briefcase text-purple-600 mr-3"></i> | |
| Diğer Mesleki Görevler | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>İstanbul Ticaret Odası Ekonomi Danışma Kurulu Üyesi (2016-Günümüz)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Çalışma ve Sosyal Güvenlik Bakanlığı Resmi Arabulucu (2006-Günümüz)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Serbest Muhasebeci Mali Müşavir (1999-Günümüz)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Expertise Section --> | |
| <section id="expertise" class="mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <div class="h-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full w-12"></div> | |
| <h2 class="ml-4 text-3xl font-bold text-gray-800">Uzmanlık Alanları</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-star text-yellow-500 mr-3"></i> | |
| Ana Uzmanlık Alanları | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-2">Şirket Yönetimi</h4> | |
| <p class="text-gray-700">İşletme yönetimi, organizasyonel yapılar ve stratejik yönetim konularında uzmanlık.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-2">Ekonomi ve Finans</h4> | |
| <p class="text-gray-700">Makro ve mikro ekonomik analizler, finansal piyasalar ve yatırım stratejileri.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-2">Endüstri İlişkileri</h4> | |
| <p class="text-gray-700">Çalışma yaşamı, işçi-işveren ilişkileri ve sendikal sistemler.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-search text-blue-500 mr-3"></i> | |
| Araştırma Alanları | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-2">Sosyal Bilimler</h4> | |
| <p class="text-gray-700">Ekonomi, işletme, yönetim bilimi ve sosyal hizmetler kesişiminde araştırmalar.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-2">Çalışma Ekonomisi</h4> | |
| <p class="text-gray-700">İstihdam, işsizlik, esnek çalışma düzenlemeleri ve verimlilik analizleri.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-2">Operasyon Araştırması</h4> | |
| <p class="text-gray-700">Karar verme süreçleri, optimizasyon ve veriye dayalı strateji geliştirme.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-lg p-8 text-white"> | |
| <h3 class="text-xl font-bold mb-4">Disiplinlerarası Yaklaşım</h3> | |
| <p class="mb-4">Prof. Yavuz'un çalışmaları sosyal bilimler ve işletme dünyasının kesişiminde yer almakta olup, ekonomi, yönetim ve endüstri ilişkileri alanlarında disiplinlerarası bir yaklaşım sergilemektedir.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Ekonomi</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">İşletme</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Yönetim</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Endüstri İlişkileri</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Sosyal Politika</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Publications Section --> | |
| <section id="publications" class="mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <div class="h-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full w-12"></div> | |
| <h2 class="ml-4 text-3xl font-bold text-gray-800">Akademik Yayınlar</h2> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-book-open text-indigo-600 mr-3"></i> | |
| Kitaplar | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="publication-item bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300"> | |
| <h4 class="font-bold text-lg text-indigo-700 mb-2">İşgücü, İstihdam ve Kriz Olgusu</h4> | |
| <p class="text-gray-600 mb-2">İstanbul Ticaret Odası, 2010</p> | |
| <p class="text-gray-700">Ekonomik krizlerin istihdam üzerindeki etkilerini analiz eden temel eser.</p> | |
| </div> | |
| <div class="publication-item bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300"> | |
| <h4 class="font-bold text-lg text-indigo-700 mb-2">Türk Bankacılık Sektöründe Yabancılaşma: Riskli mi Fırsat mı?</h4> | |
| <p class="text-gray-600 mb-2">İstanbul Ticaret Odası, 2008 (Ortak yazar)</p> | |
| <p class="text-gray-700">Bankacılık sektöründeki yabancı sermaye girişlerinin analizi.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-file-alt text-purple-600 mr-3"></i> | |
| Hakemli Bildiriler | |
| </h3> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="publication-item p-6 hover:bg-gray-50"> | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">Türkiye ekonomisi 2024-2026 orta vadeli programın (OVP'nin) değerlendirilmesi</h4> | |
| <p class="text-gray-600 mb-2">17. Uluslararası Güncel Araştırmalarla Sosyal Bilimler Kongresi, Antalya, 2023</p> | |
| </div> | |
| <div class="publication-item p-6 hover:bg-gray-50"> | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">The Economy of Turkey over the period from 2002 through 2014 And The effect of Euro/dollar Parity and oil prices to Turkish Economy in 2015</h4> | |
| <p class="text-gray-600 mb-2">Harvard University, Amerika Birleşik Devletleri, 2019</p> | |
| </div> | |
| <div class="publication-item p-6 hover:bg-gray-50"> | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">2019 Yılı Dünya Ve Türkiye Ekonomisinin Değerlendirilmesi</h4> | |
| <p class="text-gray-600 mb-2">Marmara Üniversitesi Ekonomi Kongresi 2019, İstanbul</p> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 text-center"> | |
| <button class="text-indigo-600 font-medium hover:text-indigo-800">Tümünü Görüntüle (13 bildiri)</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-chart-line text-blue-600 mr-3"></i> | |
| Diğer Yayınlar ve Sunumlar | |
| </h3> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="publication-item p-6 hover:bg-gray-50"> | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">Dosabsiad Demirtaş Organize Sanayi Bölgesi Sanayicileri ve İş İnsanları Derneği, Türkiye Ekonomisinin Değerlendirilmesi</h4> | |
| <p class="text-gray-600 mb-2">Sunum, Bursa, 2023</p> | |
| </div> | |
| <div class="publication-item p-6 hover:bg-gray-50"> | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">Avrasya Bir Vakfı ASAM, Türkiye Ekonomisinin Değerlendirilmesi ve 28 Mayıs 2023 Seçim Sonrası Türkiye Ekonomisi Beklentileri</h4> | |
| <p class="text-gray-600 mb-2">Sunum, İstanbul, 2023</p> | |
| </div> | |
| <div class="publication-item p-6 hover:bg-gray-50"> | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">6 Şubat 2023 Maraş-Antep Depreminin Türkiye Ekonomisine Etkisi</h4> | |
| <p class="text-gray-600 mb-2">Sunum, İstanbul, 2023 (Çeşitli kuruluşlara sunuldu)</p> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 text-center"> | |
| <button class="text-indigo-600 font-medium hover:text-indigo-800">Tümünü Görüntüle (195 yayın/sunum)</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <div class="h-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full w-12"></div> | |
| <h2 class="ml-4 text-3xl font-bold text-gray-800">Araştırma Projeleri</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-project-diagram text-purple-600 mr-3"></i> | |
| Öne Çıkan Projeler | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-1">Cumhuriyet Döneminde Türk Kadınının Çalışma Hayatındaki Konumu</h4> | |
| <p class="text-gray-600 mb-1">2010-2018</p> | |
| <p class="text-gray-700">Türkiye'de kadın istihdamının tarihsel gelişimini inceleyen kapsamlı araştırma.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-indigo-600 mb-1">2002-2014 Döneminde Türkiye Ekonomisi ve 2015 Yılında Euro/Dolar Paritesi ile Petrol Fiyatlarının Türkiye Ekonomisine Etkisi</h4> | |
| <p class="text-gray-600 mb-1">2014-2015</p> | |
| <p class="text-gray-700">Makroekonomik göstergeler ve dış faktörlerin ekonomiye etkisi.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-pie text-blue-600 mr-3"></i> | |
| Proje Katılımları | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">Toplam 9 farklı araştırma projesinde yürütücü veya araştırmacı olarak görev aldı.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">Çalışma yaşamı dinamikleri, ekonomik krizlerin istihdama etkileri ve teknoloji-ekonomi etkileşimi konularında araştırmalar yürüttü.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">Projeler aracılığıyla somut veriler ve politika önerileri geliştirdi.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-3"></i> | |
| Proje Katkıları | |
| </h3> | |
| <p class="text-gray-700 mb-4">Prof. Yavuz'un projeleri, çalışma ekonomisi ve endüstri ilişkileri alanında hem akademik literatüre hem de uygulayıcılara yönelik önemli katkılar sağlamıştır. Özellikle:</p> | |
| <ul class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-indigo-500 text-xs mt-2 mr-2"></i> | |
| <span>Esnek çalışma modellerinin verimlilik ve endüstri ilişkilerine etkileri</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-indigo-500 text-xs mt-2 mr-2"></i> | |
| <span>Kriz dönemlerinde istihdam politikaları</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-indigo-500 text-xs mt-2 mr-2"></i> | |
| <span>Türkiye ekonomisinin yapısal analizi</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-indigo-500 text-xs mt-2 mr-2"></i> | |
| <span>Kadın istihdamının tarihsel gelişimi</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <div class="h-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full w-12"></div> | |
| <h2 class="ml-4 text-3xl font-bold text-gray-800">İletişim</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-envelope text-indigo-600 mr-3"></i> | |
| İletişim Bilgileri | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-4"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Kurumsal Adres</h4> | |
| <p class="text-gray-600">İstanbul Üniversitesi İktisat Fakültesi</p> | |
| <p class="text-gray-600">Çalışma Ekonomisi ve Endüstri İlişkileri Bölümü</p> | |
| <p class="text-gray-600">Beyazıt, İstanbul</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">E-posta</h4> | |
| <a href="mailto:[email protected]" class="text-indigo-600 hover:text-indigo-800">[email protected]</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-4"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Web Sitesi</h4> | |
| <a href="http://www.arifyavuz.com" target="_blank" class="text-indigo-600 hover:text-indigo-800">www.arifyavuz.com</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-share-alt text-purple-600 mr-3"></i> | |
| Sosyal Medya | |
| </h3> | |
| <div class="space-y-4"> | |
| <a href="https://twitter.com/profdrarifyavuz" target="_blank" class="flex items-center p-3 rounded-lg bg-blue-50 hover:bg-blue-100 transition duration-300"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-4"> | |
| <i class="fab fa-twitter"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Twitter</h4> | |
| <p class="text-gray-600">@profdrarifyavuz</p> | |
| </div> | |
| </a> | |
| <div class="p-3 rounded-lg bg-gray-100"> | |
| <p class="text-gray-700">Prof. Yavuz, güncel ekonomik gelişmeler ve akademik konulardaki görüşlerini Twitter üzerinden paylaşmaktadır.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-lg p-8 text-white"> | |
| <h3 class="text-xl font-bold mb-4">Medya ve Kamuoyu Katılımları</h3> | |
| <p class="mb-4">Prof. Dr. Arif Yavuz, akademik çalışmalarının yanı sıra çeşitli medya organlarında ekonomi yorumculuğu yapmakta, seminerler ve konferanslarla bilgi birikimini paylaşmaktadır.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Televizyon Programları</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Röportajlar</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Panelist</span> | |
| <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Konferanslar</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">Prof. Dr. Arif Yavuz</h3> | |
| <p class="text-gray-400">Çalışma Ekonomisi ve Endüstri İlişkileri Uzmanı</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="mailto:[email protected]" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| <a href="https://twitter.com/profdrarifyavuz" target="_blank" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="http://www.arifyavuz.com" target="_blank" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fas fa-globe text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Prof. Dr. Arif Yavuz. Tüm hakları saklıdır.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Generate floating background elements | |
| const bgElements = document.getElementById('bgElements'); | |
| const formulas = [ | |
| 'GDP = C + I + G + (X - M)', | |
| 'π = TR - TC', | |
| 'MV = PY', | |
| 'Y = C + S + T', | |
| 'K = I - δK', | |
| 'r = i - π', | |
| 'W = P × MPN', | |
| 'S = I + (G - T) + (X - M)', | |
| 'ROI = (Gain - Cost)/Cost', | |
| 'NPV = Σ(CFₜ/(1+r)ᵗ)', | |
| 'IRR: NPV=0', | |
| 'P = MC', | |
| 'Qd = a - bP', | |
| 'Qs = c + dP', | |
| 'MPC = ΔC/ΔY', | |
| 'MPS = ΔS/ΔY' | |
| ]; | |
| const numbers = [' const navLinks = document.querySelectorAll('.nav-link'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - 300)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active-nav'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active-nav'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hikmet044/arif-yavuz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html>, '€', '₺', '%', '∞', '∑', '∫', '∏', '∂']; | |
| function createElement() { | |
| const element = document.createElement('div'); | |
| element.className = 'bg-element'; | |
| // Randomly decide if it's a formula or symbol | |
| if (Math.random() > 0.5) { | |
| element.textContent = formulas[Math.floor(Math.random() * formulas.length)]; | |
| element.classList.add('formula'); | |
| element.style.opacity = '0.3'; | |
| } else { | |
| element.textContent = numbers[Math.floor(Math.random() * numbers.length)]; | |
| element.style.opacity = '0.2'; | |
| } | |
| // Random position (avoid edges) | |
| element.style.left = (Math.random() * 80 + 10) + 'vw'; | |
| element.style.top = (Math.random() * 80 + 10) + 'vh'; | |
| // Random size and rotation | |
| const size = (Math.random() * 1.5 + 0.5); | |
| element.style.fontSize = size + 'rem'; | |
| element.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| // Random animation properties | |
| const duration = Math.random() * 25 + 15; | |
| const delay = Math.random() * 10; | |
| const xMovement = (Math.random() * 200 - 100) + 'px'; | |
| element.style.animation = ` | |
| float ${duration}s ${delay}s infinite linear, | |
| sway ${duration*1.5}s ${delay}s infinite ease-in-out | |
| `; | |
| // Random color tint | |
| const hue = Math.floor(Math.random() * 60) + 200; // blue-purple range | |
| element.style.color = `hsla(${hue}, 70%, 60%, ${element.style.opacity})`; | |
| bgElements.appendChild(element); | |
| } | |
| // Create initial elements | |
| for (let i = 0; i < 50; i++) { | |
| createElement(); | |
| } | |
| // Add new elements periodically | |
| setInterval(createElement, 1500); | |
| // Highlight active navigation link | |
| const sections = document.querySelectorAll('section'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - 300)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active-nav'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active-nav'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html>, '€', '₺', '¥', '£', '%', '∞', '∑', '∫', '∏', '∂', 'Δ', 'σ', 'μ', 'β', 'α', 'λ', 'θ', 'ρ', 'φ']; | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - 300)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active-nav'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active-nav'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html>, '€', '₺', '%', '∞', '∑', '∫', '∏', '∂']; | |
| function createElement() { | |
| const element = document.createElement('div'); | |
| element.className = 'bg-element'; | |
| // Randomly decide if it's a formula or number | |
| if (Math.random() > 0.5) { | |
| element.textContent = formulas[Math.floor(Math.random() * formulas.length)]; | |
| element.classList.add('formula'); | |
| } else { | |
| element.textContent = numbers[Math.floor(Math.random() * numbers.length)]; | |
| } | |
| // Random position and size | |
| element.style.left = Math.random() * 100 + 'vw'; | |
| element.style.top = Math.random() * 100 + 'vh'; | |
| element.style.fontSize = (Math.random() * 1 + 0.5) + 'rem'; | |
| // Random animation duration and delay | |
| const duration = Math.random() * 20 + 10; | |
| const delay = Math.random() * 5; | |
| element.style.animation = `float ${duration}s ${delay}s infinite linear`; | |
| bgElements.appendChild(element); | |
| } | |
| // Create initial elements | |
| for (let i = 0; i < 30; i++) { | |
| createElement(); | |
| } | |
| // Add new elements periodically | |
| setInterval(createElement, 3000); | |
| // Highlight active navigation link | |
| const sections = document.querySelectorAll('section'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - 300)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active-nav'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active-nav'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |