-
Notifications
You must be signed in to change notification settings - Fork 0
/
Keyboard.html
337 lines (289 loc) · 34.7 KB
/
Keyboard.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
<!DOCTYPE html><!-- Last Published: Wed Apr 05 2023 15:19:03 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="designwhich.works" data-wf-page="6411e9d1f37f420d19d0b73f" data-wf-site="64063ff1ee43c64584bdaa11"><head><meta charset="utf-8"/><title>Keyboard | Parth Pawar · Design</title><meta content="Keyboard is an interactive installation which proposes a contemporary interpretation of students’ lives: a strategy simulation tool inspired by G80, which is aimed at an equitable distribution of your time as a student on an ITP scale." name="description"/><meta content="Keyboard | Parth Pawar · Design" property="og:title"/><meta content="Keyboard is an interactive installation which proposes a contemporary interpretation of students’ lives: a strategy simulation tool inspired by G80, which is aimed at an equitable distribution of your time as a student on an ITP scale." property="og:description"/><meta content="Keyboard | Parth Pawar · Design" property="twitter:title"/><meta content="Keyboard is an interactive installation which proposes a contemporary interpretation of students’ lives: a strategy simulation tool inspired by G80, which is aimed at an equitable distribution of your time as a student on an ITP scale." property="twitter:description"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://uploads-ssl.webflow.com/64063ff1ee43c64584bdaa11/css/pedro-matos-chaves.webflow.1e3ac6afd.css" rel="stylesheet" type="text/css"/>
<style>@media (min-width:992px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2e3"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2f9"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fc2"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fc7"] {opacity:1;display:flex;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fe1"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdf"] {display:none;-webkit-transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdd"] {display:block;}}@media (max-width:991px) and (min-width:768px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdc"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fd0"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fd6"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2e3"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2f9"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fc2"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fc7"] {opacity:1;display:flex;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fe1"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdf"] {display:none;-webkit-transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(19px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdd"] {display:block;}}@media (max-width:767px) and (min-width:480px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdc"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fd0"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fd6"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2e3"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2f9"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fe1"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdf"] {-webkit-transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);display:none;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdd"] {display:block;}}@media (max-width:479px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdc"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fd0"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fd6"] {display:none;opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2e3"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="5e97acba-7687-31f1-ede2-243865f9f2f9"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fe1"] {-webkit-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdf"] {-webkit-transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(15px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);display:none;}html.w-mod-js:not(.w-mod-ix) [data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fdd"] {display:block;}}</style><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://uploads-ssl.webflow.com/64063ff1ee43c64584bdaa11/64063ff1ee43c63af4bdaa2d_pmc-light-favicon.png" rel="shortcut icon" type="image/x-icon"/><link href="https://uploads-ssl.webflow.com/64063ff1ee43c64584bdaa11/64063ff1ee43c67097bdaa29_pmc-webclip.png" rel="apple-touch-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}
<style>
.grabbable {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.grabbable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HQTDF0RPLD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HQTDF0RPLD');
</script><link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<style>
.body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media only screen and (min-width: 768px) {
.projectinfo{
column-gap: clamp(1.875rem, -24.8377rem + 44.9898vw, 15.625rem);
}
</style></head><body class="body"><div id="mouse" class="cursor-wrapper"><div class="cursor"><div id="mousedraw" class="mousedraw w-embed"><svg id= "mousedraw" width="20" height="20" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.1316 12.1357H21.9109L25.604 8.44258C26.7213 7.3253 26.7213 5.51327 25.604 4.39193C24.4867 3.27465 22.6747 3.27465 21.5534 4.39193L17.8602 8.08505V2.8643C17.8602 1.28386 16.5804 0 14.9959 0C13.4155 0 12.1316 1.27979 12.1316 2.8643V8.08505L8.43852 4.39193C7.32124 3.27465 5.50921 3.27465 4.38787 4.39193C3.27059 5.50921 3.27059 7.32124 4.38787 8.44258L8.08099 12.1357H2.8643C1.28386 12.1357 0 13.4196 0 15C0 16.5804 1.28386 17.8643 2.8643 17.8643H8.08505L4.39193 21.5574C3.27465 22.6747 3.27465 24.4867 4.39193 25.6081C5.50921 26.7294 7.32124 26.7254 8.44258 25.6081L12.1357 21.915V27.1357C12.1357 28.7161 13.4196 30 15 30C16.5804 30 17.8643 28.7161 17.8643 27.1357V21.915L21.5574 25.6081C22.6747 26.7254 24.4867 26.7254 25.6081 25.6081C26.7254 24.4908 26.7254 22.6788 25.6081 21.5574L21.915 17.8643H27.1357C28.7161 17.8643 30 16.5845 30 15C30 13.4196 28.7202 12.1357 27.1357 12.1357H27.1316Z" fill="#FAFAFA"/>
</svg></div><div id="flag" class="flag"><div class="flagicon">🇺🇸</div></div></div><div class="w-embed"><style>
.cursor-wrapper {pointer-events: none;}
.w-webflow-badge {
display: None !important;
visibility: hidden !important;
}
</style></div></div><div style="display:flex" class="preloader"><div class="loadpill"><div class="loadtext loadtext1">Parth Pawar</div><div class="loadtext loadtext2">Multidisciplinary designer</div></div></div><nav class="navbar"><div class="navcontainer"><div class="navcontainerleft"><div class="navelementsleft"><a href="index.html" data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fbe" class="brand w-nav-brand"><div class="navlogo">Parth Pawar</div></a><a data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fc1" href="mailto:[email protected]?subject=Hello%20Parth!" class="calllink w-inline-block"><div data-w-id="12dd3abc-77c3-dcfb-2891-f9a729453fc2" class="callwraper2"><div class="callcircarrowdark w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="7" fill="#FAFAFA"/>
<path d="M9.4404 5.69095L9.495 5.72735L9.4222 9.96795L10.8236 8.54835L10.769 3.37955L5.6002 3.32495L4.1988 4.72635L8.4394 4.65355L8.4758 4.70815L3.3252 9.85875L4.2898 10.8234L9.4404 5.69095Z" fill="#141414"/>
</svg></div><div class="callcircarrow w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.4404 5.69095L9.495 5.72735L9.4222 9.96795L10.8236 8.54835L10.769 3.37955L5.6002 3.32495L4.1988 4.72635L8.4394 4.65355L8.4758 4.70815L3.3252 9.85875L4.2898 10.8234L9.4404 5.69095Z" fill="#FAFAFA"/>
</svg></div>
<div class="calltext">Say hello, let’s talk</div></div><div data-w-id="fe5b308f-bf23-8ec2-1ba6-3219f31438ad" class="callwraper"><div class="callcirc"></div><div class="callcircdark"></div><div class="calltext">Available for work</div></div></a></div></div><div class="navcontainerright"><div class="navelementsright"><div class="navmenuwrapper"><div class="navmenu">
<a data-w-id="858e813e-8591-ded8-ed4b-fcd17293b44b" href="PDF" class="navlink w-inline-block"><div class="textwrapper"><div class="calltext calltextup">PDF</div><div class="calltext">PDF</div></div></a>
<a href="UserExperience.html" data-w-id="e5767539-47d0-cfcc-b041-75579a10a74f" class="navlink w-inline-block"><div class="textwrapper"><div class="calltext calltextup">UX</div><div class="calltext">UX</div></div></a>
<a href="Installation.html" data-w-id="e5767539-47d0-cfcc-b041-75579a10a74f" class="navlink w-inline-block"><div class="textwrapper"><div class="calltext calltextup">Installation</div><div class="calltext">Installation</div></div></a>
<a data-w-id="858e813e-8591-ded8-ed4b-fcd17293b44b" href="about " class="navlink w-inline-block"><div class="textwrapper"><div class="calltext calltextup">About</div><div class="calltext">About</div></div></a>
<div id="themetoggle" data-w-id="e7ca30d3-7116-385f-9fee-411d49090666" class="themetoggle"><div id="light" data-w-id="e7ca30d3-7116-385f-9fee-411d49090667" class="themetoggletext">Light</div><div data-w-id="e7ca30d3-7116-385f-9fee-411d49090669" class="themetoggletext2">Dark</div><div data-w-id="e7ca30d3-7116-385f-9fee-411d4909066b" class="themetogglecirc"></div></div></div></div><div data-w-id="9e348434-4a1f-9ad9-13af-9f9972a3bb73" class="plusbuttoncirc"><div class="circle"><div class="plusicon pluswhite w-embed"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="5.8999" y1="2.18557e-08" x2="5.8999" y2="12" stroke="#FAFAFA"/>
<line x1="12" y1="5.90002" x2="-4.37114e-08" y2="5.90002" stroke="#FAFAFA"/>
</svg></div><div class="plusicon plusblack w-embed"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="5.8999" y1="2.18557e-08" x2="5.8999" y2="12" stroke="#141414"/>
<line x1="12" y1="5.90002" x2="-4.37114e-08" y2="5.90002" stroke="#141414"/>
</svg></div></div></div></div></div></div><div id="darkbar" class="navbarrectdark"></div><div id="lightbar" class="navbarrect"></div></nav><div id="luxy" class="smooth-wrapper"><section id="Project" class="project wf-section"><div class="projectcontainer w-container"><div class="projectdiv"><div class="projectinfo"><div class="projectinfoleft"><h1 style="-webkit-transform:translate3d(0, 40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="projecttitle"> Keyboard</h1><div class="projectpills"><div style="-webkit-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="projecttag"><div class="pilltext">Research</div></div><div style="opacity:0;-webkit-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="projectyear"><div class="pilltext">2023</div></div></div></div><div style="opacity:0;-webkit-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="projectinforight"><p class="projectparagraph">Keyboard is an interactive installation which proposes a contemporary interpretation of students’ lives: a strategy simulation tool inspired by G80, which is aimed at an equitable distribution of your time as a student on an ITP scale.</p></div></div></div></div><div style="opacity:0;-webkit-transform:translate3d(200px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(200px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(200px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(200px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)"
class="imageslider"><div class="swiper"><div class="swiper-wrapper grabbable"><div class="swiper-slide fitcontent firstslide">
<style>
<style>
#video-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#video-container iframe {
width: 98%;
max-width: 98%;
margin-right: 1%;
border-radius: 0px;
}
</style>
</head>
<script type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
<style>
.spline-container {
width: 95%; /* Set the width to 98% */
margin: 0 auto 2% auto; /* Center align the container */
}
</style>
<body>
</head>
<div class="spline-container">
<spline-viewer url="https://prod.spline.design/t4WtdHls9Rr0ruGv/scene.splinecode"></spline-viewer>
</div>
<style>
.container1 {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.image {
width: 98%;
height: auto;
max-width: 98%;
margin-right: 1%;
border-radius: 0px;
}
@media screen and (min-width: 500px) {
.image1 {
content: url(./Assets/Projects/Keyboard/Mobile/1.jpg);
}
.image2 {
content: url(./Assets/Projects/Keyboard/Mobile/2.jpg);
}
.image3 {
content: url(./Assets/Projects/Keyboard/Mobile/3.jpg);
}
.image4 {
content: url(./Assets/Projects/Keyboard/Mobile/4.jpg);
}
.image5 {
content: url(./Assets/Projects/Keyboard/Mobile/5.jpg);
}
.image6 {
content: url(./Assets/Projects/Keyboard/Mobile/6.jpg);
}
.image7 {
content: url(./Assets/Projects/Keyboard/Mobile/7.jpg);
}
.image8 {
content: url(./Assets/Projects/Keyboard/Mobile/8.jpg);
}
.image9 {
content: url(./Assets/Projects/Keyboard/Mobile/9.jpg);
}
}
@media screen and (min-width: 800px) {
.image1 {
content: url(./Assets/Projects/Keyboard/Desktop/1.jpg);
}
.image2 {
content: url(./Assets/Projects/Keyboard/Desktop/2.jpg);
}
.image3 {
content: url(./Assets/Projects/Keyboard/Desktop/3.jpg);
}
.image4 {
content: url(./Assets/Projects/Keyboard/Desktop/4.jpg);
}
.image5 {
content: url(./Assets/Projects/Keyboard/Desktop/5.jpg);
}
.image6 {
content: url(./Assets/Projects/Keyboard/Desktop/6.jpg);
}
.image7 {
content: url(./Assets/Projects/Keyboard/Desktop/7.jpg);
}
.image8 {
content: url(./Assets/Projects/Keyboard/Desktop/8.jpg);
}
.image9 {
content: url(./Assets/Projects/Keyboard/Desktop/9.jpg);
}
}
</style>
<div class="container1">
<img class="image image1" src="./Assets/Projects/Keyboard/Mobile/1.jpg" alt="Image 101" loading="lazy">
<img class="image image2" src="./Assets/Projects/Keyboard/Mobile/2.jpg" alt="Image 102" loading="lazy">
<img class="image image3" src="./Assets/Projects/Keyboard/Mobile/3.jpg" alt="Image 103" loading="lazy">
<img class="image image4" src="./Assets/Projects/Keyboard/Mobile/4.jpg" alt="Image 104" loading="lazy">
<img class="image image5" src="./Assets/Projects/Keyboard/Mobile/5.jpg" alt="Image 105" loading="lazy">
<img class="image image6" src="./Assets/Projects/Keyboard/Mobile/6.jpg" alt="Image 106" loading="lazy">
<img class="image image7" src="./Assets/Projects/Keyboard/Mobile/7.jpg" alt="Image 107" loading="lazy">
<img class="image image8" src="./Assets/Projects/Keyboard/Mobile/8.jpg" alt="Image 108" loading="lazy">
<img class="image image9" src="./Assets/Projects/Keyboard/Mobile/9.jpg" alt="Image 109" loading="lazy">
</div>
<footer class="footer wf-section"><div class="footercontainer w-container"><div class="footerdiv"><a data-w-id="5e97acba-7687-31f1-ede2-243865f9f2e2" href="mailto:[email protected]?subject=Hello%20Parth!" class="letstalkdiv w-inline-block"><div data-w-id="5e97acba-7687-31f1-ede2-243865f9f2e3" class="letstalkinnerdiv"><div class="letstalktext">Let's talk</div><div class="letstalkicon w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2 w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktext">Let's talk</div><div class="letstalkicon w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2 w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktext">Let's talk</div><div class="letstalkicon w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2 w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktext">Let's talk</div><div class="letstalkicon w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2 w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktext">Let's talk</div><div class="letstalkicon w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2 w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div></div></a><a data-w-id="5e97acba-7687-31f1-ede2-243865f9f2f8" href="mailto:[email protected]?subject=Hello%20Parth!" class="letstalkdivdark w-inline-block"><div data-w-id="5e97acba-7687-31f1-ede2-243865f9f2f9" class="letstalkinnerdivdark"><div class="letstalktextdark">Let's talk</div><div class="letstalkicondark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2dark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktextdark">Let's talk</div><div class="letstalkicondark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2dark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktextdark">Let's talk</div><div class="letstalkicondark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2dark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktextdark">Let's talk</div><div class="letstalkicondark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2dark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div><div class="letstalktextdark">Let's talk</div><div class="letstalkicondark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#141414"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#FAFAFA"/>
</svg></div><div class="letstalkicon2dark w-embed"><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#FAFAFA"/>
<path d="M53.944 32.52L54.256 32.728L53.84 56.96L61.848 48.848L61.536 19.312L32 19L23.992 27.008L48.224 26.592L48.432 26.904L19 56.336L24.512 61.848L53.944 32.52Z" fill="#141414"/>
</svg></div></div></a><div class="lastdiv"><div class="_2023div"><div class="lastdivtext c">©</div><div id="year" class="lastdivtext">2023</div></div><div class="lastdivtext love">Made with love</div><a href="caleidoscopio#Project" data-w-id="5e97acba-7687-31f1-ede2-243865f9f316" class="lastdivlink w-inline-block"><div class="lastdivtext">Go all the way up ↑</div></a></div></div></div></footer></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=64063ff1ee43c64584bdaa11" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://uploads-ssl.webflow.com/64063ff1ee43c64584bdaa11/js/webflow.7d55ba7c0.js" type="text/javascript"></script><!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]--><script>
history.scrollRestoration = "manual";
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
const elementToHide = document.getElementById('mouse');
if (isMobile) {
elementToHide.style.display = 'none';
} else {
elementToHide.style.display = 'flex';
}
$("#themetoggle").click(function () {
if ($('#light').css('display') === 'none') {
localStorage.setItem("theme", "light");
} else {
localStorage.setItem("theme", "dark");
}
});
if (localStorage.getItem("theme") === 'dark') {
$('#themetoggle').trigger('click');
}
</script>
<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>
<script charset="utf-8">
var isMobileLuxy = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobileLuxy) {
luxy.init({
wrapper: '#luxy',
wrapperSpeed: 0.065,
});
}
</script><!-- Initialize Swiper -->
<script>
// Watch for changes in the window size
var mediaQuery = window.matchMedia('(max-width: 767px)');
mediaQuery.addEventListener('change', handleBreakpointChange);
handleBreakpointChange(mediaQuery);
document.getElementById("year").innerHTML = new Date().getFullYear();
.w-webflow-badge {
display: None !important;
visibility: hidden !important;
}
</script></body></html>