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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Huy Truong's Portfolio Page">
    <title>The Portfolio</title>

    <!-- Font google apis-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    
    <!-- add favicon -->
    <link rel="icon"
        type="image/x-icon"
        href="assets/imgs/favicon_2.png">

    <!-- font icons -->
    <link rel="stylesheet" href="assets/vendors/themify-icons/css/themify-icons.css"/>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' rel='stylesheet'/>

    <!-- Bootstrap + main styles -->
    <link rel="stylesheet" href="assets/css/styles.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="40" id="home">
    <!-- scrollToTop with progress bar -->
    <div id="progress-wrap">
        <span id="progress-wrap-value">

        </span>
    </div>

    <!-- Page Navbar -->
    <nav class="custom-navbar" data-spy="affix" data-offset-top="20">
        <div class="container">
            <div class = 'logo-highlight'>
                <a href='#home'>
                    <img alt="Portfolio" class="my-logo" src="assets/imgs/HT_DA.svg" title="back to home page" class="invert">
                </a>
            </div>
            <ul class="nav">
                <li class="item">
                    <a class="link" href="#home">Home</a>
                </li>
                <li class="item">
                    <a class="link" href="#about">About</a>
                </li>
                <li class="item">
                    <a class="link" href="#personal_project">Portfolio</a>
                </li>
            </ul>
            <a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
                <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                </div>
            </a>
        </div>
    </nav><!-- End of Page Navbar -->

    <!-- page header -->
    <header id="home" class="header">
        <div class="overlay"></div>
        <div class="header-content container">
            <h1 class="header-title">
                <span class="up">Holla!</span>
                <span class="down">I am Huy Truong</span>
            </h1>
            <p class="header-subtitle">THE DATA ANALYST</p>
            <a href="#about">
                <button class="btn btn-primary">About Me</button>
            </a>
            <!-- <a href="#personal_project">
                <button class="btn btn-primary" id="visit">Visit My Works</button>
            </a> -->
        </div>
    </header><!-- end of page header -->

    <!-- about section -->
    <section class="section pt-0" id="about">
        <!-- container -->
        <div class="container text-center">
            <!-- about wrapper -->
            <div class="about">
                <div class="about-img-holder">
                    <img src="assets/imgs/Huy_canvas.png" class="about-img">
                </div>
                <div class="about-caption">
                    <p class="section-subtitle">Who Am I?</p>
                    <h2 class="section-title">About Me</h2>
                    <p class="section-subtitle-content">
                        I am fully dedicated to providing outstanding customer experiences through thorough work and research. My utmost commitment lies in delivering physical and non-physical products that go beyond expectations, emphasizing comprehensive outcomes.<br><br>Aiming to leverage the academic experience and a proven knowledge of customer service, project coordinating, and operations management to successfully fulfill your findings.<br><br>Continuously seeking knowledge and embracing colleagues' insights, I quickly adapt to new technologies and industry trends to benefit the company and streamline work processes.<br><br>Through effective communication, problem-solving, and analytical skills, I facilitate open dialogue and cultivate an efficient work atmosphere across all levels of the organization, encouraging active involvement and collective problem-solving among team members
                    </p>
                    <a href="#personal_project">
                        <button class="btn-rounded btn btn-outline-primary mt-4">My Portfolio</button>
                    </a>
                </div>
            </div><!-- end of about wrapper -->
        </div><!-- end of container -->
    </section> <!-- end of about section -->


    <!-- section Portfolio -->
    <section class="section" id="personal_project">
        <div class="container text-center">
            <p class="section-subtitle">What makes me well-known ?</p>
            <h6 class="section-title mb-6">Portfolio</h6>
            <!--row-->
            <div class="switcher">
                <input type="radio" name="graduate" value="yin" id="yin" class="switcher__input switcher__input--yin" checked="">            
                <label for="yin" class="switcher__label">
                    <img class="english" src="assets/imgs/EN.svg">
                </label>
                <input type="radio" name="graduate" value="yang" id="yang" class="switcher__input switcher__input--yang">
                <label for="yang" class="switcher__label">
                    <img class="vietnamese" src="assets/imgs/VN.svg">
                </label>
                <span class="switcher__toggle"></span>
                <!-- <div class="dropdown" data-dropdown>
                    <button class="link" data-dropdown-button>Reload</button>
                    <div class="dropdown_menu">
                        <a class="link_text" href="#">Project 1</a>
                        <a class="link_text" href="#">Project 2</a>
                        <a class="link_text" href="#">Project 3</a>
                    </div>
                </div>                 -->
                <!-- <div>
                    <input type="button" id="btn" value="Refresh Content"/>
                </div> -->   
            </div> 
            <div class="main_content">
                <div class = "row">
                    <div class="col-md-12">
                        <div class = "pproject_wrapper">
                            <div class = "body" style="position: relative; width: 100%; height: 0; padding-top: 56.2700%; border: 2px solid rgb(255, 255, 255); padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
                                <iframe id="content-iframe-1" loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" seamless
                                    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAGNU9I89FY&#x2F;3tyN6Rap1Qak4gBMqDZpKQ&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen; autoplay; accelerometer; gyroscrope" data-responsive="true"></iframe>
                            </div> 
                        </div>
                    </div>                
                </div>
                <div class = "row">
                    <div class="col-md-12">
                        <div class = "pproject_wrapper">
                            <div class = "body" style="position: relative; width: 100%; height: 0; padding-top: 56.2700%; border: 2px solid rgb(255, 255, 255); padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
                                <iframe id="content-iframe-2" loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" 
                                    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAGNU1t8Cwo&#x2F;CFssQ_bV3-PRqBRk5NXweQ&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"></iframe>
                            </div>    
                        </div>
                    </div>
                </div>    
                <div class = "row">
                    <div class="col-md-12">
                        <div class = "pproject_wrapper">
                            <div class = "body" style="position: relative; width: 100%; height: 0; padding-top: 56.2700%; border: 2px solid rgb(255, 255, 255); padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
                                <iframe id="content-iframe-3" loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" 
                                    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAGNUyeavx4&#x2F;Cj6D7yxR1syHkxlls3VGkQ&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"></iframe>
                            </div>   
                        </div>
                    </div>                
                </div>
            </div>    
            <div class="secondary_content" style="display: none">
                <div class = "row">
                    <div class="col-md-12">
                        <div class = "pproject_wrapper">
                            <div class = "body" style="position: relative; width: 100%; height: 0; padding-top: 56.2700%; border: 2px solid rgb(255, 255, 255); padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
                                <iframe id="content-iframe-4" loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" 
                                    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAGNUwocXnY&#x2F;4OogA4dVZ4Z8oSAPMEyUwg&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"></iframe>
                            </div>    
                        </div>
                    </div>                
                </div>
                <div class = "row">
                    <div class="col-md-12">
                        <div class = "pproject_wrapper">
                            <div class = "body" style="position: relative; width: 100%; height: 0; padding-top: 56.2700%; border: 2px solid rgb(255, 255, 255); padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
                                <iframe id="content-iframe-5" loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" 
                                    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAGNU4zdihs&#x2F;pNQX8Ddf6cU4QOtuvVU7ig&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"></iframe>
                            </div>    
                        </div>
                    </div>
                </div>
                <div class = "row">
                    <div class="col-md-12">
                        <div class = "pproject_wrapper">
                            <div class = "body" style="position: relative; width: 100%; height: 0; padding-top: 56.2700%; border: 2px solid rgb(255, 255, 255); padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
                                <iframe id="content-iframe-6" loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" 
                                    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAGNU8zEoqI&#x2F;9xzjf440FcHAZuYqgF4gKw&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"></iframe>
                            </div>   
                        </div>
                    </div>                
                </div>
            </div>
        
             
    <!-- footer -->
    <div class="container">
        <footer class="footer">
            <p class="mb-0">Copyright
                <script>document.write(new Date().getFullYear())</script> &copy; <a>HuyTruong The Data Analyst </a>
            </p>
            <div class="social-links text-right m-auto ml-sm-auto">
                <a href="https://www.linkedin.com/in/huytruongcareer/" target="_blank" class="link"><i class="ti-linkedin"></i></a>
            </div>
        </footer>
    </div> <!-- end of page footer -->

    <!-- core  -->
    <script src="assets/vendors/jquery/jquery-3.4.1.js"></script>
    <script src="assets/vendors/bootstrap/bootstrap.bundle.js"></script>

    <!-- bootstrap 3 affix -->
    <script src="assets/vendors/bootstrap/bootstrap.affix.js"></script>

    <!-- script js -->
  
    <script src="assets/js/script.js" defer></script>

</body>

</html>