Skip to content

Commit 9dd77ad

Browse files
XelerBXelerB
authored
Add files via upload
1 parent e8c9f7f commit 9dd77ad

File tree

3 files changed

+367
-0
lines changed

3 files changed

+367
-0
lines changed

‎DSC08491s.jpg‎

744 KB
Loading

‎index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Website business card</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=0.5, user-scalable=yes">
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Roman Moreno Kichigin</h1>
12+
<h3>Front-end developer</h3>
13+
<nav>
14+
<ul>
15+
<li><a href="#about-me">About me</a></li>
16+
<li><a href="#skills">Skills</a></li>
17+
<li><a href="#portfolio">Portfolio</a></li>
18+
<li><a href="#contact">Contact</a></li>
19+
</ul>
20+
</nav>
21+
</header>
22+
<main>
23+
<section id="about-me">
24+
<h3>About me</h3>
25+
<div class="about-content">
26+
<div class="about-text">
27+
<p>Hi! My name is Roman. I am a frontend developer specializing in modern JavaScript.</p>
28+
<p>It all started in childhood with helping loved ones master new technologies. That's when I came to the realization that I could be much more than just a little helper. Since I was 14, I have been learning programming, constantly improving my skills, and striving to bring even more benefit to others in the IT field.</p>
29+
<p>I especially enjoy showing people that creating something new and striving for a better version of yourself is not difficult. The main thing is the desire to improve and regularly make an effort.</p>
30+
<p>At work, I use JavaScript (ES6+) and React to create interfaces. For styling, I prefer CSS-in-JS (for example, Styled Components). I am currently studying project build with Webpack and Vite in depth.</p>
31+
<p>In my free time, I play creative video games and AAA projects to develop creativity, and I also play sports to maintain high mental and physical activity.</p>
32+
</div>
33+
<div class="about-photo">
34+
<img src="DSC08491s.jpg" alt="Roman Moreno Kichigin - Frontend Developer">
35+
</div>
36+
</div>
37+
</section>
38+
<section id="skills">
39+
<h3>Skills and programming knowledge</h3>
40+
<div class="skills-container">
41+
<div class="skill">
42+
<div class="skill-info">
43+
<span class="skill-name">HTML</span>
44+
<span class="skill-percent">100%</span>
45+
</div>
46+
<div class="skill-bar">
47+
<div class="skill-progress" data-width="100" style="width: 100%"></div>
48+
</div>
49+
</div>
50+
51+
<div class="skill">
52+
<div class="skill-info">
53+
<span class="skill-name">CSS</span>
54+
<span class="skill-percent">65%</span>
55+
</div>
56+
<div class="skill-bar">
57+
<div class="skill-progress" data-width="65" style="width: 65%"></div>
58+
</div>
59+
</div>
60+
61+
<div class="skill">
62+
<div class="skill-info">
63+
<span class="skill-name">JavaScript</span>
64+
<span class="skill-percent">30%</span>
65+
</div>
66+
<div class="skill-bar">
67+
<div class="skill-progress" data-width="30" style="width: 30%"></div>
68+
</div>
69+
</div>
70+
</div>
71+
</section>
72+
<section id="portfolio">
73+
<h3>Portfolio</h3>
74+
<ul>
75+
<li><a href="https://xelerb.github.io/jobtex/es/">Project 1, jobtex</a></li>
76+
<li>Project 2</li>
77+
<li>Project 3</li>
78+
<li>Project 4</li>
79+
</ul>
80+
</section>
81+
<section id="contact">
82+
<h3>Contact</h3>
83+
<div class="contact-content">
84+
<p>
85+
<a href="mailto:[email protected]">
86+
<svg class="icon" viewBox="0 0 24 24">
87+
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
88+
</svg>
89+
[email protected]
90+
</a>
91+
</p>
92+
<p>
93+
<a href="https://github.com/xelerb" target="_blank" rel="noopener">
94+
<svg class="icon" viewBox="0 0 24 24">
95+
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
96+
</svg>
97+
My GitHub
98+
</a>
99+
</p>
100+
</div>
101+
</section>
102+
</main>
103+
104+
</body>
105+
</html>

‎style.css‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
10+
min-height: 100vh;
11+
margin: 0;
12+
padding: 20px;
13+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
14+
line-height: 1.6;
15+
}
16+
17+
main, header {
18+
max-width: 800px;
19+
margin: 0 auto 20px auto;
20+
background-color: rgba(255, 255, 255, 0.95);
21+
padding: 30px;
22+
border-radius: 15px;
23+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
24+
backdrop-filter: blur(10px);
25+
}
26+
27+
body {
28+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
29+
line-height: 1.6;
30+
color: #333;
31+
padding: 20px;
32+
}
33+
34+
header {
35+
text-align: center;
36+
}
37+
38+
h1 {
39+
color: #1E3070;
40+
margin-bottom: 5px;
41+
}
42+
43+
h3 {
44+
color: #3f5871;
45+
font-weight: normal;
46+
margin-bottom: 20px;
47+
}
48+
49+
section {
50+
margin-bottom: 40px;
51+
}
52+
53+
nav ul {
54+
list-style: none;
55+
display: flex;
56+
gap: 20px;
57+
justify-content: center;
58+
}
59+
60+
nav a {
61+
color: #3498db;
62+
text-decoration: none;
63+
font-weight: bold;
64+
}
65+
66+
.about-content {
67+
display: flex;
68+
gap: 40px;
69+
align-items: flex-start;
70+
}
71+
72+
.about-text {
73+
flex: 1;
74+
}
75+
76+
.about-photo {
77+
flex-shrink: 0;
78+
}
79+
80+
.about-photo img {
81+
width: 300px;
82+
height: 450px;
83+
object-fit: cover;
84+
border-radius: 15px;
85+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
86+
}
87+
88+
@media (max-width: 768px) {
89+
.about-content {
90+
flex-direction: column;
91+
gap: 20px;
92+
}
93+
94+
.about-photo {
95+
order: -1;
96+
text-align: center;
97+
}
98+
99+
.about-photo img {
100+
width: 100%;
101+
max-width: 300px;
102+
height: auto;
103+
}
104+
}
105+
106+
.skills-container {
107+
display: flex;
108+
flex-direction: column;
109+
gap: 25px;
110+
margin-top: 30px;
111+
}
112+
113+
.skill {
114+
display: flex;
115+
flex-direction: column;
116+
gap: 8px;
117+
}
118+
119+
.skill-info {
120+
display: flex;
121+
justify-content: space-between;
122+
align-items: center;
123+
margin-bottom: 5px;
124+
}
125+
126+
.skill-name {
127+
font-weight: 600;
128+
color: #2c3e50;
129+
font-size: 1.1em;
130+
}
131+
132+
.skill-percent {
133+
font-weight: bold;
134+
color: #3498db;
135+
font-size: 0.9em;
136+
}
137+
138+
.skill-bar {
139+
width: 100%;
140+
height: 12px;
141+
background: #ecf0f1;
142+
border-radius: 10px;
143+
overflow: hidden;
144+
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
145+
}
146+
147+
.skill-progress {
148+
height: 100%;
149+
border-radius: 10px;
150+
background: linear-gradient(90deg, #3498db, #2980b9);
151+
transition: width 1.5s ease-in-out;
152+
position: relative;
153+
}
154+
155+
.skill-progress[data-width="100"] {
156+
background: linear-gradient(90deg, #27ae60, #2ecc71);
157+
}
158+
159+
.skill-progress[data-width="65"] {
160+
background: linear-gradient(90deg, #3498db, #2980b9);
161+
}
162+
163+
.skill-progress[data-width="30"] {
164+
background: linear-gradient(90deg, #e74c3c, #c0392b);
165+
}
166+
167+
@keyframes fillProgress {
168+
from { width: 0%; }
169+
to { width: attr(data-width); }
170+
}
171+
172+
@media (max-width: 768px) {
173+
.skills-container {
174+
gap: 20px;
175+
}
176+
177+
.skill-bar {
178+
height: 10px;
179+
}
180+
181+
.skill-name {
182+
font-size: 1em;
183+
}
184+
}
185+
186+
.contact-content a {
187+
display: inline-flex;
188+
align-items: center;
189+
gap: 8px;
190+
color: #3498db;
191+
text-decoration: none;
192+
font-weight: 500;
193+
transition: color 0.3s ease;
194+
}
195+
196+
.contact-content a:hover {
197+
color: #2980b9;
198+
text-decoration: underline;
199+
}
200+
201+
.icon {
202+
width: 20px;
203+
height: 20px;
204+
fill: currentColor;
205+
}
206+
207+
@keyframes fadeInUp {
208+
from {
209+
opacity: 0;
210+
transform: translateY(30px);
211+
}
212+
to {
213+
opacity: 1;
214+
transform: translateY(0);
215+
}
216+
}
217+
218+
@keyframes fadeInLeft {
219+
from {
220+
opacity: 0;
221+
transform: translateX(-30px);
222+
}
223+
to {
224+
opacity: 1;
225+
transform: translateX(0);
226+
}
227+
}
228+
229+
@keyframes fadeInRight {
230+
from {
231+
opacity: 0;
232+
transform: translateX(30px);
233+
}
234+
to {
235+
opacity: 1;
236+
transform: translateX(0);
237+
}
238+
}
239+
240+
.animate-on-scroll {
241+
opacity: 0;
242+
animation-duration: 1s;
243+
animation-fill-mode: forwards;
244+
animation-timing-function: ease-out;
245+
}
246+
247+
.fade-in-up {
248+
animation-name: fadeInUp;
249+
}
250+
251+
.fade-in-left {
252+
animation-name: fadeInLeft;
253+
}
254+
255+
.fade-in-right {
256+
animation-name: fadeInRight;
257+
}
258+
259+
.delay-1 { animation-delay: 0.2s; }
260+
.delay-2 { animation-delay: 0.4s; }
261+
.delay-3 { animation-delay: 0.6s; }
262+
.delay-4 { animation-delay: 0.8s; }

0 commit comments

Comments
 (0)