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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index3.css">
</head>

<body>
    <nav class="nav">
        <ul class="navbar d-flex">
            <li class="nav-item"><a href="#">Home</a></li>
            <li class="nav-item"><a href="#aboutme">About me</a></li>
            <li class="nav-item"><a href="#technical">Technicals</a></li>
            <li class="nav-item"><a href="#project">Projects</a></li>
            <li class="nav-item"><a href="#contact">Contact</a></li>
            <li class="nav-item">
                <select aria-label="label for the select">
                    <option value="dark">Dark mode</option>
                    <option value="light">Light mode</option>
                </select>
            </li>
        </ul>
    </nav>
    <div class="container">
        <main id="main-content">
            <article class="overview d-flex">
                <section id="aboutme">
                    <!-- <h1>Hi, I'm Tai3</h1> -->
                    <h1>
                        Hi, I'm
                        <span>
                            <span>Tai3</span>
                            <span>PROGRAMMER</span>
                            <span>DEVELOPER</span>
                            <span>ENGINEER</span>
                        </span>
                    </h1>
                    <!-- <h3>Software developer</h3> -->
                    <p>A candidate graduated with a software engineering major at Saigon University
                        and is seeking entry-level job opportunities as a back-end developer.
                        Has experience with Java and the Spring Framework.
                        Desires to contribute knowledge to a dynamic team while continuously developing professional
                        skills and supporting the company's success.</p>
                    <nav class="navlink">
                        <ul class="navbutton d-flex">
                            <li class="btn-item"><button type="button">LinkedIn</button></li>
                            <li class="btn-item"><button type="button">Github</button></li>
                            <button type="button">Download CV<a
                                    href="https://static.topcv.vn/topcv-cv-uploads/647f100292a960dfc0742b2897d70c18.pdf#toolbar=0&navpanes=0&scrollbar=0"></a></button>
                        </ul>
                    </nav>
                </section>

                <section>
                    <img title="avatar" width="50%" height="55%"
                        src="https://cdn.thingiverse.com/assets/3b/20/7b/5a/5e/large_display_download__3__enhanced-removebg-preview.png">
                    <h2>Nguyễn Giáp Tài</h2>
                    <p>Role: Software engineer</p>
                    <div>
                        <div class="card">
                            <span>Phone: </span>
                            <span><a href="tel:84+388875727">84+ 388 875 727</a></span>
                        </div>
                        <div class="card">
                            <span>Email: </span>
                            <span><a href="mailto:gtainguyenk19@gmail.com">gtainguyenk19@gmail.com</a></span>
                        </div>
                        <div class="card">
                            <span>Location: </span>
                            <span>District 12, HCM City</span>
                        </div>
                    </div>
                </section>
            </article>

            <article class="skills">
                <h1 style="text-transform: uppercase;">Technical skills</h1>
                <section id="technical" class="technical d-grid">
                    <div class="box">
                        <h2>C++</h2>
                        <p>Studied in the first year</p>
                    </div>
                    <div class="box">
                        <h2>PHP</h2>
                        <p>Studied via web design part two subject in the third year</p>
                    </div>
                    <div class="box">
                        <h2>Java</h2>
                        <p>Studied the OOPs subject in the second year.</p>
                    </div>
                    <div class="box">
                        <h2>Spring boot</h2>
                        <p>Learned by myself, I want to chase the Back-end path.</p>
                    </div>
                    <div class="box">
                        <h2>HTML</h2>
                        <p>Studied via web design part one subject, still studing, I know some tags</p>
                    </div>
                    <div class="box">
                        <h2>CSS</h2>
                        <p>Same as HTML but I can use flex, grid layouts and some animation, transition v.v</p>
                    </div>
                    <div class="box">
                        <h2>Javascript</h2>
                        <p>One of the interesting in web design subject, I know lambda, can use css or XMLHttpRequest,
                            fetch for AJAX purpose v.v</p>
                    </div>
                    <div class="box">
                        <h2>MySQL</h2>
                        <p>Still processing, can use type of join, query, subquery, aggregate functions v.v</p>
                    </div>
                    <div class="box">
                        <h2>PostgreSQL</h2>
                        <p>I'm self-taught and still learning, I think it is similar with MySQL in someway</p>
                    </div>
                    <div class="box">
                        <h2>MongoDB</h2>
                        <p>I know it is a non-structure database, but I'm still learning</p>
                    </div>
                    <div class="box">
                        <h2>Maven</h2>
                        <p>This is software management, which helps developers manage their projects, suitable for
                            Spring boot</p>
                    </div>
                    <div class="box">
                        <h2>Gradle</h2>
                        <p>Same as Maven but syntax more simple and we can use groovy language</p>
                    </div>
                    <div class="box">
                        <h2>Docker</h2>
                        <p>I have a project that was configured for my computer to run. If my friend wants to run my
                            project, he will configure the env the same as mine. So to avoid wasting time, we use
                            Docker.</p>
                    </div>
                    <div class="box">
                        <h2>RabbitMQ</h2>
                        <p>A Messaging-queue protocol that helps me handle hundreds or even thousands of messages sent
                            at the same time.</p>
                    </div>
                    <div class="box">
                        <h2>Apache Kafka</h2>
                        <p>I think it has some characteristics similar to RabbitMQ,
                            but in my processing learning about Kafka, I explored fundamentals,
                            security, distributed (connect), replication, streams, KRaf mode v.v.
                            (Honestly, I don't remember at all).</p>
                    </div>
                    <div class="box">
                        <h2>Git</h2>
                        <p>Yeah I like only one branch (NOT branches T.T ), push, switch, pull,
                            commit something, but don't like conflict, rebases or check git log at all.</p>
                    </div>
                    <div class="box">
                        <h2>Rest/Restful API</h2>
                        <p>Okay, What is the different between REST and RESTful API ?</p>
                    </div>
                    <div class="box">
                        <h2>Microservice ?</h2>
                        <p>Doesn't that mean the inner service can run independently and smoothly
                            without depending on other inner services in the system?</p>
                    </div>
                </section>
            </article>

            <article class="skills">
                <h1 style="text-transform: uppercase;">Projects</h1>
                <section id="project" class="projects d-grid">
                    <div class="project-item d-flex">
                        <iframe src="https://www.youtube.com/embed/A4IBAro7RZ4"
                            title="Build Color-scheme by HTML, CSS, Javascript" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </iframe>
                    </div>
                    <div class="project-item d-flex">
                        <!-- <img src=""> -->
                        <p>Coming soon</p>
                    </div>
                    <div class="project-item d-flex">
                        <!-- <img src=""> -->
                        <p>Coming soon</p>
                    </div>
                </section>
            </article>
            <!--
            <section id="contact">
                <form>
                    <fieldset>
                      <legend>Contact me</legend>
                      <label for="name">Email:</label> <input type="email" id="name" name="user_email" />
                      <label for="name">Messages:</label> <textarea  placeholder="Your text" id="message" name="message"></textarea>
                      <button type="button">Send</button>
                    </fieldset>
                  </form>
            </section>
            <hr>
             -->
        </main>

    </div>
    <footer>
        <p>© 2025 Nguyễn Giáp Tài</p>
    </footer>

</body>
<script src="index.js"></script>

</html>