-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (140 loc) · 8.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zubal Yana's portfolio</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic" rel="stylesheet" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css' integrity='sha512-KOWhIs2d8WrPgR4lTaFgxI35LLOp5PRki/DxQvb7mlP29YZ5iJ5v8tiLWF7JLk5nDBlgPP1gHzw96cZ77oD7zQ==' crossorigin='anonymous'/>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js' integrity='sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==' crossorigin='anonymous'></script>
<link rel="stylesheet" href="./adaptive.css">
</head>
<body>
<div class="wrap">
<div class="header">
<ul class="header_pagesContainer">
<a href="#"><li>About me <div class="header_activeLi"></div></li></a>
<div class="header_pages_middleCircle"></div>
<a href="#"><li>My projects</li></a>
</ul>
<div class="header_burger">
<div class="header_burger_item"></div>
<div class="header_burger_item"></div>
<div class="header_burger_item"></div>
</div>
<div class="header_languageAndThemeContainer">
<select name="" id="header_languageSelection">
<option value="Eng">Eng.</option>
<option value="Ukr">Укр.</option>
</select>
<div class="header_themeChanger">
<div class="header_themeChanger_Circle"></div>
</div>
</div>
</div>
<div class="mainPage screen">
<div class="decoration decorationCircle1"></div>
<div class="decoration decorationCircle2"></div>
<div class="decoration decorationCircle3"></div>
<div class="decoration decorationCircle4"></div>
<div class="decoration decorationCircle5"></div>
<div class="mainPage_title">Hello everyone!</div>
<div class="mainPage_text">Hello everyone!
My name is Yana and i am web developer from Ukraine. Now, I am 14. In this portfolio, I want to show you my capabilities and achievements. I am sure you will like it!
</div>
<img class="mainPage_photo" id="myPhoto" src="./img/My photo.png" alt="">
</div>
<div class="skillsPage screen">
<div class="decoration decorationCircle6" id="decorationCircle6"></div>
<div class="decoration decorationCircle7" id="decorationCircle7"></div>
<div class="decoration decorationCircle8" id="decorationCircle8"></div>
<div class="decoration decorationCircle9" id="decorationCircle9"></div>
<div class="decoration decorationCircle10" id="decorationCircle10"></div>
<div class="decoration decorationCircle11" id="decorationCircle11"></div>
<div class="skillsPage_popupContainer">
<div class="skillsPage_popup"></div>
</div>
<div class="skillsPage_title">My professional skills:</div>
<div class="skillsPage_skillsRow">
<div class="skillsPage_skill_hoverContainer">
<div class="skillsPage_skill_question">???</div>
<div class="skillsPage_skill">
<img id="HTMLandCSSpic" src="./img/HTML and CSS.png" alt="">
<div class="skillsPage_skillName">HTML/CSS</div>
<div class="skillsPage_skillDescription">Dynamic duo of the web world.</div>
</div>
</div>
<div class="skillsPage_skill_hoverContainer">
<div class="skillsPage_skill_question">???</div>
<div class="skillsPage_skill">
<img id="JavaScript" src="./img/JavaScript.png" alt="">
<div class="skillsPage_skillName">JavaScript</div>
<div class="skillsPage_skillDescription">Language to create great functionality!</div>
</div>
</div>
<div class="skillsPage_skill_hoverContainer">
<div class="skillsPage_skill_question">???</div>
<div class="skillsPage_skill">
<div id="SCCS">SCCS</div>
<div class="skillsPage_skillName">SCSS</div>
<div class="skillsPage_skillDescription">Correct and flexible writing of CSS code.</div>
</div>
</div>
</div>
<div class="skillsPage_skillsRow" id="skillsPage_skillsRow2">
<div class="skillsPage_skill_hoverContainer">
<div class="skillsPage_skill_question">???</div>
<div class="skillsPage_skill">
<img id="Figma" src="./img/figma.png" alt="">
<div class="skillsPage_skillName">Figma</div>
<div class="skillsPage_skillDescription">Design and initial versions of my projects.</div>
</div>
</div>
<div class="skillsPage_skill_hoverContainer" id="JSON_skill">
<div class="skillsPage_skill_question">???</div>
<div class="skillsPage_skill" >
<img id="JSON" src="./img/JSON.png" alt="">
<div class="skillsPage_skillName">JSON</div>
<div class="skillsPage_skillDescription">A kind of "translator" for JavaScript.</div>
</div>
</div>
</div>
</div>
<div class="softSkills screen">
<div class="decoration decorationCircle12"></div>
<div class="decoration decorationCircle13"></div>
<div class="decoration decorationCircle14"></div>
<div class="decoration decorationCircle15"></div>
<div class="decoration decorationCircle16"></div>
<div class="decoration decorationCircle17"></div>
<div class="softSkills_title">s<br>o<br>f<br>t<br>•<br>s<br>k<br>i<br>l<br>l<br>s</div>
<div class="softSkills_skiils">
<div class="softSkills_skill">•Hight level of English ( over B1 )</div>
<div class="softSkills_skill">•Communication and Teamwork</div>
<div class="softSkills_skill">•Punctuality and correct time planning</div>
<div class="softSkills_skill">•Ability to speak in front of the public </div>
<div class="softSkills_skill">•Basic level of French, Japanese and Polish</div>
<div class="softSkills_skill">•Hight typing speed</div>
<div class="softSkills_skill">•Emotional stability</div>
</div>
</div>
<div class="contacts screen">
<div class="decoration decorationCircle18"></div>
<div class="decoration decorationCircle19"></div>
<div class="decoration decorationCircle20"></div>
<div class="decoration decorationCircle21"></div>
<div class="decoration decorationCircle22"></div>
<div class="decoration decorationCircle23"></div>
<h1 class="contacts_title">Contacts</h1>
<a href="https://t.me/yanavesq" target="_blank"><div class="contacts_socialMedia" id="telegram"><i class="fa-brands fa-telegram"></i></div></a>
<a href="https://github.com/ZubalYana" target="_blank"><div class="contacts_socialMedia" id="gitHub"><i class="fa-brands fa-github"></i></div></a>
<a href="https://www.instagram.com/yanavesq/" target="_blank"><div class="contacts_socialMedia" id="instagram"><i class="fa-brands fa-instagram"></i></div></a>
<a href="mailto:zubalana0@gmail.com" target="_blank" ><div class="contacts_socialMedia" id="gmail"><i class="fa-solid fa-envelope"></i></div></a>
<a href="tel:+380972058786" target="_blank"><div class="contacts_socialMedia" id="phone"><i class="fa-solid fa-phone"></i></div></a>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>