-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (165 loc) · 9.78 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Andrey Khlivnyuk. Web developer.</title>
<meta name="description" content="I am a web Front End Developer from Saint-Petersburg, Russia. Check out my latest works and web portfolio. ">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<!-- Author's CSS -->
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<!-- -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
</head>
<body>
<div class="alert">Website still in development</div>
<section class="warning">
<h2>You’r browser too old for some features on this website.</h2>
<p>For the best experience, please, download the latest version of <a href="https://www.google.ru/chrome/browser/desktop/index.html">Chrome Browser</a> or <a href="https://www.mozilla.org/ru/firefox/new/">Firefox Browser</a> or open site on a smartphone.</p>
</section>
<div class="grid-container">
<header class="fixed-bar fixed-top">
<nav>
<ul>
<li><button class="asideTrigger" href="#"><i class="fa fa-info-circle"></i>Resume</button></li>
<li><a class="current" href="#skills">Skills</a></li>
<li><a href="#works">Work</a></li>
</ul>
</nav>
</header>
<aside>
<img src="https://via.placeholder.com/200x200" alt="Andrey Khlivnyuk photo">
<h1>Andrey Khlivnyuk</h1>
<p class="job-position">Frontend web developer</p>
<p class="double-slashes">//</p>
<p class="about-me">I am a frontend web-developer. Studying at <a href="http://en.ifmo.ru/en/"
target="_blank">ITMO
University</a> (Saint-Petersburg, Russia) at the 4th course.</p>
</aside>
<main>
<section class="skills" data-view="skills">
<h2 class="hidden">A list of what I can do</h2>
<div class="centering">
<section>
<h3>Web development</h3>
<ul>
<li>Semantic coding in <abbr title="HyperText Markup Language, version 5">HTML5</abbr>, <abbr
title="Cascading Style Sheets, version 3">CSS3</abbr></li>
<li>Preprocessors like LESS, Stylus</li>
<li>Pure JavaScript</li>
<li>JS Libraries like jQuery</li>
<li>JS Frameworks like ReactJS, VueJS</li>
<li>PHP (Object-Oriented)</li>
<li>Webpack</li>
</ul>
</section>
<section>
<h3>Programming</h3>
<ul>
<li>C++</li>
<li>C#</li>
</ul>
</section>
</div>
</section>
<section class="works" data-view="works">
<div class="centering">
<dl>
<dt>Role</dt><dd>Developer</dd>
<dt>Date</dt><dd>May</dd>
<dt>Context</dt><dd>School project</dd>
</dl>
<div class="browser">
<img src="https://via.placeholder.com/200x120" alt="" class="logotype">
<svg width="715" height="511" viewBox="0 0 715 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>browser</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(354 228)">
<g id="browser">
<g id="Rectangle 2">
<use xlink:href="#path0_fill" transform="translate(-354 -228)" fill="#FFFFFF"></use>
<mask id="mask0_outline_ins">
<use xlink:href="#path0_fill" fill="white" transform="translate(-354 -228)"></use>
</mask>
<g mask="url(#mask0_outline_ins)">
<use xlink:href="#path1_stroke_2x" transform="translate(-354 -228)"></use>
</g>
</g>
<g id="Ellipse">
<mask id="mask1_outline_ins">
<use xlink:href="#path2_fill" fill="white" transform="translate(-336 -217)"></use>
</mask>
<g mask="url(#mask1_outline_ins)">
<use xlink:href="#path3_stroke_2x" transform="translate(-336 -217)"></use>
</g>
</g>
<g id="Ellipse">
<mask id="mask2_outline_ins">
<use xlink:href="#path2_fill" fill="white" transform="translate(-313 -217)"></use>
</mask>
<g mask="url(#mask2_outline_ins)">
<use xlink:href="#path3_stroke_2x" transform="translate(-313 -217)"></use>
</g>
</g>
<g id="Ellipse">
<mask id="mask3_outline_ins">
<use xlink:href="#path2_fill" fill="white" transform="translate(-290 -217)"></use>
</mask>
<g mask="url(#mask3_outline_ins)">
<use xlink:href="#path3_stroke_2x" transform="translate(-290 -217)"></use>
</g>
</g>
</g>
</g>
<defs>
<path id="path0_fill" d="M 0 15C 0 6.71573 6.71573 0 15 0L 700 0C 708.284 0 715 6.71573 715 15L 715 34L 715 496C 715 504.284 708.284 511 700 511L 15 511C 6.71573 511 0 504.284 0 496L 0 34L 0 15Z"></path>
<path id="path1_stroke_2x" d="M 0 35.5L 715 35.5L 715 32.5L 0 32.5L 0 35.5ZM 15 3L 700 3L 700 -3L 15 -3L 15 3ZM 700 508L 15 508L 15 514L 700 514L 700 508ZM 3 496L 3 34L -3 34L -3 496L 3 496ZM 3 34L 3 15L -3 15L -3 34L 3 34ZM 712 15L 712 34L 718 34L 718 15L 712 15ZM 712 34L 712 496L 718 496L 718 34L 712 34ZM 15 -3C 5.05887 -3 -3 5.05887 -3 15L 3 15C 3 8.37258 8.37258 3 15 3L 15 -3ZM 700 3C 706.627 3 712 8.37258 712 15L 718 15C 718 5.05887 709.941 -3 700 -3L 700 3ZM 700 514C 709.941 514 718 505.941 718 496L 712 496C 712 502.627 706.627 508 700 508L 700 514ZM 15 508C 8.37258 508 3 502.627 3 496L -3 496C -3 505.941 5.05887 514 15 514L 15 508Z"></path>
<path id="path2_fill" d="M 14 7C 14 10.866 10.866 14 7 14C 3.13401 14 0 10.866 0 7C 0 3.13401 3.13401 0 7 0C 10.866 0 14 3.13401 14 7Z"></path>
<path id="path3_stroke_2x" d="M 11 7C 11 9.20914 9.20914 11 7 11L 7 17C 12.5228 17 17 12.5228 17 7L 11 7ZM 7 11C 4.79086 11 3 9.20914 3 7L -3 7C -3 12.5228 1.47715 17 7 17L 7 11ZM 3 7C 3 4.79086 4.79086 3 7 3L 7 -3C 1.47715 -3 -3 1.47715 -3 7L 3 7ZM 7 3C 9.20914 3 11 4.79086 11 7L 17 7C 17 1.47715 12.5228 -3 7 -3L 7 3Z"></path>
</defs>
</svg>
</div>
</div>
</section>
</main>
<footer class="fixed-bar fixed-bottom">
<ul id="social">
<li>Follow me on</li>
<li><a href="https://github.com/koyta" target="_blank"><i class="fa fa-github"></i>Github</a></li>
<li>and contact to</li>
<li><a href="mailto:koytaboyta@gmail.com">koytaboyta@gmail.com</a></li>
</ul>
</footer>
</div>
<!--jQuery-->
<script src="./js/vendor/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!--HTML5 Boilerplate-->
<script src="js/plugins.js"></script>
<!--Author's scripts-->
<script src="./index.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function (b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function () {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-102969289-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>