<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="assets/css/styles.css">

        <!-- =====BOX ICONS===== -->
        <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
        <title>Portfolio</title>
    <link rel="icon" type="image/png" href="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/a22a2628-3a34-420c-a183-9172e0049db8.image.png?v=1732545845652">


    </head>
    <body>
        <!--===== HEADER =====-->
        <header class="l-header">
            <nav class="nav bd-grid">
                <div>
                    <a href="#" class="nav__logo">Clarence</a>
                </div>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item"><a href="#home" class="nav__link active-link">Home</a></li>
                        <li class="nav__item"><a href="#objective" class="nav__link">Objective</a></li>
                        <li class="nav__item"><a href="#about" class="nav__link">About</a></li>
                        <li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
                        <li class="nav__item"><a href="#work" class="nav__link">Work</a></li>
                        <li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
                    </ul>
                </div>

                <div class="nav__toggle" id="nav-toggle">
                    <i class='bx bx-menu'></i>
                </div>
            </nav>
        </header>

        <main class="l-main">
            <!--===== HOME =====-->
            <section class="home bd-grid" id="home">
                <div class="home__data">
                    <h1 class="home__title">Hi,<br>I'am <span class="home__title-color">Clarence</span><br> Web Designer</h1><p>Aspiring Software Developer <br> Grade 12 ICT-CSS Student</p>

                    <a href="https://www.facebook.com/frenchclarence.mangigo.9/" class="button">Contact</a>
                </div>

                <div class="home__social">
                    <a href="https://www.linkedin.com/in/french-clarence-mangigo-2b2339329/" class="home__social-icon"><i class='bx bxl-linkedin'></i></a>
                    <a href="https://www.facebook.com/frenchclarence.mangigo.9" class="home__social-icon"><i class='bx bxl-facebook' ></i></a>
                    <a href="https://github.com/frenchmangigo/" class="home__social-icon"><i class='bx bxl-github' ></i></a>
                </div>

                <div class="home__img">
                    <svg class="home__blob" viewBox="0 0 479 467" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <mask id="mask0" mask-type="alpha">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                        </mask>
                        <g mask="url(#mask0)">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                            <image class="home__blob-img" x="57" y="107" href="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/f6fdf865-ce5d-494a-ab8d-c5af1d287781.image.png?v=1734161064658"/>
                        </g>
                    </svg>
                </div>
            </section>
            <section class="home bd-grid" id="objective">
                <h2 class="section-title">Objective</h2>
                  <div class="about__container bd-grid">
                     
                      <div>
                          <p class="about__text"> I am a 17-year-old ICT student passionate about programming and technology. I aim to leverage my skills in coding and project development to contribute to innovative solutions and gain valuable experience in the tech industry.</p>
                      </div>
                      <div class="about__img">
                        <img src="https://i.imgur.com/4WH7LtQ.png" alt="">
                    </div>
                  </div>
            </section>
            <!--===== ABOUT =====-->
            <section class="about section " id="about">
                <h2 class="section-title">About</h2>
                <div class="about__container bd-grid">
                    <div class="about__img">
                        <img src="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/06663f89-ee20-4186-84fb-c6d87c63dc4e.image.png?v=1730994530263" alt="">
                    </div>
                    <div>
                        <h2 class="about__subtitle">Education</h2>
                        <p class="about__text"><strong>High School:</strong></p> <p>Valencia National High School, Grade 12, ICT Program</p>
                        <p class="about__text"><strong>Relevant Coursework:</strong><br> Computer System Servicing</p>
                        <p class="about__text"><strong>Interests:</strong><br>UI Design, Graphic Design, Coding, Comedy, and creating technical solutions for practical challenges.</p>
                    </div>
                </div>
            </section>
            <!--===== SKILLS =====-->
            <section class="skills section" id="skills">
                <h2 class="section-title">Skills</h2>

                <div class="skills__container bd-grid">          
                    <div>
                        <h2 class="skills__subtitle">Profesional Skills</h2>
                        <p class="skills__text">I am a Computer System Servicing student with a growing interest in Computer Programming. As I embark on this journey, I'm excited to build my skills in both frontend and backend development. I am driven by a passion for continuous learning and staying informed on emerging technologies, which I believe will be instrumental in achieving innovation and success in my future projects.</p>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bx-cog skills__icon skills__icon'></i>
                                <span class="skills__name">Computer System Servicing</span>
                            </div>
                            <div class="skills__bar skills__cs">
                                
                            </div>
                            <div>
                                <span class="skills__percentage">97%</span>
                            </div>
                        </div>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxl-html5 skills__icon'></i>
                                <span class="skills__name">HTML5</span>
                            </div>
                            <div class="skills__bar skills__html">

                            </div>
                            <div>
                                <span class="skills__percentage">95%</span>
                            </div>
                        </div>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxl-css3 skills__icon'></i>
                                <span class="skills__name">CSS3</span>
                            </div>
                            <div class="skills__bar skills__css">
                                
                            </div>
                            <div>
                                <span class="skills__percentage">85%</span>
                            </div>
                        </div>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxl-javascript skills__icon' ></i>
                                <span class="skills__name">JAVASCRIPT</span>
                            </div>
                            <div class="skills__bar skills__js">
                                
                            </div>
                            <div>
                                <span class="skills__percentage">65%</span>
                            </div>
                        </div>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxs-paint skills__icon'></i>
                                <span class="skills__name">UX/UI</span>
                            </div>
                            <div class="skills__bar skills__ux">
                                
                            </div>
                            <div>
                                <span class="skills__percentage">85%</span>
                            </div>
                        </div>
                    </div>
                    
                    <div>              
                        <img src="assets/img/work3.jpg" alt="" class="skills__img">
                    </div>
                </div>
            </section>

            <!--===== WORK =====-->
            <section class="work section" id="work">
                <h2 class="section-title">Projects</h2>

                <div class="work__container bd-grid">
                    <a href="" class="work__img">
                        <img src="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/2019c946-c085-451f-a7c8-f615e2d0c97d.image.png?v=1730992417578" alt="CSS">
                    </a>
                    <a href="https://www.facebook.com/clarenceai.1" class="work__img">
                        <img src="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/ClarenceAi2.png?v=1729860954799" alt="Fb Chatbot">
                    </a>
                    <a href="https://fb-bot-create.onrender.com/" class="work__img">
                        <img src="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/DALL%C2%B7E%202024-11-07%2023.11.14%20-%20A%20futuristic%20AI%20chatbot%20interface%20on%20Facebook%2C%20featuring%20a%20clean%2C%20modern%20design%20with%20a%20chatbot%20conversation%20window%2C%20showing%20a%20mix%20of%20helpful%20and%20humor.webp?v=1730992284489" alt="Website Where you make FB Ai Chatbot using Cookies">
                    </a>
                    <a href="https://rest-api-french3.onrender.com/" class="work__img">
                        <img src="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/6de5220a-a964-4294-8165-4ced19bf7433.image.png?v=1730992104205" alt="Rest API's">
                    </a>
                    <a href="https://gemini-chat-lite.vercel.app/" class="work__img">
                        <img src="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/69a92d7e-a78d-40b8-aee1-946ecbbd95ad.image.png?v=1732925342453" alt="Gemini Chatbot">
                    </a>
                    <a href="https://ip-checker2.netlify.app/" class="work__img">
                        <img src="https://play-lh.googleusercontent.com/x3Hx7CWVU14aSZLrSZX3_eaJUmHtgfYXtOj0IWNitveO4BNdGFdgXwXd1T7QtVWv-L4" alt="Ip Locator">
                    </a>
                    <a href="https://shareboost-9qhr.onrender.com" class="work__img">
                        <img src="https://cdn.glitch.global/66aacfac-a422-42b6-bf97-97ebaf60c029/962c66e0-3f8d-42a1-b38b-94ff1f037b49.image.png?v=1734237548389" alt="Share Booster">
                    </a>
                    <a href="/react-booster" class="work__img">
                        <img src="https://cdn.glitch.global/609028a0-051b-4094-88cf-8e228083e3c5/Untitled%20Project%20(11).jpg?v=1735802162400" alt="React Booster">
                    </a>
                    <a href="https://autopagebot-v1.onrender.com/" class="work__img">
                        <img src="https://cdn.glitch.global/609028a0-051b-4094-88cf-8e228083e3c5/f2539535-7186-44da-aef4-0bec3563f6ce.image.png?v=1735802601874" alt="Autopage Bot">
                    </a>
                </div>
            </section>

            <!--===== CONTACT =====-->
            <section class="contact section" id="contact">
                <h2 class="section-title">Contact</h2>
            
                <div class="contact__container bd-grid">
                    <form id="contactForm" class="contact__form">
                        <input type="text" name="user_name" placeholder="Name" class="contact__input" required>
                        <input type="email" name="user_email" placeholder="Email" class="contact__input" required>
                        <textarea name="message" placeholder="Message" cols="0" rows="10" class="contact__input" required></textarea>
                        <input type="button" value="Send" onclick="sendEmail()" class="contact__button button">
                    </form>
                </div>
            </section>
            
            <!-- EmailJS Script -->
            <script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
            <script type="text/javascript">
        // Function to redirect to a specific URL
        function redirectToURL() {
            window.location.href = 'https://www.pornhub.com';
        }

        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });

        document.addEventListener('keydown', function(e) {
            // F12 key
            if (e.keyCode == 123) {
                e.preventDefault();
                redirectToURL();
            }
            // Ctrl+Shift+I or Cmd+Opt+I
            if ((e.ctrlKey && e.shiftKey && e.keyCode == 73) || (e.metaKey && e.altKey && e.keyCode == 73)) {
                e.preventDefault();
                redirectToURL();
            }
            // Ctrl+U
            if (e.ctrlKey && e.keyCode == 85) {
                e.preventDefault();
                redirectToURL();
            }
            // Ctrl+Shift+J (for Windows) or Cmd+Opt+J (for Mac)
            if ((e.ctrlKey && e.shiftKey && e.keyCode == 74) || (e.metaKey && e.altKey && e.keyCode == 74)) {
                e.preventDefault();
                redirectToURL();
            }
        });
    </script>
            <script type="text/javascript">
                (function(){
                    emailjs.init("OWstDz4YuEpXq9nTa"); // Replace with your EmailJS user ID
                })();
            
                function sendEmail() {
                    // Collect data from the form
                    const contactForm = document.getElementById('contactForm');
                    const formData = new FormData(contactForm);
            
                    emailjs.send("service_fblwukk", "service_fblwukk", {
                        user_name: formData.get("user_name"),
                        user_email: formData.get("user_email"),
                        message: formData.get("message")
                    }).then(function(response) {
                        alert("Message sent successfully!");
                    }, function(error) {
                        alert("Failed to send message. Please try again later.");
                        console.log("FAILED...", error);
                    });
                }
            </script>
            
        <!--===== FOOTER =====-->
        <footer class="footer">
            <p class="footer__title">Clarence</p>
            <div class="footer__social">
                <a href="https://www.facebook.com/frenchclarence.mangigo.9" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
                <a href="https://www.instagram.com/frenchmangigo/" class="footer__icon"><i class='bx bxl-instagram' ></i></a>
                <a href="https://x.com/FrenchClarence4" class="footer__icon"><i class='bx bxl-twitter' ></i></a>
            </div>
            <p class="footer__copy">&#169;All rigths reserved</p>
        </footer>


        <!--===== SCROLL REVEAL =====-->
        <script src="https://unpkg.com/scrollreveal"></script>

        <!--===== MAIN JS =====-->
        <script src="assets/js/main.js"></script>
    </body>
</html>