index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link in Bio | Nayan Das</title>
    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Roboto+Slab:wght@400;700&display=swap"
        rel="stylesheet">
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <!-- Favicon -->
    <link rel="icon" href="images/favicon.jpg" type="image/jpeg">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- Dark Mode Toggle -->
    <div class="theme-toggle">
        <i class="fas fa-moon"></i>
        <i class="fas fa-sun"></i>
    </div>

    <div class="container">
        <!-- Profile Section -->
        <div class="profile">
            <img src="images/profile.jpg" alt="Profile Picture" class="profile-img">
            <h1>Nayan Das</h1>
            <p>Crafting Code & Content for a Connected World</p>
        </div>

        <!-- Social Links -->
        <div class="social-links">
            <div class="link-container">
                <a href="https://github.com/nayandas69" class="social-link github" target="_blank">
                    <i class="fab fa-github"></i>
                </a>
                <div class="hover-card">Check out my GitHub</div>
            </div>
            <div class="link-container">
                <a href="https://patreon.com/NayanDas69" class="social-link patreon" target="_blank">
                    <i class="fab fa-patreon"></i>
                </a>
                <div class="hover-card">Support me on Patreon</div>
            </div>
            <div class="link-container">
                <a href="https://youtube.com/@dasnayan69" class="social-link youtube" target="_blank">
                    <i class="fab fa-youtube"></i>
                </a>
                <div class="hover-card">Subscribe to my YouTube channel</div>
            </div>
            <div class="link-container">
                <a href="https://discord.gg/skHyssu" class="social-link discord" target="_blank">
                    <i class="fab fa-discord"></i>
                </a>
                <div class="hover-card">Join my Discord server</div>
            </div>
            <div class="link-container">
                <a href="https://nayanchandradas.com" class="social-link website" target="_blank">
                    <i class="fas fa-briefcase"></i>
                </a>
                <div class="hover-card">Visit my Website</div>
            </div>
            <div class="link-container">
                <a href="mailto:nayanchandradas@hotmail.com" class="social-link email" target="_blank">
                    <i class="fas fa-envelope"></i>
                </a>
                <div class="hover-card">Email me</div>
            </div>
        </div>

        <!-- Blog Section with Carousel -->
        <div class="blog-section">
            <h2>Latest Blogs</h2>
            <div class="carousel-container">
                <div class="blog-carousel">
                    <!-- Blog items will be dynamically added here -->
                </div>
                <div class="carousel-dots">
                    <!-- Dots will be dynamically added here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Blog Popup Modal -->
    <div id="blogModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="blogTitle"></h2>
            <p>by <strong><a href="https://youtube.com/@dasnayan69" target="_blank">dasnayan69</a></strong></p>
            <div id="blogVideo"></div>
            <p id="blogDescription"></p>
        </div>
    </div>

    <!-- Custom JavaScript -->
    <script src="index.js"></script>
</body>

</html>