-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
662 lines (573 loc) · 47.8 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
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
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
<html data-wf-domain="www.taiskahatt.com" data-wf-page="61ab77277fb31452393e3fad" data-wf-site="61ab77277fb3141b413e3fac">
<head>
<meta charset="utf-8" />
<title>Stiffler's Mom in Reinach</title>
<meta content="I’m Tais Kahatt. A freelance graphic designer, from Lima - Peru, specialized in branding and packaging" name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
<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/61ab77277fb3141b413e3fac/61d5a5ddb524f10beb42aabe_Ellipse 2.svg" rel="shortcut icon" type="image/x-icon" />
<link href="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61dfee03d474e23217a6a778_webclip.svg" rel="apple-touch-icon" />
</head>
<body class="body">
<div class="cursor change--text--color">
<div class="cursor__dot change--border--color">
<div class="cursor__text">contact</div>
</div>
</div>
<div data-w-id="7eb453ad-5ad3-79bf-2154-9ff0db7ab179" style="-webkit-transform:translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="page__loader" style="background: url(assets/imgs/loader_bg.jpg); background-size: cover; background-repeat:no-repeat;">
<h1 data-w-id="7eb453ad-5ad3-79bf-2154-9ff0db7ab17a" style="opacity:1;-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)" class="fade-up tricks">Grüezi <span class="is--italic">mittenand...</span></h1>
</div>
<div class="general-code w-embed">
<style>
a {
color: inherit !important;
text-decoration: none !important;
cursor: none;
}
.cursor {
pointer-events: none;
}
.accordion__toggle,
.archive__slider__arrow {
cursor: none !important;
}
</style>
<style>
.letter-wrap {
display: inline-block;
position: relative;
}
.letter-wrap * {
pointer-events: none;
}
.letter-wrap__word {
display: inline-flex;
position: relative;
overflow: hidden;
}
.letter-wrap__char {
display: inline-block;
position: relative;
}
.letter-wrap__char-inner {
display: inline-block;
}
.letter-wrap__char-inner:after {
content: attr(data-letter);
position: absolute;
top: 100%;
left: 0;
}
</style>
</div>
<div data-scroll-container="1" class="page-wrapper">
<section data-scroll-section="1" class="section wf-section">
<div class="container is--hero">
<div data-w-id="5f4b267b-9ef8-ceb3-729f-f9a45c798ddd" class="hero">
<div data-scroll="1" class="hero__img__wrapper">
<div data-w-id="122fd1e6-1240-77a7-b0d4-f1936a26d4b2" style="-webkit-transform:translate3d(0%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="hero__img__cover"></div><img class="hero__img" src="assets/imgs/newnewhero.png" alt="Tais Kahatt" data-scroll-speed="-2" data-scroll="1" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" sizes="(max-width: 479px) 82vw, (max-width: 767px) 70vw, (max-width: 991px) 36vw, (max-width: 1919px) 32vw, 400px" data-w-id="d1a1c6de-b7b8-957d-2cab-5fd857589c44" loading="eager"/>
</div>
<div data-scroll="1" class="hero__top"><a data-scroll="1" id="w-node-_8be1781a-f246-df54-bec2-5e9b70bc6afc-393e3fad" data-w-id="8be1781a-f246-df54-bec2-5e9b70bc6afc" 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)" href="#" class="hero__logo w-inline-block">
<div class="logo__text letter-wrap">Stiffler's Mom</div>
</a><a href="#footer" data-scroll-to="1" data-scroll="1" id="w-node-_65bd7a75-64ba-ad36-5c71-12c19b9b757a-393e3fad" data-w-id="65bd7a75-64ba-ad36-5c71-12c19b9b757a" 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="hero__top__center w-inline-block">
<div class="hero__top__center__dot change--bg--color"></div>
<div class="hero__top__center__text">mother knows <span class="is--migra">best.</span></div>
</a>
<div id="w-node-_492b5b90-5a5c-5036-d4dd-6a571b2620eb-393e3fad" data-w-id="492b5b90-5a5c-5036-d4dd-6a571b2620eb" 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="hero__top__links"><a href="#work" data-scroll-to="1" class="hero__link__block hide--on--mobile w-inline-block">
<div class="hero__link__number">1.</div>
<div class="hero__link__text letter-wrap">gallery</div>
</a><a href="#about" class="hero__link__block hide--on--mobile w-inline-block">
<div class="hero__link__number">2.</div>
<div class="hero__link__text letter-wrap">about</div>
</a>
<a href="#footer" class="hero__link__block w-inline-block">
<div class="hero__link__number">3.</div>
<div class="hero__link__text letter-wrap">book</div>
</a></div>
</div>
<div data-scroll="1" class="hero__bottom">
<div data-w-id="dd1f0bd9-5778-262a-5ff0-3fa933d5969f" 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="mode__toggle letter-wrap">✺ CHANGE THE MOOD</div>
<div data-w-id="cc1cab98-eda4-fcf0-4053-7d15e763cd62" 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)">©2022</div>
</div>
</div>
</div>
</section>
<section data-scroll-section="1" class="section wf-section">
<div class="container is--services">
<div class="home__offset__wrapper">
<div class="home__offset__space"></div>
<div class="home__offset is--bigger">
<div data-scroll="1" class="small__caps margin__btm fade-in">WHAT IS THIS?</div><br>
<h4 data-scroll="1" class="medium__heading fade-in">I love sex. <br><br>So much that I like to call myself a good girl gone bad. Very very bad. <br> <br>Here's what I do:</h4>
</div>
</div>
</div>
</section>
<section id="work" data-scroll-section="1" data-scroll-to="1" class="section wf-section">
<div class="container">
<div class="work__accordion__wrapper">
<div data-hover="false" data-delay="0" data-w-id="1fc7eec9-8c63-276d-033d-64264cd5e36b" class="accordion__item change--border--color w-dropdown">
<div class="accordion__toggle fade-in w-dropdown-toggle">
<div data-scroll="1" class="work__link__info change--text--color">
<div class="work__link__image__wrapper fade-in">
<div class="work__link__info__svg w-embed">
<svg width="inherit" height="inherit" viewBox="0 0 91 91" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.6868 75.7762C39.5964 73.9483 39.7475 72.1434 39.9748 70.3401C40.3236 67.5682 40.716 64.7962 40.8281 61.995C40.8686 60.9709 40.7876 59.9561 40.3952 58.9905C39.7911 57.5075 37.9039 56.622 36.3624 57.1025C35.3508 57.4038 34.4482 57.9865 33.7621 58.7811C32.8387 59.8452 31.8266 60.8308 30.8644 61.861C30.1746 62.5971 29.463 63.3163 28.8293 64.0986C27.6319 65.5847 26.1527 66.7843 24.7918 68.1026C22.8112 70.0229 20.4055 71.1671 17.7663 71.8847C16.2698 72.2711 14.725 72.4428 13.1791 72.3945C12.5828 72.3837 11.9864 72.3683 11.3916 72.3282C10.2409 72.2497 9.16812 71.8662 8.12177 71.4274C7.52697 71.1748 6.94773 70.8884 6.36227 70.6158C5.25364 70.0999 4.40815 69.2668 3.681 68.332C2.29676 66.5518 1.31736 64.5714 0.970131 62.34C0.658716 60.378 0.649372 58.3992 1.33604 56.5019C1.80316 55.2206 2.38551 53.9794 2.96007 52.7397C3.5066 51.5586 4.47977 50.7763 5.61799 50.1741C6.87455 49.5073 8.23388 49.0869 9.57452 48.6342C10.8513 48.2061 12.1426 47.8231 13.4485 47.4853C15.2454 47.0234 17.0594 46.6276 18.864 46.1964C20.8758 45.7175 22.8501 45.1184 24.8105 44.4639C25.7556 44.1559 26.7008 43.8264 27.635 43.4799C28.8604 43.0271 29.9161 42.3403 30.6495 41.2392C31.004 40.7248 31.2435 40.1416 31.352 39.5284C31.4604 38.9153 31.4354 38.2862 31.2786 37.6834C31.2044 37.3988 31.0754 37.1311 30.8986 36.8949C30.2405 35.9549 29.4622 35.1029 28.5833 34.3601C27.7615 33.6826 26.8346 33.1407 25.8381 32.7555C23.3204 31.8007 20.8041 30.8367 18.2832 29.8927C17.5296 29.6103 16.7661 29.3562 15.9928 29.1304C13.9617 28.531 11.9739 27.7963 10.0432 26.9313C9.67573 26.768 9.3176 26.5848 8.9657 26.3923C8.12177 25.9303 7.28718 25.4575 6.44169 25.0063C4.34547 23.8609 2.58283 22.2009 1.32359 20.1862C0.196266 18.4322 -0.180546 16.5441 0.0779285 14.4883C0.330174 12.4955 1.06823 10.6861 2.0523 8.95668C3.65452 6.14314 6.19411 4.79874 9.37054 4.44455C11.2246 4.22565 13.1045 4.46918 14.839 5.15294C16.0846 5.63649 17.1606 6.36182 18.1742 7.19494C18.7971 7.70314 19.3919 8.23905 19.9851 8.7765C21.346 10.0085 22.4764 11.433 23.5555 12.9083C23.8877 13.3729 24.2519 13.8144 24.6454 14.2296C25.6693 15.2964 26.6281 16.4226 27.5167 17.6021C29.3527 19.9827 31.3393 22.2459 33.4647 24.378C34.5079 25.4406 35.7038 26.3184 37.1191 26.8604C38.2511 27.2932 39.6727 27.0914 40.5182 26.1752C40.7892 25.9066 40.9929 25.5791 41.113 25.2188C41.4603 23.8714 41.6331 22.4946 41.2921 21.1225C41.1278 20.5225 40.9013 19.9409 40.6163 19.3869C40.02 18.155 39.3707 16.9538 38.7681 15.7233C38.0767 14.2989 37.51 12.8266 37.4306 11.2297C37.3527 9.67123 37.3916 8.12047 38.0534 6.6498C38.3944 5.83204 38.8741 5.0779 39.4719 4.41991C40.0589 3.80392 40.6739 3.20949 41.3108 2.64124C42.3855 1.68672 43.6778 1.00355 45.0773 0.650046C46.7623 0.201746 48.539 0.21719 50.2157 0.694706C50.9866 0.926066 51.7431 1.2022 52.4812 1.52167C53.6094 2.00768 54.6224 2.72159 55.4552 3.61758C56.1201 4.30287 56.5452 5.13446 56.8862 6.01224C57.4623 7.50448 57.7722 9.0614 58.0353 10.6322C58.2938 12.1629 58.5554 13.6936 58.8528 15.2167C58.9156 15.523 59.0437 15.8126 59.2285 16.0661C59.4133 16.3197 59.6507 16.5314 59.9247 16.6871C60.1987 16.8429 60.5031 16.9391 60.8176 16.9694C61.1322 16.9997 61.4497 16.9634 61.7489 16.8629C62.8965 16.481 63.8665 15.7942 64.7634 15.0149C65.1169 14.7069 65.4454 14.3682 65.7708 14.0294C67.4198 12.3154 69.1964 10.7631 71.272 9.55419C72.4538 8.86428 73.6745 8.26985 75.051 8.04655C77.1375 7.70622 79.1726 7.8094 81.1236 8.68103C81.7308 8.95052 82.3459 9.20153 82.9516 9.47565C85.0941 10.4258 86.8069 11.8595 88.009 13.8523C88.2503 14.2511 88.5617 14.6115 88.7875 15.0165C89.5505 16.3717 90.1094 17.8131 90.3072 19.3484C90.48 20.6975 90.6186 22.0588 90.5205 23.4294C90.3757 25.4236 89.7716 27.2562 88.5851 28.884C87.2721 30.719 85.4926 32.1788 83.4265 33.1158C80.8942 34.2611 78.2944 35.2542 75.6411 36.0895C74.9903 36.2943 74.3503 36.533 73.7057 36.7548C73.529 36.831 73.3462 36.8923 73.1591 36.938C72.2623 37.092 71.6877 37.6541 71.3093 38.3979C71.0398 38.9393 70.8385 39.5113 70.7099 40.1012C70.4981 41.1384 70.4981 42.207 70.7099 43.2442C70.8879 44.2072 71.4 45.0786 72.158 45.7082C73.3771 46.7693 74.8174 47.3575 76.3745 47.6932C78.4143 48.1229 80.4696 48.474 82.514 48.8744C84.6083 49.2856 86.5064 50.0802 87.9404 51.708C89.3418 53.3034 90.2963 55.1082 90.6778 57.218C90.944 58.6933 91.1138 60.1609 90.9098 61.6454C90.5906 63.9769 89.5707 65.9866 87.9404 67.7052C86.0361 69.7149 83.7208 71.0254 80.9912 71.5429C78.9375 71.9309 76.9039 71.6845 74.9404 70.9638C74.2869 70.7061 73.6943 70.3176 73.1996 69.8227C72.1119 68.8152 71.1946 67.6417 70.4825 66.347C69.9092 65.3001 69.3895 64.2254 68.9255 63.1269C68.2746 61.5623 67.725 59.9576 67.1084 58.3791C66.7316 57.4136 66.3532 56.4434 65.8907 55.5148C65.5326 54.7925 65.0499 54.1288 64.6093 53.4481C64.4913 53.2627 64.326 53.1114 64.1299 53.0095C63.9339 52.9075 63.7141 52.8586 63.4928 52.8676C61.3129 52.8814 59.5114 53.6268 58.3343 55.5117C57.8639 56.2505 57.6456 57.1189 57.7114 57.9895C57.7815 58.9027 57.7846 59.8283 57.9574 60.723C58.1427 61.6839 58.4713 62.6218 58.778 63.5565C58.9695 64.1473 59.2048 64.7232 59.4818 65.2798C60.2107 66.7274 61.3355 67.9438 62.7283 68.7909C63.4695 69.2529 64.1733 69.7673 64.9004 70.2508C66.4201 71.2641 67.3684 72.667 67.8417 74.4087C68.2388 75.8656 68.1672 77.327 67.8417 78.77C67.3337 81.0614 66.2523 83.19 64.6965 84.9607C64.0704 85.6653 63.3544 86.2865 62.5664 86.8086C60.5017 88.2054 58.2066 89.0462 55.7916 89.6299C53.0714 90.2875 50.4072 90.0641 47.7555 89.2587C46.7466 88.9531 45.7909 88.4967 44.9216 87.9051C43.4891 86.9395 42.544 85.5767 41.8075 84.069C41.01 82.4331 40.4597 80.6903 40.1741 78.8962C39.9935 77.8583 39.8456 76.8157 39.6868 75.7762Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="work__link__info__text">
<h3 class="work__link__name fade-in">Media Made To Order</h3>
<p class="work__link__p fade-in">You tell me what you what you want to see, and I'll make it happen.</p>
<div class="w-layout-grid work__link__info__tags fade-in">
<h6 class="work__link__info__tag change--border--color">no-contact</h6>
<h6 class="work__link__info__tag change--border--color">anonymous</h6>
</div>
</div>
</div>
<div data-scroll="1" class="work__link__toggle fade-in">
<div class="work__link__toggle__img change--text--color w-embed"><svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.25 0V22.5" stroke="currentColor" stroke-width="1.25" />
<path d="M22.5 11.25L0 11.25" stroke="currentColor" stroke-width="1.25" />
</svg></div>
</div>
</div>
<nav class="accordion__list w-dropdown-list"><a href="projects/sumaq-coffee.html" class="accordion__link w-inline-block">
<div class="accordion__link__text">
<div data-scroll="1" class="accordion__link__title">If you can dream it, I can stage it.</div>
<div data-scroll="1" class="main__button is--white letter-wrap">Details ▷</div>
</div>
<div data-scroll="1" class="accordion__link__image__wrapper">
<div class="accordion__link__overlay"></div><img src="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5b23030d4b33d5b909_acc-s.jpg" loading="lazy" alt="" class="accordion__link__image" />
</div>
</a></nav>
</div>
<div data-hover="false" data-delay="0" class="accordion__item change--border--color w-dropdown">
<div class="accordion__toggle fade-in w-dropdown-toggle">
<div data-scroll="1" class="work__link__info change--text--color">
<div class="work__link__image__wrapper fade-in"><img src="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61acd16fc7fb433fff78a88c_icon-gulp.svg" loading="lazy" style="filter:invert(0%)" alt="" class="work__link__info__svg invert__colors" /></div>
<div class="work__link__info__text">
<h3 class="work__link__name fade-in">Buy My Lingerie</h3>
<p class="work__link__p fade-in">A chilli oil inspired by street asian food destined to give real flavour to every meal.</p>
<div class="w-layout-grid work__link__info__tags fade-in">
<h6 class="work__link__info__tag change--border--color">no-contact</h6>
<h6 class="work__link__info__tag change--border--color">anonymous</h6>
</div>
</div>
</div>
<div data-scroll="1" class="work__link__toggle fade-in">
<div class="work__link__toggle__img change--text--color w-embed"><svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.25 0V22.5" stroke="currentColor" stroke-width="1.25" />
<path d="M22.5 11.25L0 11.25" stroke="currentColor" stroke-width="1.25" />
</svg></div>
</div>
</div>
<nav class="accordion__list w-dropdown-list"><a href="projects/gulp-sichuan-oil" class="accordion__link w-inline-block">
<div class="accordion__link__text">
<div data-scroll="1" class="accordion__link__title">If you can imagine me wearing something, or doing something, and want a picture or video of it, I'm in...</div>
<div data-scroll="1" class="main__button is--white letter-wrap">view case study</div>
</div>
<div data-scroll="1" class="accordion__link__image__wrapper">
<div class="accordion__link__overlay"></div><img src="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5b23030d18dad5b908_acc-g.jpg" loading="lazy" sizes="(max-width: 479px) 94vw, (max-width: 767px) 96vw, 93vw" srcset="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5b23030d18dad5b908_acc-g-p-500.jpeg 500w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5b23030d18dad5b908_acc-g-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5b23030d18dad5b908_acc-g-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5b23030d18dad5b908_acc-g.jpg 1750w" alt="" class="accordion__link__image" />
</div>
</a></nav>
</div>
<div data-hover="false" data-delay="0" class="accordion__item change--border--color w-dropdown">
<div class="accordion__toggle fade-in fade-in w-dropdown-toggle">
<div data-scroll="1" class="work__link__info change--text--color">
<div class="work__link__image__wrapper fade-in">
<div class="work__link__info__svg w-embed"><svg width="inherit" height="inherit" viewBox="0 0 101 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M98.7857 52.1806C94.304 48.1622 89.2284 44.9619 84.3497 41.4796C83.6337 40.9657 82.8882 40.4695 82.2648 39.8551C81.0738 38.6737 79.6093 38.3296 78.0684 38.5157C74.8101 38.9055 71.5665 39.4018 68.3244 39.9024C66.6805 40.152 65.0455 40.4931 63.3149 40.6246L59.2655 42.3376C59.1582 42.3376 59.0509 42.3303 58.945 42.3303C58.9185 42.2564 58.8921 42.1826 58.8627 42.1058C59.5287 41.4663 60.2213 40.8535 60.8565 40.1859C65.8924 34.9167 70.9048 29.6179 75.9643 24.3723C76.87 23.4374 77.4834 22.2566 77.7287 20.9757C78.0581 19.4526 78.4149 17.9364 78.7992 16.4271V16.4108C79.1079 15.1718 79.4344 13.9357 79.7667 12.6996C79.805 12.5764 79.8663 12.4616 79.9475 12.3614V12.3614L81.781 5.90189L71.4165 13.8604C70.0535 15.0537 68.6802 16.2381 67.2099 17.2822C64.7647 19.0159 62.146 20.5149 59.5508 22.0242C58.154 22.8349 57.0277 23.8569 56.3057 25.2894C55.6397 26.6067 55.0456 27.9565 54.4237 29.2989C54.1987 29.7848 53.9826 30.278 53.7723 30.7669C53.4782 29.6179 53.4782 28.4955 53.1959 27.4455C52.1932 23.563 50.5317 19.9301 48.4908 16.5172C46.5176 13.2401 44.2136 10.1669 42.0845 6.9711C40.7965 5.03353 39.5967 3.03837 38.2851 1.11704C37.991 0.684337 37.3867 0.163023 36.9618 0.188129C36.1781 0.236863 36.2354 1.0816 36.2046 1.69152C36.1516 2.71199 36.0575 3.74723 36.159 4.76032C36.453 7.81731 35.7326 10.7133 34.7019 13.5163C34.2049 14.872 34.1652 16.0269 34.8783 17.2364C35.0253 17.4801 35.1386 17.7414 35.2797 17.9895C37.3382 21.59 39.3746 25.1934 41.4434 28.788C42.7579 31.074 44.0033 33.3867 45.7618 35.404C47.2645 37.1319 48.5364 39.0651 49.8788 40.9332C50.2008 41.3763 50.3743 41.9404 50.614 42.4455L50.389 42.6271C50.0803 42.4676 49.7583 42.3199 49.4598 42.1412C47.7101 41.0942 45.9721 40.0324 44.215 38.9883C42.927 38.2218 41.4596 37.6665 40.3583 36.6918C38.338 34.9123 36.5324 32.9009 34.668 30.9662C33.7858 30.0506 33.0933 28.878 32.0685 28.1825C26.834 24.6293 21.6981 20.9461 16.94 16.7638C15.963 15.8832 14.7136 15.3679 13.4024 15.3047C9.12069 15.061 4.94342 15.9102 0.757333 16.6442C-0.0513601 16.7919 -0.235154 17.4697 0.316228 18.1284C0.767548 18.6741 1.25905 19.1851 1.78658 19.6569C4.18031 21.7953 6.60639 23.8982 7.76944 27.0512C7.91334 27.359 8.16437 27.6032 8.47521 27.7379C10.5543 28.624 12.6187 29.5766 14.7536 30.3105C17.3473 31.1966 20.1366 31.6116 22.6097 32.7428C27.6324 35.0363 32.4978 37.6709 37.4235 40.1815C37.5602 40.2524 37.6484 40.4178 37.7602 40.5404C36.1516 40.3499 34.643 39.9748 33.1198 39.6824C30.1188 39.1005 27.1163 38.5127 24.0962 38.0298C22.667 37.7994 21.2923 38.0667 20.1395 39.1226C19.5367 39.6705 18.8235 40.1047 18.1384 40.5566C13.4715 43.621 8.62224 46.4136 4.30088 49.989C3.6701 50.5118 2.99668 50.9799 2.17181 51.6002L25.1563 50.3065C25.1563 50.3065 30.6349 48.0411 36.2898 47.601C39.5893 47.5493 48.1085 47.4991 53.9429 48.2079C58.0363 48.7071 63.4164 48.8607 68.5435 48.9803C71.2391 49.6345 73.8727 50.5239 76.4143 51.6386L101 54.0015C100.141 53.297 99.44 52.7669 98.7857 52.1806Z" fill="currentColor" />
<path d="M71.4653 52.2952C68.6196 51.8141 31.8095 51.0117 31.8095 51.0117C26.4745 52.7764 26.2776 59.2593 27.8773 69.2033C29.4769 79.1472 35.2603 78.2329 38.9956 79.5237C42.7309 80.8145 42.4377 84.1752 43.6824 84.4993C44.5533 84.7232 51.7955 84.4848 56.1632 84.8816C58.1753 85.0648 59.7275 83.3016 59.0463 81.5849C59.0333 81.55 59.019 81.5151 59.0046 81.4802C57.5817 77.9524 63.8193 82.7739 69.8657 77.0003C75.912 71.2267 74.311 52.7764 71.4653 52.2952Z" fill="currentColor" />
</svg></div>
</div>
<div class="work__link__info__text">
<h3 class="work__link__name fade-in">Dreams As Big as my Tits</h3>
<p class="work__link__p fade-in">.</p>
<div class="w-layout-grid work__link__info__tags fade-in">
<h6 class="work__link__info__tag change--border--color">no-contact</h6>
<h6 class="work__link__info__tag change--border--color">anonymous</h6>
</div>
</div>
</div>
<div data-scroll="1" class="work__link__toggle fade-in">
<div class="work__link__toggle__img change--text--color w-embed"><svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.25 0V22.5" stroke="currentColor" stroke-width="1.25" />
<path d="M22.5 11.25L0 11.25" stroke="currentColor" stroke-width="1.25" />
</svg></div>
</div>
</div>
<nav class="accordion__list w-dropdown-list"><a href="projects/sahana-welness.html" class="accordion__link w-inline-block">
<div class="accordion__link__text">
<div data-scroll="1" class="accordion__link__title">If you can imagine me wearing something, or doing something, and want a picture or video of it, I'm in...</div>
<div data-scroll="1" class="main__button is--white letter-wrap">view case study</div>
</div>
<div data-scroll="1" class="accordion__link__image__wrapper">
<div class="accordion__link__overlay"></div><img src="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5df8e9780b9d3ff38e_acc-sh.jpg" loading="lazy" sizes="(max-width: 479px) 94vw, (max-width: 767px) 96vw, 93vw" srcset="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5df8e9780b9d3ff38e_acc-sh-p-500.jpeg 500w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5df8e9780b9d3ff38e_acc-sh-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5df8e9780b9d3ff38e_acc-sh-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5df8e9780b9d3ff38e_acc-sh.jpg 1750w" alt="" class="accordion__link__image" />
</div>
</a></nav>
</div>
<div data-hover="false" data-delay="0" class="accordion__item change--border--color w-dropdown">
<div class="accordion__toggle fade-in w-dropdown-toggle">
<div data-scroll="1" class="work__link__info change--text--color">
<div class="work__link__image__wrapper fade-in">
<div class="work__link__info__svg w-embed"><svg width="inherit" height="inherit" viewBox="0 0 95 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M71.028 38.3515C69.38 38.3358 68.0115 39.2319 68.0001 40.3374C67.9886 41.4429 69.2837 42.303 70.8951 42.3367C72.5065 42.3705 73.9482 41.4676 73.9987 40.3779C74.0491 39.2882 72.6715 38.3515 71.028 38.3515Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" />
<path d="M23.0282 38.3515C21.3801 38.3358 20.0115 39.2319 20.0001 40.3374C19.9886 41.4429 21.2838 42.3029 22.8953 42.3367C24.5068 42.3705 25.9578 41.4766 25.9991 40.3891C26.0404 39.3017 24.6718 38.3515 23.0282 38.3515Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" />
<path d="M40.0083 34.365C39.4852 34.3482 38.9893 34.185 38.6177 33.9073C38.2462 33.6297 38.0259 33.2576 38 32.864C38.0136 32.4688 38.2302 32.093 38.6041 31.8155C38.9781 31.5379 39.4804 31.3802 40.0056 31.3755C40.5305 31.3771 41.0336 31.5338 41.4066 31.8117C41.7796 32.0897 41.9927 32.4668 42 32.8619C41.984 33.256 41.7692 33.6308 41.3993 33.91C41.0293 34.1892 40.532 34.3519 40.0083 34.365Z" fill="currentColor" />
<path d="M56.9776 31.3756C57.2404 31.3729 57.5014 31.4089 57.7455 31.4817C57.9895 31.5546 58.2119 31.6627 58.3999 31.8C58.5878 31.9373 58.7376 32.101 58.8405 32.2817C58.9435 32.4624 58.9976 32.6565 58.9999 32.8529C59.003 33.0491 58.9544 33.2438 58.8568 33.426C58.7593 33.6081 58.6146 33.7742 58.4311 33.9146C58.2477 34.055 58.029 34.167 57.7876 34.2443C57.5462 34.3215 57.2868 34.3625 57.0242 34.3649C56.7616 34.3672 56.501 34.3309 56.2572 34.258C56.0134 34.1851 55.7911 34.077 55.6032 33.94C55.4153 33.8029 55.2654 33.6395 55.162 33.4591C55.0586 33.2788 55.0037 33.0849 55.0006 32.8887C54.9942 32.6917 55.0406 32.4958 55.1371 32.3124C55.2336 32.129 55.3782 31.9619 55.5624 31.8209C55.7466 31.6799 55.9667 31.5679 56.2098 31.4914C56.4528 31.4149 56.7139 31.3756 56.9776 31.3756Z" fill="currentColor" />
<path d="M59 41.3408C58.0703 43.0647 56.6252 44.5318 54.8206 45.584C53.0159 46.6361 50.9201 47.2335 48.7592 47.3115C46.5983 47.3896 44.4542 46.9455 42.5582 46.027C40.6622 45.1085 39.0861 43.7505 38 42.0995" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" />
<path d="M40 44.1987C40 44.1987 41.8842 40.1478 45.7711 41.6917C50.0309 43.3814 46.875 47.3203 46.875 47.3203" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" />
<path d="M83.3313 28.7443C83.6783 25.423 83.1414 22.0692 81.7748 19.0215C80.4081 15.9738 78.2602 13.3403 75.548 11.387C72.8357 9.43374 69.6553 8.22985 66.3279 7.89699C63.0006 7.56413 59.6442 8.1141 56.5978 9.49132C54.4285 6.96644 51.7358 4.94226 48.706 3.5588C45.6761 2.17533 42.3815 1.4656 39.05 1.47869C32.8871 1.485 26.9783 3.93212 22.6199 8.28323C18.2614 12.6343 15.8093 18.5341 15.8014 24.6883C15.8022 25.5403 15.8487 26.3916 15.9407 27.2387C13.1882 27.8424 10.6044 29.0494 8.37622 30.7722C6.14799 32.4951 4.33094 34.6908 3.05645 37.2007C1.78195 39.7105 1.08185 42.4718 1.00676 45.2849C0.931659 48.098 1.48344 50.8926 2.62222 53.4667C3.76099 56.0408 5.4583 58.3301 7.59145 60.1691C9.72459 62.008 12.2403 63.3507 14.9566 64.1C17.673 64.8494 20.5221 64.9866 23.2981 64.5019C26.0741 64.0172 28.7075 62.9226 31.0081 61.2973C32.7638 64.677 35.3634 67.5469 38.5554 69.6293C41.7474 71.7117 45.4236 72.9361 49.2283 73.184C53.033 73.4319 56.8373 72.6949 60.2732 71.0443C63.7091 69.3938 66.6601 66.8855 68.8407 63.7623C70.8155 64.4426 72.8901 64.789 74.9791 64.7872C79.2777 64.7893 83.4501 63.3366 86.8156 60.6662C90.1811 57.9958 92.541 54.2653 93.5103 50.0834C94.4796 45.9014 94.0011 41.5149 92.1528 37.6395C90.3046 33.764 87.1956 30.6284 83.3333 28.7443H83.3313Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" />
</svg></div>
</div>
<div class="work__link__info__text">
<h3 class="work__link__name fade-in">Alleluia Sweetner</h3>
<p class="work__link__p fade-in">Natural monkfruit sweetener.</p>
<div class="w-layout-grid work__link__info__tags fade-in">
<h6 class="work__link__info__tag change--border--color">branding</h6>
<h6 class="work__link__info__tag change--border--color">packaging</h6>
</div>
</div>
</div>
<div data-scroll="1" class="work__link__toggle fade-in">
<div class="work__link__toggle__img change--text--color w-embed"><svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.25 0V22.5" stroke="currentColor" stroke-width="1.25" />
<path d="M22.5 11.25L0 11.25" stroke="currentColor" stroke-width="1.25" />
</svg></div>
</div>
</div>
<nav class="accordion__list w-dropdown-list"><a href="projects/alleluia-sweetner" class="accordion__link w-inline-block">
<div class="accordion__link__text">
<div data-scroll="1" class="accordion__link__title">Alleluia<br /><span class="is--italic">Sweetner</span></div>
<div data-scroll="1" class="main__button is--white letter-wrap">view case study</div>
</div>
<div data-scroll="1" class="accordion__link__image__wrapper">
<div class="accordion__link__overlay"></div><img src="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d30df699c5a587514e0db3_A8.jpg" loading="lazy" sizes="(max-width: 479px) 94vw, (max-width: 767px) 96vw, 93vw" srcset="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d30df699c5a587514e0db3_A8-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d30df699c5a587514e0db3_A8-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d30df699c5a587514e0db3_A8-p-2000.jpeg 2000w, https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d30df699c5a587514e0db3_A8.jpg 2500w" alt="" class="accordion__link__image" />
</div>
</a></nav>
</div>
</div>
</div>
</section>
<section id="about" data-scroll-section="1" class="section wf-section">
<div class="container is--services">
<div class="home__offset__wrapper">
<div class="home__offset__space"></div>
<div class="home__offset">
<h4 data-scroll="1" class="medium__heading fade-in">Over the lasts years I realized - It's not enough to simply <span class="is--italic">sell products</span> anymore, people need <span class="is--regular">brands</span> that lead from the heart and <span class="is--regular">share</span> their values.</h4>
<p data-scroll="1" class="is--migra medium--size margin__top-bottom fade-in">That’s why I focus on Branding. Whether a brand is looking for a refresh or finding its voice at the very begging, I will help find its purpose and connect with their target audience.</p>
<div class="home__services__wrapper">
<p data-scroll="1" class="is--migra medium--size fade-in">What I do:</p>
<div class="home__services__list">
<h2 data-scroll="1" class="home__service__heading is--migra fade-in">Brand Strategy</h2>
<h2 data-scroll="1" class="home__service__heading is--migra has--margin fade-in">Brand Identity</h2>
<h2 data-scroll="1" class="home__service__heading is--migra fade-in">Creative Direction</h2>
</div>
<div class="home__services__list">
<h2 data-scroll="1" class="home__service__heading is--migra fade-in">Art Direction</h2>
<h2 data-scroll="1" class="home__service__heading is--migra has--margin fade-in">Packaging</h2>
<h2 data-scroll="1" class="home__service__heading is--migra fade-in">Collaborations</h2>
<h3 data-scroll="1" class="home__service__heading is--tiny fade-in">Web & Illustrations</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll-section="1" class="section wf-section">
<div class="container">
<div class="archive__section">
<div class="archive__text">
<h5 data-scroll="1" class="archive__heading is--migra fade-in">Archived<br /><span data-scroll="1" class="is--italic">works</span> samples</h5>
<p data-scroll="1" class="archive__p fade-in">I love playing with new layouts, grids, and typographies. Explore my concepts and experiments for more work</p><a data-scroll="1" href="archive" class="main__button is--white letter-wrap fade-in">Explore archives</a>
</div>
<div data-scroll="1" data-scroll-speed="-2" class="archive__overlay"></div><img src="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/61d34d5d716b66ab70d86d3d_archive.jpg" loading="lazy" data-scroll-speed="-2" data-scroll="1" alt="" class="archive__image" />
</div>
</div>
</section>
<section data-scroll-section="1" class="section wf-section">
<div class="container is--services">
<div class="home__offset__wrapper">
<div class="home__offset__space"></div>
<div class="home__offset is--bigger">
<h4 data-scroll="1" class="medium__heading fade-in">I believe in creating beautiful and complete brand experiences by helping them connect with their intention and know-how to communicate their purpose.</h4>
<div class="about__4__grid change--border--color">
<div data-scroll="1" class="_4__grid__item">
<h6 class="is--migra medium--size is--4--grid--heading fade-in">Present</h6>
<p class="_4__grid__p fade-in">Currently I’m working at &Walsh and also as a freelancer looking for new brands to create complete branding experiences and help them find their voice.</p>
</div>
<div data-scroll="1" class="_4__grid__item">
<h6 class="is--migra medium--size is--4--grid--heading fade-in">Previously</h6>
<p class="_4__grid__p fade-in">I have worked on Fibra for 3 years focusing on branding, strategic development and packaging.</p>
</div>
<div data-scroll="1" class="_4__grid__item">
<h6 class="is--migra medium--size is--4--grid--heading fade-in">Education</h6>
<p class="_4__grid__p fade-in">I studied in Perú at Universidad de Ciencias y Artes de America Latina. Graduating with a major in Graphic Design and specialized in Branding.</p>
</div>
<div data-scroll="1" class="_4__grid__item">
<h6 class="is--migra medium--size is--4--grid--heading fade-in">Collaborations</h6>
<p class="_4__grid__p fade-in">I believe collaboration allows us to create a different narratives for each brand. That’s why depending on the project I love collaborating with specialists from different fields</p>
</div>
</div>
<div class="awards__section is--migra">
<h4 data-scroll="1" class="awards__heading fade-in">Awards and Recognitions</h4>
<p data-scroll="1" class="awards__sub fade-in">I’ve been lucky enough to have recognition from two of the biggest organizations in the design industry.</p>
<div class="awards__grid">
<div data-scroll="1" class="award__item change--border--color is--top fade-in">
<h5 class="award__heading">LAD Awards</h5>
<div class="award__ammount">x01</div>
</div>
<div data-scroll="1" class="award__item change--border--color fade-in">
<h5 class="award__heading">Behance Illustrator Gallery</h5>
<div class="award__ammount">x01</div>
</div>
<div data-scroll="1" class="award__item change--border--color fade-in">
<h5 class="award__heading">Behance InDesign Gallery</h5>
<div class="award__ammount">x01</div>
</div>
<div data-scroll="1" class="award__item change--border--color fade-in">
<h5 class="award__heading">Behance Graphic Design</h5>
<div class="award__ammount">x04</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="footer" data-scroll-section="1" class="section is--footer wf-section">
<div data-scroll="1" data-scroll-to="1" class="container is--footer">
<div data-scroll="1" class="footer">
<div data-scroll="1" class="footer__cta">
<p data-scroll="1" data-scroll-to="1" class="footer__cta__text fade-in">I'm always happy to talk.<br />AVAILABLE FOR FREELANCE WORK</p><a data-scroll="1" href="mailto:[email protected]?subject=Contact%20via%20website" class="footer__cta__link fade-in w-inline-block">
<div class="footer__cta__link__text">Send <span class="is--italic">an</span> email</div>
<div data-w-id="efdf1344-de1e-a237-55a5-4efa5aa22662" class="footer__cta__link__underline change--bg--color"></div>
</a>
</div>
<div data-scroll="1" class="footer__bottom">
<div class="footer__links">
<div>DESIGNED + BUILT W/ ♥︎ BY <a href="https://wlfgng.com" target="_blank" class="credits__link letter-wrap">WLFGNG.DEV®</a></div>
</div>
<div class="footer__bottom__right">
<div id="w-node-_46b6bb10-45e1-968f-bfae-ad7e2e1eaa15-393e3fad">©2022. Swiss 🇨🇭 made.</div>
</div>
</div>
</div>
</div>
</section>
<div data-w-id="9d74f846-43ed-edd7-588d-3b5685f6ddbe" class="fade-in"></div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61ab77277fb3141b413e3fac" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://uploads-ssl.webflow.com/61ab77277fb3141b413e3fac/js/webflow.02e23f524.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]--><canvas id="noise" class="noise"></canvas>
<script>
const noise = () => {
let canvas, ctx;
let wWidth, wHeight;
let noiseData = [];
let frame = 0;
let loopTimeout;
// Create Noise
const createNoise = () => {
const idata = ctx.createImageData(wWidth, wHeight);
const buffer32 = new Uint32Array(idata.data.buffer);
const len = buffer32.length;
for (let i = 0; i < len; i++) {
if (Math.random() < 0.5) {
buffer32[i] = 0xff000000;
}
}
noiseData.push(idata);
};
// Play Noise
const paintNoise = () => {
if (frame === 9) {
frame = 0;
} else {
frame++;
}
ctx.putImageData(noiseData[frame], 0, 0);
};
// Loop
const loop = () => {
paintNoise(frame);
loopTimeout = window.setTimeout(() => {
window.requestAnimationFrame(loop);
}, (1000 / 25));
};
// Setup
const setup = () => {
wWidth = window.innerWidth;
wHeight = window.innerHeight;
canvas.width = wWidth;
canvas.height = wHeight;
for (let i = 0; i < 10; i++) {
createNoise();
}
loop();
};
// Reset
let resizeThrottle;
const reset = () => {
window.addEventListener('resize', () => {
window.clearTimeout(resizeThrottle);
resizeThrottle = window.setTimeout(() => {
window.clearTimeout(loopTimeout);
setup();
}, 200);
}, false);
};
// Init
const init = (() => {
canvas = document.getElementById('noise');
ctx = canvas.getContext('2d');
setup();
})();
};
noise();
</script>
<style>
.noise {
z-index: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .04;
}
</style>
<!--Link to script allowing the page load animation-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<!--Link to script allowing the letter wrap animation-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js" type="text/javascript"></script>
<!--Toggling classes for all cursor animations-->
<script>
$('.letter-wrap').on('mouseenter mouseleave', function() {
$('.cursor__dot').toggleClass('is--large');
});
$('.hero__top__center').on('mouseenter mouseleave', function() {
$('.cursor__dot').toggleClass('is--large');
});
$('.accordion__toggle').on('mouseenter mouseleave', function() {
$('.cursor__dot').toggleClass('is--large');
});
$('.footer__cta__link').on('mouseenter mouseleave', function() {
$('.cursor__dot').toggleClass('is--contact');
$('.cursor__dot').toggleClass('change--bg--color');
});
$('.body img').on('mouseenter mouseleave', function() {
$('.cursor__dot').toggleClass('invert')
});
$('.archive__section').on('mouseenter mouseleave', function() {
$('.cursor__dot').toggleClass('invert')
});
$('.accordion__link__overlay').on('mouseenter mouseleave', function() {
$('.cursor__dot').toggleClass('invert')
});
</script>
<script>
const letterWrapClass = 'letter-wrap';
const letterWrapElements = document.getElementsByClassName(letterWrapClass);
[...letterWrapElements].forEach(el => {
letterWrap(el, letterWrapClass);
letterAnimation(el, letterWrapClass);
});
function letterWrap(el, cls) {
const words = el.textContent.split(' ');
const letters = [];
cls = cls || 'letter-wrap'
words.forEach(word => {
let html = '';
for (var letter in word) {
html += `
<span class="${cls}__char">
<span class="${cls}__char-inner" data-letter="${word[letter]}">
${word[letter]}
</span>
</span>
`;
};
let wrappedWords = `<span class="${cls}__word">${html}</span>`;
letters.push(wrappedWords);
});
return el.innerHTML = letters.join(' ');
}
function letterAnimation(el, cls) {
const tl = new TimelineMax({
paused: true
});
const characters = el.querySelectorAll(`.${cls}__char-inner`);
const duration = el.hasAttribute('data-duration') ? el.dataset.duration : 0.3;
const stagger = el.hasAttribute('data-stagger') ? el.dataset.stagger : 0.03;
el.animation = tl.staggerTo(characters, duration, {
y: '-100%',
delay: 0.1,
ease: Power2.easeInOutCubic
}, stagger);
el.addEventListener('mouseenter', (event) => event.currentTarget.animation.play());
el.addEventListener('mouseout', (event) => el.animation.pause(0)());
}
</script>
<!-- END TWEENMAX V1 TEXT -->
<!-- THIS IS TO ANIMATE THE PAGE LOADER TEXT -->
<style>
.letter {
display: inline-block;
}
.tricksword {
white-space: nowrap;
}
</style>
<script>
// Copyright start
// © Code by T.RICKS, https://www.tricksdesign.com/
// You have the license to use this code in your projects but not redistribute it to others
// Find all text with .tricks class and break each letter into a span
var tricksWord = document.getElementsByClassName("tricks");
for (var i = 0; i < tricksWord.length; i++) {
var wordWrap = tricksWord.item(i);
wordWrap.innerHTML = wordWrap.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="tricksword">$2</span>');
}
var tricksLetter = document.getElementsByClassName("tricksword");
for (var i = 0; i < tricksLetter.length; i++) {
var letterWrap = tricksLetter.item(i);
letterWrap.innerHTML = letterWrap.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
}
// Fade Up Animation
var fadeUp = anime.timeline({
loop: false,
autoplay: false,
});
fadeUp
.add({
targets: '.fade-up .letter',
translateY: [100, 0],
translateZ: 0,
opacity: [0, 1],
easing: "easeInOutCubic",
duration: 1200,
delay: (el, i) => 300 + 30 * i
}).add({
targets: '.fade-up .letter',
translateY: [0, -100],
opacity: [1, 0],
easing: "easeInOutCubic",
duration: 1000,
delay: (el, i) => 100 + 30 * i
});
// Play your animation with these
fadeUp.play();
</script>
</body>
<!-- Mirrored from www.taiskahatt.com/ by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 11 Feb 2022 04:43:53 GMT -->
</html>