-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (177 loc) · 8.96 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weronika Dominiak | Frontend Developer</title>
<meta
name="description"
content="Weronika Domniniak - Software Engineer who specializes in building seamless digital experiences"
/>
<!-- Open Graph meta tags (for better social media sharing) -->
<meta property="og:title" content="Weronika Dominiak - Web Developer" />
<meta
property="og:description"
content="I build things for the web. Web Developer specializing in resolving design problems, building smart user interfaces, and developing rich web applications."
/>
<!-- TODO get image -->
<!-- <meta property="og:image" content="" /> -->
<!-- Twitter Card meta tags (for Twitter sharing) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Weronika Dominiak - Web Developer" />
<meta
name="twitter:description"
content="I build things for the web. Web Developer specializing in resolving design problems, building smart user interfaces, and developing rich web applications."
/>
<!-- <meta name="twitter:image" content="" /> -->
<link rel="icon" href="/assets/favicon.svg" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<nav>
<button id="toggle-theme" class="theme-switch">
<svg
width="40"
height="40"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 41c10.4934.0 19-8.5066 19-19C41 11.5066 32.4934 3 22 3 11.5066 3 3 11.5066 3 22s8.5066 19 19 19zM7 22C7 13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22z"
></path>
</svg>
</button>
<!-- TODO I don't like when email is like this on the top, I should introduce contact section -->
<a class="btn btn--primary" href="mailto:[email protected]"
>Contact</a
>
</nav>
</header>
<main>
<section class="intro flex center">
<div class="intro--inner flex column gap">
<div class="bg-decor--dots"></div>
<div class="bg-decor--sphere bg-decor--sphere-l"></div>
<div class="bg-decor--sphere bg-decor--sphere-m"></div>
<div class="bg-decor--sphere bg-decor--sphere-s"></div>
<p>Hi, my name is</p>
<h1 class="decorative--secondary">Weronika Dominiak</h1>
<h2>
I build things for the web<span class="decorative--primary">.</span>
</h2>
<p>
I resolve design problems, build smart user interfaces and useful
interactions, develop rich web applications and seamless web
experiences.
</p>
<p>
Email me at
<a href="mailto:[email protected]">[email protected]</a>.
</p>
</div>
</section>
<div aria-orientation="vertical" class="social">
<ul class="social--list">
<li class="social--item">
<a
href="https://wnika.dev/gh"
aria-label="github"
target="_blank"
rel="noreferrer"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 2.24658C6.475 2.24658 2 6.72158 2 12.2466C2 16.6716 4.8625 20.4091 8.8375 21.7341C9.3375 21.8216 9.525 21.5216 9.525 21.2591C9.525 21.0216 9.5125 20.2341 9.5125 19.3966C7 19.8591 6.35 18.7841 6.15 18.2216C6.0375 17.9341 5.55 17.0466 5.125 16.8091C4.775 16.6216 4.275 16.1591 5.1125 16.1466C5.9 16.1341 6.4625 16.8716 6.65 17.1716C7.55 18.6841 8.9875 18.2591 9.5625 17.9966C9.65 17.3466 9.9125 16.9091 10.2 16.6591C7.975 16.4091 5.65 15.5466 5.65 11.7216C5.65 10.6341 6.0375 9.73408 6.675 9.03408C6.575 8.78408 6.225 7.75908 6.775 6.38408C6.775 6.38408 7.6125 6.12158 9.525 7.40908C10.325 7.18408 11.175 7.07158 12.025 7.07158C12.875 7.07158 13.725 7.18408 14.525 7.40908C16.4375 6.10908 17.275 6.38408 17.275 6.38408C17.825 7.75908 17.475 8.78408 17.375 9.03408C18.0125 9.73408 18.4 10.6216 18.4 11.7216C18.4 15.5591 16.0625 16.4091 13.8375 16.6591C14.2 16.9716 14.5125 17.5716 14.5125 18.5091C14.5125 19.8466 14.5 20.9216 14.5 21.2591C14.5 21.5216 14.6875 21.8341 15.1875 21.7341C17.1727 21.0639 18.8977 19.7881 20.1198 18.0861C21.3419 16.3842 21.9995 14.3418 22 12.2466C22 6.72158 17.525 2.24658 12 2.24658Z"
fill="#ECECFE"
/>
</svg>
</a>
</li>
<li class="social--item">
<a
href="https://wnika.dev/li"
aria-label="linkedin"
target="_blank"
rel="noreferrer"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 4.32353V19.6765C21 20.0275 20.8606 20.3641 20.6123 20.6123C20.3641 20.8606 20.0275 21 19.6765 21H4.32353C3.97251 21 3.63586 20.8606 3.38765 20.6123C3.13944 20.3641 3 20.0275 3 19.6765V4.32353C3 3.97251 3.13944 3.63586 3.38765 3.38765C3.63586 3.13944 3.97251 3 4.32353 3H19.6765C20.0275 3 20.3641 3.13944 20.6123 3.38765C20.8606 3.63586 21 3.97251 21 4.32353V4.32353ZM8.29412 9.88235H5.64706V18.3529H8.29412V9.88235ZM8.53235 6.97059C8.53375 6.77036 8.49569 6.57182 8.42035 6.3863C8.34502 6.20078 8.23387 6.03191 8.09328 5.88935C7.95268 5.74678 7.78537 5.6333 7.60091 5.5554C7.41646 5.47749 7.21846 5.43668 7.01824 5.43529H6.97059C6.5634 5.43529 6.1729 5.59705 5.88497 5.88497C5.59705 6.1729 5.43529 6.5634 5.43529 6.97059C5.43529 7.37777 5.59705 7.76828 5.88497 8.05621C6.1729 8.34413 6.5634 8.50588 6.97059 8.50588V8.50588C7.17083 8.51081 7.37008 8.47623 7.55696 8.40413C7.74383 8.33202 7.91467 8.2238 8.0597 8.08565C8.20474 7.94749 8.32113 7.78212 8.40223 7.59897C8.48333 7.41582 8.52755 7.21848 8.53235 7.01824V6.97059ZM18.3529 13.2071C18.3529 10.6606 16.7329 9.67059 15.1235 9.67059C14.5966 9.6442 14.0719 9.75644 13.6019 9.9961C13.1318 10.2358 12.7328 10.5945 12.4447 11.0365H12.3706V9.88235H9.88235V18.3529H12.5294V13.8476C12.4911 13.3862 12.6365 12.9283 12.9339 12.5735C13.2313 12.2186 13.6567 11.9954 14.1176 11.9524H14.2182C15.06 11.9524 15.6847 12.4818 15.6847 13.8159V18.3529H18.3318L18.3529 13.2071Z"
fill="#ECECFE"
/>
</svg>
</a>
</li>
<li class="social--item">
<a
href="https://wnika.dev/cp"
aria-label="codepen"
target="_blank"
rel="noreferrer"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.5446 16.5139L12.5759 23.8264C12.2015 24.0568 11.8019 24.0589 11.4241 23.8264L0.455344 16.5139C0.174094 16.3265 0 15.9916 0 15.6568V8.34435C0 8.00952 0.174094 7.6747 0.455391 7.4872L11.4241 0.173666C11.7985 -0.0567251 12.1981 -0.0588345 12.5759 0.173666L23.5447 7.4872C23.8259 7.67465 24 8.00952 24 8.34435V15.6568C24 15.9916 23.8259 16.3265 23.5446 16.5139ZM13.0312 21.0408L21.1072 15.6568L17.5045 13.2461L13.0312 16.2327V21.0408ZM10.9688 21.0408V16.2327L6.49552 13.2461L2.89284 15.6568L10.9688 21.0408ZM2.0625 13.7282L4.64733 12.0006L2.0625 10.2729V13.7282ZM10.9688 2.96034L2.89284 8.34431L6.49552 10.755L10.9688 7.7684V2.96034ZM12 9.56306L8.35711 12.0006L12 14.4381L15.6429 12.0006L12 9.56306ZM13.0312 2.96034V7.7684L17.5045 10.755L21.1072 8.34431L13.0312 2.96034ZM21.9375 10.2729L19.3527 12.0006L21.9375 13.7282V10.2729Z"
fill="#ECECFE"
/>
</svg>
</a>
</li>
<li class="social--item">
<a
href="https://wnika.dev/tw"
aria-label="twitter"
target="_blank"
rel="noreferrer"
>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.9525 8.09649C19.9647 8.27281 19.9647 8.44913 19.9647 8.62707C19.9647 14.049 15.8371 20.3021 8.28966 20.3021V20.2988C6.06013 20.3021 3.8769 19.6634 2 18.4593C2.32419 18.4983 2.65001 18.5178 2.97664 18.5186C4.82429 18.5202 6.61913 17.9003 8.07272 16.7587C6.31688 16.7254 4.77717 15.5805 4.23928 13.9092C4.85436 14.0278 5.48812 14.0035 6.09181 13.8385C4.17753 13.4518 2.80033 11.7699 2.80033 9.81658C2.80033 9.79871 2.80033 9.78165 2.80033 9.76458C3.37071 10.0823 4.00934 10.2586 4.6626 10.2781C2.85964 9.07314 2.30388 6.6746 3.39265 4.79932C5.47593 7.3628 8.54967 8.9212 11.8493 9.08614C11.5186 7.66099 11.9703 6.16759 13.0364 5.16576C14.689 3.61224 17.2882 3.69186 18.8418 5.3437C19.7607 5.16251 20.6415 4.82532 21.4475 4.34756C21.1412 5.29739 20.5001 6.10421 19.6437 6.61691C20.457 6.52103 21.2517 6.30328 22 5.97096C21.4491 6.79647 20.7552 7.51555 19.9525 8.09649Z"
fill="#ECECFE"
/>
</svg>
</a>
</li>
</ul>
</div>
</main>
<footer>
Designed and built with
<span role="img" aria-label="love"> ❤️ </span>
by
<a href="https://weronika.dev" target="_blank" rel="noopener noreferrer">
weronika.dev
</a>
</footer>
<script src="./index.js"></script>
</body>
</html>