-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
139 lines (134 loc) · 5.86 KB
/
portfolio.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yurii Makohon - Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&display=swap" rel="stylesheet">
<script type="text/javascript">
function show_mainright() {
document.getElementById("main-right").style.visibility = "visible";
document.getElementById("main-right").style.opacity = "1";
document.getElementById("greetings").style.right = "0%";
}
function show_shortinfo_web() {
document.getElementById("short-info-artist").style.display = "none";
document.getElementById("short-info-web").style.display = "block";
document.getElementById("background-0").style.opacity = "0";
document.getElementById("background-1").style.opacity = "0";
}
function show_shortinfo_artist() {
document.getElementById("short-info-web").style.display = "none";
document.getElementById("short-info-artist").style.display = "block";
document.getElementById("background-0").style.opacity = "0";
document.getElementById("background-1").style.opacity = "1";
}
</script>
</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>
</svg>
<div id=background-0></div>
<div id="background-1">
<svg id="brush_background">
<use xlink:href="#brush"></use>
</svg>
</div>
<div id="background-2">
<svg id="code_background">
<use xlink:href="#code"></use>
</svg>
</div>
<div class="navbar">
<div class="navbar-items">
<a href="#">MAIN</a>
<a href="#">ABOUT</a>
<a href="#">PROJECTS</a>
<a href="#">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>
<div id="main">
<div class="main-left">
<div id="greetings">
<h2>Hello,<br>my name is</h2>
<h1>Yurii</h1>
</div>
<h3>And I'm a</h3>
<input type="radio" id="check-web_developer" name="specialization" onchange="show_mainright(), show_shortinfo_web()"></input>
<label for="check-web_developer">Web Developer/</label>
<br>
<input type="radio" id="check-digital_artist" name="specialization" onchange="show_mainright(), show_shortinfo_artist()"></input>
<label for="check-digital_artist">Digital Artist/</label>
</div>
<div class="main-right" id="main-right">
<div class="short-info">
<div id="short-info-web">
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">
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>MORE ABOUT</a>
</div>
</div>
<div class="look-work">
<span>If you are interested in my work - look in the</span>
<div class="btn-container">
<div class="btn btn--works">
<a>PROJECTS</a>
</div>
</div>
</div>
</div> <!-- /MAIN -->
<div id="about">
</div> <!-- /ABOUT -->
</body>
</html>