works-2.htm

<!-- Daily Task -->
<div class="works__item application">
  <span class="category">Application</span>
  <a href="#small-dialog-15" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">ReactJS, Redux, NodeJS</span>
        <h4 class="title">Daily Task</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/15.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-15" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/15.png" alt="image" />
    <h2>Daily Task by ReactJS</h2>
    <p>
      Web Application used to add to-dos for the day and help users manage it.
    </p>
    <p>Data is stored directly on the user machine (localStorage).</p>
    <p>Coded with ReactJS, Redux.</p>
    <p>Have responsive web.</p>
    <p>Available offline.</p>
    <div class="button">
      <a href="https://nvanha.github.io/daily_task/" target="_blank" class="btn"
        >View on Website</a
      >
    </div>
  </div>
</div>

<!-- Bakery Ecommerce UI -->
<div class="works__item ecommerce ui_template">
  <span class="category">Application, UI Template</span>
  <a href="#small-dialog-23" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">HTML, SCSS, JavScript</span>
        <h4 class="title">Bakery Ecommerce UI</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/23.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-23" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/23.png" alt="image" />
    <h2>Bakery Ecommerce UI</h2>
    <p>Bakery Ecommerce UI using HTML/SCSS/JavaScript.</p>
    <div class="button">
      <a
        href="https://nvanha.github.io/bakery-ecommerce-ui/"
        target="_blank"
        class="btn"
        >View on Website</a
      >
    </div>
  </div>
</div>

<!-- Draggle List Component -->
<div class="works__item application">
  <span class="category">Application</span>
  <a href="#small-dialog-19" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">ReactJS, React Hooks</span>
        <h4 class="title">Draggle List Component</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/19.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-19" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/19.png" alt="image" />
    <h2>Draggle List Component</h2>
    <p>Build React drag and drop list component.</p>
    <div class="button">
      <a
        href="https://nvanha.github.io/react-draggable-list/"
        target="_blank"
        class="btn"
        >View on Website</a
      >
    </div>
  </div>
</div>

<!-- Drag Drop File Input -->
<div class="works__item application">
  <span class="category">Application</span>
  <a href="#small-dialog-20" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">ReactJS, React Hooks</span>
        <h4 class="title">Drag Drop File Input</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/20.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-20" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/20.png" alt="image" />
    <h2>Drag Drop File Input</h2>
    <p>Build React Drag and Drop file input.</p>
    <div class="button">
      <a
        href="https://nvanha.github.io/react-drag-drop-file-input/"
        target="_blank"
        class="btn"
        >View on Website</a
      >
    </div>
  </div>
</div>

<!-- Xiaomi 2 -->
<div class="works__item ecommerce">
  <span class="category">Ecommerce</span>
  <a href="#small-dialog-3" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">PHP, JavaScript</span>
        <h4 class="title">Xiaomi Sales Website Ver-2</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/3.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-3" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/3.png" alt="image" />
    <h2>Xiaomi Sales Website Version 2</h2>
    <p>This is a complete upgrade compared to Version 1.</p>
    <p>Database use Functions and Procedures.</p>
    <p>Site is built from HTML, CSS, JavaScript, MySql, PHP, not Framework.</p>
    <p>Not yet support English.</p>
    <p>Not yet responsive web.</p>
    <div class="button">
      <a
        href="https://github.com/nvanha/xiaomi_sales_website_ver2"
        target="_blank"
        class="btn"
        >View on Github</a
      >
    </div>
  </div>
</div>

<!-- React Calculator -->
<div class="works__item application">
  <span class="category">Application</span>
  <a href="#small-dialog-21" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">ReactJS, React Hooks</span>
        <h4 class="title">React Calculator</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/21.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-21" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/21.png" alt="image" />
    <h2>Calculator App</h2>
    <p>Build Calculator App by ReactJS.</p>
    <div class="button">
      <a
        href="https://nvanha.github.io/react-calculator/"
        target="_blank"
        class="btn"
        >View on Website</a
      >
    </div>
  </div>
</div>

<!-- Xiaomi 1 -->
<div class="works__item ecommerce">
  <span class="category">Ecommerce</span>
  <a href="#small-dialog-2" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">PHP, JavaScript</span>
        <h4 class="title">Xiaomi Sales Website Ver-1</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/2.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-2" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/2.png" alt="image" />
    <h2>Xiaomi Sales Website Version 1</h2>
    <p>Site is built from HTML, CSS, JavaScript, MySql, PHP, not Framework.</p>
    <p>Not yet support English.</p>
    <p>Not yet Responsive Web.</p>
    <div class="button">
      <a
        href="https://github.com/nvanha/xiaomi_sales_website_ver1"
        target="_blank"
        class="btn"
        >View on Github</a
      >
    </div>
  </div>
</div>

<!-- Animation Button -->
<div class="works__item application ui_template">
  <span class="category">UI Template</span>
  <a href="#small-dialog-18" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term"> HTML, CSS, JavScript</span>
        <h4 class="title">Animation Button</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/18.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-18" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/18.png" alt="image" />
    <h2>Collection Animation Button</h2>
    <p>Animation Button with HTML/CSS/JavaScript.</p>
    <div class="button">
      <a href="https://codepen.io/collection/PYPgMN" target="_blank" class="btn"
        >View on CodePen</a
      >
    </div>
  </div>
</div>

<!-- UI Template -->
<div class="works__item ui_template">
  <span class="category">UI Template</span>
  <a href="#small-dialog-17" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">HTML, CSS, JavScript</span>
        <h4 class="title">UI Template</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/17.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-17" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/17.png" alt="image" />
    <h2>Collection UI Template</h2>
    <p>Template is available for UI Design.</p>
    <div class="button">
      <a href="https://codepen.io/collection/bNdJrg" target="_blank" class="btn"
        >View on CodePen</a
      >
    </div>
  </div>
</div>

<!-- PSD -->
<div class="works__item ui_template">
  <span class="category">UI Template</span>
  <a href="#small-dialog-1" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">HTML, CSS, PSD</span>
        <h4 class="title">Convert PSD to HTML/CSS</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/1.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-1" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/1.png" alt="image" />
    <h2>Convert PSD to HTML/CSS</h2>
    <p>This is a website that is converted from PSD to HTML and CSS.</p>
    <p>
      I used the BEM and SASS/SCSS on building class in HTML as well as CSS.
    </p>
    <p>Have Responsive Web.</p>
    <div class="button">
      <a
        href="https://nvanha.github.io/psd_1/index.htm"
        target="_blank"
        class="btn"
        >View on Website</a
      >
    </div>
  </div>
</div>

<!-- Facebook/Google API -->
<div class="works__item api form_validation">
  <span class="category">API, Form Validation</span>
  <a href="#small-dialog-5" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">PHP, API</span>
        <h4 class="title">Facebook/Google API | Login Form</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/5.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-5" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/5.png" alt="image" />
    <h2>Facebook/Google API | Login with Facebook/Google accounts in PHP</h2>
    <p>Facebook/Google API.</p>
    <p>Form login with Facebook/Google accounts in PHP.</p>
    <p>Clase redes Servidor HTTP con XAMPP.</p>
    <p>How to enable SSL (HTTPS protocol) with XAMPP in a local PHP project.</p>
    <div class="button">
      <a
        href="https://github.com/nvanha/facebook_google_api_login"
        target="_blank"
        class="btn"
        >View on Github</a
      >
    </div>
  </div>
</div>

<!-- Form Validation -->
<div class="works__item form_validation">
  <span class="category">Form Validation</span>
  <a href="#small-dialog-4" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">JavaScript</span>
        <h4 class="title">Form Validation</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/4.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-4" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/4.png" alt="image" />
    <h2>Form Validation in JavaScript</h2>
    <p>
      Data validation is the process of ensuring that user input is clean,
      correct, and useful.
    </p>
    <p>Has the user filled in all required fields?</p>
    <p>Has the user entered a valid date?</p>
    <p>Has the user entered text in a numeric field?</p>
    <div class="button">
      <a
        href="https://nvanha.github.io/form_validation/"
        target="_blank"
        class="btn"
        >View on Website</a
      >
    </div>
  </div>
</div>

<!-- SMTP Gmail -->
<div class="works__item form_validation api">
  <span class="category">API, Form Validation</span>
  <a href="#small-dialog-7" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">PHP, API</span>
        <h4 class="title">SMTP Gmail</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/7.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-7" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/7.png" alt="image" />
    <h2>Send email in PHP using Gmail SMTP</h2>
    <p>
      In this project I'm showing you how you can send a mail using gmail SMTP
      and PHP Mailer library.
    </p>
    <p>I've used here live hosting server for testing.</p>
    <p>You can use this from your local server also.</p>
    <p>Has the user entered text in a numeric field?</p>
    <div class="button">
      <a href="https://github.com/nvanha/smtp_gmail" target="_blank" class="btn"
        >View on Github</a
      >
    </div>
  </div>
</div>

<!-- Google reCAPTCHA -->
<div class="works__item form_validation api">
  <span class="category">API, Form Validation</span>
  <a href="#small-dialog-8" class="work-content">
    <div class="works__item-inner">
      <div class="details">
        <span class="term">PHP, API</span>
        <h4 class="title">Google reCAPTCHA</h4>
        <span class="more-button"><i class="icon-link"></i></span>
      </div>
      <div class="thumb">
        <img src="images/works/8.png" alt="image" />
        <div class="mask"></div>
      </div>
    </div>
  </a>
  <div id="small-dialog-8" class="white-popup zoom-anim-dialog mfp-hide">
    <img src="images/works/8.png" alt="image" />
    <h2>Google reCAPTCHA in PHP Form</h2>
    <p>Improving the security of your website/form is extremely important.</p>
    <p>
      I have recorded this PHP tutorials where you can learn how to protect your
      form by using Google reCaptcha v2.
    </p>
    <div class="button">
      <a
        href="https://github.com/nvanha/google_recaptcha"
        target="_blank"
        class="btn"
        >View on Github</a
      >
    </div>
  </div>
</div>