Spaces:
Running
Running
Create a professional and dynamic portfolio website for Yusuf Selim Akdemir, a developer and artist specializing in Game Development, VR/AR, Animation, and Cinematics. The website should reflect a modern, tech-focused, yet personal and creative style based on his visual CV. 1. Overall Design and Style: Theme: Modern, minimalist, and technological. Color Palette: Background: A very light grey or off-white with a subtle paper texture (#F5F5F1). Primary Accent Color: A strong, vibrant red (#D32F2F) for headings, buttons, and important highlights. Text Color: A dark navy blue or near-black (#263238) for body text to ensure readability. Typography: Main Headings (HAKKIMDA, ALAN, DENEYİM etc.): Use a bold, impactful, and modern sans-serif font like 'Montserrat' or 'Anton'. Subheadings (Kodlama, Animasyon etc.): Use a creative, handwritten or brush-style font to mimic the portfolio's style, like 'Kalam' or 'Caveat'. Body Text: A clean, highly readable sans-serif font like 'Roboto' or 'Open Sans'. Layout: Use a card-based layout with rounded corners for content sections. Incorporate thin lines and simple four-pointed star icons as decorative elements to maintain consistency with the source material. 2. Website Sections: Section 1: Hero Section (Landing Page) A full-width section. In the center, display a large, bold title: "Hayal Gücünün Sınırlarını Zorlayan Dünyaların Mimarı". Below the title, add his name in a slightly smaller but prominent font: "Yusuf Selim Akdemir". Have a call-to-action button below that says "Projelerimi Keşfet" which scrolls down to the projects section. Section 2: Hakkımda (About Me) Use the heading: "HAKKIMDA". Create a two-column layout. Left Column: Display a professional photo of Yusuf Selim Akdemir (as seen in the CV). Below the photo, list his main fields: "Oyun, VR/AR, Animasyon ve Sinematik". Right Column: Use the following text, broken into paragraphs: "Merhaba, ben Yusuf Selim. Hayal gücünün sınırlarını zorlayan dünyaların mimarıyım. Oyun, Sanal Gerçeklik (VR), Artırılmış Gerçeklik (AR), Karma Gerçeklik (MR) ve Sinematik sanatın uçsuz bucaksız evrenlerinde iz bırakıyorum." "Unreal Engine benim için yalnızca bir araç değil; fikirlerimin şekil bulduğu, sıradanı olağanüstüye dönüştürebildiğim bir fırça. Teknolojinin gücünü düşüncelerim ve duygularımla buluşturduğum bu yolculukta, yalnızca izleyen değil, hissettiren projeler ortaya koymayı hedefliyorum." "Küçük yaşlarda Unity oyun motoru ile bu aleme giriş yaptım. İlerleyen yaşlarımda Unreal Engine programı ile uzmanlık alanlarımı inşa etmeye başladım. Twinmotion ve Reality Capture gibi araçlarla da öğrenimler edindim." Section 3: Alanlar (Fields/Skills) Use the heading: "ALANLAR". Create three distinct cards with rounded corners. Each card should have a handwritten-style subheading. Card 1: KODLAMA "HTML ve CSS ile başlayan kodlama merakım, C++ ve Unreal Engine ile devam etti. Aktif olarak C++, C Sharp ve Blueprint kodlamaları üzerinde çalışıyorum. Aksaray Üniversitesi Yönetim Bilişim Sistemleri bölümünde Veri Tabanı üzerine öğrenimimi sürdürmekteyim." Card 2: ANİMASYON "Unreal Engine programında çeşitli animasyon çalışmalarında bulundum ve mevcut olarak Unreal Engine ile Animasyon eğitimleri vermekteyim." Card 3: GİRİŞİMCİLİK "Ahiler Kalkınma Ajansı ve Aksaray Belediyesi işbirliğindeki 'Start in Aksaray' girişimcilik programında aktif olarak yer alıyorum." Section 4: Deneyim (Experience) Use the heading: "DENEYİM". Create a timeline or a series of cards to showcase experience. Mentorluk (2023-2024): "Aksaray İHL Fen ve Teknolojiler bölümünde mentor olarak görev aldım. Unreal Engine, Blender, Yeşil Perde ve Python alanlarında öğrencilere rehberlik yaptım." Animasyon Öğretmenliği (2021-202X): "MODE ve MEB aracılığı ile İstanbul Başakşehir LivingLab atölyelerinde, FenTek Öğrencilerine animasyon öğretiminde görev aldım." Proje Çalışmaları (2021-202X): "PC ve Mobil odaklı Geri Dönüşüm Oyunu, sanal gerçeklik ve rehabilitasyon uygulamaları üzerinde ortak çalışmalarda bulundum." Section 5: Projeler ve Referanslar (Projects & References) Use the heading: "PROJELER VE REFERANSLAR". Create a visual gallery grid. Use placeholders for images, with captions like: "3D Çevre Tasarımı - PİYADE.ucl" "VR Rehabilitasyon Projesi" "Mimari Görselleştirme" "Gece Sahnesi - Kamp Ateşi" "Teknoloji Festivali Sunumu" "Atölye Çalışmasından Kareler" Section 6: İletişim (Contact) Use the heading: "BİRLİKTE DAHA GÜÇLÜYÜZ". Make this title large and centered. Below the title, provide a clear contact method. Display an email icon followed by the email address: [email protected]. Optionally, add links to LinkedIn or ArtStation profiles if available. Footer: A simple, clean footer containing "© 2024 Yusuf Selim Akdemir. Tüm hakları saklıdır." and the "YUSAKRU" handle. - Initial Deployment
400046a
verified
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Yusuf Selim Akdemir - Oyun, VR/AR, Animasyon ve Sinematik</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=Anton&family=Caveat:wght@400;700&family=Montserrat:wght@400;700;900&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #F5F5F1; | |
| color: #263238; | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZjhmOGY4Ij48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiNlOGU4ZTgiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4='); | |
| } | |
| .handwritten { | |
| font-family: 'Caveat', cursive; | |
| } | |
| .heading { | |
| font-family: 'Anton', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| .subheading { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 700; | |
| } | |
| .star-decoration::after { | |
| content: "✦"; | |
| color: #D32F2F; | |
| margin-left: 10px; | |
| } | |
| .timeline-item::before { | |
| content: ""; | |
| position: absolute; | |
| left: -25px; | |
| top: 5px; | |
| width: 15px; | |
| height: 15px; | |
| border-radius: 50%; | |
| background-color: #D32F2F; | |
| border: 3px solid #F5F5F1; | |
| } | |
| .timeline::before { | |
| content: ""; | |
| position: absolute; | |
| left: 20px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background-color: #D32F2F; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| @media (max-width: 768px) { | |
| .timeline::before { | |
| left: 10px; | |
| } | |
| .timeline-item::before { | |
| left: -15px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white bg-opacity-90 shadow-sm z-50"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="text-2xl font-bold text-red-700 heading">YUSAKRU</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-gray-800 hover:text-red-700 transition">HAKKIMDA</a> | |
| <a href="#skills" class="text-gray-800 hover:text-red-700 transition">ALANLAR</a> | |
| <a href="#experience" class="text-gray-800 hover:text-red-700 transition">DENEYİM</a> | |
| <a href="#projects" class="text-gray-800 hover:text-red-700 transition">PROJELER</a> | |
| <a href="#contact" class="text-gray-800 hover:text-red-700 transition">İLETİŞİM</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl text-gray-800"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white w-full px-6 py-3" id="mobile-menu"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#about" class="text-gray-800 hover:text-red-700 transition">HAKKIMDA</a> | |
| <a href="#skills" class="text-gray-800 hover:text-red-700 transition">ALANLAR</a> | |
| <a href="#experience" class="text-gray-800 hover:text-red-700 transition">DENEYİM</a> | |
| <a href="#projects" class="text-gray-800 hover:text-red-700 transition">PROJELER</a> | |
| <a href="#contact" class="text-gray-800 hover:text-red-700 transition">İLETİŞİM</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-6 md:px-0 min-h-screen flex items-center"> | |
| <div class="container mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 heading text-gray-800 leading-tight"> | |
| Hayal Gücünün Sınırlarını <span class="text-red-700">Zorlayan</span> Dünyaların Mimarı | |
| </h1> | |
| <h2 class="text-2xl md:text-4xl mb-10 subheading text-gray-700">Yusuf Selim Akdemir</h2> | |
| <a href="#projects" class="bg-red-700 hover:bg-red-800 text-white px-8 py-4 rounded-full text-lg font-semibold transition duration-300 inline-block"> | |
| Projelerimi Keşfet | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-6 bg-white bg-opacity-90"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-4xl mb-16 text-center heading star-decoration">HAKKIMDA</h2> | |
| <div class="flex flex-col md:flex-row gap-12 items-center"> | |
| <div class="md:w-1/3 flex flex-col items-center"> | |
| <img src="https://via.placeholder.com/400x500" alt="Yusuf Selim Akdemir" class="w-full max-w-xs rounded-lg shadow-lg mb-6"> | |
| <div class="text-center"> | |
| <h3 class="text-xl font-bold mb-2 subheading">Uzmanlık Alanları</h3> | |
| <p class="text-red-700 handwritten text-2xl">Oyun, VR/AR, Animasyon ve Sinematik</p> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <p class="text-lg mb-6 leading-relaxed"> | |
| <span class="text-red-700 font-bold">Merhaba, ben Yusuf Selim.</span> Hayal gücünün sınırlarını zorlayan dünyaların mimarıyım. Oyun, Sanal Gerçeklik (VR), Artırılmış Gerçeklik (AR), Karma Gerçeklik (MR) ve Sinematik sanatın uçsuz bucaksız evrenlerinde iz bırakıyorum. | |
| </p> | |
| <p class="text-lg mb-6 leading-relaxed"> | |
| Unreal Engine benim için yalnızca bir araç değil; fikirlerimin şekil bulduğu, sıradanı olağanüstüye dönüştürebildiğim bir fırça. Teknolojinin gücünü düşüncelerim ve duygularımla buluşturduğum bu yolculukta, yalnızca izleyen değil, hissettiren projeler ortaya koymayı hedefliyorum. | |
| </p> | |
| <p class="text-lg leading-relaxed"> | |
| Küçük yaşlarda Unity oyun motoru ile bu aleme giriş yaptım. İlerleyen yaşlarımda Unreal Engine programı ile uzmanlık alanlarımı inşa etmeye başladım. Twinmotion ve Reality Capture gibi araçlarla da öğrenimler edindim. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-4xl mb-16 text-center heading star-decoration">ALANLAR</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-8 hover:shadow-xl transition duration-300"> | |
| <h3 class="text-3xl mb-4 handwritten text-red-700">KODLAMA</h3> | |
| <p class="text-gray-700"> | |
| HTML ve CSS ile başlayan kodlama merakım, C++ ve Unreal Engine ile devam etti. Aktif olarak C++, C Sharp ve Blueprint kodlamaları üzerinde çalışıyorum. Aksaray Üniversitesi Yönetim Bilişim Sistemleri bölümünde Veri Tabanı üzerine öğrenimimi sürdürmekteyim. | |
| </p> | |
| <div class="mt-6 flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">C++</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">C#</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Blueprint</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">HTML/CSS</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-8 hover:shadow-xl transition duration-300"> | |
| <h3 class="text-3xl mb-4 handwritten text-red-700">ANİMASYON</h3> | |
| <p class="text-gray-700"> | |
| Unreal Engine programında çeşitli animasyon çalışmalarında bulundum ve mevcut olarak Unreal Engine ile Animasyon eğitimleri vermekteyim. | |
| </p> | |
| <div class="mt-6 flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Unreal Engine</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Blender</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Character Animation</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Cinematics</span> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-8 hover:shadow-xl transition duration-300"> | |
| <h3 class="text-3xl mb-4 handwritten text-red-700">GİRİŞİMCİLİK</h3> | |
| <p class="text-gray-700"> | |
| Ahiler Kalkınma Ajansı ve Aksaray Belediyesi işbirliğindeki 'Start in Aksaray' girişimcilik programında aktif olarak yer alıyorum. | |
| </p> | |
| <div class="mt-6 flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Startup</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Project Management</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Pitching</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-20 px-6 bg-white bg-opacity-90"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-4xl mb-16 text-center heading star-decoration">DENEYİM</h2> | |
| <div class="relative timeline pl-12 md:pl-24"> | |
| <!-- Item 1 --> | |
| <div class="mb-12 relative timeline-item"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <h3 class="text-2xl font-bold mb-2 subheading text-red-700">Mentorluk (2023-2024)</h3> | |
| <p class="text-gray-700"> | |
| Aksaray İHL Fen ve Teknolojiler bölümünde mentor olarak görev aldım. Unreal Engine, Blender, Yeşil Perde ve Python alanlarında öğrencilere rehberlik yaptım. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="mb-12 relative timeline-item"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <h3 class="text-2xl font-bold mb-2 subheading text-red-700">Animasyon Öğretmenliği (2021-202X)</h3> | |
| <p class="text-gray-700"> | |
| MODE ve MEB aracılığı ile İstanbul Başakşehir LivingLab atölyelerinde, FenTek Öğrencilerine animasyon öğretiminde görev aldım. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="relative timeline-item"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <h3 class="text-2xl font-bold mb-2 subheading text-red-700">Proje Çalışmaları (2021-202X)</h3> | |
| <p class="text-gray-700"> | |
| PC ve Mobil odaklı Geri Dönüşüm Oyunu, sanal gerçeklik ve rehabilitasyon uygulamaları üzerinde ortak çalışmalarda bulundum. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-4xl mb-16 text-center heading star-decoration">PROJELER VE REFERANSLAR</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md project-card transition duration-300"> | |
| <img src="https://via.placeholder.com/600x400" alt="3D Çevre Tasarımı" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 subheading">3D Çevre Tasarımı</h3> | |
| <p class="text-gray-600">PİYADE.ucl</p> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md project-card transition duration-300"> | |
| <img src="https://via.placeholder.com/600x400" alt="VR Rehabilitasyon Projesi" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 subheading">VR Rehabilitasyon Projesi</h3> | |
| <p class="text-gray-600">Sanal gerçeklik uygulaması</p> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md project-card transition duration-300"> | |
| <img src="https://via.placeholder.com/600x400" alt="Mimari Görselleştirme" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 subheading">Mimari Görselleştirme</h3> | |
| <p class="text-gray-600">Twinmotion projesi</p> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md project-card transition duration-300"> | |
| <img src="https://via.placeholder.com/600x400" alt="Gece Sahnesi" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 subheading">Gece Sahnesi - Kamp Ateşi</h3> | |
| <p class="text-gray-600">Cinematic render</p> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md project-card transition duration-300"> | |
| <img src="https://via.placeholder.com/600x400" alt="Teknoloji Festivali" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 subheading">Teknoloji Festivali Sunumu</h3> | |
| <p class="text-gray-600">Etkinlik görselleri</p> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md project-card transition duration-300"> | |
| <img src="https://via.placeholder.com/600x400" alt="Atölye Çalışması" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 subheading">Atölye Çalışmasından Kareler</h3> | |
| <p class="text-gray-600">Eğitim süreçleri</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-6 bg-red-700 text-white"> | |
| <div class="container mx-auto text-center"> | |
| <h2 class="text-4xl md:text-5xl mb-10 heading">BİRLİKTE DAHA GÜÇLÜYÜZ</h2> | |
| <div class="max-w-2xl mx-auto bg-white bg-opacity-20 rounded-xl p-8 backdrop-blur-sm"> | |
| <div class="flex flex-col items-center space-y-6"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-envelope text-3xl"></i> | |
| <a href="mailto:[email protected]" class="text-xl hover:underline">[email protected]</a> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-3xl hover:text-gray-300 transition"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-3xl hover:text-gray-300 transition"><i class="fab fa-artstation"></i></a> | |
| <a href="#" class="text-3xl hover:text-gray-300 transition"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-8 px-6"> | |
| <div class="container mx-auto text-center"> | |
| <p class="mb-4">© 2024 Yusuf Selim Akdemir. Tüm hakları saklıdır.</p> | |
| <p class="text-xl font-bold heading">YUSAKRU</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // 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); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add shadow to navbar on scroll | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('shadow-lg'); | |
| } else { | |
| nav.classList.remove('shadow-lg'); | |
| } | |
| }); | |
| </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=YUSAKRU/yusakru-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |