Hồ Tấn Phát

phathotmusic

phathotmusic

Thẻ: Hướng dẫn

Thẻ cho những bài viết liên quan đến chủ đề “Hướng dẫn”. Tìm hiểu những khía cạnh liên quan đến “Hướng dẫn” tại thẻ này.

  • “Sứa bay trên thành phố mây” video được tạo ra thế nào?

    “Sứa bay trên thành phố mây” video được tạo ra thế nào?

    !!!NỘI DUNG CÓ CHỈNH SỬA CÙNG TRÍ TUỆ NHÂN TẠO!!!

    Nội dung bạn đọc tiếp theo đây có sự can thiệp của trí tuệ nhân tạo, cân nhắc sử dụng như nguồn tư liệu chưa được kiểm chứng. Hãy đảm bảo luôn kiểm chứng nội dung được tạo ra cùng trí tuệ nhân tạo.

    Hôm nay, tôi đã có trải nghiệm đáng nhớ cùng Google Gemini. Với sự kết hợp của hai bộ công cụ mạnh mẽ Imagen 4 và Veo 3. Tôi đã có thể hoàn thành một video ngắn với chất lượng 720p, tỉ lệ khung hình 16:9, và thời lượng lên đến 8 giây.

    Cùng theo những bước cơ bản dưới đây của tôi để có thể tạo được video tương tự như “Sứa bay trên thành phố mây”.

    Điều kiện: bạn phải có tài khoản Google Gemini Pro. Đăng ký ngay để nhận 4 tháng trải nghiệm miễn phí.

    Các bước cụ thể

    1. Nhập câu prompt đơn giản bằng tiếng Anh: “Surprise me with an image of jellyfish flying above the cloudy city, cinematic vibe in aspect ratio 16:9.” (Tạm dịch: “Làm tôi ngạc nhiên với hình ảnh những con sứa đang bay trên thành phố mây, cảm giác điện ảnh cùng tỉ lệ khung hình 16:9.”)
    2. Tải ảnh đã được Google Gemini tạo ở bước 1
    3. Upload ảnh đã tải ở bước 2 lên Google Gemini, và mở tính năng video trước khi nhập prompt
    4. Tiếp tục với prompt tiếng Anh: “Turn this image into a video with the focus on the movements of the jellyfish and the cloud.” (Tạm dịch: “Biến hình ảnh này thành một video tập trung vào chuyển động của những con sứa và đám mây.”)
    5. Chờ đợi tầm 5 phút và tận hưởng thành quả

    Hình ảnh

    Video

  • “Nexus Era” website được tạo ra như thế nào?

    “Nexus Era” website được tạo ra như thế nào?

    !!!NỘI DUNG CÓ CHỈNH SỬA CÙNG TRÍ TUỆ NHÂN TẠO!!!

    Nội dung bạn đọc tiếp theo đây có sự can thiệp của trí tuệ nhân tạo, cân nhắc sử dụng như nguồn tư liệu chưa được kiểm chứng. Hãy đảm bảo luôn kiểm chứng nội dung được tạo ra cùng trí tuệ nhân tạo.

    Hôm nay, tôi có cơ hội tạo “Nexus Era” website bằng AI. Và ý tôi là một website hoàn chỉnh đúng nghĩa đen. Vì sao tôi nói vậy?

    • Website có hỗ trợ responsive cho thiết bị di động
    • Website có layout và thiết kế đồng nhất
    • Website có các components có thể tương tác được

    Dưới đây là các bước mà tôi đã thực hiện, và đảm bảo không tốn quá 15 phút của bạn đâu.

    1. Truy cập vào đường dẫn này: https://huggingface.co/spaces/enzostvs/deepsite
    2. Nhập những dòng prompt đơn giản bên dưới. Dùng tiếng Anh cho đảm bảo sự hiểu của AI.
      • create a website with main color focusing on black, white and golden, with golden is a main color. a website about futuristic concept of AI era where people can work and learn without limitation, people contribute to the development of the whole society and planet. making sure the website has a vibe of future, modern, nano tech.
    3. Chờ tầm 5 – 10 phút, tùy theo độ phức tạp của website mà bạn mô tả.
    4. Chiêm ngưỡng kết quả

    Chia sẽ code

    Cùng tôi chiêm ngưỡng phần code mà AI đã tạo ra nhé

    <header></header>

    HTML
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus Era - The Future of Collective Intelligence</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">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        gold: {
                            100: '#FFF9E6',
                            200: '#FFEEB8',
                            300: '#FFE38A',
                            400: '#FFD85C',
                            500: '#FFD12E',
                            600: '#E5BC29',
                            700: '#CCA724',
                            800: '#B2921F',
                            900: '#997D1A',
                        },
                        dark: {
                            900: '#0A0A0A',
                            800: '#1A1A1A',
                            700: '#2A2A2A',
                            600: '#3A3A3A',
                        }
                    },
                    fontFamily: {
                        sans: ['"Rajdhani"', 'sans-serif'],
                        mono: ['"Major Mono Display"', 'monospace'],
                    },
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Rajdhani:wght@300;400;500;600;700&display=swap');

        body {
            background-color: #0A0A0A;
            color: white;
            overflow-x: hidden;
        }

        .gold-gradient {
            background: linear-gradient(90deg, rgba(255, 209, 46, 0.1) 0%, rgba(255, 209, 46, 0.3) 50%, rgba(255, 209, 46, 0.1) 100%);
        }

        .hexagon {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .circuit-pattern {
            background-image:
                radial-gradient(circle at 1px 1px, rgba(255, 209, 46, 0.2) 1px, transparent 0);
            background-size: 20px 20px;
        }

        .glow {
            text-shadow: 0 0 10px rgba(255, 209, 46, 0.7);
        }

        .glow-box {
            box-shadow: 0 0 15px rgba(255, 209, 46, 0.5);
        }

        .particle {
            position: absolute;
            background-color: rgba(255, 209, 46, 0.6);
            border-radius: 50%;
            pointer-events: none;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .floating {
            animation: float 6s ease-in-out infinite;
        }

        .delay-1 {
            animation-delay: 1s;
        }

        .delay-2 {
            animation-delay: 2s;
        }

        .delay-3 {
            animation-delay: 3s;
        }

        .typewriter {
            overflow: hidden;
            border-right: 2px solid #FFD12E;
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: 2px;
            animation:
                typing 3.5s steps(40, end),
                blink-caret .75s step-end infinite;
        }

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        @keyframes blink-caret {

            from,
            to {
                border-color: transparent
            }

            50% {
                border-color: #FFD12E;
            }
        }
    </style>
</head>

    <body></body>

    HTML
    <body class="font-sans circuit-pattern">
    <!-- Particle Background -->
    <div id="particles"></div>

    <!-- Navigation -->
    <nav
        class="bg-dark-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 border-b border-gold-700 border-opacity-30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex-shrink-0 flex items-center">
                    <div class="hexagon bg-gold-500 w-10 h-10 flex items-center justify-center glow-box">
                        <span class="text-dark-900 font-bold text-xl font-mono">NE</span>
                    </div>
                    <span class="ml-3 text-gold-500 font-mono text-xl hidden md:block">NEXUS ERA</span>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-center space-x-8">
                        <a href="#"
                            class="text-white hover:text-gold-500 px-3 py-2 text-sm font-medium transition-all duration-300 border-b-2 border-transparent hover:border-gold-500">Home</a>
                        <a href="#"
                            class="text-white hover:text-gold-500 px-3 py-2 text-sm font-medium transition-all duration-300 border-b-2 border-transparent hover:border-gold-500">Vision</a>
                        <a href="#"
                            class="text-white hover:text-gold-500 px-3 py-2 text-sm font-medium transition-all duration-300 border-b-2 border-transparent hover:border-gold-500">Platform</a>
                        <a href="#"
                            class="text-white hover:text-gold-500 px-3 py-2 text-sm font-medium transition-all duration-300 border-b-2 border-transparent hover:border-gold-500">Community</a>
                        <a href="#"
                            class="text-white hover:text-gold-500 px-3 py-2 text-sm font-medium transition-all duration-300 border-b-2 border-transparent hover:border-gold-500">Join
                            Us</a>
                    </div>
                </div>
                <div class="md:hidden">
                    <button class="text-gold-500 hover:text-white focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative pt-32 pb-20 md:pt-40 md:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
        <div class="max-w-7xl mx-auto">
            <div class="md:grid md:grid-cols-2 md:gap-12 items-center">
                <div class="mb-12 md:mb-0">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
                        <span class="text-gold-500 glow">Beyond</span>
                        <span class="typewriter">Human Limitations</span>
                    </h1>
                    <p class="text-lg md:text-xl text-gray-300 mb-8">
                        Welcome to the Nexus Era - where artificial intelligence amplifies human potential, creating a
                        symbiotic ecosystem for learning, working, and evolving without boundaries.
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <button
                            class="bg-gold-500 hover:bg-gold-600 text-dark-900 font-bold py-3 px-6 rounded-md transition-all duration-300 transform hover:scale-105 glow-box">
                            Join the Movement
                        </button>
                        <button
                            class="border border-gold-500 text-gold-500 hover:bg-gold-500 hover:bg-opacity-10 font-bold py-3 px-6 rounded-md transition-all duration-300 transform hover:scale-105">
                            Explore Platform
                        </button>
                    </div>
                </div>
                <div class="relative">
                    <div class="hexagon bg-dark-800 w-full h-96 floating mx-auto relative overflow-hidden">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="hexagon bg-gold-500 bg-opacity-20 w-64 h-64 floating delay-1"></div>
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="hexagon bg-gold-500 bg-opacity-10 w-80 h-80 floating delay-2"></div>
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
                                alt="Futuristic AI" class="hexagon w-full h-full object-cover floating delay-3">
                        </div>
                    </div>
                    <div class="absolute -bottom-8 -left-8 w-32 h-32 bg-gold-500 rounded-full opacity-10 -z-10"></div>
                    <div class="absolute -top-8 -right-8 w-40 h-40 bg-gold-500 rounded-full opacity-5 -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-dark-800 gold-gradient">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div class="p-6">
                    <div class="text-gold-500 text-4xl md:text-5xl font-bold mb-2 font-mono glow">10M+</div>
                    <div class="text-white text-sm md:text-base uppercase tracking-wider">Global Contributors</div>
                </div>
                <div class="p-6">
                    <div class="text-gold-500 text-4xl md:text-5xl font-bold mb-2 font-mono glow">24/7</div>
                    <div class="text-white text-sm md:text-base uppercase tracking-wider">Learning Access</div>
                </div>
                <div class="p-6">
                    <div class="text-gold-500 text-4xl md:text-5xl font-bold mb-2 font-mono glow">∞</div>
                    <div class="text-white text-sm md:text-base uppercase tracking-wider">Possibilities</div>
                </div>
                <div class="p-6">
                    <div class="text-gold-500 text-4xl md:text-5xl font-bold mb-2 font-mono glow">100%</div>
                    <div class="text-white text-sm md:text-base uppercase tracking-wider">Decentralized</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    <span class="text-gold-500">The Nexus</span>
                    <span class="text-white">Platform</span>
                </h2>
                <p class="text-gray-400 max-w-3xl mx-auto">
                    A revolutionary ecosystem where knowledge flows freely, work transcends physical boundaries, and
                    every contribution fuels the advancement of our collective intelligence.
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div
                    class="bg-dark-800 rounded-xl p-8 transition-all duration-500 hover:transform hover:scale-105 hover:glow-box border border-dark-700 hover:border-gold-500 hover:border-opacity-30">
                    <div class="hexagon bg-gold-500 w-16 h-16 flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-brain text-2xl text-dark-900"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3 text-center">Neural Uplink</h3>
                    <p class="text-gray-400 text-center">
                        Direct interface with AI systems through neural networks, accelerating learning and
                        problem-solving capabilities.
                    </p>
                </div>

                <!-- Feature 2 -->
                <div
                    class="bg-dark-800 rounded-xl p-8 transition-all duration-500 hover:transform hover:scale-105 hover:glow-box border border-dark-700 hover:border-gold-500 hover:border-opacity-30">
                    <div class="hexagon bg-gold-500 w-16 h-16 flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-project-diagram text-2xl text-dark-900"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3 text-center">Hive Projects</h3>
                    <p class="text-gray-400 text-center">
                        Collaborative workspaces where thousands contribute simultaneously to planetary-scale
                        initiatives.
                    </p>
                </div>

                <!-- Feature 3 -->
                <div
                    class="bg-dark-800 rounded-xl p-8 transition-all duration-500 hover:transform hover:scale-105 hover:glow-box border border-dark-700 hover:border-gold-500 hover:border-opacity-30">
                    <div class="hexagon bg-gold-500 w-16 h-16 flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-atom text-2xl text-dark-900"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3 text-center">Nano-Constructs</h3>
                    <p class="text-gray-400 text-center">
                        Molecular-scale fabrication tools that turn digital designs into physical reality within hours.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Vision Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-dark-800">
        <div class="max-w-7xl mx-auto">
            <div class="md:grid md:grid-cols-2 md:gap-16 items-center">
                <div class="mb-12 md:mb-0 order-2 md:order-1">
                    <div class="relative">
                        <div class="absolute inset-0 bg-gold-500 opacity-10 rounded-xl -rotate-3"></div>
                        <img src="https://images.unsplash.com/photo-1507146153580-69a1fe6d8aa1?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                            alt="Futuristic city with glowing lights" class="relative rounded-xl w-full h-auto">
                    </div>
                </div>
                <div class="order-1 md:order-2">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">
                        <span class="text-gold-500">Our Vision</span>
                        <span class="text-white">for 2045</span>
                    </h2>
                    <p class="text-gray-400 mb-6">
                        We envision a world where the boundaries between human and artificial intelligence blur,
                        creating a seamless network of consciousness that drives innovation, solves global challenges,
                        and elevates every individual to their highest potential.
                    </p>
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="hexagon bg-gold-500 w-5 h-5 flex items-center justify-center">
                                    <i class="fas fa-check text-xs text-dark-900"></i>
                                </div>
                            </div>
                            <p class="ml-3 text-gray-300">Decentralized knowledge repositories accessible to all
                                humanity</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="hexagon bg-gold-500 w-5 h-5 flex items-center justify-center">
                                    <i class="fas fa-check text-xs text-dark-900"></i>
                                </div>
                            </div>
                            <p class="ml-3 text-gray-300">AI-assisted education that adapts to each individual's
                                learning patterns</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="hexagon bg-gold-500 w-5 h-5 flex items-center justify-center">
                                    <i class="fas fa-check text-xs text-dark-900"></i>
                                </div>
                            </div>
                            <p class="ml-3 text-gray-300">Global problem-solving through collective intelligence
                                networks</p>
                        </li>
                    </ul>
                    <button
                        class="border border-gold-500 text-gold-500 hover:bg-gold-500 hover:bg-opacity-10 font-bold py-3 px-6 rounded-md transition-all duration-300 transform hover:scale-105">
                        Read the Manifesto
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-32 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
        <div class="absolute inset-0 bg-gold-500 opacity-5 -z-10"></div>
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl md:text-5xl font-bold mb-6">
                <span class="text-white">Ready to Transcend</span>
                <span class="text-gold-500 glow">Human Limits?</span>
            </h2>
            <p class="text-xl text-gray-300 mb-10">
                Join the Nexus Era today and become part of the most advanced collective intelligence network on Earth.
            </p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <button
                    class="bg-gold-500 hover:bg-gold-600 text-dark-900 font-bold py-4 px-8 rounded-md transition-all duration-300 transform hover:scale-105 glow-box text-lg">
                    Begin Your Evolution
                </button>
                <button
                    class="border border-gold-500 text-gold-500 hover:bg-gold-500 hover:bg-opacity-10 font-bold py-4 px-8 rounded-md transition-all duration-300 transform hover:scale-105 text-lg">
                    Schedule Demo
                </button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark-900 border-t border-dark-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center">
                        <div class="hexagon bg-gold-500 w-8 h-8 flex items-center justify-center">
                            <span class="text-dark-900 font-bold text-sm font-mono">NE</span>
                        </div>
                        <span class="ml-2 text-gold-500 font-mono">NEXUS ERA</span>
                    </div>
                    <p class="mt-4 text-gray-400 text-sm">
                        Building the future of collective intelligence since 2032.
                    </p>
                </div>
                <div>
                    <h3 class="text-gold-500 font-medium mb-4">Platform</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Features</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Pricing</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Integrations</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-gold-500 font-medium mb-4">Resources</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Tutorials</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Research</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-gold-500 font-medium mb-4">Connect</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Twitter</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">LinkedIn</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Discord</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="mt-12 pt-8 border-t border-dark-800 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm">
                    © 2032 Nexus Era. All rights reserved.
                </p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="text-gray-400 hover:text-gold-500">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-gold-500">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-gold-500">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-gold-500">
                        <i class="fab fa-discord"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Create particle background
        document.addEventListener('DOMContentLoaded', function () {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');

                // Random size between 1px and 3px
                const size = Math.random() * 2 + 1;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;

                // Random position
                particle.style.left = `${Math.random() * 100}vw`;
                particle.style.top = `${Math.random() * 100}vh`;

                // Random animation duration and delay
                const duration = Math.random() * 20 + 10;
                const delay = Math.random() * 5;
                particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;

                particlesContainer.appendChild(particle);
            }

            // Hexagon grid animation
            const hexagons = document.querySelectorAll('.hexagon:not(.bg-dark-800)');
            hexagons.forEach(hex => {
                hex.addEventListener('mouseenter', () => {
                    hex.style.transform = 'scale(1.05)';
                });
                hex.addEventListener('mouseleave', () => {
                    hex.style.transform = 'scale(1)';
                });
            });

            // Typewriter effect for multiple elements
            const typewriterElements = document.querySelectorAll('.typewriter');
            let currentElement = 0;

            function resetTypewriter() {
                typewriterElements.forEach(el => {
                    el.style.width = '0';
                    el.style.animation = 'none';
                    void el.offsetWidth; // Trigger reflow
                });

                typewriterElements[currentElement].style.animation =
                    `typing 3.5s steps(40, end), blink-caret .75s step-end infinite`;
                typewriterElements[currentElement].style.width = '100%';

                currentElement = (currentElement + 1) % typewriterElements.length;
                setTimeout(resetTypewriter, 8000);
            }

            setTimeout(resetTypewriter, 8000);
        });
    </script>
</body>