<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Christian Website</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/css/line.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="X-Frame-Options" content="DENY">
    
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; img-src 'self'; font-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; object-src 'none'; frame-ancestors 'none';">

    <meta name="referrer" content="no-referrer">
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), payment=()">
</head>
<body>
    <nav>
        <div class="navbar">
            <div class="logo"><a href="#">CHRISTIAN.</a></div>
            <ul class="menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
                <div class="cancel-btn"><i class="fas fa-times"></i></div>
            </ul>
            <div class="media-icons">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-github"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
            <div class="menu-btn"><i class="fas fa-bars"></i></div>
        </div>
    </nav>
    
    <section class="home" id="home">
        <div class="home-content">
            <div class="text">
                <div class="text-one">Hello,</div>
                <div class="text-two">I'm Christian.</div>
                <div class="text-three">
                    <span class="typing-text"></span>
                </div>
                <div class="text-four">From Masbate</div>
            </div>
            <div class="button">
              <a href="#about">
                <button>Read More</button>
              </a>
            </div>
        </div>
    </section>

    <section class="about" id="about">
    <div class="content">
        <div class="title"><span>About Me</span></div>
        <div class="about-details">
            <div class="left">
                <img src="/1717808065824.png" alt="Profile Picture">
            </div>
            <div class="right">
                <p>Hello! I am Christian, a passionate web developer and designer.</p><p>With years of experience in various technologies, I build solutions that are not only functional but also aesthetically pleasing.</p>
                <a href="/CHRISTIAN C. PUNAY resume.pdf" class="download-cv" download>Download CV</a>
            </div>
        </div>
    </div>
    </section>


    <section class="skills" id="skills">
    <div class="content">
        <div class="title"><span>My Skills</span></div>
        <div class="skills-details">
            <div class="text">
                <p>Explore my expertise in various areas of technology.</p>
            </div>
            <div class="boxes">
                <div class="box" data-skill="HTML">
                    <div class="box-content">
                        <div class="icon"><i class="fab fa-html5"></i></div>
                        <div class="label">HTML</div>
                        <p>90%</p>
                    </div>
                </div>
                <div class="box" data-skill="CSS">
                    <div class="box-content">
                        <div class="icon"><i class="fab fa-css3-alt"></i></div>
                        <div class="label">CSS</div>
                        <p>80%</p>
                    </div>
                </div>
                <div class="box" data-skill="JavaScript">
                    <div class="box-content">
                        <div class="icon"><i class="fab fa-js"></i></div>
                        <div class="label">JavaScript</div>
                        <p>30%</p>
                    </div>
                </div>
                <div class="box" data-skill="Python">
                    <div class="box-content">
                        <div class="icon"><i class="fab fa-python"></i></div>
                        <div class="label">Python</div>
                        <p>40%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>


    <section class="services" id="services">
    <div class="content">
        <div class="title"><span>My Services</span></div>
        <div class="services-details">
            <div class="box" data-service="Web Development">
                <div class="box-content">
                    <div class="icon"><i class="fas fa-code"></i></div>
                    <div class="label">Web Development</div>
                    <p>Creating modern, responsive websites tailored to your needs.</p>
                </div>
            </div>
            <div class="box" data-service="UI/UX Design">
                <div class="box-content">
                    <div class="icon"><i class="fas fa-paint-brush"></i></div>
                    <div class="label">UI/UX Design</div>
                    <p>Designing user-friendly interfaces and experiences for your audience.</p>
                </div>
            </div>
            <div class="box" data-service="SEO Optimization">
                <div class="box-content">
                    <div class="icon"><i class="fas fa-search"></i></div>
                    <div class="label">SEO Optimization</div>
                    <p>Improving your website's visibility on search engines.</p>
                </div>
            </div>
            <div class="box" data-service="Consulting">
                <div class="box-content">
                    <div class="icon"><i class="fas fa-user-tie"></i></div>
                    <div class="label">Consulting</div>
                    <p>Offering expert advice to help you achieve your business goals.</p>
                </div>
            </div>
        </div>
    </div>
    </section>


    <section class="contact" id="contact">
        <div class="content">
            <div class="title"><span>Contact Me</span></div>
            <div class="text">
                <div class="topic">Have Any Inquiries?</div>
                <p>I am Christian, a full stack web developer and UI/UX designer. Feel free to reach out if you have any questions or inquiries.</p>
                <p>Contact Information:</p>
                <ul>
                    <li>Email: christian.c.punay09@gmail.com</li>
                    <li>Facebook Page: Christian Catarining Punay</li>
                    <li>Github: ChristianCP</li>
                    <li>Instagram: Christian C. Punay</li>
                </ul>
                <div class="button">
                    <button id="message-btn">Message Me!</button>
                </div>
            </div>
        </div>
    </section>

    <div id="message-form" class="message-form">
        <div class="form-content">
            <div class="close-form"><i class="fas fa-times"></i></div>
            <form action="https://formspree.io/f/mzzpggwl" method="POST">
                <h2>Message Me</h2>
                <input type="text" name="name" placeholder="Your Name" required>
                <input type="email" name="email" placeholder="Your Email" required>
                <textarea name="message" placeholder="Your Message" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </div>
    </div>

    <footer>
        <div class="text">
            <span>Created By <a href="#">CHRISTIAN.</a> | &#169; 2024 All Rights Reserved.</span>
        </div>
    </footer>

    <script src="main.js"></script>
</body>
</html>
