Huy Hoang Vo

2 bundles
1 file19 days ago
2

Untitled

<!doctype html>
<html>

<head >
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/logo.css">
    <link rel="stylesheet" href="../css/menu.css">
    <link rel="stylesheet" href="../css/button.css">
    <link rel="stylesheet" href="../css/container/headerPersonal.css">
    <link rel="stylesheet" href="../css/listContent.css" />
    <link rel="stylesheet" href="../css/avatar.css" />
    <link rel="stylesheet" href="../css/social.css" />
    <link rel="stylesheet" href="../css/project.css" />
    <link rel="stylesheet" href="../css/title.css" />
    <link rel="stylesheet" href="../css/anotherProject.css" />
    <link rel="stylesheet" href="../css/footerPersonal.css" />
    <link rel="stylesheet" href="../css/email.css" />

    <link rel="stylesheet" href="../css/container/aboutMe.css" />
    <link rel="stylesheet" href="../css/container/bodyPersonal.css" />
    <link rel="stylesheet" href="../css/container/introMyseft.css">
    <link rel="stylesheet" href="../css/container/getIntouch.css">
    <link rel="stylesheet" href="../css/page/personal.css" />
    <link rel="stylesheet" href="../css/container/introTimeline.css">

    <link href="https://fonts.googleapis.com/css?family=Fira+Code:300,400,500|Roboto&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4413904649.js" crossorigin="anonymous"></script>
    
   
</head>

<body>
    <div class="header">
        <div class="logo header__logo">
            <a class="logo_link" href="index.html">
                <img class="logo_img"
                    src="https://www.nashtechglobal.com/wp-content/themes/nashtech/library/images/NashTech-logo-new.svg"
                    alt="">
            </a>
        </div>

        <div class="menu header__menu">
            <ol class="menu_list">
                <li class="menu_item"><span class="menu_span">01.</span><a class="menu_itemTaga" href="#section-about-me">About</a></li>
                <li class="menu_item"><span class="menu_span">02.</span><a class="menu_itemTaga" href="#section-experience">Experience</a></li>
                <li class="menu_item"><span class="menu_span">03.</span><a class="menu_itemTaga" href="#section-my-project">Work</a></li>
                <li class="menu_item"><span class="menu_span">04.</span><a class="menu_itemTaga" href="#section-get-in-touch">Contact</a>
                </li>
            </ol>
            <!-- button -->
            <div class="btn header__button">
                <a class="btn btn--item">Resume</a>
            </div>
        </div>
    </div>

    <div class="social">
        <ul class="social__list">
            <li><span class="social__list__item"><i class="fab fa-lg fa-github"></i></span></li>
            <li><span class="social__list__item"><i class="fab fa-lg fa-linkedin-in"></i></span></li>
            <li><span class="social__list__item"><i class="fab fa-lg fa-facebook-f"></i></span></li>
            <li><span class="social__list__item"><i class="fab fa-lg fa-instagram"></i></span></li>
        </ul>
        <div class="social__line"></div>
    </div>

    <div class="email">
        <p class="email__content">Hoang.VoHuy@nashtechglobal.com</p>
        <div class="email__line"></div>
    </div>

    <div class="body-personal">
        <div class="intro-my-seft">
            <div class="intro-my-seft__text">
                <span class="intro-my-seft__text text--hi">Hi, my name is</span>
                <span class="intro-my-seft__text text--name">Vo Huy Hoang.</span>
                <span class="intro-my-seft__text text--do"> I build things for the web.</span>
                <span class="introMyseft__text text--intro">I am a fourth-year student in information technology, majoring in software engineering at Ho Chi Minh City University of Technical Education.
                </span>
            </div>

            <div class="intro-my-seft__button">
                <a class="btn btn--secondary">Get In Touch</a>
            </div>
        </div>

        <h3 class="title" id="section-about-me">
            <div class="title__number">0.1</div>
            <div class="title__content">About me</div>
            <div class="title__line"></div>
        </h3>

        <div class="about-me show-on-scroll">
            <div class="about-me__content">
                <p class="about-me__content__item">Hello! I'm Hoang, a a fourth-year student in information technology at Ho Chi Minh City University of Technical Education. 
                    While studying at the school, I made a few subject projects with many practical topics and many interesting technologies.
                </p>

                <p class="about-me__content__item"> The current goal is to successfully complete the Direct Entry program at nashtech to improve their expertise and meet the needs of the company.
                </p>
                <p class="about-me__content__item">
                    Here are a few technologies I've been working with recently:
                </p>

                <ul class="list-content">
                    <li class="list-content__item">
                        JavaScript (ES6+)
                    </li>

                    <li class="list-content__item">
                        React
                    </li>

                    <li class="list-content__item">
                        Node.js
                    </li>

                    <li class="list-content__item">
                        Mongodb
                    </li>

                    <li class="list-content__item">
                         ASP.NET MVC 5.0 Framework
                    </li>

                    <li class="list-content__item">
                        Microsoft SQL Sever 2017 
                    </li>
                </ul>
            </div>

            <div class="avatar about-me__avatar">
                <div class="avatar__container">
                    <img class="avatar__container__img" src="https://i.picsum.photos/id/202/300/300.jpg">
                </div>
                <div class="avatar__border"></div>
            </div>
        </div>

        <div class="body-intro" id="section-experience">
            <h3 class="title">
                <div class="title__number">0.2</div>
                <div class="title__content">Where I've Worked</div>
                <div class="title__line"></div>
            </h3>
            <div class="intro-timeline">
                <div class="intro-timeline_tab">
                    <button class="intro-timeline__tab-item" onclick="openCity(event, 'Upstatement')"
                        id="defaultOpen">Upstatement</button>
                    <!-- <button class="intro-timeline__tab-item" onclick="openCity(event, 'Scout')">Scout</button>
                    <button class="intro-timeline__tab-item" onclick="openCity(event, 'Apple')">Apple</button> -->
                </div>
    
                <div id="Upstatement" class="intro-timeline__item">
                    <div class="item-title">
                        <h2 class="item-title__content">Engineer</h2>
                        <a class="item-title__link" href="#">@ Upstatement</a>
                    </div>
    
                    <div class="item-body">
                        <span class="item-body title--style-primary">May 2018 - Present</span>
                        <p class="item-body__content">
                            Write modern, performant, maintainable code for a diverse array of client and internal
                            projects
                        </p>
    
                        <p class="item-body__content">
                            Work with a variety of different languages, platforms, frameworks, and content management
                            systems such as JavaScript, TypeScript, Gatsby, React, Craft, Wordpress, Prismic, and
                            Netlify
                        </p>
                        <p class="item-body__content">
                            Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on
                            a daily basis
                        </p>
                    </div>
                </div>
   
                <div id="Scout" class="intro-timeline__item">
                    <div class="item-title">
                        <h2 class="item-title__content">Studio Developer</h2>
                        <a class="item-title__link" href="#">@ Scout</a>
                    </div>
                    <div class="item-body">
                        <span class="item-body time">Jan - April 2018</span>
                        <p class="item-body__content">
                            Worked with a team of three designers to build a marketing website and e-commerce platform for
                            blistabloc, an ambitious startup originating from Northeastern
                        </p>
    
                        <p class="item-body__content">
                            Helped solidify a brand direction for blistabloc that spans both packaging and web
                        </p>
                        <p class="item-body__content">
                            Interfaced with clients on a weekly basis, providing technological expertise
                        </p>
                    </div>
                </div>
    
                <div id="Apple" class="intro-timeline__item">
                    <div class="item-title">
                        <h2 class="item-title__content">UI Engineer Co-op</h2>
                        <a class="item-title__link" href="#"> @ Apple</a>
                    </div>
                    <div class="item-body">
                        <span class="item-body time">July - Dec 2017</span>
                        <p class="item-body__content">
                            Developed and shipped highly interactive web applications for Apple Music using Ember.js
                        </p>
    
                        <p class="item-body__content">
                            Built and shipped the Apple Music Extension within Facebook Messenger leveraging third-party
                            and internal APIs
                        </p>
                    </div>
                </div>
            </div>
        </div>
    
        <h3 class="title" id="section-my-project">
            <div class="title__number">0.2</div>
            <div class="title__content">Some Things I've Built</div>
            <div class="title__line"></div>
        </h3>

        <div class="project">
            <div class="project__container">
                <div class="project__title">
                    <p class="project__title__feature">
                        Featured Project
                    </p>
                    <h2 class="project__title__name">
                        OctoProfile
                    </h2>
                </div>
                <p class="project__content">
                    A nicer look at your GitHub profile and repo stats. Includes data
                    visualizations of your top languages, starred repositories, and sort
                    through your top repos by number of stars, forks, and size.
                </p>
                <div class="project__technology">
                    <ul class="project__technology__list">
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">Next.js</a>
                        </li>
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">Chart.js</a>
                        </li>
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">Github API</a>
                        </li>
                    </ul>
                </div>
                <div class="project__link">
                    <ul class="project__link__list">
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fab fa-sm fa-github"></i>
                            </a>
                        </li>
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fas fa-sm fa-external-link-alt"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="project__image">
                <img class="project__image__src" src="http://picsum.photos/500" alt="" />
            </div>
        </div>

        <div class="project project--reverse">
            <div class="project__container">
                <div class="project__title">
                    <p class="project__title__feature">
                        Featured Project
                    </p>
                    <h2 class="project__title__name">
                        Website Review
                    </h2>
                </div>
                <p class="project__content">
                    Building a website gives suggestions based on the objective assessment of customers on a product. From there summarize and suggest to consumers
                </p>
                <div class="project__technology">
                    <ul class="project__technology__list">
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">Nodejs</a>
                        </li>
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">React</a>
                        </li>
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">Mongodb</a>
                        </li>
                    </ul>
                </div>
                <div class="project__link">
                    <ul class="project__link__list">
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fab fa-sm fa-github"></i>
                            </a>
                        </li>
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fas fa-sm fa-external-link-alt"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="project__image">
                <img class="project__image__src" src="http://picsum.photos/500" alt="" />
            </div>
        </div>

        <div class="project">
            <div class="project__container">
                <div class="project__title">
                    <p class="project__title__feature">
                        Featured Project
                    </p>
                    <h2 class="project__title__name">
                        Website Selling Book
                    </h2>
                </div>
                <p class="project__content">
                    	
The website has a variety of updated book categories for readers to have many choices. Readers easily search for books on request, spoiled for reference many different types.Reading, buying books online is an emerging technology era. You can buy anywhere.
                </p>
                <div class="project__technology">
                    <ul class="project__technology__list">
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">Microsoft SQL Sever 2017 </a>
                        </li>
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">ASP.NET MVC 5.0 Framework </a>
                        </li>
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">Entity Framework 6.2.0</a>
                        </li>
                    </ul>
                </div>
                <div class="project__link">
                    <ul class="project__link__list">
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fab fa-sm fa-github"></i>
                            </a>
                        </li>
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fas fa-sm fa-external-link-alt"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="project__image">
                <img class="project__image__src" src="http://picsum.photos/500" alt="" />
            </div>
        </div>

        <div class="project project--reverse">
            <div class="project__container">
                <div class="project__title">
                    <p class="project__title__feature">
                        Featured Project
                    </p>
                    <h2 class="project__title__name">
                        Music player software on Android
                    </h2>
                </div>
                <p class="project__content">
            	
Mobile app has basic music functions to help people listen to offline music comfortably anywhere
                </p>
                <div class="project__technology">
                    <ul class="project__technology__list">
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!"></a>
                        </li>
                        <li class="project__technology__list__item">
                            <a class="project__technology__list__item__link" href="#!">SQL lite</a>
                        </li>
                    </ul>
                </div>
                <div class="project__link">
                    <ul class="project__link__list">
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fab fa-sm fa-github"></i>
                            </a>
                        </li>
                        <li class="project__link__item">
                            <a class="project__link__item__link" href="#!">
                                <i class="fas fa-sm fa-external-link-alt"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="project__image">
                <img class="project__image__src" src="http://picsum.photos/500" alt="" />
            </div>
        </div>

        <div class="other-project">
            <div class="other-project__title">
                <h1 class="other-project__title__content">
                    Other Projects
                </h1>
                <p class="other-project__title_small">
                    view the archive
                </p>
            </div>
            <div class="other-project__list">
                <div class="other-project__list__item">
                    <div class="cart-project">
                        <div class="cart-project__header">
                            <a class="cart-project__icon" title="Folder" href="#!">
                                <i class="fas fa-folder"></i>
                            </a>
                            <div class="cart-project__link">
                                <a class="cart-project__link__item" title="Github" href="#!">
                                    <i class="fab fa-github"></i>
                                </a>
                                <a class="cart-project__link__item" title="Link" href="#!">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            </div>
                        </div>
                        <div class="cart-project__body">
                            <h3 class="cart-project__body__title">
                                Game Tower of HaNoi
                            </h3>
                            <p class="cart-project__body__content">
                                Help people entertain at the same time to practice logical thinking. The task of the game is to move the disks of different sizes to another column so that the original order of the disks is still maintained: the small disk is on the large disk.
                            </p>
                        </div>
                        <div class="cart-project__footer">
                            <ul class="cart-project__footer__list">
                                <li class="cart-project__footer__list__item">
                                    <a class="cart-project__footer__list__item__link" href="#!">
                                       C#
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="other-project__list__item">
                    <div class="cart-project">
                        <div class="cart-project__header">
                            <a class="cart-project__icon" title="Folder" href="#!">
                                <i class="fas fa-folder"></i>
                            </a>
                            <div class="cart-project__link">
                                <a class="cart-project__link__item" title="Github" href="#!">
                                    <i class="fab fa-github"></i>
                                </a>
                                <a class="cart-project__link__item" title="Link" href="#!">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            </div>
                        </div>
                        <div class="cart-project__body">
                            <h3 class="cart-project__body__title">
                                Website Selling Watches
                            </h3>
                            <p class="cart-project__body__content">
                                Building a website that sells prestigious and quality watches with various designs and models suitable for different classes. Meet the increasing shopping needs of customers
                            </p>
                        </div>
                        <div class="cart-project__footer">
                            <ul class="cart-project__footer__list">
                                <li class="cart-project__footer__list__item">
                                    <a class="cart-project__footer__list__item__link" href="#!">
                                        JSP servlet
                                    </a>
                                </li>
                                <li class="cart-project__footer__list__item">
                                    <a class="cart-project__footer__list__item__link" href="#!">
                                        Microsoft SQL Sever 2017 
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                
                <div class="other-project__list__item">
                    <div class="cart-project">
                        <div class="cart-project__header">
                            <a class="cart-project__icon" title="Folder" href="#!">
                                <i class="fas fa-folder"></i>
                            </a>
                            <div class="cart-project__link">
                                <a class="cart-project__link__item" title="Github" href="#!">
                                    <i class="fab fa-github"></i>
                                </a>
                                <a class="cart-project__link__item" title="Link" href="#!">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            </div>
                        </div>
                        <div class="cart-project__body">
                            <h3 class="cart-project__body__title">
                                Music player software on Android
                            </h3>
                            <p class="cart-project__body__content">
                             	
Mobile app has basic music functions to help people listen to offline music comfortably anywhere
                            </p>
                        </div>
                        <div class="cart-project__footer">
                            <ul class="cart-project__footer__list">
                                <li class="cart-project__footer__list__item">
                                    <a class="cart-project__footer__list__item__link" href="#!">
                                        Android Studio 3.4
                                    </a>
                                </li>
                                <li class="cart-project__footer__list__item">
                                    <a class="cart-project__footer__list__item__link" href="#!">
                                        SQL lite
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="get-in-touch" id="section-get-in-touch">
            <div class="get-in-touch__text">
                <span class="get-in-touch__text text--hi">03. What's next? </span>
                <span class="get-in-touch__text text--name">Get In Touch.</span>
                <span class="get-in-touch__text text--center">Although I'm not currently looking for freelance
                    opportunities, my inbox is always open. Whether for a potential project or just to say hi, I'll try
                    my best to answer your email!
                </span>
            </div>
            <div class="get-in-touch__button">
                <a class="btn btn--secondary">Say hello</a>
            </div>
        </div>
    </div>

    <div class="footer">
        <a class="footer__Link">Design and build by Team 2</a>
    </div>
</body>

<script src="../js/timeline.js"></script>
<script src="../js/showOnCroll.js"></script>
</html>