-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
258 lines (247 loc) · 12 KB
/
index.html
File metadata and controls
258 lines (247 loc) · 12 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
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-174551627-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-174551627-1');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="I'm a photographer and web developer from Poznań">
<title>Tomasz Przyborowski - photography and web development</title>
<link href="/dist/css/styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Muli:wght@200;300;600;700;800&display=swap&" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/dist/assets/images/favicon.png" />
</head>
<body>
<div class="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<path id="circlePath" d="M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<g>
<use xlink:href="#circlePath" fill="none"/>
<text fill="#000">
<textpath class="text-path" xlink:href="#circlePath">Move your mouse to animate the photo!</textpath>
</text>
</g>
</svg>
</div>
<header class="hero-header">
<canvas class="hero-canvas"></canvas>
<div class="lang-switcher">
<button class="lang-switcher__btn--en activeLang" lang="en" hreflang="en">EN</button> /
<button class="lang-switcher__btn--pl" lang="pl" hreflang="pl">PL</button>
</div>
<div class="navigation-container">
<nav>
<button class="hamburger" aria-expanded="false">
<span class="sr-only">Open / close</span>
<span class="hamburger__box">
<span class="hamburger__inner"></span>
</span>
</button>
<div class="navigation">
<ul class="navigation__list">
<li class="navigation__item"><a class="highlight translate__faq" href="faq">FAQ</a></li>
<li class="navigation__item"><a class="highlight translate__about" href="#about">About</a></li>
<li class="navigation__item"><a class="highlight translate__gallery" href="#gallery">Gallery</a></li>
<li class="navigation__item"><a class="highlight translate__contact" href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<aside class="social">
<ul class="social__list">
<li class="social__item">
<a href="https://github.com/Lynthius" target="_blank" class="social__link">github</a>
</li>
<li class="social__item">
<a href="https://www.instagram.com/tomasz_przyborowski/" target="_blank" class="social__link">instagram</a>
</li>
</ul>
</aside>
</div>
<h1 class="hero-header__heading"><span class="hero-header__heading--bigger">Tomasz</span><br />Przyborowski</h1>
</header>
<div id="about">
<section class="about">
<div class="about__description">
<h2 class="about__heading header">About me</h2>
<p class="about__paragraph">Welcome! My name is Tomasz and I'm a <a
href="https://www.instagram.com/tomasz_przyborowski/" target="_blank"><span class="highlight">product
photographer</span></a> and <a href="https://github.com/Lynthius" target="_blank"> <span
class="highlight">web developer</span></a> from Poland. I've fallen in love with front-end technologies,
especially JavaScript. Currently I'm learning React and Typescript. I'm also <a href="https://github.com/yllwduck" target="_blank"><span class="highlight">yllwduck</span></a> initiative creator - place for people in tech that want to
learn new skills, or share their knowledge and member of <a href="https://github.com/CodersCrew/" target="_blank"><span class="highlight">CodersCrew</span></a> - non-profit organization.
</p>
</div>
<img src="dist/assets/images/tomasz-przyborowski.webp" alt="author's portrait photo" class="about__image"
loading="lazy" />
</section>
<div class="ornaments">
<img src="dist/assets/images/coffee-beans.webp" alt="coffee beans photo" class="coffee-beans" />
</div>
</div>
<div id="gallery">
<section class="gallery">
<div class="carousel">
<ul class="carousel__track">
<li class="carousel__slide">
<img class="carousel__image image-1" src="dist/assets/images/food_1.webp" alt="yellow cream soup"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-2" src="dist/assets/images/food_2.webp" alt="porridge with fruits"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-3" src="dist/assets/images/food_3.webp" alt="octopus with potatoes"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-4" src="dist/assets/images/food_4.webp" alt="white chocolate with fruit"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-5" src="dist/assets/images/food_5.webp" alt="tenderloin with mushrooms"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-6" src="dist/assets/images/food_6.webp" alt="ice cream on cake"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-7" src="dist/assets/images/food_7.webp" alt="fish with dumplings"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-8" src="dist/assets/images/bake_1.webp" alt="french baguette"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-9" src="dist/assets/images/bake_2.webp" alt="breads" draggable="false"
loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-10" src="dist/assets/images/bake_3.webp" alt="falling flour on bread"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-11" src="dist/assets/images/alko_1.webp" alt="martini with olive"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-12" src="dist/assets/images/alko_2.webp" alt="cocktail on fire"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-13" src="dist/assets/images/alko_3.webp"
alt="close-up on cocktail in the glass" draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-14" src="dist/assets/images/alko_4.webp" alt="
squeezing lemon peel over cocktail" draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-15" src="dist/assets/images/alko_5.webp" alt="milky mocktail"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-16" src="dist/assets/images/alko_6.webp" alt="empty glass in hand"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-17" src="dist/assets/images/alko_7.webp" alt="pouring whiskey"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-18" src="dist/assets/images/alko_8.webp"
alt="squeezing lime juice in the hand" draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-19" src="dist/assets/images/alko_9.webp" alt="bottle of wine"
draggable="false" loading="lazy">
</li>
<li class="carousel__slide">
<img class="carousel__image image-20" src="dist/assets/images/alko_10.webp" alt="close-up on bottle of wine"
draggable="false" loading="lazy">
</li>
</ul>
</div>
<div class="gallery__nav">
<button class="gallery__button gallery__button--left"><</button>
<span class="gallery__current-photo">01</span> / <span class="gallery__all-photos">20</span>
<button class="gallery__button gallery__button--right">></button>
</div>
</section>
</div>
<div id="contact">
<section class="contact">
<div class="contact__greeting">
<h2 class="contact__heading header">want to <br />grab a coffee?</h2>
<p class="contact__paragraph">Start by sending a message.</p>
</div>
<div class="coffee-container">
<canvas class="coffee-canvas"></canvas>
<img src="dist/assets/images/coffee-cup.webp" alt="coffee cup" class="contact__image" />
</div>
<div class="contact__message">
<form action="/success" method="POST" data-netlify="true" data-netlify-recaptcha="true"
netlify-honeypot="bot-field" class="contact__form" netlify>
<p class="hidden">
<label>Don't fill this out if you're a human:</label><input name="bot-field">
</p>
<div class="contact__inputs">
<input type="text" name="name" placeholder="Name" class="contact__input" required />
<input type="email" name="email" placeholder="E-mail" class="contact__input" required />
</div>
<textarea name="message" placeholder="Type your message here..." cols="20" rows="10" class="contact__area"
required></textarea>
<div class="contact__recaptcha">
<div data-netlify-recaptcha="true"></div>
</div>
<button name="submit" type="submit" class="contact__button">send</button>
</form>
</div>
</section>
</div>
<footer>
<section class="collaborate">
<h3 class="collaborate__heading">let’s collaborate</h3>
<p class="collaborate__paragraph">If you are interested in hiring me, just download my cv below, check my
skills and then send me a message!</p>
<a href="dist/assets/pdf/Tomasz-Przyborowski-CV.pdf" class="collaborate__cv" target="_blank"
alt="curriculum-vitae">download cv</a>
</section>
<section>
<div class="social-footer">
<a href="https://github.com/Lynthius" target="_blank"><img src="dist/assets/images/GIT.svg" alt="github-icon"
class="social-footer__icon" /></a>
<a href="https://www.instagram.com/tomasz_przyborowski/" target="_blank"><img src="dist/assets/images/INSTA.svg"
alt="insta-icon" class="social-footer__icon" /></a>
</div>
<div class="copyright">
<p class="copyright__paragraph">Tomasz Przyborowski © 2020</p>
</div>
</section>
</footer>
<script src="dist/js/main.js"></script>
<script defer src="dist/js/gallery.js"></script>
<script src="dist/js/i18next.js"></script>
<script src="dist/js/indexTranslate.js"></script>
<script>
if (screen && screen.width >= 991) {
document.write('<script src="dist/js/pixi.js"><\/script>');
document.write('<script src="dist/js/hero.js"><\/script>');
document.write('<script src="dist/js/coffee.js"><\/script>');
document.write('<script src="dist/js/cursorCircle.js"><\/script>');
};
</script>
</body>
</html>