-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (153 loc) · 9.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Tommy Ngai</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/animate.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<img src="tnPic.jpg" id="profile-pic" class="right" alt="Profile Picture">
<br><br>
<h1 class="header center ">Tommy Ngai</h1>
<div class="row center">
<h5 class="header"><div class="element"></div></h5>
</div>
</div>
</div>
</div>
<div id="tabs-bar" class="row center">
<a role="button" id="download-button" class="btn-large waves-effect waves-light teal lighten-1 ">Recent Projects<i class='material-icons right'>swap_horiz</i></a>
</div>
<div class="section">
<!-- Portfolio Section -->
<div id= "portfolio" class="row">
<div class="col s12 m6 l3 ">
<div class="card medium z-depth-5 hoverable">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="onwords.jpg">
</div>
<div class="card-content activator">
<span class="card-title activator grey-text text-darken-4">OnWords<i class="material-icons right">more_vert</i></span>
<p><a href="#" class="activator" ><i>Record / Share / Discover Live Annotations </i></a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">OnWords<i class="material-icons right">close</i></span>
<p>OnWords is a social media annotations platform that allow you to make and share annotations in real time. Onwords' UI is layered on top of the
website you are visiting so theres no need to leave the website you want to annotate on. Just download the Chrome Extension and start browsing.
</p>
<div class="links"><a class='center' href="https://goo.gl/d4a96c">Download Extension</a></div>
<ul class="tech-stack center">
<li><img src="react-logo.png" class= "tech-logo" alt="React-logo" /></li>
<li><img src="html_5_vector_logo.jpg" class= "tech-logo" alt="HTML5-logo" /></li>
<li><img src="postgresql_logo.jpg" class= "tech-logo" alt="postgresql-logo" /></li>
<li><img src="nodejs.png" class= "tech-logo" alt="node-logo" /></li>
<li><img src="ChromeWebStore_Badge_v2_340x96.png" id="chrome-icon" class= "tech-logo" alt="chromestore-logo" /></li>
</ul>
</div>
</div>
</div>
<div class="col s12 m6 l3 ">
<div class="card medium z-depth-5 hoverable">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="venshur.jpg">
</div>
<div class="card-content activator">
<span class="card-title activator grey-text text-darken-4">Venshur<i class="material-icons right">more_vert</i></span>
<p><a href="#" class="activator" >Organize your pictures by trip and Geolocation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Venshur<i class="material-icons right">close</i></span>
<p>Venshur organizes your instagram pictures by hashtag and displays them by geolocation. You can find friends that have taken Instagram pictures on the same trip or new friends for your next trip</p>
<div class="links"><a class='center' href="https://venshur.herokuapp.com">Website</a></div>
<ul class="tech-stack center">
<li><img src="Angular-logo.png" class= "tech-logo" alt="Angular-logo" /></li>
<li><img src="html_5_vector_logo.jpg" class= "tech-logo" alt="HTML5-logo" /></li>
<li><img src="postgresql_logo.jpg" class= "tech-logo" alt="postgresql-logo" /></li>
<li><img src="nodejs.png" class= "tech-logo" alt="node-logo" /></li>
</ul>
</div>
</div>
</div>
<div class="col s12 m6 l3 ">
<div class="card medium z-depth-5 hoverable">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="lldj.jpg">
</div>
<div class="card-content activator">
<span class="card-title activator grey-text text-darken-4">LLDJ<i class="material-icons right">more_vert</i></span>
<p><a class="activator" href="#">Crowdsource Sound Cloud Youtube playlist</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">LLDJ<i class="material-icons right">close</i></span>
<p>LLDJ media player allows you to play both Sound Clound and Youtube media, and allows people you invite to add to the
playlist.</p>
<div class="links"><a class='center' href="https://lldj.firebaseapp.com">Website</a></div>
<ul class="tech-stack center">
<li><img src="react-logo.png" class= "tech-logo" alt="React-logo" /></li>
<li><img src="html_5_vector_logo.jpg" class= "tech-logo" alt="HTML5-logo" /></li>
<li><img src="webPack.png" class= "tech-logo" alt="webpack-logo" /></li>
<li><img src="firebase.png" class= "tech-logo" alt="firebase-logo" /></li>
</ul>
</div>
</div>
</div>
<div class="col s12 m6 l3">
<div class="card medium z-depth-5 hoverable">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="flapp.jpg">
</div>
<div class="card-content activator">
<span class="card-title activator grey-text text-darken-4">FLapp<i class="material-icons right">more_vert</i></span>
<p><a class="activator" href="#">Food Truck Locator App</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">FLapp<i class="material-icons right">close</i></span>
<p>FLapp allows food truck owners to share their location with their fans, and allows consumers to see what Food Trucks are visiting their area.</p>
<div class="links"><a class='center' href="https://flappwebapp.firebaseapp.com">Website</a></div>
<ul class="tech-stack center">
<li><img src="Angular-logo.png" class= "tech-logo" alt="Angular-logo" /></li>
<li><img src="html_5_vector_logo.jpg" class= "tech-logo" alt="HTML5-logo" /></li>
<li><img src="twitterbootstrap-180x180.jpg" class= "tech-logo" alt="bootstrap-logo" /></li>
<li><img src="firebase.png" class= "tech-logo" alt="firebase-logo" /></li>
</ul>
</div>
</div>
</div>
</div>
<!-- About Me Section -->
<div id="about" class="container animated fadeInLeftBig hide">
<div class="row ">
<div class="col m12 s12 l12 about-page z-depth-3 hoverable flow-text valign-wrapper"><p id="intro" class="valign">        Thank you for visiting my page. I am a software engineer with a passion for building highly functional yet clean and simple to use user interfaces and web apps.
Check out my projectss or have a project in mind ? Connect and chat with me. Please remember to come back and see the next iteration of this site </p>
</div>
</div>
</div>
</div>
<footer >
<div class="page-footer">
<div class="container">
<ul class="center contact-info">
<li><a href="https://www.linkedin.com/in/tommyngai" target="blank"><img id="linkedin" class=" contact-info z-depth-2 hoverable waves-effect waves-block" src="linkedin-icon.png" alt="linkedin-icon" /></a></li>
<li><a href="mailto:[email protected]"><img class=" contact-info z-depth-2 hoverable" src="Mail-icon.png" alt="email-icon" /></a></li>
<li><a href="https://github.com/tngai" target="blank" ><img class=" contact-info z-depth-2 hoverable" src="github.png" alt="octocat-github-icon" /></a></li>
<li><a href="https://www.hackerrank.com/tngai" target="blank" ><img class=" contact-info z-depth-2 hoverable" src="hackerrank.png" alt="hacker-rank-icon" /></a></li>
</ul>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>