Spaces:

hel1929
/

secret

Running

App Files Files Community

hel1929 commited on Aug 2, 2025

Commit

b4818b8

verified ·

1 Parent(s): 715de4b

i want that you make the top most card of the deck like placed a lil above the rest of the deck like you can see that there are several cards below the topmost card - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +648 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Secret
-emoji: 🏃
 colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: secret
+emoji: 🐳
 colorFrom: pink
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,648 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mystical Tarot Portfolio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=MedievalSharp&display=swap');
+        :root {
+            --fog-dark: #0A0F0C;
+            --fog-light: #0D1A15;
+            --gold: #EAC97A;
+            --parchment: #F6EBD9;
+            --purple: #3C2A3E;
+        }
+        body {
+            font-family: 'Cinzel Decorative', cursive;
+            background-color: #000;
+            color: var(--parchment);
+            overflow-x: hidden;
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            perspective: 1000px;
+        }
+        .fog-layer {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, var(--fog-dark), var(--fog-light));
+            opacity: 0.3;
+            z-index: 1;
+            pointer-events: none;
+        }
+        .fog-layer-1 {
+            animation: fog-move 60s linear infinite;
+            filter: blur(2px);
+        }
+        .fog-layer-2 {
+            animation: fog-move 40s linear infinite reverse;
+            filter: blur(4px);
+            opacity: 0.2;
+        }
+        .fog-layer-3 {
+            animation: fog-move 30s linear infinite;
+            filter: blur(6px);
+            opacity: 0.15;
+        }
+        @keyframes fog-move {
+            0% { background-position: 0 0; }
+            100% { background-position: 100% 0; }
+        }
+        .table {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxmaWx0ZXIgaWQ9Im5vaXNlIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjA1IiBudW1PY3RhdmVzPSI1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4wNSIvPgo8L3N2Zz4=');
+            background-color: #1a120b;
+            background-blend-mode: overlay;
+            box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
+            position: relative;
+            z-index: 2;
+        }
+        .wood-grain {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzFhMTIwYiIvPgogIDxwYXRoIGQ9Ik0wIDI1TDEwMCA1MEwwIDc1TDEwMCAxMDAiIHN0cm9rZT0iIzJhMjAyYiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPg==');
+            background-size: 200px;
+            opacity: 0.7;
+        }
+        .card {
+            background: var(--parchment);
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(234, 201, 122, 0.2);
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+            position: relative;
+            overflow: hidden;
+        }
+        .card:hover {
+            box-shadow: 0 15px 40px rgba(234, 201, 122, 0.3), 0 0 0 2px var(--gold);
+            transform: translateY(-10px) rotateY(5deg);
+        }
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(234, 201, 122, 0.1), rgba(234, 201, 122, 0));
+            z-index: 1;
+        }
+        .card-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: all 0.5s ease;
+        }
+        .card-label {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.5rem;
+            color: var(--purple);
+            text-shadow: 0 0 10px rgba(234, 201, 122, 0.7);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 2;
+            text-align: center;
+        }
+        .card:hover .card-label {
+            opacity: 1;
+        }
+        .card-symbol {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(3);
+            opacity: 0.1;
+            transition: all 0.3s ease;
+            z-index: 1;
+            filter: drop-shadow(0 0 5px rgba(234, 201, 122, 0.5));
+        }
+        .card:hover .card-symbol {
+            opacity: 0.3;
+            transform: translate(-50%, -50%) scale(3.5);
+        }
+        .particle {
+            position: absolute;
+            background-color: var(--gold);
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 10;
+        }
+        .rune {
+            position: absolute;
+            font-family: 'MedievalSharp', cursive;
+            color: rgba(234, 201, 122, 0.1);
+            font-size: 1.5rem;
+            z-index: 3;
+            animation: float 10s infinite ease-in-out;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(5deg); }
+        }
+        .section-content {
+            background: rgba(28, 20, 30, 0.8);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(234, 201, 122, 0.2);
+            box-shadow: 0 0 30px rgba(234, 201, 122, 0.2);
+            transform: translateY(20px);
+            opacity: 0;
+            transition: all 0.5s ease;
+        }
+        .section-content.active {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        .letter-animation {
+            display: inline-block;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        /* Mobile adjustments */
+        @media (max-width: 768px) {
+            .fog-layer-3 {
+                display: none;
+            }
+            .card {
+                margin-bottom: 20px;
+            }
+            .card-label {
+                font-size: 1.2rem;
+            }
+            .card-symbol {
+                transform: translate(-50%, -50%) scale(2);
+            }
+            .card:hover .card-symbol {
+                transform: translate(-50%, -50%) scale(2.3);
+            }
+        }
+        /* Intro animation */
+        .intro-fool {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(1);
+            z-index: 100;
+            transition: all 1s ease-in-out;
+        }
+        .intro-fool.shrink {
+            transform: translate(-50%, 20%) scale(0.5) rotate(10deg);
+        }
+        .intro-fog {
+            position: fixed;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, var(--fog-dark), var(--fog-light));
+            opacity: 0.3;
+            z-index: 99;
+            transition: left 5s linear;
+        }
+        .intro-fog.active {
+            left: 0;
+        }
+        /* Card draw animations */
+        @keyframes cardDraw1 {
+            0% { transform: translateY(-100px) rotate(-30deg) scale(0.8); opacity: 0; }
+            70% { transform: translateY(20px) rotate(10deg) scale(1.05); opacity: 1; }
+            100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
+        }
+        @keyframes cardDraw2 {
+            0% { transform: translateY(-100px) rotate(0deg) scale(0.8); opacity: 0; }
+            70% { transform: translateY(20px) rotate(-5deg) scale(1.05); opacity: 1; }
+            100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
+        }
+        @keyframes cardDraw3 {
+            0% { transform: translateY(-100px) rotate(30deg) scale(0.8); opacity: 0; }
+            70% { transform: translateY(20px) rotate(-10deg) scale(1.05); opacity: 1; }
+            100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
+        }
+        .card-draw-1 {
+            animation: cardDraw1 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        }
+        .card-draw-2 {
+            animation: cardDraw2 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s forwards;
+        }
+        .card-draw-3 {
+            animation: cardDraw3 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
+        }
+        /* Deck hover animation */
+        @keyframes deckHover {
+            0%, 100% { transform: rotate(0deg); }
+            25% { transform: rotate(2deg); }
+            75% { transform: rotate(-2deg); }
+        }
+        .deck-hover {
+            animation: deckHover 0.5s ease-in-out infinite;
+        }
+        /* Section animations */
+        @keyframes sectionSlideUp {
+            0% { transform: translateY(100px) scale(0.9); opacity: 0; }
+            100% { transform: translateY(0) scale(1); opacity: 1; }
+        }
+        @keyframes sectionSlideDown {
+            0% { transform: translateY(0) scale(1); opacity: 1; }
+            100% { transform: translateY(100px) scale(0.9); opacity: 0; }
+        }
+        .section-slide-up {
+            animation: sectionSlideUp 0.5s ease-out forwards;
+        }
+        .section-slide-down {
+            animation: sectionSlideDown 0.5s ease-in forwards;
+        }
+    </style>
+</head>
+<body>
+    <!-- Intro elements -->
+    <div class="intro-fog"></div>
+    <img src="https://i.pinimg.com/736x/91/0d/e5/910de5bf16d1770bb5cca14e484a4e50.jpg" alt="The Fool Tarot Card" class="intro-fool w-64 md:w-96 h-auto rounded-lg shadow-xl">
+    <!-- Main content (initially hidden) -->
+    <div class="main-content hidden">
+        <!-- Fog layers -->
+        <div class="fog-layer fog-layer-1"></div>
+        <div class="fog-layer fog-layer-2"></div>
+        <div class="fog-layer fog-layer-3"></div>
+        <!-- Ancient table -->
+        <div class="table wood-grain absolute bottom-0 left-0 right-0 h-1/3 md:h-1/2"></div>
+        <!-- Runes in background -->
+        <div class="rune" style="top: 20%; left: 10%;">ᚠ</div>
+        <div class="rune" style="top: 30%; left: 85%;">ᚢ</div>
+        <div class="rune" style="top: 70%; left: 15%;">ᚦ</div>
+        <div class="rune" style="top: 80%; left: 90%;">ᚨ</div>
+        <div class="rune" style="top: 60%; left: 80%;">ᚱ</div>
+        <div class="rune" style="top: 40%; left: 5%;">ᚲ</div>
+        <!-- Deck container -->
+        <div class="deck-container absolute bottom-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer">
+            <div class="deck relative w-24 h-36 md:w-32 md:h-48">
+                <div class="card absolute w-full h-full bg-purple-900 rounded-lg shadow-lg">
+                    <img src="https://i.pinimg.com/736x/91/0d/e5/910de5bf16d1770bb5cca14e484a4e50.jpg" alt="Tarot Deck" class="card-image rounded-lg">
+                </div>
+            </div>
+        </div>
+        <!-- Cards container (initially hidden with opacity 0) -->
+        <div class="cards-container opacity-0 absolute bottom-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20 w-full max-w-4xl px-4">
+            <div class="flex flex-col md:flex-row justify-center items-center gap-8">
+                <!-- About Me Card -->
+                <div class="card w-48 h-72 md:w-56 md:h-84 relative opacity-0">
+                    <img src="https://i.imgur.com/7WQ3V9j.jpg" alt="About Me" class="card-image">
+                    <div class="card-label">About Me</div>
+                    <div class="card-symbol">⚔️</div>
+                </div>
+                <!-- Projects Card -->
+                <div class="card w-48 h-72 md:w-56 md:h-84 relative opacity-0">
+                    <img src="https://i.imgur.com/4Q3W9ZJ.jpg" alt="Projects" class="card-image">
+                    <div class="card-label">Projects</div>
+                    <div class="card-symbol">🪙</div>
+                </div>
+                <!-- Contact Card -->
+                <div class="card w-48 h-72 md:w-56 md:h-84 relative opacity-0">
+                    <img src="https://i.imgur.com/9WQ3V9j.jpg" alt="Contact" class="card-image">
+                    <div class="card-label">Contact</div>
+                    <div class="card-symbol">🧿</div>
+                </div>
+            </div>
+        </div>
+        <!-- Sections container -->
+        <div class="sections-container absolute top-0 left-0 right-0 z-30 p-8 pt-20 md:p-12 md:pt-24">
+            <!-- About Me Section -->
+            <div class="section-content about-section max-w-4xl mx-auto p-8 rounded-lg mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-gold-400 section-title">About Me</h2>
+                <div class="text-lg md:text-xl mb-6 section-text">
+                    <p class="mb-4">I am a seeker of digital mysteries, a weaver of web enchantments, and a conjurer of interactive experiences.</p>
+                    <p class="mb-4">With over a decade of mystical coding practices, I blend ancient design principles with modern alchemy to create digital artifacts that resonate with users on a profound level.</p>
+                    <p>My journey began under the sign of The Magician, where I first discovered the power to manifest ideas into reality through code.</p>
+                </div>
+            </div>
+            <!-- Projects Section -->
+            <div class="section-content projects-section max-w-4xl mx-auto p-8 rounded-lg mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-gold-400 section-title">Projects</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 section-text">
+                    <div class="project-card p-6 rounded-lg border border-gold-400 border-opacity-30">
+                        <h3 class="text-xl font-bold mb-3">The Hermit's Retreat</h3>
+                        <p>A meditation app with biofeedback and personalized guidance based on lunar cycles.</p>
+                    </div>
+                    <div class="project-card p-6 rounded-lg border border-gold-400 border-opacity-30">
+                        <h3 class="text-xl font-bold mb-3">Wheel of Fortune</h3>
+                        <p>An interactive data visualization tool for tracking market trends and predicting patterns.</p>
+                    </div>
+                    <div class="project-card p-6 rounded-lg border border-gold-400 border-opacity-30">
+                        <h3 class="text-xl font-bold mb-3">Tower of Transformation</h3>
+                        <p>A personal development platform with AI-powered breakthrough challenges.</p>
+                    </div>
+                    <div class="project-card p-6 rounded-lg border border-gold-400 border-opacity-30">
+                        <h3 class="text-xl font-bold mb-3">Star Seeker</h3>
+                        <p>An AR constellation guide that adapts to your location and personal astrological chart.</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Contact Section -->
+            <div class="section-content contact-section max-w-4xl mx-auto p-8 rounded-lg">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-gold-400 section-title">Contact</h2>
+                <div class="text-lg md:text-xl section-text">
+                    <p class="mb-6">Seek me when the moon is in the seventh house and Jupiter aligns with Mars, or through these more conventional channels:</p>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div class="contact-method p-6 rounded-lg border border-gold-400 border-opacity-30 flex items-center">
+                            <div class="text-3xl mr-4">📧</div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-1">Email</h3>
+                                <p>seeker@mysticaltarot.dev</p>
+                            </div>
+                        </div>
+                        <div class="contact-method p-6 rounded-lg border border-gold-400 border-opacity-30 flex items-center">
+                            <div class="text-3xl mr-4">🌐</div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-1">Social</h3>
+                                <p>@mysticaltarot</p>
+                            </div>
+                        </div>
+                        <div class="contact-method p-6 rounded-lg border border-gold-400 border-opacity-30 flex items-center">
+                            <div class="text-3xl mr-4">🔮</div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-1">Divination</h3>
+                                <p>Schedule a reading</p>
+                            </div>
+                        </div>
+                        <div class="contact-method p-6 rounded-lg border border-gold-400 border-opacity-30 flex items-center">
+                            <div class="text-3xl mr-4">📞</div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-1">Call</h3>
+                                <p>555-0101 (Moon phase required)</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Intro sequence
+            setTimeout(() => {
+                document.querySelector('.intro-fog').classList.add('active');
+            }, 100);
+            setTimeout(() => {
+                document.querySelector('.intro-fool').classList.add('shrink');
+                document.querySelector('.intro-fog').style.transition = 'opacity 2s ease';
+                document.querySelector('.intro-fog').style.opacity = '0';
+                setTimeout(() => {
+                    document.querySelector('.intro-fool').style.opacity = '0';
+                    document.querySelector('.main-content').classList.remove('hidden');
+                    // Initialize particles
+                    createParticles();
+                    // Initialize deck interaction
+                    initDeck();
+                }, 1000);
+            }, 5000);
+            function createParticles() {
+                const colors = ['#EAC97A', '#0D1A15', '#3C2A3E'];
+                for (let i = 0; i < 30; i++) {
+                    const particle = document.createElement('div');
+                    particle.classList.add('particle');
+                    // Random properties
+                    const size = Math.random() * 5 + 1;
+                    const posX = Math.random() * window.innerWidth;
+                    const posY = Math.random() * window.innerHeight;
+                    const color = colors[Math.floor(Math.random() * colors.length)];
+                    const duration = Math.random() * 20 + 10;
+                    const delay = Math.random() * 5;
+                    const opacity = Math.random() * 0.5 + 0.1;
+                    // Apply styles
+                    particle.style.width = `${size}px`;
+                    particle.style.height = `${size}px`;
+                    particle.style.left = `${posX}px`;
+                    particle.style.top = `${posY}px`;
+                    particle.style.backgroundColor = color;
+                    particle.style.opacity = opacity;
+                    // Animation
+                    particle.style.animation = `float ${duration}s ${delay}s infinite ease-in-out`;
+                    document.body.appendChild(particle);
+                }
+            }
+            function initDeck() {
+                const deck = document.querySelector('.deck-container');
+                const cardsContainer = document.querySelector('.cards-container');
+                const cards = document.querySelectorAll('.cards-container .card');
+                // Deck hover effect
+                deck.addEventListener('mouseenter', () => {
+                    deck.querySelector('.deck').classList.add('deck-hover');
+                });
+                deck.addEventListener('mouseleave', () => {
+                    deck.querySelector('.deck').classList.remove('deck-hover');
+                });
+                // Deck click - draw cards
+                deck.addEventListener('click', () => {
+                    deck.style.pointerEvents = 'none';
+                    deck.querySelector('.deck').classList.remove('deck-hover');
+                    // Hide deck
+                    setTimeout(() => {
+                        deck.style.opacity = '0';
+                    }, 500);
+                    // Show cards container
+                    cardsContainer.style.opacity = '1';
+                    // Reset and animate cards
+                    cards.forEach(card => {
+                        card.style.opacity = '1';
+                        card.style.pointerEvents = 'auto';
+                    });
+                    cards[0].classList.add('card-draw-1');
+                    cards[1].classList.add('card-draw-2');
+                    cards[2].classList.add('card-draw-3');
+                    // Add hover effects to cards
+                    setTimeout(() => {
+                        cards.forEach(card => {
+                            card.style.pointerEvents = 'auto';
+                            card.addEventListener('mouseenter', () => {
+                                card.style.transform = 'translateY(-10px) rotateY(5deg)';
+                                card.style.boxShadow = '0 15px 40px rgba(234, 201, 122, 0.3), 0 0 0 2px var(--gold)';
+                                // Dim other cards
+                                cards.forEach(c => {
+                                    if (c !== card) {
+                                        c.style.opacity = '0.4';
+                                    }
+                                });
+                            });
+                            card.addEventListener('mouseleave', () => {
+                                card.style.transform = '';
+                                card.style.boxShadow = '';
+                                // Restore other cards
+                                cards.forEach(c => {
+                                    c.style.opacity = '1';
+                                });
+                            });
+                            // Card click - show section
+                            card.addEventListener('click', function() {
+                                const index = Array.from(cards).indexOf(this);
+                                showSection(index);
+                            });
+                        });
+                    }, 1000);
+                });
+            }
+            function showSection(index) {
+                const sections = document.querySelectorAll('.section-content');
+                const sectionTitles = document.querySelectorAll('.section-title');
+                const sectionTexts = document.querySelectorAll('.section-text');
+                const cards = document.querySelectorAll('.cards-container .card');
+                // Hide all sections first
+                sections.forEach(section => {
+                    section.classList.remove('active');
+                });
+                // Animate cards
+                cards.forEach((card, i) => {
+                    if (i === index) {
+                        card.classList.add('section-slide-up');
+                    } else {
+                        card.classList.add('section-slide-down');
+                    }
+                });
+                // Show selected section
+                setTimeout(() => {
+                    sections[index].classList.add('active');
+                    // Animate title letters
+                    const title = sectionTitles[index];
+                    title.innerHTML = title.textContent.split('').map((char, i) =>
+                        `<span class="letter-animation" style="transition-delay: ${i * 0.05}s">${char}</span>`
+                    ).join('');
+                    setTimeout(() => {
+                        const letters = title.querySelectorAll('.letter-animation');
+                        letters.forEach(letter => {
+                            letter.style.opacity = '1';
+                            letter.style.transform = 'translateY(0)';
+                        });
+                    }, 100);
+                    // Animate text blocks
+                    const textBlocks = sectionTexts[index].querySelectorAll('p, .project-card, .contact-method');
+                    textBlocks.forEach((block, i) => {
+                        block.style.opacity = '0';
+                        block.style.transform = 'translateY(20px)';
+                        block.style.transition = `all 0.5s ease ${0.2 + i * 0.1}s`;
+                        setTimeout(() => {
+                            block.style.opacity = '1';
+                            block.style.transform = 'translateY(0)';
+                        }, 100);
+                    });
+                }, 500);
+                // Remove card animations after they're done
+                setTimeout(() => {
+                    cards.forEach(card => {
+                        card.classList.remove('section-slide-up', 'section-slide-down');
+                        if (Array.from(cards).indexOf(card) !== index) {
+                            card.style.display = 'none';
+                        }
+                    });
+                }, 1000);
+            }
+            // Mobile touch support
+            if ('ontouchstart' in window) {
+                document.querySelector('.deck-container').addEventListener('touchend', function(e) {
+                    e.preventDefault();
+                    this.dispatchEvent(new Event('click'));
+                });
+                document.querySelectorAll('.card').forEach(card => {
+                    card.addEventListener('touchend', function(e) {
+                        e.preventDefault();
+                        this.dispatchEvent(new Event('click'));
+                    });
+                });
+            }
+        });
+    </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=hel1929/secret" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>