<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <!-- Header -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Archit</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
                    <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-section">
        <div class="overlay"></div>
        <div class="container text-center text-white">
            <h1 class="display-2 fw-bold mb-4">Archit Jain</h1>
            <div class="h3 mb-4">
                I am a <span id="typed-text"></span>
            </div>
            <button class="btn btn-primary btn-lg" id="download-btn">
                <i class="bi bi-download me-2"></i>Download Resume
            </button>
        </div>
        <!-- Popup Content -->
        <div id="popup" class="popup">
            <div class="popup-content">
                <h2>Adding Soon</h2>
                <p>Thank you for showing interest in my profile. I will add my proper resume soon.</p>
                <button class="close-btn" id="close-popup">Close</button>
            </div>
        </div>
        <div class="meteor-shower">
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
            <div class="meteor"></div>
        </div>
        <div class="mouse"></div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-5">
        <div class="container">
            <h2 class="text-center display-4 mb-5">About Me</h2>
            <div class="row align-items-center">
                <div class="col-md-6 mb-4 mb-md-0">
                    <img src="/basic/archit.jpg" alt="Profile" class="about-img">
                </div>
                <div class="col-md-6">
                    <div class="coding-container lead">
                        <div class="coding-header">
                            <div class="status-dot red"></div>
                            <div class="status-dot yellow"></div>
                            <div class="status-dot green"></div>
                        </div>
                        <div class="coding-box" id="codingBox" contenteditable="false">
                        </div>
                    </div>

                    <!-- <p class="lead">Hi there! I'm a passionate software engineer with expertise in web development and cyber security. With over 5 years of experience in the tech industry, I've worked on various projects ranging from full-stack web applications to security infrastructure implementations.</p>
                    <p class="lead">When I'm not coding, you can find me gaming, exploring new technologies, or contributing to open-source projects. I believe in continuous learning and staying updated with the latest trends in technology.</p> -->
                </div>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section id="skills" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center display-4 mb-5">Skills & Hobbies</h2>
            <div class="skills-container mb-5">
                <h3 class="h2 mb-4">Technical Skills</h3>
                <div class="skill-bars"></div>
            </div>
            <div class="hobbies-container">
                <h3 class="h2 mb-4">Hobbies</h3>
                <div class="row hobby-cards"></div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="py-5">
        <div class="container">
            <h2 class="text-center display-4 mb-5">Projects</h2>
            <div class="row project-cards"></div>
            <div class="text-center mt-4">
                <a href="https://github.com/yourusername" target="_blank" class="btn btn-outline-primary">
                    <i class="bi bi-github me-2"></i>View More Projects on GitHub
                </a>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-5 bg-light">
        <div class="container text-center">
            <h2 class="display-4 mb-5">Get in Touch</h2>
            <p class="lead mb-5">I'm always open to new opportunities and collaborations. Feel free to reach out through
                any of the platforms below!</p>
            <div class="social-links mb-5"></div>
        </div>
        <footer class="bg-dark text-white py-3 text-center">
            <p class="mb-0">© <span id="current-year"></span> Archit Jain. All rights reserved.</p>
        </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
    <script src="./data.js"></script>
    <script src="./animations.js"></script>
    <script src="./main.js"></script>
</body>

</html>