index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manthan B Y - Software Engineer</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='80' font-size='80' font-family='Arial' fill='%23333'>M</text></svg>">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <div id="header-component"></div>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="hero-content">
            <div class="hero-text-wrapper">
                <h1></h1>
                <h2></h2>
                <p class="tagline"></p>
            </div>
            <blockquote class="personal-quote"></blockquote>
            <div class="social-links"></div>
            <div class="scroll-indicator">
                <span class="scroll-text"></span>
                <div class="scroll-arrows">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="hero-background">
            <div class="gradient-overlay"></div>
            <div class="animated-shapes"></div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <h2 class="section-title"></h2>
            <div class="about-content">
                <div class="about-text">
                    <h3></h3>
                    <p></p>
                    <div class="highlights">
                        <!-- Highlights will be populated here -->
                    </div>
                </div>
                <div class="skills-section">
                    <h3>Skills & Technologies</h3>
                    <div class="skill-categories">
                        <!-- Skills will be populated here -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Experience Section -->
    <section id="experience" class="experience">
        <div class="container">
            <h2 class="section-title"></h2>
            <div class="timeline"></div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="projects">
        <div class="container">
            <h2 class="section-title"></h2>
            <div class="projects-grid"></div>
        </div>
    </section>

    <!-- Research Section -->
    <section id="research" class="research">
        <div class="container">
            <h2 class="section-title"></h2>
            <div class="research-grid"></div>
        </div>
    </section>

    <!-- Footer -->
    <div id="footer-component"></div>

    <script src="js/utils/components.js"></script>
    <script src="js/header-menu.js"></script>
    <script src="js/script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            loadComponent('header-component', './components/header.html');
            loadComponent('footer-component', './components/footer.html');
        });
    </script>
</body>
</html>