-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (238 loc) · 16.1 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<html>
<head>
<meta charset="utf-8">
<title>Max Li, Full Stack Software Engineer</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="css/popup.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/jquery.onepage-scroll.js"></script>
<script type="text/javascript" src="js/theater.min.js"></script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-71196213-1', 'auto');
ga('send', 'pageview');
</script>
<script>
$(document).ready(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(300)
.delay(2000)
.fadeOut(300, showNextQuote);
}
showNextQuote();
});
</script>
</head>
<body id="top">
<div id="body">
<a id="contact" style="position: absolute; bottom: 0px; left:0;"></a>
<header>
<span class="font_color nameTag"><a class="scroll font_color" href="#top">Max Li, Full Stack Software Engineer</a></span>
<ul class="navi_fade" style="margin-top: 30px;">
<li><a class="scroll" href="#work">Work</a></li>
<li><a class="scroll" href="#about">About</a></li>
<li><a class="scroll" href="#contact">Contact</a></li>
</ul>
</header>
<div class="main">
<h1 class="font_color wow fadeInUp banner" id="banner"></h1>
<div class="work_link">
<a class="workColor" href="#work">Work</a>
</div>
<div class="customer">
<a class="scroll" href="#about">About</a>
</div>
<div class="home_description">
<a class="scroll" href="#contact">Contact</a>
</div>
</div>
<div class="teaser_container" id="work">
<h3 class='bannerText'>(click on the banners to learn more about select projects)</h3>
<div class="teaser_item wow fadeInUp" id='dage'><img class='teaserImage' src="images/dage/dageThumb.png"></div>
<div class="teaser_item wow fadeInUp" id='murmur'><img class='teaserImage' src="images/murmur/murmurThumb.jpg"></div>
<br clear="all">
<br clear="all">
<br clear="all">
<article id="popupMurmur" class="popupMurmur">
<div class="customScrollBox">
<div class="content">
<a id="popupMurmurClose"><img class='iconClose' src="images/iconClose.png" width="20" alt="" /></br>(press esc)</a>
<h2 class='title popupContent'>MURMUR</h2>
<h3 class='subtitle popupContent'>Anonymous message board for where you live</h3>
<div class='description popupContent'>
<div class='link'><a href='http://murmur2.xyz' target='_blank'>WEBSITE <span id='bar'>|</span> </a>
<a href='https://github.com/repl-rebels/murmur' target='_blank'>GITHUB</a></div>
<h5>Murmur is a web app with anonymity at its core. Its geo-fencing capabilities allow the users to choose two different levels of anonymity. Its automatic moderator function sanitizes the message board from racism, sexism, and general inappropriateness. Its hashtag search feature allows the user to quickly pull up relevant topics. </h5>
<img class='popupImages' src="images/murmur/murmurHome.png">
<h5>This web app uses React to perform quick client side rendering based on various user events. For example, typing in a hashtag and clicking the search button will force the client to filter results and render only the appropriate hashtagged messages. </h5>
<img class='popupImages' src="images/murmur/murmurHashtag.png">
<h5>The users are able to select different levels of anonymity if they click the 'My City' button. This enables HTML5 geolocation and through Google Map API's reverse geocoding, the user is taken to the city Mumur from where they are reading and posting. This funciton also allows the users to provide more relevance to their message. For example, people in Murmur San Francisco are more likely to respond to a comment made about 49er's quarterback, Colin Kapernick's recent bad plays.</h5>
<img class='popupImages' src="images/murmur/murmurCity.png">
</hr>
<img class='popupImages' src="images/murmur/murmurComment.png">
<h5>Murmur is built with React, Node.js, Express.js, and Firebase. The native iOS prototype of Murmur is read-only and is built with React Native. The reverse geocoding was done through Google Map's API and JWT tokens were used for authentication.</h5>
<div id='techstack'><img class='popupImages' id='techstackmadlibs' src='images/murmur/murmurStack.jpg'></div>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
<a class="scrollUpBtn" href="#"></a>
<a class="scrollDownBtn" href="#"></a>
</div>
</article>
<article id="popupDage" class="popupDage">
<div class="customScrollBox">
<div class="content">
<a id="popupDageClose"><img class='iconClose' src="images/iconClose.png" width="20" alt="" /></br>(press esc)</a>
<h2 class='title popupContent'>DÄGE</h2>
<h3 class='subtitle popupContent'>Intelligently monitoring your outbound email stream.</h3>
<div class='description popupContent'>
<div class='link'><a href='https://github.com/dageteam/dage' target='_blank'>WEBSITE <span id='bar'>|</span> </a>
<a href='https://github.com/dageteam/dage' target='_blank'>GITHUB</a></div>
<video width="100%" controls>
<source src='images/dage/dageDemoFinal.mp4' type='video/mp4'> Your browser does not support HTML5 video.
</video>
<h5>Däge actively and silently monitors outbound emails from your server, utilizing machine learning to identify emails that is important to your team, and notifying you whenever it finds noteworthy emails. With the ability to scan thousands of emails every minute, Däge provides your company the tools to know the content of your employees’ emails, without you dedicating valuable resources or time.</h5>
<img class='popupImages' src="images/dage/dageHome.png">
<h5>Upon signin, the dashboard providing high-level insights into when flagged emails are sent, most flagged users, and detailed breakdowns of why emails were flagged. The attractive D3-sourced charts and tables provide an easy to understand overview of your company's digital health. Clicking on the dynamic 'New Flags' number dispatches an action to change the state tree to take you to the unread 'alerts' panel.</h5>
<img class='popupImages' src="images/dage/dashboard.png">
<h5>The unread flagged emails panel allows you to receive new alerts on this screen. Every email has details on which keywords triggered the flag and the context of the keyword exists, allowing the admin or the lower level users to unflag emails to train DägeWatch, our machine learning algorithm.</h5>
<h5>The all flagged emails panel archives all unflagged emails or those that have been read.</h5>
<img class='popupImages' src="images/dage/dagewatch.png">
<h5>The customization panel allows the top level admin to manage custom filters and its related keywords. It features responsive adding and removing capabilities despite the need to query the database, thanks to the dynamic re-rendering capabilities based off the React state tree.</h5>
<img class='popupImages' src="images/dage/customize.png">
<h5>The manage users panel allows admin users to manage lower-level users. Set permission groups broken down by department so teams only see relevant flagged emails.</h5>
<img class='popupImages' src="images/dage/users.png">
<h5>All these features provides actionable intel to make it incredibily easy to secure your company's outbound email stream. Dage is mainly built with React/Redux, Node.js, Express.js, and Google Cloud SQL. Supporting tech include Gulp, Jasmine/Karma, and Travis CI. </h5>
<div id='techstack'><img class='popupImages' id='techstackmadlibs' src='images/dage/dageStack.png'></div>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
<a class="scrollUpBtn" href="#"></a>
<a class="scrollDownBtn" href="#"></a>
</div>
</article>
</div>
<div class="about wow fadeInUp" id="about">
<img class='img-circle' src="./images/headshot.jpg" alt="">
<br>
<h6 id='resume'><a href='images/Resume_Maximilian_M_Li_09_03_19.pdf'>(see my resume!)</a></h6><br>
I'm a <span class=bold>full-stack developer</span> with expertise in web and mobile development. I'll bring a <span class=bold>unique</span> and <span class=bold>fanatically detailed</span> UI/UX perspective to every project. I'm also experienced in implementing <span class=bold>Agile & SCRUM</span> methodology for projects. I have a passion for developing tools that enhance and engage the <span class=bold>user experience</span>, as well as leveraging technology to create for those most in need.
</br>
</br>
</br>
</br>
</br>
</br>
</div>
<br clear="all">
<br>
<br>
</div>
<br clear="all">
<div class="contact_container">
<h2><a href="mailto:maxmli490@gmail.com?subject=message from maxmli.com">maxmli490@gmail.com</a> | <a>301.828.8974</a> | <a href="https://www.linkedin.com/in/maxmli">linkedIn</a> | <a href="https://www.github.com/flickster42490">github</a> | <a href='images/Resume_Maximilian_M_Li_09_03_19.pdf'>resume</a>
</h2>
</div>
<script src="js/wow.min.js"></script>
<script>
wow = new WOW({
animateClass: 'animated',
offset: 70,
callback: function(box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
});
wow.init();
</script>
<script>
var tStart = 30 // Start transition 100px from top
,
tEnd = 500 // End at 500px
,
cStart = [30, 30, 30],
cEnd = [255, 255, 255],
cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]];
$(document).ready(function() {
$(document).scroll(function() {
var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
$("#body").css('background-color', 'rgb(' + cBg.join(',') + ')');
$("header").css('background-color', 'rgb(' + cBg.join(',') + ')');
});
});
var tStart2 = 30 // Start transition 100px from top
,
tEnd2 = 500 // End at 500px
,
cStart2 = [255, 255, 255],
cEnd2 = [0, 0, 0],
cDiff2 = [cEnd2[0] - cStart2[0], cEnd2[1] - cStart2[1], cEnd2[1] - cStart2[0]];
$(document).scroll(function() {
var p = ($(this).scrollTop() - tStart2) / (tEnd2 - tStart2); // % of transition
p2 = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
var cBg2 = [Math.round(cStart2[0] + cDiff2[0] * p2), Math.round(cStart2[1] + cDiff2[1] * p2), Math.round(cStart2[2] + cDiff2[2] * p2)];
$(".font_color").css('color', '#ea6314');
});
</script>
<script>
// Instantiation
var theater = new TheaterJS();
// Describe actors
theater
.describe("banner", .8, "#banner")
// Write the scenario
var count = 0;
while (count < 100) {
theater
.write("banner:hi.", 1200)
.write("banner:こんにちは。", 1200)
.write("banner:sup.", 1200)
.write("banner:你好。", 1200)
.write("banner:hiya.", 1200)
.write("banner:dag.", 1200);
count++
}
// Listen to theater's events
theater
.on("say:start, erase:start", function() {
// add blinking caret
})
.on("say:end, erase:end", function() {
// remove blinking caret
})
.on("*", function() {
// do something
});
</script>
<script>
$(document).ready(function() {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) {
console.log('is mobile!');
$('.img-circle').css('margin-left', '20%');
}
})
</script>
<script src="teaserPopUp.js"></script>
</body>
</html>