<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bruno Garret</title>
    <meta name="description" content="Central hub for all my social media and public work">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css?v=202508190345">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">
    <link rel="manifest" href="site.webmanifest">
</head>
<body>
    <div class="container">
        <header class="hero">
            <button class="theme-toggle" id="theme-toggle" title="Toggle dark mode">
                <i class="fas fa-moon"></i>
                <i class="fas fa-sun"></i>
            </button>
            <div class="profile-section">
                <div class="profile-image">
                    <img src="https://scontent.fbts4-1.fna.fbcdn.net/v/t39.30808-6/520238526_24126002903754363_9121609103990431159_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=8HX6ueTpj_oQ7kNvwFaM8Iz&_nc_oc=AdkeUHNtfYVzTB4EjExPEBdYNUG8hCYpOv5VGyyh9ztZRZv8lPK6Gnz5bDAdntNNBcc&_nc_zt=23&_nc_ht=scontent.fbts4-1.fna&_nc_gid=M2JBGRYwN_xGMx8QbKWsgA&oh=00_AfU_AkqbivXsAGLo3ILN3jX15jK4EYEKPmp4HjhtcCcH1g&oe=68A96491" alt="Bruno Garret" id="profile-img">
                </div>
                <h1 class="name">Bruno Garret <span>(BG)</span></h1>
                <p class="tagline">Developer • Creator • Innovator</p>
                <p class="bio">Welcome to my Digital Hub. Connect with me across all platforms.</p>
            </div>
        </header>

        <main class="content">
            <!-- Social Media Links -->
            <section class="links-section">
                <h2 class="section-title">
                    <!-- <i class="fas fa-share-alt"></i> -->
                    Connect with me
                </h2>
                <div class="social-icons-grid">

                    <a href="https://www.facebook.com/BG.Bruno.Garret" class="social-icon" data-platform="facebook" title="Facebook" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-facebook"></i>
                    </a>

                    <a href="https://www.instagram.com/bgbrunocom" class="social-icon" data-platform="instagram" title="Instagram" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-instagram"></i>
                    </a>

                    <a href="https://x.com/bgbrunocom" class="social-icon" data-platform="twitter" title="Twitter" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-twitter"></i>
                    </a>

                    <a href="https://wa.me/421950354331" class="social-icon" data-platform="whatsapp" title="WhatsApp" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-whatsapp"></i>
                    </a>

                    <a href="http://m.me/BG.Bruno.Garret" class="social-icon" data-platform="messenger" title="Messenger" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-facebook-messenger"></i>
                    </a>

                    <a href="https://t.me/bgbruno" class="social-icon" data-platform="telegram" title="Telegram" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-telegram"></i>
                    </a>

                    <a href="https://www.linkedin.com/in/bgbruno" class="social-icon" data-platform="linkedin" title="LinkedIn" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-linkedin"></i>
                    </a>

                    <a href="https://www.youtube.com/@bgbrunocom" class="social-icon" data-platform="youtube" title="YouTube" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-youtube"></i>
                    </a>

                    <a href="http://discord.com/users/@bgbruno" class="social-icon" data-platform="discord" title="Discord" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-discord"></i>
                    </a>

                    <a href="https://github.com/bgbruno" class="social-icon" data-platform="github" title="GitHub" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-github"></i>
                    </a>

                    <a href="https://bgu.one" class="social-icon" data-platform="website" title="Website" target="_blank" rel="noopener noreferrer">
                        <img src="bg-logo.svg" alt="BG Logo">
                    </a>

                </div>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 BG.<br>All rights reserved.</p>
            <!-- <div class="footer-links">
                <a href="#" class="footer-link">Privacy</a>
                <a href="#" class="footer-link">Terms</a>
            </div> -->
        </footer>
    </div>

    <script src="script.js?v=202508190345"></script>
</body>
</html>
