-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfeatured-artworks.html
More file actions
370 lines (331 loc) · 18.9 KB
/
featured-artworks.html
File metadata and controls
370 lines (331 loc) · 18.9 KB
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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<head>
<title>Random Blends 2016 | Contact Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- STYLESHEETS -->
<!-- Boostrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display' rel='stylesheet' type='text/css'>
<!-- Our Stylesheets -->
<link rel="stylesheet" href="assets/stylesheets/main.css" type='text/css'>
<link rel="stylesheet" href="assets/stylesheets/featured-artworks.css" type='text/css'>
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png"/>
<!-- JQuery -->
<script src="assets/javascripts/jquery-2.2.1.min.js"></script>
<script src="assets/javascripts/oridomi.min.js"></script>
<!-- JAVASCRIPTS -->
<script src="assets/javascripts/navbar.js"></script>
<!-- Boostrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Our Javascripts -->
</head>
<body>
<!-- Menu Button -->
<button class="site-menu-expand-button site-menu-button">
<div class="empty-container"></div>
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
<!-- Folding Menu -->
<div class="site-menu-wrapper">
<div class="site-menu">
<h1 class="header-font site-menu-header underline">Menu</h1>
<ul class="site-menu-list">
<!-- IMPORTANT WHEN ADDING: CHANGE THE FIRST CLASS OF EACH ITEM ACCORDINGLY -->
<a href="./"><li class="item-one site-menu-item"><h4>Home</h4></li></a>
<a href="./#explore"><li class="item-two site-menu-item"><h4>Explore</h4></li></a>
<a href="./#play"><li class="item-three site-menu-item"><h4>Play</h4></li></a>
<a href="./#learn"><li class="item-four site-menu-item"><h4>Learn</h4></li></a>
<a href="./interactive-map"><li class="item-five site-menu-item"><h4>Map</h4></li></a>
<a href="./audioguide"><li class="item-six site-menu-item"><h4>Audio Guide</h4></li></a>
<a href="./contact-us"><li class="item-seven site-menu-item"><h4>Contact Us</h4></li></a>
<a href="./visit"><li class="item-eight site-menu-item"><h4>Getting Here</h4></li></a>
<a href="./2015"><li class="item-nine site-menu-item"><h4>RB2015</h4></li></a>
</ul>
<button class="site-menu-collapse-button site-menu-button">
<span class="glyphicon glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
</button>
</div>
</div>
<!-- START HERE -->
<article id="featured-artworks" class="site-content-block">
<h2 class="header-font site-content-block-title underline">Featured Artworks</h2>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">Zi Heng</h2>
<h2 class="featured-artwork__author">By Tang Weishan, Jerlyn Ng, Zhai Rui, Tan Jia Chi, Lim Yen Siu</h2>
<p class="featured-artwork__description">Wong Zi Heng was an active undergraduate until an accident left him paralysed from chest down. This film encapsulates his journey to recovery as he strives to overcome the odds.</p>
<button data-toggle="modal" data-target="#zi-heng-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img src="./assets/images/featured-artworks-thumbnails/zi-heng.jpg">
</div>
<!-- Modal -->
<div id="zi-heng-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">Zi Heng</h1>
<img src="./assets/images/featured-artworks-thumbnails/zi-heng.jpg">
<p>
Wong Zi Heng was a physically active university student until a sudden accident at a school camp in 2013 left him paralysed from the chest down. Since then, the former lifeguard has embarked on an arduous journey to recovery as he struggles with the loss of his independence among other challenges. Let this inspiring film tug at your heartstrings as Zi Heng sets out to regain control of his life with optimism, perseverance, and the unwavering support of his loved ones.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">Planets and Stars</h2>
<h2 class="featured-artwork__author">By Keith Chia</h2>
<p class="featured-artwork__description">Witness the beauty of Planets and Stars and send them whirling by tilting your phone. Tap to transform the planet into a star field, and see them reassemble at the second touch.</p>
<button data-toggle="modal" data-target="#planets-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img src="./assets/images/featured-artworks-thumbnails/planets-and-stars.jpg">
</div>
<!-- Modal -->
<div id="planets-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">Planets and Stars</h1>
<img src="./assets/images/featured-artworks-thumbnails/planets-and-stars.jpg">
<p>
Planet and Stars is an interactive animation that rotates a 3-dimensional model by controlling the movement of the mobile device. Tap on the whirling planet and send it bursting into a star field, and watch its reassembly back into a planet at the second touch. The artist used several javascript libraries, such as three.js, two.js and jQuery to power this captivating animation.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">My Neighbourhood Moments</h2>
<h2 class="featured-artwork__author">By Yeo Qiao Yin</h2>
<p class="featured-artwork__description">Amidst the hustle and bustle of life, the artist captures the transient yet unique moments from her neighbourhood and reminds us of the bliss of simplicity.</p>
<button data-toggle="modal" data-target="#neighbourhood-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img id="neighbourhood-gif" src="./assets/images/featured-artworks-thumbnails/neighbourhood.gif">
</div>
<!-- Modal -->
<div id="neighbourhood-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">My Neighbourhood Moments</h1>
<img id="neighbourhood-gif" src="./assets/images/featured-artworks-thumbnails/neighbourhood.gif">
<p>
In this cinemagraph, the artist captures her typical neighborhood moments that one may easily overlook amidst the hustle and bustle of city life. While these activities are ordinary, their transiency makes them unique, thus allowing them to embody different significance to every audience. As our nation’s landscape continues to evolve in the years to come, this cinemagraph reminds us to appreciate the precious moments in life – perhaps when we pause to look around us, we could easily find joy in the littlest things that we never knew about before.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">Lethargy</h2>
<h2 class="featured-artwork__author">By Arumi</h2>
<p class="featured-artwork__description">Amidst discrimination and hostility towards foreign workers, we as locals cannot forego the weariness and exhaustion that everyone experience in their daily lives.</p>
<button data-toggle="modal" data-target="#lethargy-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img id="lethargy-gif" src="./assets/images/featured-artworks-thumbnails/lethargy.gif">
</div>
<!-- Modal -->
<div id="lethargy-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">Lethargy</h1>
<img id="lethargy-gif" src="./assets/images/featured-artworks-thumbnails/lethargy.gif">
<p>
Lethargy is a two-part cinemagraph featuring the lives of foreigners who constitute a growing minority in our country. One captures a row of exhausted foreign workers after work while the other features a foreigner in deep sleep with his son. <br><br>
The aim is to create awareness and appreciation to this group of people who often feel hostility from local Singaporeans by capturing exhaustion into relatable moments. The contrast between the static monochrome foreground with the coloured and flashy background illuminates the mundanity of life against the fleeting moment of time in Singapore’s fast-paced city life.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">Frozen</h2>
<h2 class="featured-artwork__author">By Bao Xiao, Christie Han, Nicole Lim, Rachel Tan</h2>
<p class="featured-artwork__description">Based on the ground-breaking 2013 Disney film Frozen, the webcomic grants readers the agency to influence each other’s stories, bringing the audience closer to one another and the comic characters. </p>
<button data-toggle="modal" data-target="#frozen-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img src="./assets/images/featured-artworks-thumbnails/frozen.jpg">
</div>
<!-- Modal -->
<div id="frozen-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">Frozen</h1>
<img src="./assets/images/featured-artworks/frozen.jpg">
<p>
Inspired by the ground-breaking 2013 Disney film Frozen, this webcomic presents a multipath narrative that progresses to a plot twist with 12 possible kinds of endings. It is designed to be read by two people simultaneously, each of whom is granted the agency to influence one another’s story journeys and outcomes. The social comic aims to bring audiences together and break out from a single-person interactive dimension, such that the combination of choices made at every decision stage will dictate the possible paths that lie ahead for both readers as the story progresses
</p>
</div>
</div>
</div>
</div>
</div>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">Feelings about Feelings</h2>
<h2 class="featured-artwork__author">By Jerlyn Ng, Erfi Azhar, Maciej Ziarkowski</h2>
<p class="featured-artwork__description">Are Singaporeans emotionally expressive or are we a nation of stoics? Feelings about Feelings presents the findings from an analysis of emotional expression among tweets by Singaporean Twitter users.</p>
<button data-toggle="modal" data-target="#feelings-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img src="./assets/images/featured-artworks-thumbnails/feelings-about-feeling.png">
</div>
<!-- Modal -->
<div id="feelings-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">Feelings about Feelings</h1>
<img src="./assets/images/featured-artworks/feelings.jpg">
<p>
Feelings about Feelings is an infographic presenting findings on emotional expression among Singaporean users on the social media site Twitter. Using specific emotive keywords, tweets during the one-year period from April 2014 to 2015 were analysed. <br><br>
A Gallup poll in 2012 has ranked Singapore as the world’s least emotional country. Are Singaporeans really stoics who suffer from an emotional deficit? Or is the poll merely reflective of a cultural anomaly? Through this infographic, visitors are invited to take a personal stance on this issue.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">Love is what you want</h2>
<h2 class="featured-artwork__author">By Hafiiz Karim</h2>
<p class="featured-artwork__description">Love is what you want follows the journey of a man, who contemplates his lonely life, and realises that he just needs to accept help in order to move on.</p>
<button data-toggle="modal" data-target="#love-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img src="./assets/images/featured-artworks-thumbnails/love.jpg">
</div>
<!-- Modal -->
<div id="love-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">Love is what you want</h1>
<img src="./assets/images/featured-artworks-thumbnails/love.jpg">
<p>
Love is what you want follows the journey of a man who desires to be loved. After contemplating his lonely life, he realises that all he needed to do was to accept help in order to move on.<br><br>
The comic uses metaphorical images which are made cohesive by the text. It utilizes aspect-to-aspect and action-to-action transitions to depict the protagonist’s contemplations and eventual salvation. The panels in this comic have invisible borders to ensure the fluidity of the narrative and are arranged to depict the emotional regression of the protagonist, as emphasized by the descending ladder and text.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="featured-artwork-block">
<div class="featured-artwork__square">
<div class="featured-artwork__content-wrapper">
<h2 class="featured-artwork__title underline">Despairity</h2>
<h2 class="featured-artwork__author">By Chng Xinni, Khoo Jun Yang Rossen, Kway Li Ting, Lim Ying Hao Vincent, Tan Siew Yan Bettina</h2>
<p class="featured-artwork__description">Is there a wide disparity between social classes within a meritocratic system? Despairity is a resource management game designed to invoke realization among players that meritocracy, while theoretically highly effective, ignores structural inequalities in Singapore today.</p>
<button data-toggle="modal" data-target="#despairity-modal" class="site-default-button">Read More</button>
</div>
</div>
<div class="featured-artwork__square featured-artwork__image">
<img src="./assets/images/featured-artworks-thumbnails/despairity.jpg">
</div>
<!-- Modal -->
<div id="despairity-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h1 class="underline">Despairity</h1>
<img src="./assets/images/featured-artworks/despairity.jpg">
<p>
Is there a wide disparity between social classes within a meritocratic system? Despairity is a resource management game designed to invoke realization among players that meritocracy, while theoretically highly effective in a utopic society, ignores structural inequalities inherent in Singapore today. Conceptualized around the idea of ‘Apart’ (2 or more entities separated by a specific distance in time or space), the game requires players to study and work to beat Richard, a student from a high social class with more wealth and social capital than the player could ever have, by furiously clicking to earn money or to achieve good grades.
</p>
</div>
</div>
</div>
</div>
</div>
</article>
<footer>
<div class="sponsors-wrapper">
<h2 class="header-font">PROUDLY PRESENTED BY:</h2>
<div class="cnm-image-wrapper">
<img src="./assets/images/nus-cnm-logo.png" class="cnm-logo">
</div>
<h2 class="header-font">VENUE SPONSOR:</h2>
<div class="sponsors-image-wrapper">
<img src="./assets/images/asm-logo.png" class="asm-logo">
</div>
<h2 class="header-font">OFFICIAL PROJECTOR SPONSOR:</h2>
<div class="sponsors-image-wrapper">
<img src="./assets/images/epson-logo.jpg" class="epson-logo">
</div>
</div>
</footer>
<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-75602196-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>