-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
299 lines (294 loc) · 17.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Yurii Makohon">
<meta name="descriptions" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">
<meta name="keywords" content="portfolio web developer development css html digital artist low poly 3d modeling design designer c resume cv">
<title>Portfolio- Yurii Makohon </title>
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body id="body">
<!-- Sprite -->
<svg style="display: none;">
<symbol id="brush" viewBox="0 0 512 512">
<g>
<path
d="m451.648.356c-25.777 2.712-56.79 19.872-94.811
52.46-68.786 58.958-149.927 160.756-202.185
234-38.158-5.951-78.375 10.368-102.187
40.133-43.707 54.635-7.118 103.391-48.345 146.862-7.179
7.569-4.618 20.005 4.98 24.114 67.447 28.876 153.664
10.879 194.109-31.768 24.718-26.063 38.167-64.54
31.411-100.762 72.281-55.462 172.147-140.956
228.7-211.885 31.316-39.277 47.208-70.872 48.584-96.59
1.855-34.647-25.034-60.266-60.256-56.564zm-270.205
445.155c-27.362 28.85-87.899 45.654-141.767 31.287
30.12-48.043 4.229-91.124 36.214-131.106 26.246-32.808
79.034-41.993 109.709-11.317 35.839 35.843 19.145
86.566-4.156 111.136zm3.07-148.841c7.354-10.167
18.887-25.865 33.29-44.659l49.22 49.224c-18.125
14.906-33.263 26.86-43.077
34.494-8.842-15.879-22.526-30.108-39.433-39.059zm297.435-241.354c-3.368
63.004-143.842 186.021-191.797 226.621l-53.785-53.79c39.458-49.96
155.261-191.312 218.422-197.954 16.851-1.775 28.03 8.858 27.16 25.123z"/>
</g>
</symbol>
<symbol id="code" viewBox="0 0 24 24">
<g>
<path
d="m6.75 18c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.061l2.719-2.719-2.72-2.72c-.293-.293-.293-.768 0-1.061s.768-.293 1.061 0l3.25 3.25c.293.293.293.768 0 1.061l-3.25 3.25c-.146.147-.338.22-.53.22z" />
<path d="m17.25 18h-4.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h4.5c.414 0 .75.336.75.75s-.336.75-.75.75z" />
<path
d="m21.25 23h-18.5c-1.517 0-2.75-1.233-2.75-2.75v-16.5c0-1.517 1.233-2.75 2.75-2.75h18.5c1.517 0 2.75 1.233 2.75 2.75v16.5c0 1.517-1.233 2.75-2.75 2.75zm-18.5-20.5c-.689 0-1.25.561-1.25 1.25v16.5c0 .689.561 1.25 1.25 1.25h18.5c.689 0 1.25-.561 1.25-1.25v-16.5c0-.689-.561-1.25-1.25-1.25z" />
<path d="m23.25 6h-22.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h22.5c.414 0 .75.336.75.75s-.336.75-.75.75z" />
</g>
</symbol>
<symbol id="photoshop" viewBox="0 0 455 455">
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;"
d="M149.329,144.802c-11.069,0-18.7,1.105-22.547,2.209v71.674
c4.698,1.01,10.374,1.357,18.257,1.357c29.168,0,47.3-14.758,47.3-39.669C192.214,158.079,176.794,144.802,149.329,144.802z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M0,0v455h455V0H0z M224.219,236.693
c-18.604,17.595-46.417,25.479-78.834,25.479c-7.125,0-13.654-0.252-18.698-0.978v86.844H72.354V108.445
c16.872-2.837,40.647-5.046,74.136-5.046c33.899,0,58.021,6.401,74.167,19.456c15.64,12.204,25.983,32.417,25.983,56.194
C246.64,202.794,238.758,223.007,224.219,236.693z M306.27,351.601c-23.05,0-43.609-5.047-56.916-12.299l9.743-39.196
c10.091,6.055,30.904,13.307,47.173,13.307c16.492,0,23.398-5.77,23.398-14.789c0-8.988-5.424-13.276-25.856-20.182
c-36.484-12.202-50.518-32.038-50.139-52.976c0-32.763,28.096-57.644,71.676-57.644c20.592,0,38.944,4.667,49.76,10.091
l-9.714,37.839c-8.009-4.319-23.05-10.122-38.185-10.122c-13.307,0-20.813,5.424-20.813,14.412c0,8.261,6.781,12.581,28.318,20.213
c33.52,11.446,47.552,28.443,47.932,54.333C382.646,327.477,356.63,351.601,306.27,351.601z" />
</g>
</symbol>
<symbol id="illustrator" viewBox="0 0 455 455">
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M186.199,153.546c-3.542,14.264-25.092,96.545-25.092,96.545h52.75
c0,0-23.461-82.281-26.966-96.545H186.199z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M0,0v455h455V0H0z M240.023,351.601l-18.428-61.115h-68.192l-17.074,61.115
H80.455l72.949-238.312h70.621l73.885,238.312H240.023z M372.774,351.601H318.95V178.775h53.824V351.601z M345.533,157.503
c-16.935,0-28.317-12.078-27.936-26.86c-0.381-15.583,11.002-27.244,28.353-27.244c17.352,0,28.18,11.66,28.595,27.244
C374.545,145.425,363.302,157.503,345.533,157.503z" />
</g>
</symbol>
<symbol id="blender" viewBox="0.499 48.118 511.002 415.763">
<g>
<path
d="M510.003 279.642c-2.998-21.097-10.305-41.104-21.725-59.459-9.959-16.019-22.738-30.266-37.991-42.375l.041-.038L290.133 54.731a4.569 4.569 0 0 0-.361-.287c-5.326-4.08-12.537-6.325-20.297-6.325-7.77 0-15.263 2.25-21.088 6.338-6.263 4.375-9.843 10.18-10.093 16.359-.229 5.765 2.521 11.312 7.764 15.636 10.31 8.135 20.597 16.447 30.898 24.769 9.997 8.08 20.298 16.401 30.549 24.502l-196.213-.133c-22.439 0-37.718 10.537-40.861 28.178-1.381 7.727 1.056 16.223 6.504 22.73 5.78 6.898 14.172 10.703 23.629 10.703l14.958.01c20.664 0 41.419-.051 62.146-.101l19.766-.046-178.08 131.748-.707.517C8.7 336.953 2.188 347.642.783 358.653c-1.065 8.342.881 15.965 5.63 22.053 5.66 7.258 14.497 11.25 24.885 11.25 10.205 0 20.618-3.867 29.334-10.908l96.166-78.7c-.411 3.843-.91 9.481-.853 13.573.108 6.479 2.188 19.479 5.481 30.033 6.804 21.69 18.265 41.535 34.063 58.963 16.438 18.132 36.458 32.509 59.5 42.722 24.36 10.774 50.547 16.243 77.836 16.243h.253c27.376-.066 53.646-5.622 78.085-16.519 23.08-10.334 43.091-24.769 59.467-42.898 15.778-17.517 27.223-37.395 34.014-59.067a151.124 151.124 0 0 0 6.416-33.003c.839-10.83.478-21.85-1.057-32.753zM334.82 383.601c-60.141 0-108.911-43.627-108.911-97.447 0-53.814 48.771-97.441 108.911-97.441 60.142 0 108.907 43.627 108.907 97.441.002 53.82-48.765 97.447-108.907 97.447zm62.807-106.01c.887 16.063-5.529 30.978-16.796 42.019-11.461 11.248-27.815 18.313-46.103 18.313-18.28 0-34.637-7.065-46.102-18.313-11.262-11.041-17.665-25.954-16.783-42.006.864-15.603 8.475-29.376 19.939-39.128 11.273-9.589 26.41-15.439 42.945-15.439 16.537 0 31.67 5.852 42.944 15.439 11.47 9.752 19.083 23.515 19.956 39.115z" />
</g>
</symbol>
<symbol id="profile" viewBox="-42 0 512 512.001">
<g>
<path
d="m210.351562 246.632812c33.882813 0 63.21875-12.152343 87.195313-36.128906 23.96875-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.128906 87.195312 23.980469 23.96875 53.316406 36.125 87.191406 36.125zm-65.972656-189.292968c18.394532-18.394532 39.972656-27.335938 65.972656-27.335938 25.996094 0 47.578126 8.941406 65.976563 27.335938 18.394531 18.398437 27.339844 39.980468 27.339844 65.972656 0 26-8.945313 47.578125-27.339844 65.976562-18.398437 18.398438-39.980469 27.339844-65.976563 27.339844-25.992187 0-47.570312-8.945312-65.972656-27.339844-18.398437-18.394531-27.34375-39.976562-27.34375-65.976562 0-25.992188 8.945313-47.574219 27.34375-65.972656zm0 0" />
<path
d="m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.3125-10.339844-7.808594-20.550781-13.375-30.335938-5.769532-10.15625-12.550782-19-20.160157-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.042969 5.339844-10.96875 0-22.085937-1.796876-33.042968-5.339844-11.210938-3.621094-20.300782-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.753906-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.609375 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.0625 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.777344-1.023438 19.953125-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.4375 23.730469 65.066406 23.730469h246.53125c26.621094 0 48.511719-7.984375 65.0625-23.730469 16.757813-15.945312 25.253906-37.589843 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm-44.90625 72.828125c-10.933594 10.40625-25.449218 15.464844-44.378906 15.464844h-246.527344c-18.933594 0-33.449218-5.058594-44.378906-15.460938-10.722656-10.207031-15.933594-24.140625-15.933594-42.585937 0-9.59375.316406-19.066407.949219-28.160157.617187-8.921874 1.878906-18.722656 3.75-29.136718 1.847656-10.285156 4.199219-19.9375 6.996094-28.675782 2.683593-8.378906 6.34375-16.675781 10.882812-24.667968 4.332031-7.617188 9.316407-14.152344 14.816407-19.417969 5.144531-4.925781 11.628906-8.957031 19.269531-11.980469 7.066406-2.796875 15.007812-4.328125 23.628906-4.558594 1.050781.558594 2.921875 1.625 5.953125 3.601563 6.167969 4.019531 13.277344 8.605469 21.136719 13.625 8.859375 5.648437 20.273437 10.75 33.910156 15.152344 13.941406 4.507812 28.160156 6.796875 42.273437 6.796875 14.113282 0 28.335938-2.289063 42.269532-6.792969 13.648437-4.410156 25.058594-9.507813 33.929687-15.164063 8.042969-5.140624 14.953125-9.59375 21.121094-13.617187 3.03125-1.972656 4.902344-3.042969 5.953125-3.601563 8.625.230469 16.566406 1.761719 23.636719 4.558594 7.636719 3.023438 14.121093 7.058594 19.265625 11.980469 5.5 5.261719 10.484375 11.796875 14.816406 19.421875 4.542969 7.988281 8.207031 16.289062 10.886719 24.660156 2.800781 8.75 5.15625 18.398438 7 28.675782 1.867187 10.433593 3.132812 20.238281 3.75 29.144531v.007812c.636719 9.058594.957031 18.527344.960937 28.148438-.003906 18.449219-5.214844 32.378906-15.9375 42.582031zm0 0" />
</g>
</symbol>
</svg> <!-- /Sprite -->
<div class="navbar">
<div class="navbar-items">
<a href="#">MAIN</a>
<a href="#about">ABOUT</a>
<a href="#projects">PROJECTS</a>
<a href="#contacts">CONTACTS</a>
</div>
<div class="navbar-social">
<a href="https://t.me/MIYAZAKl" target="_blank"><img src="assets/images/telegram.png" alt="telegram icon"></a>
<a href="#"><img src="assets/images/deviantart.png" alt="deviantart icon"></a>
<a href="https://github.com/yuriimakohon" target="_blank"><img src="assets/images/github.png" alt="github icon"></a>
<a href="https://www.linkedin.com/in/юрий-макогон-33ba571b3/" target="_blank"><img src="assets/images/linkedin.png" alt="linkedin icon"></a>
</div>
</div>
<!-- MAIN -->
<div id="main">
<div id="main__inner">
<div class="main-left">
<div id="greetings">
<h2>Hello,<br>my name is</h2>
<h1>Yurii</h1>
</div>
</div>
<div class="main-right" id="main-right">
<div class="short-info">
<div id="short-info-web">
<span>Web developer</span>
<svg>
<use xlink:href="#code"></use>
</svg>
<br>
I am a future web developer and web designer.<br>
Before that, I wrote projects in C.<br>
Worked with ui / ux for applications.
</div>
<div id="short-info-artist">
<span>Digital artist</span>
<svg>
<use xlink:href="#brush"></use>
</svg>
<br>
I am working with digital painting in the LowPoly style.<br>
Make portraits, installations, designs in this direction.<br>
I use Adobe Photoshop and Illustator.
</div>
</div>
<div class="btn-container">
<div class="btn">
<a href="#about">More about</a>
</div>
</div>
</div>
</div>
<div class="look-work">
<span>If you are interested in my works - look in the</span>
<div class="btn-container">
<div class="btn btn--works">
<a href="#projects">Projects</a>
</div>
</div>
</div>
</div> <!-- /MAIN -->
<!-- ABOUT -->
<div id="about">
<h1 class="section-header">About me</h1>
<div class="container">
<div class="about--inner">
<div class="about-item">
<svg>
<use xlink:href="#profile"></use>
</svg>
<span>Personal information</span>
<ul>
<li>Age: <span>18</span></li>
<li>First Name: <span>Yurii</span></li>
<li>Second Name: <span>Makohon</span></li>
<li>Citizenship: <span>Ukraine</span></li>
<li>Location: <span>Kyiv</span></li>
</ul>
</div>
<div class="about-item">
<svg>
<use xlink:href="#code"></use>
</svg>
<span>Development Skills</span>
<ul>
<li>Version control systems</li>
<li>C language</li>
<li>HMTL & CSS</li>
<li>JavaScript</li>
<li>GTK+</li>
</ul>
</div>
<div class="about-item">
<svg>
<use xlink:href="#brush"></use>
</svg>
<span>Disign Skills</span>
<ul>
<li>Knowledge of design rules</li>
<li>3D-Modeling</li>
<li>Software:
<ul>
<li>
<svg>
<use xlink:href="#photoshop"></use>
</svg>
Photoshop
</li>
<li>
<svg>
<use xlink:href="#illustrator"></use>
</svg>
Illustator
</li>
<li>
<svg>
<use xlink:href="#blender"></use>
</svg>
Blender
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="look-work">
<span>You can also download my CV</span>
<div class="btn-container">
<div class="btn btn--works">
<a>Download</a>
</div>
</div>
</div>
</div>
</div> <!-- /ABOUT -->
<!-- PROJECTS -->
<div id="projects">
<h1 class="section-header">My projects</h1>
<div class="container">
<h3>Models gallery</h3>
<div class="gallery gallery--models">
<img src="assets/images/projects/model-1.jpeg" alt="model 1">
<img src="assets/images/projects/model-2.jpeg" alt="model 2">
<img src="assets/images/projects/model-3.jpeg" alt="model 3">
</div>
<h3>Art gallery</h3>
<div class="gallery gallery--arts">
<img src="assets/images/projects/art-1.jpg" alt="art 1">
<img src="assets/images/projects/art-2.jpg" alt="art 2">
<img src="assets/images/projects/art-3.jpg" alt="art 3">
</div>
<h3>Developer projects</h3>
<div class="gallery gallery--devs">
<div class="project-item">
<div>Uchat</div>
<a href="https://github.com/unitucode/uchat" target="_blank">
<div class="img-container">
<img src="assets/images/projects/project-1.jpg" alt="project 1">
</div>
</a>
</div>
<div class="project-item">
<div>Ushell</div>
<a href="https://github.com/unitucode/ush" target="_blank">
<span class="img-container">
<img src="assets/images/projects/project-2.jpg" alt="project 2">
</span>
</a>
</div>
<div class="project-item">
<div>Uls</div>
<a href="https://github.com/yuriimakohon/uls" target="_blank">
<div class="img-container">
<img src="assets/images/projects/project-3.jpg" alt="project 3">
</div>
</a>
</div>
</div>
</div>
</div> <!-- /PROJECTS -->
<!-- CONTACTS -->
<div id="contacts">
<div class="container">
<footer>
<div class="footer-item">
<div>My contacts</div>
+380999609152<br>
</div>
<div class="footer-item">
<div>Social</div>
<div class="footer-social">
<a href="https://t.me/MIYAZAKl" target="_blank"><img src="assets/images/telegram.png" alt="telegram icon"></a>
<a href="#"><img src="assets/images/deviantart.png" alt="deviantart icon"></a>
<a href="https://github.com/yuriimakohon" target="_blank"><img src="assets/images/github.png" alt="github icon"></a>
<a href="https://www.linkedin.com/in/юрий-макогон-33ba571b3/" target="_blank"><img src="assets/images/linkedin.png" alt="linkedin icon"></a>
</div>
</div>
<div class="copyright">© 2020 UPortfolio. All rights reserved.</div>
</footer>
</div>
</div> <!-- /CONTACTS -->
</body>
</html>