<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jack's AG. Blog</title>
    <link rel="shortcut icon" href="src/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/scroll.css">
    <link rel="stylesheet" href="css/marquee.css">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>

<body>

    <?php include "scripts/rate-limit.php";?>
    <?php include "scripts/csrf.php";?>
    <?php include "scripts/sanitize.php";?>
    <?php include "scripts/validate.php";?>

    <div class="unsupport">
        <h1>415: Unsupport Media</h1>
        <p>Oh, oh! The size resolution is not supported yet.</p>
    </div>

    <header>
        <nav class="navbar">
            <img data-src="src/ag_logo.png" alt="Jack's AG. Blog" class="logo" loading="lazy">
            <ul class="nav-links">
                <li><a href="#hero">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#blogs">Blogs</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="./changelog.html">Changelog</a></li>
            </ul>

            <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </nav>
    </header>

    <section id="hero" class="hero">
        <h1>Welcome to Jack's AG. Blog</h1>
        <p><span>Insights<img src="src/doodle.png" id="doodle1" alt=""></span>, <span>stories<img src="src/doodle.png"
                    id="doodle2" alt=""></span>, and <span>updates<img src="src/doodle.png" id="doodle3" alt=""></span>
            from the world of programming 🚀</p>
        <a href="#about" class="button">Explore Now!</a>
        <img data-src="src/grid.png" onerror="this.src='src/grid.png';" class="grid" id="grid1" alt="" loading="lazy">
        <img data-src="src/grid.png" onerror="this.src='src/grid.png';" class="grid" id="grid2" alt="" loading="lazy">
    </section>

    <section id="about" class="about">
        <h2>About Me</h2>
        <p>I'm Hoang Vu (or Jack) — a sixth-grade student. I started coding 3 years ago as a hobby and a way to enjoy my
            time.
            Since then, I've worked on hundreds of projects, encountered thousands of errors, and become a better
            programmer. Is there anyone else my age who can code in seven different programming languages? This blog is
            one of my projects, created on the November 22, 2024. I hope you find it helpful and inspiring as you
            improve your programming skills ⭐
        <p>(Also check out my friend's blog: <a href="https://paulsinkblog.mystrikingly.com/">Paul's Ink
                Blog</a>)</p>
        <div class="scroller" data-speed="fast">
            <ul class="tag-list scroller__inner">
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
                <li>Python</li>
                <li>C++</li>
                <li>Java</li>
                <li>UI/UX</li>
            </ul>
        </div>
    </section>

    <section id="gallery" class="gallery">
        <h2>Gallery</h2>
        <div id="gallery-container">

        </div>
        <div class="buttons">
            <button class="nav-button" id="before">Before</button>
            <button class="nav-button" id="after">After</button>
            <div class="view-counter"></div>
        </div>

    </section>

    <section id="blogs" class="blogs">
        <h2>Blogs</h2>
        <div class="blog-container">
            <a href="blogs/blog1/blog1.html">
                <div class="blog-item">
                    <img data-src="src/web_security.jpg" alt="Blog Image" loading="lazy">
                    <div class="blog-content">
                        <h3>Understanding Web Security</h3>
                        <p>Web security is security solutions that protect your users, devices, and wider network
                            against
                            internet-based cyber attacks malware, phishing, and more, that can lead to breaches and data
                            loss. It
                            reduces the security risk...</p>
                        <span class="blog-date"></span>
                    </div>
                </div>
            </a>

            <div class="blog-item">
                <a href="#blogs">
                    <img data-src="src/placeholder.png" alt="Blog Image" loading="lazy">
                    <div class="blog-content">
                        <h3>New content coming soon!</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, tempore. Placeat totam ullam
                            delectus asperiores, culpa natus dolor, accusamus perferendis libero enim iusto vel ad
                            nostrum
                            facilis esse quisquam dignissimos?</p>
                        <span class="blog-date"></span>
                    </div>
                </a>
            </div>
            <div class="blog-item">
                <a href="#blogs">
                    <img data-src="src/placeholder.png" alt="Blog Image" loading="lazy">
                    <div class="blog-content">
                        <h3>New content coming soon!</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, tempore. Placeat totam ullam
                            delectus asperiores, culpa natus dolor, accusamus perferendis libero enim iusto vel ad
                            nostrum
                            facilis esse quisquam dignissimos?</p>
                        <span class="blog-date"></span>
                    </div>
                </a>
            </div>
            <div class="blog-item">
                <a href="#blogs">
                    <img data-src="src/placeholder.png" alt="Blog Image" loading="lazy">
                    <div class="blog-content">
                        <h3>New content coming soon!</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, tempore. Placeat totam ullam
                            delectus asperiores, culpa natus dolor, accusamus perferendis libero enim iusto vel ad
                            nostrum
                            facilis esse quisquam dignissimos?</p>
                        <span class="blog-date"></span>
                    </div>
                </a>
            </div>
            <div class="blog-item">
                <a href="#blogs">
                    <img data-src="src/placeholder.png" alt="Blog Image" loading="lazy">
                    <div class="blog-content">
                        <h3>New content coming soon!</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, tempore. Placeat totam ullam
                            delectus asperiores, culpa natus dolor, accusamus perferendis libero enim iusto vel ad
                            nostrum
                            facilis esse quisquam dignissimos?</p>
                        <span class="blog-date"></span>
                    </div>
                </a>
            </div>
            <div class="blog-item">
                <a href="#blogs">
                    <img data-src="src/placeholder.png" alt="Blog Image" loading="lazy">
                    <div class="blog-content">
                        <h3>New content coming soon!</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, tempore. Placeat totam ullam
                            delectus asperiores, culpa natus dolor, accusamus perferendis libero enim iusto vel ad
                            nostrum
                            facilis esse quisquam dignissimos?</p>
                        <span class="blog-date"></span>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <h2>Contact Me</h2>
        <p>Phone number: +84 364 238 625</p>
        <p>Email: nhungnhungvu.81@gmail.com</p>
        <p>YouTube: <a href="https://www.youtube.com/@assemblygod/">@assemblygod</a></p>
        <p>Facebook: <a href="https://www.facebook.com/vuonghoangvu2013/">vuonghoangvu2013</a></p>
    </section>

    <footer>
        <p>&copy; 2024 Jack's AG. Blog. All rights reserved.</p>
    </footer>

    <script src="scripts/script.js"></script>
    <script src="scripts/general.js"></script>
    <script src="scripts/gallery.js"></script>
    <script src="scripts/speedEnchance.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/motion@11.11.13/dist/motion.js"></script>
    <script>
        const { animate } = Motion

        const grid = document.querySelectorAll(".grid");

        animate(
            grid,
            { scale: [0.4, 1] },
            { ease: "circInOut", duration: 0.7 }
        );
    </script>
</body>

</html>
