-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
188 lines (185 loc) · 11.5 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
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Jiwon Shin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="css/style.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.dom.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="js/script.js" defer></script>
<title>WORKSHOPS | Jiwon Shin</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110518171-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110518171-1');
</script>
</head>
<body>
<main class="mdl-layout__content">
<div class="page-content">
<h4 class="section-head">2019</h4>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="random/index.html"><img class="grid-img" width="100%" src="img/generative-random.jpg"></a>
<h6 class="b-head"><a class="b-link" href="random/index.html">Generative Random Art</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="audio-viz/index.html"><img class="grid-img" width="100%" src="img/audio-viz-p5"></a>
<h6 class="b-head"><a class="b-link" href="audio-viz/index.html">Audio Visualization with p5.js</a></h6>
</div>
</div>
<h4 class="section-head">SUMMER 18</h4>
<div class="mdl-grid">
<h6 class="t-head"><a class="t-link" href="https://js6450.github.io/WebDesign2018/">Web Design, NYU SPS, NYU Shanghai</a></h6>
<h6 class="t-head"><a class="t-link" href="https://js6450.github.io/DigitalFilmmaking/">Digital Filmmaking, NYU SPS, NYU Shanghai</a></h6>
</div>
<h4 class="section-head">SPRING 18</h4>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="sound-p5-part1.html"><img class="grid-img" width="100%" src="img/soundp5.jpg"></a>
<h6 class="b-head"><a class="b-link" href="sound-p5-part1.html">p5.sound.js</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="oop-with-p5.html"><img class="grid-img" width="100%" src="img/oop-p5.jpg"></a>
<h6 class="b-head"><a class="b-link" href="oop-with-p5.html">OOP with p5.js</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="basic-p5.html"><img class="grid-img" width="100%" src="img/basic-p5-web.jpg"></a>
<h6 class="b-head"><a class="b-link" href="basic-p5.html">Basics of p5.js</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="http://jackbdu.com/workshops/getting-started-with-premiere/"><img class="grid-img" width="100%" src="img/premiere.jpg"></a>
<h6 class="b-head"><a class="b-link" href="http://jackbdu.com/workshops/getting-started-with-premiere/">Getting Started with Premiere</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="foundations.html"><img class="grid-img" width="100%" src="img/foundations.jpg"></a>
<h6 class="b-head"><a class="b-link" href="foundations.html">Foundations of Web Dev</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="js-audio.html"><img class="grid-img" width="100%" src="img/audio-js.jpg"></a>
<h6 class="b-head"><a class="b-link" href="js-audio.html">Javascript with Audio</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="soundrecording.html"><img class="grid-img" width="100%" src="img/sound.jpg"></a>
<h6 class="b-head"><a class="b-link" href="soundrecording.html">Recording & Editing Audio</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="webportfolio.html"><img class="grid-img" width="100%" src="img/webportfolio.jpg"></a>
<h6 class="b-head"><a class="b-link" href="webportfolio.html">Web Portfolio</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="js-timed-events.html"><img class="grid-img" width="100%" src="img/timed-events.jpg"></a>
<h6 class="b-head"><a class="b-link" href="js-timed-events.html">Timed Events</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="js-loops-arrays.html"><img class="grid-img" width="100%" src="img/js-loops.jpg"></a>
<h6 class="b-head"><a class="b-link" href="js-loops-arrays.html">Loops and Arrays</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="basic-js.html"><img class="grid-img" width="100%" src="img/basicjs.jpg"></a>
<h6 class="b-head"><a class="b-link" href="basic-js.html">Javascript Basics</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="css-ani-svg.html"><img class="grid-img" width="100%" src="img/cssAnimation.jpg"></a>
<h6 class="b-head"><a class="b-link" href="css-ani-svg.html">CSS Animation (+ SVG)</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="fundamental-css-animation.html"><img class="grid-img" width="100%" src="img/cssAnimation.jpg"></a>
<h6 class="b-head"><a class="b-link" href="fundamental-css-animation.html">CSS Animation (Fundamentals)</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="basic-css.html"><img class="grid-img" width="100%" src="img/basic-css.jpg"></a>
<h6 class="b-head"><a class="b-link" href="basic-css.html">The Basics of CSS</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="documentation.html"><img class="grid-img" width="100%" src="img/docworkshop.jpg"></a>
<h6 class="b-head"><a class="b-link" href="documentation.html">Documentation (Part 1)</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="webBasics.html"><img class="grid-img" width="100%" src="img/docworkshop.jpg"></a>
<h6 class="b-head"><a class="b-link" href="webBasics.html">Basics of Web Dev (Part 2)</a></h6>
</div>
</div>
<h4 class="section-head">FALL 17</h4>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="p5SoundVis.html"><img class="grid-img" width="100%" src="img/p5SoundVis.png"></a>
<h6 class="b-head"><a class="b-link" href="p5SoundVis.html">Sound Visualization in p5.js</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="p5-creating-mult.html"><img class="grid-img" width="100%" src="img/p5_mult.jpg"></a>
<h6 class="b-head"><a class="b-link" href="p5-creating-mult.html">Creating Multiples in p5.js</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="jquery-basics.html"><img class="grid-img" width="100%" src="img/jquery.jpg"></a>
<h6 class="b-head"><a class="b-link" href="jquery-basics.html">jQuery Basics</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="video.html"><img class="grid-img" width="100%" src="img/video.jpg"></a>
<h6 class="b-head"><a class="b-link" href="video.html">Video with Javascript</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="soundVisual.html"><img class="grid-img" width="100%" src="img/soundVisual.jpg"></a>
<h6 class="b-head"><a class="b-link" href="soundVisual.html">Basic Sound Visualization</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="jsmult.html"><img class="grid-img" width="100%" src="img/js.jpg"></a>
<h6 class="b-head"><a class="b-link" href="jsmult.html">Animation Using Loops & Arrays</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
<a href="jsbasics.html"><img class="grid-img" width="100%" src="img/js.jpg"></a>
<h6 class="b-head"><a class="b-link" href="jsbasics.html">Javascript Basics</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="cssani-examples.html"><img class="grid-img" width="100%" src="img/css-ani.jpg"></a>
<h6 class="b-head"><a class="b-link" href="cssani-examples.html">CSS Animation and Parallax</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="filestructure.html"><img class="grid-img" width="100%" src="img/filestructures.jpg"></a>
<h6 class="b-head"><a class="b-link" href="filestructure.html">NAS & File Structure (Part 1)</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="cssbasics.html"><img class="grid-img" width="100%" src="img/filestructures.jpg"></a>
<h6 class="b-head"><a class="b-link" href="cssbasics.html">CSS Basics & Inspector (Part 2)</a></h6>
</div>
</div>
<h4 class="section-head">SPRING 17</h4>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<a href="sound.html"><img class="grid-img" width="100%" src="img/soundjs.jpg"></a>
<h6 class="b-head"><a class="b-link" href="sound.html">p5.sound.js</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="iterative.html"><img class="grid-img" width="100%" src="img/commlabmini.jpg"></a>
<h6 class="b-head"><a class="b-link" href="iterative.html">Iterative Methods</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="cssani.html"><img class="grid-img" width="100%" src="img/commlabmini.jpg"></a>
<h6 class="b-head"><a class="b-link" href="cssani.html">CSS Animation</a></h6>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="webportfolio.html"><img class="grid-img" width="100%" src="img/web.jpg"></a>
<h6 class="b-head"><a class="b-link" href="webportfolio.html">Web Portfolio</a></h6>
</div>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<ul class="mdl-mini-footer__link-list">
<li>Workshops By <u><a class="p-link" href="http://jiwonshin.com" target="_blank">Jiwon Shin</a></u></li>
</ul>
</div>
</footer>
</div>
</main>
</body>
<script src="js/background.js"></script>
</html>