xxxxxxxxxx<div class="container-fluid"><div class="slide" id="s1"> <div class="slide" id="s2"> <div class="slide" id="s3"> <div class="slide" id="s4"> <div class="slide" id="s5"> <ul id="menu"> <a href="#s1"> <li class="icon fa fa-home" id="home"></li> </a> <a href="#s2"> <li class="icon fa fa-user" id="user"></li> </a> <a href="#s3"> <li class="icon fa fa-code" id="skill"></li> </a> <a href="#s4"> <li class="icon fa fa-files-o" id="project"></li> </a> <a href="#s5"> <li class="icon fa fa-gamepad" id="game"></li> </a> </ul> <div class="page" id="p1"> <section class="icon fa fa-desktop"><span class="homeTitle">Christopher Pang</span><span class="subtitle">Web开发人员 <br> 数据库管理员 <br> <br> christopherpang@outlook.com</span></section> </div> <div class="page" id="p2"> <section class="icon2 fa fa-user"><span class="aboutTitle">About Me</span> <div class="block"> <span> <i class="subicon fa fa-graduation-cap"></i><br/><strong>University of British Columbia</strong><br/>Computer Science </span> <span> <i class="subicon fa fa-music"></i><br/><strong>Music Lover</strong><br/>Pop, Jazz<br/>Piano, Vocal, Trombone </span> <span> <i class="subicon fa fa-soccer-ball-o"></i><br/><strong>Manchester United</strong><br/>Glory Glory Man United </span> <span> <i class="subicon fa fa-map-marker"></i><br/><strong>Vancouver, BC</strong><br/>Canada </span> </div> </span> </section> </div> <div class="page" id="p3"> <section class="icon2 fa fa-code"><span class="aboutTitle">Skills</span> <div class="skillblock"> <span> <i class="subicon fa fa-globe"></i><br/><strong>Web Development</strong><br/>HTML, CSS <br/>JavaScript <br/>jQuery, AJAX <br/>PHP, Ruby </span> <span> <i class="subicon fa fa-laptop"></i><br/><strong>Software Development</strong> <br/>Java, C++ <br/>JSON </span> <span> <i class="subicon fa fa-database"></i><br/><strong>Database Management</strong> <br/>mySQL, Oracle <br/>MS SQL Server Management Studio <br/>MongoDB, Firebase <br/>Parse, Cloudboost </span> <span> <i class="subicon fa fa-folder"></i><br/><strong>Miscellaneous</strong><br/>R, NPM <br/>Cordova, AngularJS <br/>Ionic, Bootstrap <br/>JUnit, Selenium, Karma </span> </div> </span> </section> </div> <div class="page" id="p4"> <section class="icon2 fa fa-files-o"><span class="aboutTitle">Project Highlights</span> <div class="skillblock"> <span> <a href="#wakeapppopup"> <i class="subicon fa fa-bell"></i><br/><strong>WakeApp</strong> <br/>Never miss your destination again</a> </span> <span> <a href="#kontributepopup"> <i class="subicon fa fa-calendar-check-o"></i><br/><strong>Kontribute</strong> <br/>Event planning now easier and more convenient</a> </span> <span> <a href="#igrasspopup"> <i class="subicon fa fa-gift"></i><br/><strong>iGrass</strong> <br/>Online shopping is the way to go</a> </span> <span> <a href="#popcyclepopup;#s4"> <i class="subicon fa fa-bicycle"></i><br/><strong>PopCycle</strong> <br/>Take a quick break from cycling </a> </span> <span> <a href="#teamrocketpopup"> <i class="subicon fa fa-shopping-cart"></i><br/><strong>Team Rocket Supermarket</strong> <br/>Supermarket system simulator</a> </span> </div> </span> </section> </div> <div id="wakeapppopup" class="overlay"> <div class="popup"> <h2>WakeApp</h2> <a class="close" href="#s4">×</a> <div class="content"> <u>Description</u> <li> Phone App </li> <li> Wakes up users before they arrive to destination </li> <li> Use on public transport </li> </br> <u>Technology</u> <li> JavaScript ES6, HTML, CSS </li> <li> Meteor Framework </li> <li> Vancouver Translink API </li> <li> Google Maps </li> <li> AJAX </li> </div> </div> </div> <div id="kontributepopup" class="overlay"> <div class="popup"> <h2>Kontribute</h2> <a class="close" href="#s4">×</a> <div class="content"> <u>Description</u> <li> Phone App </li> <li> Makes event planning easier </li> <li> Different people contributing different items </li> </br> <u>Technology</u> <li> JavaScript, HTML, CSS </li> <li> Angular Framework </li> <li> Ionic Framework </li> <li> Parse / Firebase </li> <li> Cordova </li> </div> </div> </div> <div id="igrasspopup" class="overlay"> <div class="popup"> <h2>iGrass</h2> <a class="close" href="#s4">×</a> <div class="content"> <u>Description</u> <li> Phone App </li> <li> Simulation of online shopping app </li> <li> I actually don't sell any products! </li> </br> <u>Technology</u> <li> JavaScript, HTML, CSS </li> <li> Angular Framework </li> <li> Ionic Framework </li> <li> CloudBoost </li> <li> Cordova </li> </div> </div> </div> <div id="popcyclepopup" class="overlay"> <div class="popup"> <h2>PopCycle</h2> <a class="close" href="#s4">×</a> <div class="content"> <u>Description</u> <li> Website </li> <li> Plans bike routes for users with bike racks and water fountains on the route </li> <li> Save routes to compare with friends </li> </br> <u>Technology</u> <li> Java, HTML, CSS </li> <li> Google Cloud Server </li> <li> Google Maps </li> <li> JSON </li> </div> </div> </div> <div id="teamrocketpopup" class="overlay"> <div class="popup"> <h2>Team Rocket Supermarket</h2> <a class="close" href="#s4">×</a> <div class="content"> <u>Description</u> <li> Database Software</li> <li> Stores all the information of products in the supermarket, as well as employees information </li> <li> Search for items and find their price, or update quantities of the product </li> </br> <u>Technology</u> <li> Java, mySQL </li> <li> Oracle </li> </div> </div> </div> <div class="page" id="p5"> <section class="icon2 fa fa-gamepad"><span class="aboutTitle">Coming Soon!</span> <div class="block"> </div> </span> </section> </div> </div> </div> </div> </div></div></div><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,700,300&lang=en" /><script src="https://use.fontawesome.com/691b2c8fa4.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"></script> https://use.fontawesome.com/691b2c8fa4.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css