content: import React, { Component } from 'react';
  
  import './styles/css/Works-dist.css';
  
  import html from './../../resources/icons/html5.svg';
  import css from './../../resources/icons/css3.svg';
  import javascript from './../../resources/icons/javascript.svg';
  import gulp from  './../../resources/icons/gulpjs.svg';
  import react from './../../resources/icons/reactjs.svg';
  import sass from './../../resources/icons/sass.svg'
  import bootstrap from './../../resources/icons/bootstrap.svg';
  import jquery from './../../resources/icons/jquery.svg';
  import git from './../../resources/icons/git.svg';
  
  import project1 from './../../resources/images/project-1.JPG';
  import project2 from './../../resources/images/project-2.JPG';
  import project3 from './../../resources/images/project-3.JPG';
  import project4 from './../../resources/images/project-4.JPG';
  import project5 from './../../resources/images/project-5.JPG';
  
  class Works extends Component {
    render() {
      return (
          <div className="works animated fadeIn">
              <div className="project-container">
                  <div className="project-section">
                      <div className="mac-frame">
                          <div className="mac-frame-top">
                              <div className="bubble red"></div>
                              <div className="bubble yellow"></div>
                              <div className="bubble green"></div>
                          </div>
                          <img src={project1}></img>
                      </div>
                      <div className="text-container">
                          <h2 className="project-desc-title">MyScholarships</h2>
                          <p className="project-desc">A collaboration project of me and a friend for our thesis. MyScholarships is a dynamic fully functional web application. The main purpose of this web application is to make the process of searching and applying for scholarships easier.</p>
  
                          <div className="project-desc-bottom">
                              <ul className="btn-group-v">
                                  <li><a href="https://github.com/vincentleandr/ThesisProject" className="btn-visit" target="_blank">Github</a></li>
                              </ul>
                              
                              <ul className="icon-list">
                                  <li><img className="tech-icon" src={html} title="HTML(5)"/></li>
                                  <li><img className="tech-icon" src={css} title="CSS(3)"/></li>
                                  <li><img className="tech-icon" src={bootstrap} title="Bootstrap"/></li>
                                  <li><img className="tech-icon" src={javascript} title="Javascript"/></li>
                                  <li><img className="tech-icon" src={jquery} title="JQuery"/></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
  
              <div className="project-container">
                  <div className="project-section">
                      <div className="mac-frame">
                          <div className="mac-frame-top">
                              <div className="bubble red"></div>
                              <div className="bubble yellow"></div>
                              <div className="bubble green"></div>
                          </div>
                          <img src={project2}></img>
                      </div>
                      <div className="text-container">
                          <h2 className="project-desc-title">Personal Web</h2>
                          <p className="project-desc">My personal web / portfolio is basically to tell people who I am and what I love to do, also to showcase the works I've done.</p>
                          
                          <div className="project-desc-bottom">
                              <ul className="btn-group-v">
                                  <li><a href="https://github.com/vincentleandr/Personal-Web" className="btn-visit" target="_blank">Github</a></li>
                              </ul>
                              
                              <ul className="icon-list">
                                  <li><img className="tech-icon" src={html} title="HTML(5)"/></li>
                                  <li><img className="tech-icon" src={css} title="CSS(3)"/></li>
                                  <li><img className="tech-icon" src={sass} title="SASS"/></li>
                                  <li><img className="tech-icon" src={javascript} title="Javascript"/></li>
                                  <li><img className="tech-icon" src={react} title="ReactJS"/></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
  
              <div className="project-container">
                  <div className="project-section">
                      <div className="mac-frame">
                          <div className="mac-frame-top">
                              <div className="bubble red"></div>
                              <div className="bubble yellow"></div>
                              <div className="bubble green"></div>
                          </div>
                          <img src={project3}></img>
                      </div>
                      <div className="text-container">
                          <h2 className="project-desc-title">Mini Quiz</h2>
                          <p className="project-desc">A fun mini quiz based on the famous hit series Game of Thrones. Fairly easy if you're a big fan of the show !</p>
                          
                          <div className="project-desc-bottom">
                              <ul className="btn-group-v">
                                  <li><a href="https://github.com/vincentleandr/Mini-Quiz" className="btn-visit" target="_blank">Github</a></li>
                                  <li><a href="https://gotminiquiz.surge.sh/" className="btn-visit" target="_blank">Play</a></li>
                              </ul>
                              
                              <ul className="icon-list">
                                  <li><img className="tech-icon" src={html} title="HTML(5)"/></li>
                                  <li><img className="tech-icon" src={css} title="CSS(3)"/></li>
                                  <li><img className="tech-icon" src={javascript} title="Javascript"/></li>
                                  <li><img className="tech-icon" src={jquery} title="JQuery"/></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
  
              <div className="project-container">
                  <div className="project-section">
                      <div className="mac-frame">
                          <div className="mac-frame-top">
                              <div className="bubble red"></div>
                              <div className="bubble yellow"></div>
                              <div className="bubble green"></div>
                          </div>
                          <img src={project4}></img>
                      </div>
                      <div className="text-container">
                          <h2 className="project-desc-title">Get It Done</h2>
                          <p className="project-desc">A very simple to-do list web application with minimal design.</p>
                          
                          <div className="project-desc-bottom">
                              <ul className="btn-group-v">
                                  <li><a href="https://github.com/vincentleandr/Get-It-Done" className="btn-visit" target="_blank">Github</a></li>
                                  <li><a href="https://get-it-done.surge.sh/" className="btn-visit" target="_blank">Visit</a></li>
                              </ul>
                              
                              <ul className="icon-list">
                                  <li><img className="tech-icon" src={html} title="HTML(5)"/></li>
                                  <li><img className="tech-icon" src={css} title="CSS(3)"/></li>
                                  <li><img className="tech-icon" src={javascript} title="Javascript"/></li>
                                  <li><img className="tech-icon" src={jquery} title="JQuery"/></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
  
              <div className="project-container">
                  <div className="project-section">
                      <div className="mac-frame">
                          <div className="mac-frame-top">
                              <div className="bubble red"></div>
                              <div className="bubble yellow"></div>
                              <div className="bubble green"></div>
                          </div>
                          <img src={project5}></img>
                      </div>
                      <div className="text-container">
                          <h2 className="project-desc-title">Romeow's Social Card</h2>
                          <p className="project-desc">My first ReactJS project. I learned the basic concept of ReactJS from this project like props, state, components, etc. This is also the first time I implemented SASS on a project.</p>
                          
                          <div className="project-desc-bottom">
                              <ul className="btn-group-v">
                                  <li><a href="https://github.com/vincentleandr/Social-Card" className="btn-visit" target="_blank">Github</a></li>
                                  <li><a href="https://romeow-social-card.surge.sh/" className="btn-visit" target="_blank">Visit</a></li>
                              </ul>
                              
                              <ul className="icon-list">
                                  <li><img className="tech-icon" src={html} title="HTML(5)"/></li>
                                  <li><img className="tech-icon" src={css} title="CSS(3)"/></li>
                                  <li><img className="tech-icon" src={sass} title="SASS"/></li>
                                  <li><img className="tech-icon" src={javascript} title="Javascript"/></li>
                                  <li><img className="tech-icon" src={react} title="ReactJS"/></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      );
    }
  }
  
  export default Works;