-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
254 lines (226 loc) · 17.2 KB
/
test.html
File metadata and controls
254 lines (226 loc) · 17.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vadik Matveev — an Amsterdam based Product Designer with more then 10 years of experience</title>
<link rel="icon" href="/favicon/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png">
<meta property="og:url" content="https://vadik.design">
<meta property="og:title" content="Vadik Matveev">
<meta property="og:description" content="Product Designer portfolio">
<meta itemprop="description" content="Product Designer portfolio">
<meta property="og:type" content="website">
<meta property="og:image" content="https://vadik.design/og.jpg">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Vadik Matveev">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://vadik.design">
<meta property="twitter:title" content="Vadik Matveev">
<meta property="twitter:description" content="Product Designer portfolio">
<meta property="twitter:image" content="https://vadik.design/og.jpg">
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@fooontic_">
<link rel="stylesheet" href="/styles.css">
</head>
<body class="playground case" style="--case-bg-color: var(--cc-bg-default);">
<header class="header">
<a class="header__logo" href="/">Vadik Matveev</a>
<nav class="header__nav nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
<li class="nav__item nav__item_active"><a href="#" class="nav__link">Play</a></li>
<li class="nav__item"><a href="about.html" class="nav__link">Me</a></li>
</ul>
</nav>
<a href="https://www.linkedin.com/in/fooontic/" class="header__link">Linkedin</a>
</header>
<div class="playground__canvas playground__canvas_test canvas" id="canvasWrapper">
<div class="canvas__container" id="canvas">
<div class="canvas__item playground__intro">
<h1 class="playground__h">My <span class="alt-font">play</span>ground</h1>
<p class="playground__deck">
Some fun staff, exploration and experiments I like to do in my free time. Animations, codepens and shots. <br><span>Drag around</span> and explore my world.
</p>
</div>
<figure class="canvas__item play-card play-card_music-box">
<div class="play-card__pic play-card__pic_openable">
<img src="/img/playground/music-box.jpg" alt="">
<ul class="play-card__tags">
<li>Figma</li>
<li>Skeomorphism</li>
</ul>
</div>
<figcaption class="play-card__caption">
<p class="play-card__desc">A made-up music device, created in Figma just for fun</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_switcher">
<div class="play-card__pic play-card__pic_openable">
<video class="" autoplay playsinline muted loop poster="/img/playground/lg-switcher_poster.webp" aria-label="Video of codepen demo with a theme switcher made in liquid glass style">
<source src="/img/playground/lg-switcher_comp.mp4" type="video/mp4">
</video>
<ul class="play-card__tags">
<li>Codepen</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<a href="https://codepen.io/fooontic/pen/KwpRaGr" class="play-card__link">Open in Codepen</a>
</div>
<figcaption class="play-card__caption">
<p class="play-card__desc">Exploring an Apple-like liquid glass effect using only HTML and CSS</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_glow-buttons">
<div class="play-card__pic play-card__pic_openable">
<video class="" autoplay playsinline muted loop poster="/img/playground/glow-buttons_poster.webp" aria-label="Video of codepen demo with three buttons glowing on hover">
<source src="/img/playground/glow-buttons_comp.mp4" type="video/mp4">
</video>
<ul class="play-card__tags">
<li>Codepen</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<a href="https://codepen.io/fooontic/pen/yLGmKVE" class="play-card__link">Open in Codepen</a>
</div>
<figcaption class="play-card__caption">
<p class="play-card__desc">Playing around with the CSS :has selector on CodePen for the first time</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_liquid-button">
<div class="play-card__pic play-card__pic_openable">
<video class="" autoplay playsinline muted loop poster="/img/playground/liquid-button_poster.webp" aria-label="Video of codepen demo with a theme switcher made in liquid glass style">
<source src="/img/playground/liquid-button_comp.mp4" type="video/mp4">
</video>
<ul class="play-card__tags">
<li>Codepen</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<a href="https://codepen.io/fooontic/pen/yLGmKVE" class="play-card__link">Open in Codepen</a>
</div>
<figcaption class="play-card__caption">
<p class="play-card__desc">Exploring neomorphism with the liquid button</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_blue-icons">
<div class="play-card__pic play-card__pic_openable">
<img src="/img/playground/blue-icons.webp" alt="4 light blue icons in neomorphism style">
<ul class="play-card__tags">
<li>Figma</li>
<li>Icons</li>
<li>Neomorphism</li>
</ul>
</div>
</figure>
<figure class="canvas__item play-card play-card_consta-icons">
<div class="play-card__pic play-card__pic_openable">
<img src="/img/playground/consta-icons.webp" alt="4 icons in frosted glass style">
<ul class="play-card__tags">
<li>Blender</li>
<li>3D</li>
<li>Icons</li>
</ul>
</div>
</figure>
<figure class="canvas__item play-extra_yt">
<div class="play-extra_yt__pics">
<img src="/img/playground/yt-cover_01.webp" alt="Cover of 'Noise rock history' youtube video">
<img src="/img/playground/yt-cover_02.webp" alt="Cover of 'SST Records history' youtube video">
<img src="/img/playground/yt-cover_03.webp" alt="Cover of 'Punk Rock 00s history' youtube video">
<img src="/img/playground/yt-cover_04.webp" alt="Cover of 'Underground in immigration' youtube video">
</div>
<figcaption class="play-extra_yt__caption">
<p class="play-extra_yt__desc">My youtube channel about music <a href="https://www.youtube.com/@dotmus" class="play-extra_yt__link">dotmus</a></p>
<p class="play-extra_yt__subdesc">I'm a huge fan of music and it's history, so I enjoy sharing my finds with people in the videos. Sadly it's only in Russian (for now)</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_coffee">
<div class="play-card__pic">
<img src="/img/playground/coffee.webp" alt="A glass of black coffee with a couple of amaretti cookies nearby">
</div>
<figcaption class="play-card__caption">
<p class="play-card__desc">Mmm... coffeeee... <b>Can’t live without it!</b> I brew mine in a V60 every day. And yes, I’ve got a sweet tooth — amaretti cookies are my weakness.</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_ipad">
<div class="play-card__pic">
<img src="/img/playground/ipad.webp" alt="Ipad with a dotwork style ilustration of a scull with a vinyl record">
</div>
<figcaption class="play-card__caption">
<p class="play-card__desc">Sometimes I draw, but really rarely. And btw, I'm left-handed.</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_3d">
<div class="play-card__pic play-card__pic_openable">
<img src="/img/playground/3d.webp" alt="3D illustration of some UI elements">
<ul class="play-card__tags">
<li>Blender</li>
<li>3D</li>
<li>Illustration</li>
</ul>
</div>
</figure>
<figure class="canvas__item play-card play-card_card">
<div class="play-card__pic">
<img src="/img/playground/card.webp" alt="3D illustration of some UI elements">
</div>
</figure>
<figure class="canvas__item play-extra_neoicons">
<div class="play-extra_neoicons__pics">
<img src="/img/playground/neoicon_3.webp" alt="Success icon in neomorphic style">
<img src="/img/playground/neoicon_2.webp" alt="Error icon in neomorphic style">
<img src="/img/playground/neoicon_1.webp" alt="No network icon in neomorphic style">
</div>
<figcaption class="play-extra_neoicons__caption">
<p class="play-extra_neoicons__desc">Some cool soapy icons made in Figma</p>
</figcaption>
</figure>
<figure class="canvas__item play-card play-card_tumbler">
<div class="play-card__pic play-card__pic_openable">
<img src="/img/playground/tumbler.gif" alt="Elastic tumbler animation">
</div>
<figcaption class="play-card__caption">
<p class="play-card__desc">A very old dribbble shot, but I still like it.</p>
</figcaption>
</figure>
<div class="canvas__item play-card play-card_lastfm lastfm-widget__trigger">
<div class="lastfm-widget">
<lastfm-tracks class="no-albums" user="fooontic" apikey="726b8c281816bc96ce11ca36db15e506" interval="60"></lastfm-tracks>
<ul class="lastfm-widget__links">
<li>
<a href="https://www.last.fm/user/fooontic" class="lastfm-widget__link">
<svg class="lastfm-widget__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 72 72"><circle cx="36" cy="36" r="36" fill="#E31B23"/><path fill="#fff" d="m32.911 46.418-1.776-4.867s-2.887 3.245-7.212 3.245c-3.83 0-6.549-3.357-6.549-8.727 0-6.88 3.44-9.342 6.827-9.342 4.883 0 6.435 3.189 7.77 7.272l1.776 5.596c1.774 5.427 5.103 9.79 14.703 9.79 6.881 0 11.544-2.124 11.544-7.718 0-4.532-2.553-6.88-7.325-8.001l-3.553-.784c-2.44-.56-3.16-1.566-3.16-3.243 0-1.903 1.497-3.022 3.94-3.022 2.662 0 4.105 1.007 4.327 3.412l5.55-.671c-.445-5.034-3.885-7.104-9.547-7.104-4.993 0-9.876 1.903-9.876 8 0 3.805 1.83 6.21 6.435 7.329l3.772.893c2.83.672 3.773 1.846 3.773 3.47 0 2.069-1.996 2.91-5.769 2.91-5.603 0-7.937-2.965-9.267-7.05l-1.83-5.593c-2.332-7.273-6.05-9.959-13.43-9.959-8.157-.002-12.487 5.201-12.487 14.039 0 8.503 4.33 13.09 12.097 13.09 6.272.002 9.267-2.965 9.267-2.965Z"/></svg>
<span class="lastfm-widget__text">Follow me on Last.fm</span>
</a>
</li>
<li>
<a href="https://open.spotify.com/user/212rmgsyppc3rynshvif2xioi?si=1ad1c5735cd6489b" class="lastfm-widget__link">
<svg class="lastfm-widget__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 72 72"><path fill="#1ED760" d="M36 0C16.127 0 0 16.127 0 36s16.127 36 36 36 36-16.127 36-36S55.873 0 36 0Z"/><path fill="#000" d="M59.022 32.385c-.755 0-1.219-.188-1.872-.566-10.336-6.17-28.815-7.65-40.776-4.311-.523.145-1.176.377-1.873.377-1.916 0-3.382-1.495-3.382-3.426 0-1.974 1.22-3.091 2.526-3.469 5.11-1.495 10.829-2.206 17.056-2.206 10.597 0 21.702 2.206 29.816 6.938 1.133.654 1.873 1.554 1.873 3.281a3.363 3.363 0 0 1-3.368 3.382Zm-4.5 11.062c-.755 0-1.262-.334-1.785-.61-9.073-5.371-22.602-7.534-34.636-4.268-.696.189-1.074.378-1.727.378a2.819 2.819 0 0 1-2.816-2.817c0-1.553.755-2.583 2.25-3.004 4.035-1.133 8.158-1.975 14.197-1.975 9.42 0 18.522 2.338 25.693 6.605 1.176.697 1.64 1.597 1.64 2.86-.014 1.568-1.233 2.83-2.816 2.83Zm-3.904 9.522c-.61 0-.988-.188-1.554-.522-9.058-5.459-19.596-5.69-30.005-3.557-.566.145-1.306.378-1.727.378-1.408 0-2.293-1.118-2.293-2.294 0-1.495.885-2.206 1.974-2.439C28.9 41.908 41.05 42.14 51.416 48.34c.885.566 1.408 1.074 1.408 2.395a2.193 2.193 0 0 1-2.206 2.235Z"/></svg>
<span class="lastfm-widget__text">Follow me on Spotify</span>
</a>
</li>
<li>
<a href="https://rateyourmusic.com/~fooontic" class="lastfm-widget__link">
<svg class="lastfm-widget__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 72 72"><path fill="#E6E4E5" d="M43.195 21.655c5.468 2.208 15.14 1.893 21.134 1.367-4.942-10.83-15.877-18.4-28.494-18.4-6.098 0-11.67 1.683-16.507 4.732 10.514-4.942 15.561 8.832 23.867 12.302Z"/><path fill="#E6E4E5" d="M71.585 35.955c0 19.766-15.982 35.748-35.749 35.748C16.07 71.703.088 55.721.088 35.955.088 16.188 16.07.207 35.836.207c19.767 0 35.749 16.086 35.749 35.748Z"/><path fill="url(#a)" d="M54.236 34.168c4.837.315 9.252-.947 12.617-2.418-.42-3.155-1.262-6.099-2.523-8.832-5.993.525-15.666.84-21.134-1.367C34.89 18.08 29.423 4.097 19.33 9.249 10.392 14.822 4.504 24.6 4.504 35.955c0 2.944.42 5.783 1.156 8.412C10.602 39.95 21.011 31.644 30.37 29.12c12.617-3.365 13.458 4.416 23.867 5.047Z"/><path fill="url(#b)" d="M66.852 31.855c-3.364 1.472-7.78 2.628-12.617 2.418-10.409-.63-11.25-8.517-23.972-5.047C21.01 31.75 10.601 40.161 5.555 44.472c1.051 3.575 2.628 6.94 4.836 9.988 3.365-2.839 7.465-5.467 11.986-6.413 12.933-2.734 12.933 6.518 23.868 5.257 5.993-.736 14.194-6.52 20.397-11.566.316-1.787.526-3.68.526-5.573 0-1.577-.105-2.944-.316-4.31Z"/><path fill="url(#c)" d="M22.377 47.941c-4.521.947-8.622 3.575-11.986 6.414 5.677 7.885 14.93 13.038 25.444 13.038 15.456 0 28.178-11.146 30.807-25.76-6.204 5.047-14.405 10.83-20.398 11.566-10.935 1.26-10.935-8.096-23.867-5.258Z"/><path fill="url(#d)" d="M48.979 41.843c1.262 3.154.105 6.624-2.839 7.886-2.839 1.157-6.203-.42-7.57-3.47-1.262-3.154-.105-6.624 2.839-7.886 2.944-1.261 6.308.316 7.57 3.47Z"/><defs><linearGradient id="a" x1="35.665" x2="35.665" y1="29.174" y2="9.019" gradientUnits="userSpaceOnUse"><stop stop-color="#88C6EB"/><stop offset="1" stop-color="#2392CC"/></linearGradient><linearGradient id="b" x1="38.682" x2="35.541" y1="54.916" y2="33.315" gradientUnits="userSpaceOnUse"><stop stop-color="#2383C6"/><stop offset="1" stop-color="#33519F"/></linearGradient><linearGradient id="c" x1="38.523" x2="38.523" y1="64.451" y2="47.802" gradientUnits="userSpaceOnUse"><stop stop-color="#1E4999"/><stop offset="1" stop-color="#1B3B6C"/></linearGradient><linearGradient id="d" x1="44.697" x2="43.174" y1="51.654" y2="38.028" gradientUnits="userSpaceOnUse"><stop stop-color="#1E4999"/><stop offset="1" stop-color="#1B3B6C"/></linearGradient></defs></svg>
<span class="lastfm-widget__text">Follow me on RYM</span>
</a>
</li>
</ul>
</div>
<p class="play-card__caption play-card__caption_small">
Powered by Last.fm and <a href="https://lastfm-widgets.deno.dev/">Tracks Widget</a>
</p>
</div>
<figure class="canvas__item play-card play-card_laptop">
<div class="play-card__pic">
<img src="/img/playground/macbook.webp" alt="My laptop">
</div>
</figure>
</div>
</div>
</body>
<script type="module" src="playground.js"></script>
<script type="module" src="lastfm/lastfm.js"></script>
</html>