-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (148 loc) · 13.7 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
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="style.css">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<script src="fb.js"></script>
<script src="js libraries/Chart.js"></script>
<script src="js libraries/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>2017 in Review</title>
</head>
<body>
<div id="loader">
<div id="parentLoader">
<h2>Retrieving the good stuff from 2017...</h2>
<img src="images/months.gif" alt="month gif">
</div>
</div>
<h1>2017 in Review</h1>
<p> This is the result of me getting an iPad Pro and being bored over winter break. I hope you enjoy~</p>
<h2>Make New Friends, but Keep the Old</h2>
<p>Here are some Facebook related facts and figures. I tried to use the Facebook API to get this information, but all the endpoints were dead ends because of privacy issues (even though I only wanted to find and use my own data...) So instead, I grabbed them using a <a href="https://github.com/olgatron9000/2017-in-Review/blob/master/reacts.js" target="_blank">script</a> that runs over my personal activity log and graphed them using Chart.js. The last graph is based on interactions through comments, likes, and reactions.</p>
<div id="charts">
<div id="chart1">
<h3>Friends Made Per Month</h3>
<canvas id="firstChart" width="400" height="400"></canvas>
</br>
<p>Shoutout to all the friends I made in June and July!</p>
</div>
<div id="chart2">
<h3>How I React to Content on Facebook</h3>
<canvas id="secondChart" width="400" height="400"></canvas>
</br>
<p>I'm full of likes and loves.</p>
</div>
<div id="chart3">
<h3>Who I Interact With the Most</h3>
<canvas id="thirdChart" width="400" height="400"></canvas>
<p>What a surprise: I like wholesome memes and Christine Betts.</p>
</div>
</div>
<h2>Reacts All Around</h2>
<p>2017 was a rollercoaster. Here are some emotions I felt over this year (click through to see a breakdown):</p>
<div id="reacts">
<img id="like" src="images/like.png" alt="Facebook like button">
<img id="love" src="images/love.png" alt="Facebook love button">
<img id="laugh" src="images/laugh.png" alt="Facebook laugh button">
<img id="wow" src="images/wow.png" alt="Facebook wow button">
<img id="cry" src="images/cry.png" alt="Facebook cry button">
<img id="angry" src="images/angry.png" alt="Facebook angry button">
</div>
<div id="lists">
<ul id="likelist" class="hidden" style="margin-left: -3%">
<li><a href="http://www.porliniers.com/tiras/browse#15/martin-y-olga///1/0" target="_blank"><i class="em em-writing_hand"></i>"Martin y Olga" Comic Strips</a></li>
<li><a href="https://www.youtube.com/watch?v=gNSfhSXtvSk" target="_blank"><i class="em em-cat"></i>Ain't Nothing Gonna Break My Stride</a></li>
<li><a href="https://www.youtube.com/channel/UC3KEoMzNz8eYnwBC34RaKCQ" target="_blank"><i class="em em-robot_face"></i>Simone Giertz: Queen of Shitty Robots</a></li>
<li><a href="https://www.youtube.com/watch?v=sRfnevzM9kQ" target="_blank"><i class="em em-house_with_garden"></i>Get Out</a></li>
<li><a href="https://www.space.com/37873-amazing-photos-of-solar-eclipse-2017.html" target="_blank"><i class="em em-dark_sunglasses"></i>Total Solar Eclipse</a></li>
</ul>
<ul id="lovelist" class="hidden" style="margin-left: 14%">
<li><a href="http://www.wingsoverwa.com/" target="_blank"><i class="em em-small_airplane"></i>Wings Over Washington</a></li>
<li><a href="https://www.youtube.com/watch?v=R4jmsUozlrI" target="_blank"><i class="em em-computer"></i>TUNE House Roadshow</a></li>
<li><a href="https://www.youtube.com/watch?v=YN1QrKBoAf0" target="_blank"><i class="em em-sunny"></i>Another Day of Sun</a></li>
<li><a href="https://www.youtube.com/watch?v=WIrHn-lBajY" target="_blank"><i class="em em-dancer"></i>Someone in the Crowd</a></li>
<li><a href="https://www.youtube.com/watch?v=NkD10lhMMrg" target="_blank"><i class="em em-film_projector"></i>La La Land Epilogue</a></li>
</ul>
<ul id="laughlist" class="hidden" style="margin-left: 30%">
<li><a href="https://www.youtube.com/watch?v=jVhlJNJopOQ" target="_blank"><i class="em em-writing_hand"></i>Papyrus</a></li>
<li><a href="https://www.youtube.com/watch?v=WwiVPkwY2ZE" target="_blank"><i class="em em-woman"></i>Unbreakable Kimmy Schmidt</a></li>
<li><a href="https://www.youtube.com/watch?v=Bf12qwPWDVI" target="_blank"><i class="em em-horse"></i>Bojack Horseman</a></li>
<li><a href="https://www.youtube.com/watch?v=oltCLzdHLQo" target="_blank"><i class="em em-male-technologist"></i>Silicon Valley</a></li>
<li><a href="https://www.youtube.com/watch?v=LHzojPHyvKE" target="_blank"><i class="em em-rainbow-flag"></i>The Gay and Wondrous Life of Caleb Gallo</a></li>
</ul>
<ul id="wowlist" class="hidden" style="margin-left: 42%">
<li><a href="https://www.youtube.com/watch?v=LgmxMuW6Fsc" target="_blank"><i class="em em-printer"></i>OK Go's "Obsession"</a></li>
<li><a href="https://www.youtube.com/watch?v=gn4nRCC9TwQ" target="_blank"><i class="em em-man-walking"></i>Google's DeepMind AI Teaches Itself to Walk </a></li>
<li><a href="https://www.youtube.com/watch?v=ZYHRSs2I1_k" target="_blank"><i class="em em-camera"></i>UW Hyperlapses</a></li>
<li><a href="http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html" target="_blank"><i class="em em-moon"></i>If the Moon Were Only One Pixel</a></li>
<li><a href="https://www.youtube.com/watch?v=4x23uOvnyeI&index=8&list=LLpkW-YCSZsLTaqx-1rOrKuw&t=2s" target="_blank"><i class="em em-crown"></i>The Colors in Game of Thrones by Season</a></li>
</ul>
<ul id="crylist" class="hidden" style="margin-left: 60%">
<li><a href="https://www.theatlantic.com/science/archive/2017/09/hurricane-irma-closes-in-on-miami/539217" target="_blank"><i class="em em-ocean"></i>Hurricane Irma</a></li>
<li><a href="https://www.cbsnews.com/feature/las-vegas-shooting" target="_blank"><i class="em em-gun"></i>Las Vegas Shooting</a></li>
<li><a href="https://gizmodo.com/exclusive-heres-the-full-10-page-anti-diversity-screed-1797564320" target="_blank"><i class="em em-memo"></i>James Damore's Google Manifesto</a></li>
<li><a href="https://www.youtube.com/watch?v=sE99le5FBrY" target="_blank"><i class="em em-star"></i>A Tribute to Carrie Fisher</a></li>
<li><a href="https://www.youtube.com/watch?v=g7Z7yXoIIJ0" target="_blank"><i class="em em-musical_note"></i>"Half-Light" by Rostam</i></a></li>
</ul>
<ul id="angrylist" class="hidden" style="margin-left: 75%">
<li><a href="https://www.nytimes.com/2017/03/06/us/politics/travel-ban-muslim-trump.html" target="_blank"><i class="em em-airplane"></i>Trump Travel Ban</a></li>
<li><a href="https://www.npr.org/2017/12/20/572157392/gop-poised-for-tax-victory-after-a-brief-delay" target="_blank"><i class="em em-moneybag"></i>Trump Tax Cut</a></li>
<li><a href="https://www.huffingtonpost.com/entry/trump-administration-cdc-banned-words_us_5a348ed2e4b0ff955ad3221d" target="_blank"><i class="em em-page_facing_up"></i>Trump Bans CDC Words</a></li>
<li><a href="https://www.usmagazine.com/celebrity-news/pictures/hollywood-sexual-misconduct-scandals/" target="_blank"><i class="em em-no_entry_sign"></i>Sexual Assault in Hollywood</a></li>
<li><a href="https://www.nytimes.com/2017/12/14/technology/net-neutrality-repeal-vote.html" target="_blank"><i class="em em-signal_strength"></i>Net Neutrality Repeal</a></li>
</ul>
</div>
<h2>Oh, So You Like "Doing Things?" Name Five of Their Songs</h2>
<p>Life moves pretty fast. If you don’t stop and look around once in awhile, you could miss it. Hover over each Olga for more details!</p>
</br>
</br>
</br>
<div id="olgas">
<div class="thumbnail"><img src="images/1.png" alt="Sweden"><figure><img src="images/1.png" width="100px" height="100px" alt="Sweden"><br>Visited Sweden with my bud, Alyssa. Ate meatballs and saw a lot of art. Didn't get to go to IKEA. Not salty.</figure></div>
<div class="thumbnail"><img src="images/2.png" alt="Two Door Cinema Club"><figure><img src="images/2.png" width="100px" height="100px" alt="Two Door Cinema Club"><br>Rocked out at the Two Door Cinema Club concert. Amazing band. Listen to the albums "Tourist History" and "Beacon" (only listen to "Gameshow" if you have time)</figure></div>
<div class="thumbnail"><img src="images/3.png" alt="University of Washington"><figure><img src="images/3.png" width="100px" height="100px" alt="University of Washington"><br>Swam in the UW fountain after it was cleaned. Injured my toe so badly it didn't heal until September.</figure></div>
<div class="thumbnail"><img src="images/4.png" alt="Facebook"><figure><img src="images/4.png" width="100px" height="100px" alt="Facebook"><br>Started my Facebook University internship in Menlo Park! Good vibes, good work, and good eats.</figure></div>
<div class="thumbnail"><img src="images/5.png" alt="Computer Science and Engineering"><figure><img src="images/5.png" width="100px" height="100px" alt="Computer Science and Engineering"><br>Got into the CSE program at UW. Said a prayer to the CSE intro series god, Stuart Reges.</figure></div>
<div class="thumbnail"><img src="images/6.png" alt="Top roping"><figure><img src="images/6.png" width="100px" height="100px" alt="Top roping"><br>Learned how to top rope. Fear of heights? No sir.</figure></div>
<div class="thumbnail"><img src="images/7.png" alt="Lorde"><figure><img src="images/7.png" width="100px" height="100px" alt="Lorde"><br>Lorde blessed me during her show at Bumbershoot. Felt reborn.</figure></div>
<div class="thumbnail"><img src="images/8.png" alt="Nathan Fielder"><figure><img src="images/8.png" width="100px" height="100px" alt="Nathan Fielder"><br>Met Nathan Fielder from hit show, "Nathan For You." Go watch. 10/10 funny business proposals.</figure></div>
<div class="thumbnail"><img src="images/9.png" alt="Cal Poly SLO"><figure><img src="images/9.png" width="100px" height="100px" alt="Cal Poly SLO"><br>Visited my bud, Nicole, in Cal Poly SLO. Hiked and ate tri-tip sandwiches. Would agree with Oprah and rate it “happiest city in America.”</figure></div>
<div class="thumbnail"><img src="images/10.png" alt="Half-marathon"><figure><img src="images/10.png" width="100px" height="100px" alt="Half-marathon"><br>Ran first half-marathon- "Beat the Blerg." Ate cake during the run.</figure></div>
<div class="thumbnail"><img src="images/11.png" alt="CSE 142 TA"><figure><img src="images/11.png" width="100px" height="100px" alt="CSE 142 TA"><br>Became a CSE 142 TA. Loved all my students. Probably tried too hard to be relatable. Said "thank you for being a student" to one during my last section.</figure></div>
<div class="thumbnail"><img src="images/12.png" alt="Grace Hopper Celebration"><figure><img src="images/12.png" width="100px" height="100px" alt="Grace Hopper Celebration"><br>Went to the Grace Hopper Celebration. Thank you to the TUNE House team and all the donors!</figure></div>
<div class="thumbnail2"><img src="images/13.png" alt="Marathon"><figure><img src="images/13.png" width="100px" height="100px" alt="Marathon"><br>Decided a half wasn't enough. Ran a full marathon with my bud, Christine. Took us 6 hours. We cried. (But we finished.)</figure></div>
<div class="thumbnail2"><img src="images/14.png" alt="Hillary Rodham Clinton"><figure><img src="images/14.png" width="100px" height="100px" alt="Hillary Rodham Clinton"><br>Met Hillary Rodham Clinton. Shook her hand. Said thank you.</figure></div>
</div>
<img src="images/timeline.png" alt="timeline">
<h2>You Win Some, You Lose... a Lot</h2>
<p>You're not doing life correctly if you're not failing from time to time. Here lie the repressed memories of my failures:</p>
<div id="parentGrave">
<svg version="1.1" id="svg-doc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 404.7 279.1" style="enable-background:new 0 0 404.7 279.1;" xml:space="preserve">
<g id="ghost">
<path fill="#FFFFFF" fill-opacity="0.8" stroke="#000000" stroke-width="2" class="st0" d="M39.2,79.5c0.1,0,0,0,0.1,0c0.7,0,2.5-0.5,7.3-3.9c0,0,1.5-1.2,5.6-0.7c0,0,4.3,0.3,7.6-1.8
c0,0,4.9-1.9,4.9-2.8c0,0-8.8-10.8-8.5-19.2c0,0-0.6-7.1,0.3-10.8c0.2-0.7,0.2-1.5,0.2-2.2c-0.3-6.7-1.3-11.4-3.2-14.1
c-0.4-0.6-1-1.4-1.4-2c-1.7-2.4-6-7.3-10.8-8c0,0-5.8-1.9-13.2,1.1c-2.3,1-4.4,2.5-5.9,4.4c-2.3,2.9-5.5,7.8-6.3,13.9
c-0.1,0.7-0.2,1.3-0.4,1.9c-0.4,1.6-1.2,4.9-0.6,7.7c0.1,0.7,0.2,1.4,0.2,2.2c0,2.5,0.1,7.7,0.5,8.9c0,0,1,5.4,0.9,8.3
c0,1.2,0.1,2.3,0.3,3.5c0.7,3.8,2.2,11.2,3.5,12.6c0,0,0.6,0.8,5.8-1.4c0,0,3.3-0.6,6.5,1c0.3,0.2,0.6,0.3,1,0.4
C35,78.7,38.1,79.6,39.2,79.5z"/>
<circle stroke="#000000" stroke-width="2" class="st1" cx="27" cy="32.3" r="2.8"/>
<ellipse stroke="#000000" stroke-width="3" class="st2" cx="34.7" cy="40.4" rx="2.1" ry="2.6"/>
<circle stroke="#000000" stroke-width="2" class="st1" cx="43.9" cy="33.2" r="2.8"/>
</g>
</svg>
<img id="tombstones" src="images/tombstones.png" alt="tombstones">
</div>
<h2>Now Let's Jam!</h2>
<p>I listen to some music here and there. The first playlist is my top songs of 2017, and the second playlist is the one that I listened to while making this website. I got the stats from <a href="https://2017wrapped.com/" target="_blank">here!</a></p>
</br>
<div id="spotify">
<iframe src="https://open.spotify.com/embed/user/spotify/playlist/37i9dQZF1E9NWQfrTrKdnx" width="400" height="400" frameborder="0" allowtransparency="true"></iframe>
</br>
<img id="spotifyStats" src="images/spotifystats.png">
<iframe src="https://open.spotify.com/embed/user/1273407351/playlist/4fA5wcL4EVkNIB8PYACJa5" width="400" height="400" frameborder="0" allowtransparency="true"></iframe>
</div>
</body>
</html>