-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcompositions.html
389 lines (362 loc) · 23.8 KB
/
compositions.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
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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Wei An Ni Music</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap">
<style>
@font-face {
font-family: 'ChenYuluoyan-Thin';
src: url('./fonts/ChenYuluoyan-Thin.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Julius Sans One', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 text-gray-900">
<!-- HEADER NAME -->
<header class="flex justify-center items-center bg-gray-50 py-2.5 sm:px-3.5">
<a href="./index.html" class="text-sm leading-6 text-gray-900 text-center hover:text-[#54533B]">
<div>
<span style="font-size: 1.8rem;" class="chinese-font">魏安妮</span><br>
<span style="font-family: 'Julius Sans One'">An-Ni Wei | Composer</span>
</div>
</a>
</header>
<!-- NAVBAR -->
<nav class="bg-gray-800">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<button type="button"
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. Menu open: "hidden", Menu closed: "block" -->
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Icon when menu is open. Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-center">
<div class="flex flex-shrink-0 items-center">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company">
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a href="#" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
aria-current="page">About</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Compositions</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Upcoming</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Contact</a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pb-3 pt-2">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a href="#" class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
aria-current="page">About</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Compositions</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Upcoming</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Contact</a>
</div>
</div>
</nav>
<!-- Compositions -->
<div class="bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Group of Concert Music -->
<div class="bg-gray-100 mx-auto max-w-7xl mt-6 space-y-12">
<h2 class="text-3xl font-thin tracking-wide text-gray-900">CONCERT MUSIC</h2>
<!-- The First Group -->
<div class="grid lg:grid-cols-3 lg:gap-x-6">
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://youtu.be/q-X5aCK0fas?si=yZzneLGtkyhIyjJ1" target="_blank">
<img src="img/index/jeremy-perkins-UgNjyPkphtU-unsplash.jpg"
alt="An orange light trail in the shape of a circle, captured with a slow shutter speed on a black background."
class="h-full w-full object-cover object-center">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://youtu.be/q-X5aCK0fas?si=yZzneLGtkyhIyjJ1" target="_blank">Staring Into
The
Light<br>Orchestra</a>
</h3>
<p class="text-base font-light text-gray-900">黑洞⎟為管弦樂</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/bockRkz9ANh1oJDK7" target="_blank">
<img src="img/index/diego-ph-SZYreZsJ-fE-unsplash.jpg"
alt="Hands holding a string of lights against a blue sky."
class="h-full w-full object-cover object-center">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/bockRkz9ANh1oJDK7" target="_blank">Fathom<br>Clarinet
and marimbaDuet</a>
</h3>
<p class="text-base font-light text-gray-900">捉摸⎟雙簧管和馬林巴琴 二重奏</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/AnaQWdED1Dcvukh58" target="_blank">
<img src="img/index/photo-1610643781442-ec645d94c89b.jpeg"
alt="Fireworks exploding in the night sky."
class="h-full w-full object-cover object-center">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/AnaQWdED1Dcvukh58" target="_blank">Firework Of Honey
Chamber<br>Orchestra</a>
</h3>
<p class="text-base font-light text-gray-900">蜂蜜花火⎟為管弦室內樂</p>
</div>
</div>
<!-- The Second Group -->
<div class="grid lg:grid-cols-3 lg:gap-x-6">
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/i7JkUu3yfdeCuwds5" target="_blank">
<img src="img/index/Screenshot 2024-07-03 at 3.06.43 AM.png"
alt="A view of Taipei 101 in Taipei, Taiwan, seen from a narrow street lined with older buildings and various shop signs. The sky is overcast, casting a muted tone over the scene."
class="h-full w-full object-cover object-top">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/i7JkUu3yfdeCuwds5" target="_blank">Psychedelic
Taipei<br>Clarinet and Piano Duet</a>
</h3>
<p class="text-base font-light text-gray-900">氤氳台北⎟ 為單簧管和鋼琴二重奏</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/HcS7M6EXJmWmpezP8" target="_blank">
<img src="img/composition/adam-wilson-wCKzi8nDkw8-unsplash.jpg"
alt="A man stand in front of fire."
class="h-full w-full object-cover object-bottom">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/HcS7M6EXJmWmpezP8" target="_blank">White
Terror<br>Flute, Cello, Percussion, and Piano</a>
</h3>
<p class="text-base font-light text-gray-900">白色恐怖⎟為長笛、大提琴、打擊樂與鋼琴</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://youtu.be/qiQLLC7gMJc?si=30BHjpvBujSAmSl9" target="_blank">
<img src="img/composition/kumiko-shimizu-_PshNniKRy8-unsplash.jpg"
alt="Fireworks exploding in the night sky."
class="h-full w-full object-cover object-bottom">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://youtu.be/qiQLLC7gMJc?si=30BHjpvBujSAmSl9" target="_blank">The
Moments<br>Clarinet, Trumpet, and Piano</a>
</h3>
<p class="text-base font-light text-gray-900">時刻⎟為單簧管、小號
和鋼琴三重奏</p>
</div>
</div>
</div>
<!-- Group of Electroacoustic Music -->
<div class="bg-gray-100 mx-auto max-w-7xl mt-6 space-y-12">
<h2 class="text-3xl font-thin tracking-wide text-gray-900">ELECTROACOUSTIC MUSIC</h2>
<!-- The First Group -->
<div class="grid lg:grid-cols-3 lg:gap-x-6">
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/ZPDnVzTBZaH7DA6D6" target="_blank">
<img src="img/index/IMG_1660.JPG"
alt="An orange light trail in the shape of a circle, captured with a slow shutter speed on a black background."
class="h-full w-full object-cover object-center">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/ZPDnVzTBZaH7DA6D6" target="_blank">Soundscape Taiwan –
Train Trip<br>@ Mt.Ali </a>
</h3>
<p class="text-base font-light text-gray-900">《聲歷臺灣輿圖》計畫<br>火車之旅⎟嘉義 阿里山</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/8i9u69TFoukjbmkLA" target="_blank">
<img src="img/index/IMG_1865.JPG"
alt="Hands holding a string of lights against a blue sky."
class="h-full w-full object-cover object-center">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/8i9u69TFoukjbmkLA" target="_blank">Soundscape Taiwan –
Daydream<br>@ Taitung</a>
</h3>
<p class="text-base font-light text-gray-900">《聲歷臺灣輿圖》計畫<br>白日夢⎟台東</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/2YUXcxVRHUfc7LhA7" target="_blank">
<img src="img/index/IMG_2138.JPG" alt="Fireworks exploding in the night sky."
class="h-full w-full object-cover object-top">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/2YUXcxVRHUfc7LhA7" target="_blank">Soundscape Taiwan –
Farewell<br>@ Malungayangay Beach, Hualien</a>
</h3>
<p class="text-base font-light text-gray-900">《聲歷臺灣輿圖》計畫<br>再會⎟花蓮 七星潭</p>
</div>
</div>
<!-- The Second Group -->
<div class="grid lg:grid-cols-3 lg:gap-x-6">
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/uD7z6X4ZkpzUq98Y8" target="_blank">
<img src="img/composition/DSCF5147.JPG"
alt="An orange light trail in the shape of a circle, captured with a slow shutter speed on a black background."
class="h-full w-full object-cover object-top">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/uD7z6X4ZkpzUq98Y8" target="_blank">Soundscape Taiwan –
Night Market<br>@ Keelung MiaoKou Night Market</a>
</h3>
<p class="text-base font-light text-gray-900">《聲歷臺灣輿圖》計畫<br>廟口夜市⎟基隆</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/Hi5qixvvJabtD2Qu6" target="_blank">
<img src="img/composition/DSCF5573.JPG"
alt="Hands holding a string of lights against a blue sky."
class="h-full w-full object-cover object-bottom">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/Hi5qixvvJabtD2Qu6" target="_blank">Soundscape Taiwan –
Sleepwalking at a midnight Fish Market<br>@ Kanziding Fish Market, Keelung City </a>
</h3>
<p class="text-base font-light text-gray-900">《聲歷臺灣輿圖》計畫<br>夢遊深夜魚市⎟基隆 崁仔頂魚市</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://on.soundcloud.com/bMGzDE8ZMEXPauRA6" target="_blank">
<img src="img/composition/DSCF5085.JPG" alt="Fireworks exploding in the night sky."
class="h-full w-full object-cover object-top">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://on.soundcloud.com/bMGzDE8ZMEXPauRA6" target="_blank">Soundscape Taiwan –
Port side<br>@ the port of Heping Island, Keelung City</a>
</h3>
<p class="text-base font-light text-gray-900">《聲歷臺灣輿圖》計畫<br>港邊⎟基隆 和平島港邊造船廠</p>
</div>
</div>
</div>
<!-- Group of Experimental Films -->
<div class="bg-gray-100 mx-auto max-w-7xl mt-6 space-y-12">
<h2 class="text-3xl font-thin tracking-wide text-gray-900">EXPERIMENTAL FILMS</h2>
<!-- The First Group -->
<div class="grid lg:grid-cols-3 lg:gap-x-6">
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://youtu.be/Nun8QkmVruM?si=J0eZBN7mV4kf9tlA" target="_blank">
<img src="img/index/s2.jpg"
alt="An orange light trail in the shape of a circle, captured with a slow shutter speed on a black background."
class="h-full w-full object-cover object-center">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://youtu.be/Nun8QkmVruM?si=J0eZBN7mV4kf9tlA" target="_blank">A solitude
quartet<br>experimental Dance film</a>
</h3>
<p class="text-base font-light text-gray-900">孤獨四重奏⎟實驗舞蹈短片<br>配樂／共同導演</p>
</div>
<div class="group relative">
<div
class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
<a href="https://youtu.be/Qhr8IfYo1_I?si=_PMNw9RIHbNquASf" target="_blank">
<img src="img/index/Screenshot 2024-06-17 at 3.40.56 AM.png"
alt="Hands holding a string of lights against a blue sky."
class="h-full w-full object-cover object-center">
</a>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="https://youtu.be/Qhr8IfYo1_I?si=_PMNw9RIHbNquASf" target="_blank">Rabbit
Hole<br>Directed by Kuo-Hao Li </a>
</h3>
<p class="text-base font-light text-gray-900">兔子洞⎟實驗短片<br>導演 李國豪</p>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="bg-gray-800 text-white mt-12">
<div class="container mx-auto px-4 py-8">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h3 class="text-lg font-semibold mb-2">魏安妮 An-Ni Wei | Composer</h3>
<p>© 2024 Wei An-Ni Music</p>
</div>
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h3 class="text-lg font-semibold mb-2">Pages</h3>
<ul>
<li><a href="/about" class="hover:text-gray-300">About</a></li>
<li><a href="/compositions" class="hover:text-gray-300">Compositions</a></li>
<li><a href="/upcoming" class="hover:text-gray-300">Upcoming</a></li>
<li><a href="/contact" class="hover:text-gray-300">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/3">
<h3 class="text-lg font-semibold mb-2">Follow Me</h3>
<a href="https://www.instagram.com/anniwei.music/" class="hover:text-gray-300">Instagram</a>
</div>
</div>
</div>
</footer>
</body>
</html>