<button class="theme-switch" onclick="toggleTheme()">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </button>
    <aside id="home" class="sidebar">
        <div class="sidebar-info">
            <div class="avatar-box">
                <img src="images/anwrk.jpg" alt="Profile" class="profile-image">
            </div>
            <div class="info-content">
                <h2 class="name">Azzouz Anouar khalil</h2>
                <div class="title">Web developer</div>
            </div>
        </div>
        <div class="sidebar-info-more">
            <ul class="contacts-list">
                <li class="contact-item">
                    <div class="icon-box">
                        <i class="fa-regular fa-envelope"></i>
                    </div>
                    <div class="contact-info">
                        <p class="contact-title">Email</p>
                        <a href="mailto:anwrk.azz@gmail.com" class="contact-link">anwrk.azz@gmail.com</a>
                    </div>
                </li>
                <li class="contact-item">
                    <div class="icon-box">
                        <i class="fa-solid fa-mobile-screen"></i>
                    </div>
                    <div class="contact-info">
                        <p class="contact-title">Phone</p>
                        <a href="tel:+12133522795" class="contact-link">+213 778138909</a>
                    </div>
                </li>
                <li class="contact-item">
                    <div class="icon-box">
                        <i class="fa-regular fa-calendar"></i>
                    </div>
                    <div class="contact-info">
                        <p class="contact-title">Birthday</p>
                        <p href="#" class="contact-link">December 12, 2004</p>
                    </div>
                </li>
                <li class="contact-item">
                    <div class="icon-box">
                        <i class="fa-solid fa-location-dot"></i>
                    </div>
                    <div class="contact-info">
                        <p class="contact-title">Location</p>
                        <a href="https://maps.app.goo.gl/FKkuHs4WpMLgi2LL8" class="contact-link">5015, Batna,
                            Algeria</a>
                    </div>
                </li>
            </ul>
            <ul class="social-list">
                <li class="social-item">
                    <a href="#" class="social-link">
                        <i class="fa-brands fa-facebook"></i>
                    </a>
                </li>
                <li class="social-item">
                    <a href="#" class="social-link">
                        <i class="fa-brands fa-linkedin-in"></i>
                    </a>
                </li>
                <li class="social-item">
                    <a href="#" class="social-link">
                        <i class="fa-brands fa-github"></i>
                    </a>
                </li>
                <li class="social-item">
                    <a href="#" class="social-link">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                </li>
            </ul>
        </div>
    </aside>

    <main class="main-content">
        <nav class="vertical-nav">
            <a href="#home" class="nav-item active" data-tooltip="Home">
                <i class="fas fa-home"></i>
                <span class="nav-text">Home</span>
            </a>
            <a href="#cv" class="nav-item" data-tooltip="Resume">
                <i class="fa-regular fa-address-card"></i>
                <span class="nav-text">Resume</span>
            </a>
            <a href="#projects" class="nav-item" data-tooltip="Portfolio">
                <i class="fa-solid fa-briefcase"></i>
                <span class="nav-text">Portfolio</span>
            </a>
            <a href="#certifications" class="nav-item" data-tooltip="certifications">
                <i class="fa-solid fa-medal"></i>
                <span class="nav-text">Certifications</span>
            </a>
            <a href="#contact" class="nav-item" data-tooltip="Contact">
                <i class="fa-solid fa-envelope"></i>
                <span class="nav-text">Contact</span>
            </a>
        </nav>
        <section id="about">
            <div class="about-container">
                <h1 class="small-width">Who Am I?</h1>
                <div class="top-about">
                    <div class="about-p">
                        <p class="about-text">My name is <span>Azzouz Anouar Khalil</span>, and I am a dedicated
                            front-end
                            web
                            developer from Batna, Algeria. I have a passion for learning and creating new applications
                            with
                            fast,
                            secure, and
                            clean code. I specialize in programming and maintaining responsive websites that provide
                            seamless
                            user
                            experiences. I take pride in crafting dynamic and engaging interfaces by writing optimized
                            and
                            clean
                            code. I stay up-to-date with the latest development tools and techniques to ensure that I
                            deliver
                            cutting-edge web applications.
                        </p>
                        <div class="about-stats">
                            <div class="stat-box">
                                <div class="number">2+</div>
                                <div class="label">Years of Experience</div>
                            </div>
                            <div class="stat-box">
                                <div class="number">10+</div>
                                <div class="label">Projects</div>
                            </div>
                        </div>
                    </div>
                    <div class="editor">
                        <div class="window-controls">
                            <div class="control red"></div>
                            <div class="control yellow"></div>
                            <div class="control green"></div>
                        </div>
                        <div class="code-area">
                            <pre><span class="const">const</span> coder = {
            name: <span class="string">'AZZOUZ ANOUAR KHALIL'</span>,
            skills: [<span class="string">'wDev'</span>, <span class="string">'wDsgn'</span>, <span class="string">'cybSec'</span>, <span class="string">'net'</span>],
            hardWorker: <span class="boolean">true</span>,
            problemSolver: <span class="boolean">true</span>,
            fastLearner: <span class="boolean">true</span>,
            <span class="function">hireable</span>: function() {
                    return (
                            <span class="property">this</span>.hardWorker &&
                            <span class="property">this</span>.problemSolver &&
                            <span class="property">this</span>.fastLearner &&
                            <span class="property">this</span>.skills.length >= 4
                    );
            }
}</pre>
                        </div>
                    </div>
                </div>
                <h1>My Focus <span class="highlight">Areas</span></h1>
                <div class="skills-grid">
                    <div class="skill-card">
                        <div class="skill-icon">
                            <i class="fa-solid fa-palette"></i>
                        </div>
                        <div class="skill-text">
                            <h3>Web Design</h3>
                            <p>The most modern and high-quality design made at a professional level.</p>
                        </div>
                    </div>
                    <div class="skill-card">
                        <div class="skill-icon">
                            <i class="fa-solid fa-globe"></i>
                        </div>
                        <div class="skill-text">
                            <h3>Web Development</h3>
                            <p>High-quality development of sites at the professional level.</p>
                        </div>
                    </div>
                    <div class="skill-card">
                        <div class="skill-icon">
                            <i class="fa-solid fa-screwdriver-wrench"></i>
                        </div>
                        <div class="skill-text">
                            <h3>Debugging And Problem Solving</h3>
                            <p>Strong ability to identify and resolve software issues and optimize performance.</p>
                        </div>
                    </div>
                    <div class="skill-card">
                        <div class="skill-icon">
                            <i class="fa-solid fa-graduation-cap"></i>
                        </div>
                        <div class="skill-text">
                            <h3>Continuous Learning</h3>
                            <p>Dedicated to learning and applying new technologies and tools in real-world projects.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="cv">
            <h1> Education & <span class="highlight">Experience</span></h1>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-date">2022 - present</div>
                    <div class="timeline-role">Bachelor Degree of Computer Science</div>
                    <div class="timeline-company">Faculity Of Science, CU Of Barika</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-date">2022 - present</div>
                    <div class="timeline-role">Junior Front End Developer</div>
                    <div class="timeline-company">Self-Initiated Projects / Academic Work</div>
                </div>
            </div>
            <div class="buttons">
                <button class="cv-btn">Download Cv</button>
                <button class="contact-btn">Contact Me</button>
            </div>
        </section>

        <section id="projects">
            <h1 class="small-width">My <span class="highlight">Projects</span></h1>
            <div class="filter-buttons">
                <button class="filter-btn active" data-filter="all">All Projects</button>
                <button class="filter-btn" data-filter="web-dev">Web Dev</button>
                <button class="filter-btn" data-filter="uni">Uni Projects</button>
            </div>
            <div class="projects-grid">
                <!-- Project Card -->
                <div class="project-card">
                    <img src="images/project-1.jpg" alt="Project" class="project-image">
                    <div class="project-links">
                        <a href="#" class="project-link" title="Live Demo">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="project-link" title="Source Code">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                    <div class="project-overlay">
                        <h3 class="project-title">Project Name</h3>
                        <p class="project-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam </p>
                    </div>
                </div>
                <div class="project-card" data-category="web-dev">
                    <img src="images/project-3.jpg" alt="Project" class="project-image">
                    <div class="project-links">
                        <a href="#" class="project-link" title="Live Demo">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="project-link" title="Source Code">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                    <div class="project-overlay">
                        <h3 class="project-title">Project Name</h3>
                        <p class="project-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam </p>
                    </div>
                </div>
                <div class="project-card" data-category="web-dev">
                    <img src="images/project-4.png" alt="Project" class="project-image">
                    <div class="project-links">
                        <a href="#" class="project-link" title="Live Demo">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="project-link" title="Source Code">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                    <div class="project-overlay">
                        <h3 class="project-title">Project Name</h3>
                        <p class="project-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam </p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="images/project-6.png" alt="Project" class="project-image">
                    <div class="project-links">
                        <a href="#" class="project-link" title="Live Demo">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="project-link" title="Source Code">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                    <div class="project-overlay">
                        <h3 class="project-title">Project Name</h3>
                        <p class="project-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam </p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="images/project-7.png" alt="Project" class="project-image">
                    <div class="project-links">
                        <a href="#" class="project-link" title="Live Demo">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="project-link" title="Source Code">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                    <div class="project-overlay">
                        <h3 class="project-title">Project Name</h3>
                        <p class="project-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam </p>
                    </div>
                </div>
            </div>
            <button class="load-btn">
                <span>See More</span>
                <i class="fa-solid fa-arrow-right"></i>
            </button>
        </section>
        <!-- Certifications Section -->
        <section id="certifications">
            <h1>Achievements & <span class="highlight">Certifications</span></h1>
            <div class="certification-list">
                <div class="certification-item">
                    <img src="images/CS50x-logo.png" alt="Responsive Web Design">
                    <h3>Computer Science</h3>
                    <p class="issuer">Issued by: Harvard University</p>
                    <p class="date">Date Earned: December 2024</p>
                    <div class="certificate-image">
                        <img src="images/CS50x.png" alt="Computer Science Certificate">
                        <a href="https://cs50.harvard.edu/certificates/7ab3f102-c7ec-43e4-b24b-d0acfd9ff2e7"
                            class="view" target="_blank">View</a>
                    </div>
                </div>
                <div class="certification-item">
                    <img src="images/FCC Logo.png" alt="Responsive Web Design">
                    <h3>Responsive Web Design</h3>
                    <p class="issuer">Issued by: freeCodeCamp</p>
                    <p class="date">Date Earned: November 2023</p>
                    <div class="certificate-image">
                        <img src="images/FCC Responsive Web Design-1.png" alt="Responsive Web Design Certificate">
                        <a href="https://www.freecodecamp.org/certification/fcc881428be-3ca1-408e-a62d-bead6a5fadbb/responsive-web-design"
                            class="view" target="_blank">View</a>
                    </div>
                </div>

                <div class="certification-item">
                    <img src="images/Sololearn.png" alt="JavaScript Algorithms">
                    <h3>JavaScript Algorithms</h3>
                    <p class="issuer">Issued by: soloLearn</p>
                    <p class="date">Date Earned: March 2024</p>
                    <div class="certificate-image">
                        <img src="images/JavaScript.png" alt="JavaScript Algorithms Certificate">
                        <a href="images/JavaScript.png" class="view" target="_blank">View</a>
                    </div>
                </div>

                <div class="certification-item">
                    <img src="images/efsetlogo.png" alt="Front-End Development">
                    <h3>English</h3>
                    <p class="issuer">Issued by: EF SET</p>
                    <p class="date">Date Earned: June 2024</p>
                    <div class="certificate-image">
                        <img src="images/EF SET Certificate-1.png" alt="Front-End Development Certificate">
                        <a href="https://cert.efset.org/jy7YjX" class="view" target="_blank">View</a>
                    </div>
                </div>

                <div class="certification-item">
                    <img src="images/Cisco-logo.png" alt="Artificial Intelligence Certificate">
                    <h3>English</h3>
                    <p class="issuer">Issued by: Cisco</p>
                    <p class="date">Soon</p>
                    <div class="certificate-image">
                        <img src="" alt="Artificial Intelligence Certificate">
                        <a href="#" class="view">View</a>
                    </div>
                </div>
            </div>
            <button class="load-btn">
                <span>See More</span>
                <i class="fa-solid fa-arrow-right"></i>
            </button>
        </section>
        <section id="contact">
            <h1 class="small-width">Get In <span class="highlight">Touch</span></h1>

            <div class="map-container">
                <iframe
                    src="https://www.google.com/maps/embed/v1/place?q=elmadher&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
                    width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>

            <div class="contact-form">
                <form>
                    <div class="form-group">
                        <input type="text" placeholder="Full name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="Email address" required>
                    </div>
                    <div class="form-group">
                        <textarea placeholder="Your Message" required></textarea>
                    </div>
                    <button type="submit" class="send-btn">
                        <span>Send Message</span>
                        <i class="fa-regular fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </section>
    </main>
    <script src="js/script.js"></script>