1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>About Me - Vivian Hu</title> 7 <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,900" rel="stylesheet"> 8 <link rel="stylesheet" type="text/css" 9 href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"> 10 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 11 <link rel="stylesheet" type="text/css" href="../css/animate.css"> 12 <link rel="stylesheet" type="text/css" href="../css/project.css"> 13 <link rel="stylesheet" type="text/css" href="../css/media.css">
14<script type="text/javascript"> window.$crisp=[];window.CRISP_WEBSITE_ID="49eeb717-d5c7-4192-bd2c-1e150da6db34";(function(){ d=document;s=d.createElement("script"); s.src="https://client.crisp.chat/l.js"; s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})(); </script>
14 15</head> 16<body> 17<header> 18 <a class="logo" href="../index.html"></a> 19</header> 20<div class="wrap about-me"> 21 <div class="science col-lg-4 col-md-4 col-sm-4"> 22 <h4 style="font-weight:400; color:#88D414;">Science</h4> 23 <div class="science-period animated fadeInUp" style="margin-top: 120px"> 24 <div class="svg-icon"> 25 <img src="../img/rocket.svg" / width="16%" height="16%"> 26 </div> 27 <div class="science-text"> 28 <p>Had a lot of fun in my dadâs lab. Won prizes in <b>Physics</b> and <b>Chemistry</b> 29 competitions in high school years.</p> 30 </div> 31 </div> 32 <div class="science-period animated fadeInUp" style="margin-top: 10px"> 33 <div class="science-text"> 34 <p>Read too many <b>science fictions</b> and dreamed of being an astronaut.</p> 35 </div> 36 </div> 37 <div class="science-period animated fadeInUp" style="margin-top: 60px"> 38 <div class="svg-icon"> 39 <img src="../img/about2.svg" / width="16%" height="16%"> 40 41 42 </div> 43 <div class="science-text"> 44 <p>Majored in <b>Micro-electronics</b> and got the highest score in Craft Practice.</p> 45 </div> 46 </div> 47 <div class="science-period startup" style="margin-top: 0px"> 48 <div class="svg-icon"> 49 <img src="../img/about3.svg" / width="16%" height="16%"> 50 </div> 51 <div class="science-text"> 52 <p><b>A startup enthusiast</b> in Beijing. Witnessed the incredible changes technology has made at that time.</p> 53 </div> 54 <div class="science-period animated fadeInUp" style="margin-top: 10px"> 55 <div class="science-text"> 56 <p>Initiated and designed a mini-game with a team of 3 that had <b>2 million unique visitors</b> within 1 month.</p> 57 </div> 58 </div> 59 60 </div> 61 <div class="science-period longhorn" style="margin-top: 220px"> 62 <div class="svg-icon"> 63 64 <img src="../img/longhorn.png" / width="20%" height="20%"> 65 </div> 66 <div class="science-text"> 67 <p>Got my Master of Science in Information Studies HCI direction at University of Texas at Austin.</p> 68 </div> 69 </div> 70 </div> 71 <div class="svg-container col-lg-4 col-md-4 col-sm-4"> 72 <svg width="200px" height="1594px" viewBox="0 0 268 1500" version="1.1" xmlns="http://www.w3.org/2000/svg" 73 xmlns:xlink="http://www.w3.org/1999/xlink"> 74 <desc>Created with Sketch.</desc> 75 <defs></defs> 76 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 77 <g id="Artboard-Copy" transform="translate(-506.000000, -117.000000)"> 78 <g id="Group-8" transform="translate(506.000000, 95.000000)"> 79 <polyline id="Path-2" stroke="#FCB429" stroke-width="12" 80 points="150.370143 143 150.370143 188.202597 254.159068 247.290164 254.159068 372.852097 149.191636 429.272459 32.029285 366.852097 32.029285 429.272459 124.362278 486.660076 124.362278 600.997875 245.305454 676.597113 245.305454 804.610155 135.579534 865.340271 17 804.610155 17.3880564 967.231848 136.064631 906.109513 248.120477 962.785368 248.120477 1096.5651 135.579534 1169.93744 136.064631 1330.4377 17 1391.65478 17 1527.19727 124.362278 1585.98573 245.348785 1527.19727 248.120477 1672.18953 124.362278 1755.86691 124.362278 2001.30495"></polyline> 81 82 83 <circle id="Oval" fill="#FCB429" cx="252" cy="245" r="16"></circle> 84 <circle id="Oval-Copy-4" fill="#FCB429" cx="244" cy="683" r="16"></circle> 85 <circle id="Oval-Copy-5" fill="#FCB429" cx="16" cy="804" r="16"></circle> 86 <circle id="Oval-Copy-2" fill="#FCB429" cx="248" cy="963" r="16"></circle> 87 <circle id="Oval-Copy-6" fill="#FCB429" cx="245" cy="1529" r="16"></circle> 88 <circle id="Oval-Copy-6" fill="#FCB429" cx="19" cy="1529" r="16"></circle> 89 <circle id="Oval-Copy" fill="#FCB429" cx="33" cy="367" r="16"></circle> 90 <circle id="Oval-Copy-3" fill="#FCB429" cx="19" cy="963" r="16"></circle> 91 92 93 <polygon id="Polygon" stroke="#FCB429" stroke-width="10" fill="#FFFFFF" 94 transform="translate(150.024923, 84.339283) rotate(30.000000) translate(-150.024923, -84.339283) " 95 points="150.024923 19.2842826 206.024923 51.8117828 206.024923 116.866783 150.024923 149.394283 94.0249228 116.866783 94.0249228 51.8117828"></polygon> 96 <polygon id="Polygon-Copy-2" stroke="#FCB429" stroke-width="10" fill="#FFFFFF" 97 transform="translate(112.024923, 1340.339283) rotate(30.000000) translate(-112.024923, -1340.339283) " 98 points="112.024923 1275.28428 168.024923 1307.81178 168.024923 1372.86678 112.024923 1405.39428 56.0249228 1372.86678 56.0249228 1307.81178"></polygon> 99 <text id="0-18" font-family=".SFNSDisplay, .SF NS Display" font-size="30" font-weight="normal" 100 fill="#FCB429"> 101 <tspan x="117" y="96">0-18</tspan> 102 </text> 103 <polygon id="Polygon-Copy" stroke="#FCB429" stroke-width="10" fill="#FFFFFF" 104 transform="translate(117.000000, 595.055000) rotate(30.000000) translate(-117.000000, -595.055000) " 105 points="117 530 173 562.5275 173 627.5825 117 660.110001 61 627.5825 61 562.5275"></polygon> 106 <text class="age-24" id="18-23" font-family=".SFNSDisplay, .SF NS Display" font-size="30" font-weight="normal" 107 fill="#FCB429"> 108 <tspan x="75" y="607">18-23</tspan> 109 </text> 110 <text class="age-24" id="24+" font-family=".SFNSDisplay, .SF NS Display" font-size="30" font-weight="normal" 111 fill="#FCB429"> 112 <tspan x="88" y="1351">24+</tspan> 113 </text> 114 </g> 115 </g> 116 </g> 117 </svg> 118 119 <div class="center-text"> 120 <p>
120Start a career that combined science and art, technology and psychology. By connecting the dots, I became a <b>product designer</b>.</p> 121 </div> 122 123 <svg id="last-circle" width="24px" height="24px" viewBox="0 0 32 32" version="1.1" 124 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 125 126 <desc>Created with Sketch.</desc> 127 128 <defs></defs> 129 130 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 131 132 <g id="Artboard-Copy" transform="translate(-614.000000, -2074.000000)" fill="#FCB429"> 133 134 <circle id="Oval-Copy-9" cx="630" cy="2090" r="16"></circle> 135 136 </g> 137 138 </g> 139 140 </svg> 141 142 143 <svg id="last-ele" width="61px" height="62px" viewBox="0 0 61 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 144 <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch --> 145 <title>Group 11</title> 146 <desc>Created with Sketch.</desc> 147 <defs></defs> 148 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round"> 149 <g id="Artboard-Copy" transform="translate(-600.000000, -2137.000000)" stroke-width="2"> 150 <g id="Group-11" transform="translate(601.000000, 2138.000000)"> 151 <g id="Newsletter"> 152 <polyline id="Triangle-10" stroke="#456782" fill="#456782" stroke-linecap="round" points="19.5652174 14.3478261 30 7.82608696 40.4347826 14.3478261"></polyline> 153 <polyline id="Rectangle-260" stroke="#456782" fill="#456782" stroke-linecap="round" points="12.143928 18.2608696 0 26.0869565 0 60 58.6956522 60 58.6956522 26.0869565 46.5517241 18.2608696"></polyline> 154 <path d="M28.6956522,51.5217391 C23.0960007,51.5217391 13.0434783,43.6956522 13.0434783,43.6956522 L13.0434783,14.3478261 L45.6521739,14.3478261 L45.6521739,43.6956522 C45.6521739,43.6956522 33.965566,51.5217391 28.6956522,51.5217391 Z" id="Rectangle-260" stroke="#DBEEF7" fill="#DBEEF7" stroke-linecap="round"></path> 155 <path d="M0,37.826087 L18.2608696,48.9130435" id="Triangle-12" stroke="#4A8F9E" stroke-linecap="round"></path> 156 <path d="M40.4347826,37.826087 L58.6956522,48.9130435" id="Triangle-12-Copy" stroke="#4A8F9E" stroke-linecap="round" transform="translate(49.565217, 43.369565) scale(-1, 1) translate(-49.565217, -43.369565) "></path> 157 <polyline id="Triangle-11" stroke="#4A8F9E" fill="#456782" stroke-linecap="round" points="1.30434783 58.6956522 28.6956522 43.0434783 57.3913043 58.6956522"></polyline> 158 <rect id="Rectangle-261" stroke="#FE7D71" fill="#FE7D71" stroke-linecap="round" x="19.5652174" y="19.5652174" width="15.6521739" height="7.82608696"></rect> 159 <path d="M19.5652174,32.6086957 L37.826087,32.6086957" id="Line" stroke="#618287" stroke-linecap="square"></path> 160 <path d="M19.5652174,37.826087 L37.826087,37.826087" id="Line-Copy-20" stroke="#618287" stroke-linecap="square"></path> 161 <path d="M53.4782609,13.0434783 L58.0898268,8.4319123" id="Line" stroke="#FCC24C" stroke-linecap="round"></path> 162 <path d="M0,13.0434783 L4.61156596,8.4319123" id="Line-Copy-21" stroke="#FCC24C" stroke-linecap="round" transform="translate(2.608696, 10.434783) scale(-1, 1) translate(-2.608696, -10.434783) "></path> 163 <path d="M43.0434783,6.52173913 L45.6521739,0" id="Line" stroke="#FCC24C" stroke-linecap="round"></path> 164 <path d="M14.3478261,6.52173913 L16.9565217,0" id="Line-Copy-22" stroke="#FCC24C" stroke-linecap="round" transform="translate(15.652174, 3.260870) scale(-1, 1) translate(-15.652174, -3.260870) "></path> 165 </g> 166 </g> 167 </g> 168 </g> 169 </svg> 170 171 <div class="contact-text"> 172 <p> Enjoy life at <b>Singapore</b> now.</p> 173 </div> 174 <div class="contact-button"> 175 <br><a href="mailto:[email protected]"><b>Email me</b></a> 176 </div> 177 </div> 178 <div class="art col-lg-4 col-md-4 col-sm-4"> 179 <h4 style="font-weight:400; color:#FD7F6A;">Art</h4> 180 <div class="art-period animated fadeInUp"> 181 <div class="svg-icon"> 182 <img src="../img/about5.svg" / width="16%" height="16%"> 183 </div> 184 <div class="art-text"> 185 <p>Started surfing the Internet at the age of 9. Taught myself to use <b>PowerPoint</b> and <b>Flash</b> 186 to make animation and videos.</p> 187 </div> 188 </div> 189 <div class="art-period animated fadeInUp" style="margin-top:120px"> 190 191 <div class="svg-icon"> 192 <img src="../img/guitar.png" / width="20%" height="20%"> 193 </div> 194 <div class="art-text"> 195 <p>
195Big fan of <b>Music</b>. Learned to play guitar and started to write some songs. Listen on <a 196 href="https://soundcloud.com/vivian-dian/sets/my-songs" target="_blank">SoundCloud</a></p> 197 </div> 198 </div> 199 <div class="art-period travelling" style="margin-top:40px"> 200 <div class="svg-icon"> 201 <img src="../img/map.png" / width="15%" height="15%"> 202 </div> 203 <div class="art-text"> 204 <p>Explored the world by traveling around 6 countries and 54 cities.</p> 205 </div> 206 </div> 207 <div class="art-period travelling2" style="margin-top:10px"> 208 209 <div class="art-text"> 210 <p>Volunteered in a Health Center at St.Petersburg and experienced -25 ºF.</p> 211 </div> 212 </div> 213 <div class="art-period travelling3" style="margin-top:10px"> 214 215 <div class="art-text"> 216 <p>Interned in Northern Cyprus with young people from 36 countries, and my photo with their president made the local Newspaper headlines.</p> 217 </div> 218 </div> 219 <div class="art-period longhorn" style="margin-top:80px"> 220 <div class="svg-icon"> 221 <img src="../img/about8.svg" / width="8%" height="8%" > 222 </div> 223 <div class="art-text"> 224 <p>Collaborated with developer <a 225 href="https://github.com/JustinJiaDev" target="_blank">Justin</a> to make apps together. We made <a 226 href="http://www.plotguru.com/ " target="_blank">PlotGuru </a> while we at school.</p> 227 </div> 228 229 230 231 </div> 232 233 </div> 234 235</div> 236 237 238<div class="wrap"> 239 <div class="row "> 240 241 242 <img src="../img/wordcloud.png" / width="100%"> 243 <img src="../img/quotes.png" / width="100%"> 244 <section class="container scrollto" > 245<section style="padding: 16px; height: 800px; box-shadow: rgba(142, 151, 158, 0.15) 0px 4px 19px 0px; border-radius: 8px; overflow: hidden; width: flex; max-width: 1400px;"><iframe src="https://adplist.org/widgets/reviews?src=diancheng-hu" title="All Reviews" width="100%" height="100%" loading="lazy" style="border: 0px;"></iframe></section> 246 247 248 </div> 249 250</div> 251 252 253<div class="wrap grey"> 254 255 <div class="footer"> 256 <a class="footer-thumbnail" href="mongodb.html"> 257 <img src="../img/mongo.png" /> 258 <p style="font-size:13px"> 259 MongoDB 260 </p> 261 </a> 262 263 264 <a class="footer-thumbnail" href="carstory.html"> 265 <img src="../img/2.png"/> 266 <p style="font-size:13px"> 267 CarStory.com 268 </p> 269 </a> 270 <a class="footer-thumbnail" href="hsc.html"> 271 <img src="../img/1.png"/> 272 <p style="font-size:13px"> 273 HomeStory 274 </p> 275 </a> 276 277 <a class="footer-thumbnail" href="wollen.html"> 278 <img src="../img/wollen.png"/> 279 <p style="font-size:13px"> 280 WollenDance 281 </p> 282 </a> 283 284 <a class="footer-thumbnail" href="plotguru.html"> 285 <img src="../img/3.png"/> 286 <p style="font-size:13px"> 287 Plot Guru 288 </p> 289 </a> 290 <a class="footer-thumbnail" href="carstorymr.html"> 291 <img src="../img/7.png"/> 292 <p style="font-size:13px"> 293 Market Report 294 </p> 295 </a> 296 297 298 </div> 299</div>
300<script src="../js/jquery.min.js" type="text/javascript"></script>
vendor: 1 bytes, line 300
300
301<script> 302 303 $(function() { 304 $(window).scroll(function () { 305 var startup = $('.startup').offset().top - 600 306 if ($(this).scrollTop() > startup) { 307 $('.startup, .travelling, .travelling2, .travelling3').addClass('animated fadeInUp') 308 } 309 310 var longhorn = $('.longhorn').offset().top - 500 311 if ($(this).scrollTop() > longhorn) { 312 $('.longhorn, .age-24').addClass('animated fadeInUp') 313 } 314 }); 315 }); 316</script>
316 317</body> 318</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.