-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcreative.html
159 lines (158 loc) · 12.3 KB
/
creative.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="mySketch.js" type="text/javascript"></script><script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li>
<a href="index.html">About Me</a>
</li>
<li class ='dropdown'>
<a href="work.html" class='dropbtn'>Work Experience</a>
<div class="dropdown-content">
<a href="#cps">Chicago Public Schools</a>
<a href="#89.3">WNUR 89.3FM</a>
<a href="#dittmar">Dittmar Gallery</a>
<a href="#iilp">IILP</a>
<a href="#nlg">National Lawyers Guild</a>
</div>
</li>
<li>
<a href="academic.html">Academic</a>
</li>
<li class ='dropdown'>
<a href="creative.html" class='dropbtn'>Media and Tech</a>
<div class="dropdown-content">
<a href="#wnur">WNUR</a>
<a href="#coding as art">Coding As Art</a>
<a href="#VR Storytelling">VR STorytelling</a>
</div>
</li>
</ul>
</nav>
<article id="description">
<section>
<div>
<h1>Digital Media</h1>
<p>After taking an Intro to Computer Science course, I realized how much I enjoyed coding. I also realized coding was a way for me to let out my more creative side, so I decided to register for Northwestern's Media Arts and Game Design Module.
Since then, I have taken classes such as Coding as Arts, Virtual Reality Storytelling, and Tools and Technology of the World Wide Web. I am also starting a Data Science minor next year. I also designed this website from scratch! </p>
<p>WNUR has also been a large part of my experience with different types of media. I started as a DJ on the station's Rock Show, which is very focused on playing underrepresented artists that would not normally be played on the radio.
My sophomore year I became Programming Director for the station, and my junior year I ran the station as General Manager. Next year I will be Music Director for Rock Show. Throughout my time at the station, I have learned so much about audio
as a medium, as well as creating visual content for marketing.</p>
</div>
</section>
</article>
<article id="content-card">
<section class='wnur'>
<div class="header" id="wnur"> <h3>WNUR</h3></div>
<div class="show">
<div>
<div class="track-item" data-preview-track="media/rockshow1.mp3" type="audio/mpeg">
<img src="data:image/jpeg;base64,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6CxO9DEfQa8/Noe5mv8A4dmY9K1kG81sxPF2AKsg326/i29DA59urNbvWSrGt3Qsh5IxDEbqfUHbofdP4n0yjUbbTQrJQbLDSjkF0p5HgrEeZC7CfOUIiICJIgJYiAiIgIiICIiB+jTNQfDyMfLr/Hi3VZCjfbkVYNx3+O23yM6Z7fduMfSca81241mfWKGrwrLONliNaqkgDr0Xk35Zy6Z9cjIstblbZZawVUDWu1jBANlXdiTsB6QP61PLsyrsjIs4+Lk3XX2cRsviO5dth6DdjOrOzesYb6Ti5ldyJhpiV72WMFFSqoVlcnyKlSD8ROTZ72D2syqNKzNIUI2Nl2JZybl4lJ5IXC+mzcANviT6yD7d4ut06lq+Xl4+5oc111MQVNirWqc9j1G5BI367bTG4iUZ53U9saNGOp2ZDOfFxUbHxwH45GSpbihZVITfltyPTr8JjfbHWl1LUsvOWs1LkOjLWxBZQKkTqR03PHf6zx4gJ9LMix1rR7LHSoMKkd2ZKgTuQik7LuevSfOICIiAiIgIiICTYb77Df3+ssQEREBERAREQJLEQEREBERAREQJEsQEREBESQLERASSxAREQJLEQJLEkBLEQEkSwERJAsRJASxEBERAREQEREIREQEREBERCkREBERAREQEREBERCEREBERCkREBERCEREKREQhERCkREIREQpERCEREBERAREQEREBERAREQEREBERAREQpERCJLEQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQERED//2Q==">
<i class="fas play-track fa-pause" aria-hidden="true"></i>
<div class="label">
<h2>Show Recording</h2>
</div>
</div>
<div class="player">
<div class="controls">
<i id="rwd" class="fas fa-step-backward"></i>
<i id="play_pause" class="far fa-play-circle"></i>
<i id="ffwd" class="fas fa-step-forward"></i>
</div>
<div class="slider">
<audio preload class="audio">
<source src="#" type="audio/mpeg" />
</audio>
<span id="time-elapsed">00:00:00</span>
<input type="range" id="player-time" value="1" max="100" min="1" step="1">
<span id="time-total">01:45:00</span>
</div>
<audio id="track" src="dataset.preview-track" >
</div>
<script src="https://kit.fontawesome.com/62a7c74d0d.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="audio-player.js"></script>
</div>
</div>
<div class="show">
<div>
<img src="media/pie.png">
<h2>Pie Promo</h2>
<p>I designed this graphic on Adobe Illustrator to be a design on mugs for the station to sell for our fundraiser Phoneathon.</p>
</div>
</div>
<div class="show">
<div>
<img src="media/sunsetwnur.png">
<h2>Sunset</h2>
<p>I designed this graphic on OpenProcessing p5.js to be a design on stickers for the station to sell for our fundraiser Phoneathon.</p>
</div>
</div>
</section>
<section class="module">
<div class="header" id="coding as art"> <h3>Coding As Art</h3></div>
<div class="show">
<img class="wide" src="media/selfportrait.png">
<h2>Self Portrait</h2>
<p>OpenProcessing p5.js</p>
</div>
<div class = "iframe">
<div class="show">
<iframe src="https://openprocessing.org/sketch/1127243/embed/" width="400" height="400"></iframe>
<h2>Matrix</h2>
<p>OpenProcessing p5.js (scroll to the right)</p>
</div>
</div>
<div class = "iframe">
<div class="show">
<iframe src="https://openprocessing.org/sketch/1103321/embed/" width="500" height="500"></iframe>
<h2>Crashing</h2>
<p>OpenProcessing p5.js</p>
</div>
</div>
<div class = "iframe">
<div class="show">
<iframe src="https://openprocessing.org/sketch/1113338/embed/" width="400" height="400"></iframe>
<h2>Lights</h2>
<p>OpenProcessing p5.js</p>
</div>
</div>
<div class="show">
<img class="wide" src="media/crash.png">
<h2>Static Crash</h2>
<p>OpenProcessing p5.js</p>
</div>
</section>
<section class="module">
<div class="header" id="VR Storytelling"> <h3>VR Storytelling</h3></div>
<div class = "iframe">
<div class="show">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TbQhqcDS3Z4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2>Puzzle</h2>
<p>Made with Premiere Pro. Featured Song: "People Can't Stop Chillin" by Sports</p>
</div>
</div>
<div class = "iframe">
<div class="show">
<iframe width="560" height="315" src="https://www.youtube.com/embed/SCjpSki09VM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2>Pizza Wednesday: A 360 Experience</h2>
<p>Filmed with a GoPro Fusion 360 Camera, edited on Premiere </p>
</div>
</div>
<div class = "iframe">
<div class="show">
<iframe width='640' height='360' src='https://roundme.com/embed/718693/2263809' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<h2>Escape: WebVR</h2>
<p>Google Street View 360 Photos, watercolor</p>
</div>
</div>
</section>
</article>
</body>
<canvas> </canvas>