<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive CV/Business Card</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="background-wrapper">
        <div class="dots-pattern"></div>
        <div class="container">
            <div class="card main-card">
                <div class="row g-0">
                    <!-- Left Section -->
                    <div class="col-md-4 left-section text-center">
                        <div class="profile-content">
                            <div class="profile-img-container">
                                <img src="profile-placeholder.jpg" class="profile-img">
                                <div class="status-badge">Available for work</div>
                            </div>
                            <h2 class="name">Your Name</h2>
                            <p class="position">Creative Developer</p>
                            
                            <div class="social-links">
                                <a href="#" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                                <a href="#" class="social-icon" aria-label="GitHub"><i class="fab fa-github"></i></a>
                                <a href="#" class="social-icon" aria-label="Dribbble"><i class="fab fa-dribbble"></i></a>
                            </div>
                            
                            <button class="download-cv" id="downloadCV">
                                <i class="fas fa-download"></i> Download CV
                            </button>
                            
                            <div class="contact-buttons">
                                <button class="hire-me" id="hireMe">
                                    <i class="fas fa-paper-plane"></i> Hire Me
                                </button>
                            </div>
                            
                            <div class="copyright">
                                © 2024 Portfolio
                            </div>
                        </div>
                        <div class="theme-switch">
                            <label class="switch">
                                <input type="checkbox" id="themeToggle">
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- Right Section -->
                    <div class="col-md-8 right-section">
                        <div class="content-wrapper" id="contentArea">
                            <!-- Content will be loaded here -->
                            <div class="section-home active-section">
                                <h1 class="main-title">Creative<br>Developer</h1>
                                <h3 class="subtitle">Turning ideas into reality</h3>
                                <div class="stats-container">
                                    <div class="stat-item">
                                        <span class="stat-number">5+</span>
                                        <span class="stat-label">Years Experience</span>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-number">50+</span>
                                        <span class="stat-label">Projects</span>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-number">30+</span>
                                        <span class="stat-label">Happy Clients</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Navigation Menu -->
        <nav class="side-nav">
            <a href="#home" class="nav-item active" data-section="home"><i class="fas fa-home"></i><span class="tooltip">Home</span></a>
            <a href="#about" class="nav-item" data-section="about"><i class="fas fa-user"></i><span class="tooltip">About</span></a>
            <a href="#portfolio" class="nav-item" data-section="portfolio"><i class="fas fa-briefcase"></i><span class="tooltip">Portfolio</span></a>
            <a href="#skills" class="nav-item" data-section="skills"><i class="fas fa-code"></i><span class="tooltip">Skills</span></a>
            <a href="#contact" class="nav-item" data-section="contact"><i class="fas fa-envelope"></i><span class="tooltip">Contact</span></a>
        </nav>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html> 