-
Notifications
You must be signed in to change notification settings - Fork 44
/
about-me.html
355 lines (340 loc) · 20 KB
/
about-me.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11; IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="About page of Dina Blaszczak, Front End Developer located in Poland.">
<meta name="author" content="Dina Blaszczak">
<title>About me - Dina Blaszczak | Front End Developer</title>
<link rel="shortcut icon" href="images/icon.ico" type="image/x-icon" /><!-- Favicon -->
<link rel="icon" href="images/icon.ico" type="image/x-icon" /><!-- Favicon -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!-- reset for browsers -->
<link rel="stylesheet" media="screen" href="css/font-awesome.min.css" /><!-- mobile stylesheet -->
<link rel="stylesheet" type="text/css" href="css/styles.css" /><!-- main stylesheet -->
<link rel="stylesheet" type="text/css" href="css/about-me-styles.css" /><!-- about-me stylesheet -->
<link rel="stylesheet" media="screen" href="css/animations.min.css" /><!-- animations stylesheet -->
<link rel="stylesheet" media="screen and (max-width: 500px)" href="css/about_media_small.css" />
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 640px) and (orientation: landscape)"
href="css/media_small_landscape.css" /><!-- main mobile stylesheet -->
<!-- about-me mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 800px)"
href="css/about_media_medium.css" /><!-- about-me mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 800px) and (max-width: 1024px)"
href="css/about_media_large.css" /><!-- about-me mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 1024px) and (max-width: 1150px)"
href="css/about_media_extra_large.css" /><!-- about-me mobile stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600" rel="stylesheet">
<!-- custom typeface -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet"><!-- custom typeface -->
</head>
<body id="body-about">
<!-- Navigation -->
<nav class="nav">
<a href="index.html#header" class="nav__logo__link"><img class="nav__logo" src="images/logo.svg" alt="logo"></a>
<span class="hamburger__name">menu</span>
<svg width="35px" height="35px" class="nav__hamburger">
<path d="M 5 5 L 33 5" class="hamburger"></path>
<path d="M 5 15 L 33 15" class="hamburger"></path>
<path d="M 5 25 L 33 25" class="hamburger"></path>
</svg>
</nav>
<div class="nav-menu">
<div class="nav-menu__cross">
<svg width="43px" height="35px">
<path d="M 5 5 L 30 29" class="nav-menu__cross-line"></path>
<path d="M 5 29 L 30 5" class="nav-menu__cross-line"></path>
</svg>
</div>
<ul class="nav-menu__list">
<li class="nav-menu__list-item">
<a href="index.html" class="nav-menu__link">Home</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#about" class="nav-menu__link">About</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#portfolio" class="nav-menu__link">Portfolio</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#contact" class="nav-menu__link">Contact</a>
</li>
</ul>
<hr class="nav-menu__separator">
<p class="nav-menu__text">Dina Blaszczak is a front-end developer and designer based in Poland.</p>
<p class="nav-menu__email">
<a href="mailto:dinablaszczak@outlook.com" class="nav-menu__link--email">dinablaszczak@outlook.com</a>
</p>
<div class="nav-menu__social-btn">
<a href="https://twitter.com/TheMalni" target="_blank"><span class="fa fa-twitter fa-2x"></span></a>
<a href="https://codepen.io/themalni" target="_blank"><span class="fa fa-codepen fa-2x"></span></a>
<a href="https://github.com/Themalni" target="_blank"><span class="fa fa-github fa-2x"></span></a>
<a href="https://youtube.com/user/TheMalni" target="_blank"><span class="fa fa-youtube fa-2x"></span></a>
<a href="#" target="_blank"><span class="fa fa-linkedin-square fa-2x"></span></a>
</div>
</div>
<div class="about-me__container">
<!-- Header -->
<header class="about-me__header">
<h1 class="about-me__title">About Me<span class="about-me__title__dot"></span></h1>
<h3 class="about-me__description">I'm a Front End Developer specialized in building websites and web apps with a
big interest in pure CSS illustrations and beautiful animations.</h3>
</header>
<main class="about-me__main">
<div class="about-me__skills__flex">
<!-- first skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/HTML_large.png" alt="HTML logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">HTML</h1>
</div>
<p class="about-me__skills__text">I'm up to building fully <span
class="about-me__skills__text--accent">responsive</span> websites and web applications using <span
class="about-me__skills__text--accent">plain HTML</span> without relying on a framework.</p>
</div>
<!-- second skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/CSS_large.png" alt="CSS logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">CSS</h1>
</div>
<p class="about-me__skills__text">CSS is my <span class="about-me__skills__text--accent">favourite tool</span>
in Web Development. I enjoy using it to <span class="about-me__skills__text--accent">beautify</span> my
projects and play with it creating <span class="about-me__skills__text--accent">CSS illustrations.</span>
</p>
</div>
<!-- sixth skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/sass_large.png" alt="Sass logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">Sass</h1>
</div>
<p class="about-me__skills__text">I'm amazed by the <span class="about-me__skills__text--accent">power</span>
of Sass. I enjoy using it to <span class="about-me__skills__text--accent">cut down</span> on lines of code
and the time of a <span class="about-me__skills__text--accent">project maintenance</span>.</p>
</div>
<!-- fith skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/bootstrap_large.png" alt="Bootstrap logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">Bootstrap</h1>
</div>
<p class="about-me__skills__text">Fully <span class="about-me__skills__text--accent">responsive website</span>
with some sliders, modal windows and a <span class="about-me__skills__text--accent">custom grid</span> are
not a problem for me to build.</p>
</div>
<!-- third skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/js_large.png" alt="JavaScript logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">JavaScript</h1>
</div>
<p class="about-me__skills__text">I've a <span class="about-me__skills__text--accent">solid</span> knowledge
of <span class="about-me__skills__text--accent">JS</span> including <span
class="about-me__skills__text--accent">ES6</span> and improve it daily by using it to <span
class="about-me__skills__text--accent">refactor</span> some old projects and building new ones.</p>
</div>
<!-- sixth skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/vue.png" alt="Vue logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">Vue</h1>
</div>
<p class="about-me__skills__text">I'm in <span class="about-me__skills__text--accent">love</span> with Vue!
This is by far my <span class="about-me__skills__text--accent">favourite</span> framework, not to mention
the beautifully written <span class="about-me__skills__text--accent">documentation.</span></p>
</div>
<!-- forth skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/react_logo.png" alt="React logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">React</h1>
</div>
<p class="about-me__skills__text">Learned <span class="about-me__skills__text--accent">fundamentals</span> of
this library and used it together with <span class="about-me__skills__text--accent">Redux</span> and <span
class="about-me__skills__text--accent">Styled Components</span> in one of
the projects.</p>
</div>
<!-- fith skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/jquery_large.png" alt="jQuery logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">jQuery</h1>
</div>
<p class="about-me__skills__text">I can <span class="about-me__skills__text--accent">manipulate DOM</span>
with jQuery along with adding some <span class="about-me__skills__text--accent">animations</span> and other
functionality to a page or an app.</p>
</div>
<!-- seventh skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/AngularJS.png" alt="AngularJS logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">AngularJS</h1>
</div>
<p class="about-me__skills__text">I know the <span class="about-me__skills__text--accent">fundamentals</span>
of this framework. I've used it in a small personal project and got to know its <span
class="about-me__skills__text--accent">structure</span> and features.</p>
</div>
<!-- seventh skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/git.png" alt="Git logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">Git</h1>
</div>
<p class="about-me__skills__text">All my latest projects are supported by <span
class="about-me__skills__text--accent">Git</span>. I use it to publish, <span
class="about-me__skills__text--accent">maintain</span> my work and for <span
class="about-me__skills__text--accent">teaming up</span> with other devs.</p>
</div>
<!-- eight skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/photoshop_large.png" alt="Photoshop logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">Photoshop</h1>
</div>
<p class="about-me__skills__text">Have been using it on some occasions to <span
class="about-me__skills__text--accent">post process</span> images and know my way around it and its <span
class="about-me__skills__text--accent">tools</span>.</p>
</div>
<!-- nineth skills item -->
<div class="about-me__skills__item">
<div class="about-me__skills__header">
<img class="about-me__skills__logo" src="images/gimp_large.png" alt="GIMP logo">
</div>
<div class="about-me__skills__middle">
<h1 class="about-me__skills__middle__name">GIMP</h1>
</div>
<p class="about-me__skills__text">I've been making video and text <span
class="about-me__skills__text--accent">tutorials</span> to share my <span
class="about-me__skills__text--accent">knowledge</span> with others. I can do a lot of <span
class="about-me__skills__text--accent">cool</span> things in GIMP!</p>
</div>
<!-- tenth skills item -->
</div><!-- END skills flex -->
<button class="about-me__skills__btn">Show more</button>
<div class="about-me__biography__flex">
<!-- Background-->
<div class="about-me__biography__item" id="item__one">
<div class="about-me__biography__header">
<img class="about-me__biography__header__icon" src="images/story_biography3.svg" alt="story icon">
<h2 class="about-me__title about-me__title--small">
Story</h2>
<h4 class="about-me__biography__description">...how it all started</h4>
</div>
<p class="about-me__biography__text"><span class="about-me__first-letter">My</span> coding journey started in
summer 2015. For years I've had an active interest in the web and modern technology. Being fascinated with
its continuous fast progress I set myself for a challenge to become a Web Developer.</p>
<p class="about-me__biography__text">I enjoy being a lifetime learner. I love creating something out of
nothing by mixing up my knowledge, skills and imagination. The more days I see behind while learning to
code, the more I fall in love with the new profession I chose to do for a living. In fact, I call it now my
"full-time" addiction.</p>
<p class="about-me__biography__text">People who know me say I am a thorough person with an eye for details. I
dislike sloppiness in real life and bring the same rules to coding.</p>
<button class="about-me__more" data-name="item-one-more">read more</button>
</div>
<!-- Coding -->
<div class="about-me__biography__item" id="item__two">
<div class="about-me__biography__header">
<img class="about-me__biography__header__icon" src="images/coding_biography.svg" alt="coding icon">
<h2 class="about-me__title about-me__title--small">Coding</h2>
<h4 class="about-me__biography__description">...a few words about</h4>
</div>
<p class="about-me__biography__text"><span class="about-me__first-letter">I</span> enjoy the process of
building the web products from scratch. Solving problems and finding the best solutions is a creative
process which often pushes us leaving our comfort zone and this is when we are growing, aren't we?</p>
<p class="about-me__biography__text">I chose Front End Development because it allows me to work closely with
design. Having background in photography and digital illustrations I am pulled towards visual aspect of web
development. It's amazing to be able to take a design and turn it into a functional product for people to
use and enjoy.</p>
<p class="about-me__biography__text">All my projects are fully responsive. Turning my work into a good user
experience on mobile devices is my priority and I take a great care of it.</p>
<button class="about-me__more" data-name="item-two-more">read more</button>
</div>
<!-- Hobbies -->
<div class="about-me__biography__item" id="item__three">
<div class="about-me__biography__header">
<img class="about-me__biography__header__icon" src="images/camera_biography.svg" alt="hobbies icon">
<h2 class="about-me__title about-me__title--small">Hobbies</h2>
<h4 class="about-me__biography__description">...life beyond coding</h4>
</div>
<p class="about-me__biography__text"><span class="about-me__first-letter">I'm</span> a wife and a mum. When
not coding I enjoy playing piano, walking the streets with my camera, having fun with my daughter, reading
books and drink tea. Thrillers and books on self development are my number one choices.</p>
<p class="about-me__biography__text">Since 2010 I've been doing stock photography and have been selling images
all over the world. Apart from taking photos I get a kick out of image post processing. I have a channel on
YouTube dedicated to GIMP users who want to learn tips and tricks on editing photos and making
illustrations.</p>
<p class="about-me__biography__text">If you have any questions or would like to have a chat about coding, just
drop me a line or two. I'm keen on meeting new like-minded people.</p>
<button class="about-me__more" data-name="item-three-more">read more</button>
</div>
</div><!-- END biography flex -->
</main>
<div class="about-me__email__container">
<img class="about-me__email__icon" src="images/mail_white.svg" alt="email icon">
<a class="about-me__email" href="mailto:dinablaszczak@outlook.com">dinablaszczak@outlook.com</a>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer__info__container">
<h2 class="footer__copyright">© Dina Blaszczak 2017</h2>
<!-- footer navigation -->
<ul class="footer-menu__list">
<li class="footer-menu__list-item">
<a href="index.html#about" class="footer-menu__link">About</a>
</li>
<li class="footer-menu__list-item">
<a href="index.html#portfolio" class="footer-menu__link">Portfolio</a>
</li>
<li class="footer-menu__list-item">
<a href="index.html#contact" class="footer-menu__link">Contact</a>
</li>
</ul>
<!-- footer social buttons -->
<div class="footer__social-btn">
<a href="https://twitter.com/TheMalni" target="_blank"><span class="fa fa-twitter fa-2x"></span></a>
<a href="https://codepen.io/themalni" target="_blank"><span class="fa fa-codepen fa-2x"></span></a>
<a href="https://github.com/Themalni" target="_blank"><span class="fa fa-github fa-2x"></span></a>
<a href="https://youtube.com/user/TheMalni" target="_blank"><span class="fa fa-youtube fa-2x"></span></a>
<a href="#" target="_blank"><span class="fa fa-linkedin-square fa-2x"></span></a>
</div>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/inert.min.js"></script><!-- inert js-->
<script type="text/javascript" src="js/scripts.min.js"></script><!-- Custom JavaScript -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-29336846-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>