Skip to content

Commit a3f6602

Browse files
MerrcurysMerrcurys
committed
major edits
1 parent 5524419 commit a3f6602

File tree

4 files changed

+112
-74
lines changed

4 files changed

+112
-74
lines changed

‎img/favicon.svg‎

Lines changed: 4 additions & 4 deletions
Loading

‎index.html‎

Lines changed: 55 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="ru">
33
<head>
4+
<!-- Основные мета-теги для SEO и отображения -->
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<!-- Open Graph мета-теги для превью в Telegram -->
7-
<meta property="og:title" content="Портфолио Merrcurys" />
7+
<meta
8+
name="description"
9+
content="Портфолио Александра Себежко (Merrcurys) - разработчика программного обеспечения. Специализация: Python, SQL, Data Science."
10+
/>
11+
<meta
12+
name="keywords"
13+
content="Merrcurys, Александр Себежко, Python разработчик, SQL разработчик, Data Science, Data Analysis, портфолио программиста, Python, SQL, разработчик ПО, студент РЭУ, студент МПТ"
14+
/>
15+
<link rel="canonical" href="https://merrcurys.ru" />
16+
17+
<!-- Open Graph мета-теги для красивого отображения при шеринге в соцсетях -->
18+
<meta property="og:title" content="Merrcurys | Портфолио разработчика" />
819
<meta
920
property="og:description"
10-
content="Привет я Александр, мой псевдоним Merrcurys и это мой сайт-портфолио."
21+
content="Портфолио Александра Себежко (Merrcurys) - разработчика программного обеспечения. Специализация: Python, SQL, Data Science."
22+
/>
23+
<meta
24+
property="og:image"
25+
content="https://merrcurys.ru/img/telegram-view.jpg"
1126
/>
12-
<meta property="og:image" content="img/telegram-view.jpg" />
27+
<!-- Настройки для отображения превью в Telegram -->
28+
<meta name="twitter:card" content="summary_large_image" />
1329
<meta property="og:url" content="https://merrcurys.ru" />
1430
<meta property="og:type" content="website" />
1531
<meta property="og:logo" content="https://merrcurys.ru/img/favicon.png" />
16-
<title>Who is Merrcurys?</title>
32+
33+
<!-- Заголовок и иконки сайта -->
34+
<title>Merrcurys | Портфолио разработчика</title>
1735
<link rel="icon" type="image/svg+xml" href="img/favicon.svg" />
1836
<link rel="icon" type="image/png" href="img/favicon.png" />
1937
<link rel="stylesheet" href="styles.css" />
20-
<!-- Yandex.Metrika counter -->
38+
39+
<!-- Скрипт Яндекс.Метрики для отслеживания посещаемости -->
2140
<script type="text/javascript">
2241
;(function (m, e, t, r, i, k, a) {
2342
m[i] =
@@ -50,15 +69,17 @@
5069
accurateTrackBounce: true,
5170
})
5271
</script>
53-
<noscript
54-
><div>
72+
<noscript>
73+
<div>
5574
<img
5675
src="https://mc.yandex.ru/watch/100462954"
5776
style="position: absolute; left: -9999px"
5877
alt=""
59-
/></div
60-
></noscript>
61-
<!-- /Yandex.Metrika counter -->
78+
/>
79+
</div>
80+
</noscript>
81+
82+
<!-- Подключение внешних библиотек и стилей -->
6283
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
6384
<link
6485
rel="stylesheet"
@@ -72,13 +93,18 @@
7293
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
7394
</head>
7495
<body>
96+
<!-- Анимированный фон с частицами -->
7597
<div id="particles-js"></div>
98+
99+
<!-- Главная секция с анимированным заголовком -->
76100
<div class="hero">
77101
<div class="glitch-wrapper">
78102
<h1 class="glitch" data-text="Who Is Merrcurys?">Who Is Merrcurys?</h1>
79103
</div>
104+
80105
<div class="hero-content">
81106
<h2 class="typing-text"></h2>
107+
<!-- Ссылки на социальные сети -->
82108
<div class="social-links">
83109
<a
84110
href="https://github.com/Merrcurys"
@@ -106,6 +132,7 @@ <h2 class="typing-text"></h2>
106132
Telegram
107133
</a>
108134
</div>
135+
<!-- Индикатор прокрутки -->
109136
<div class="scroll-indicator">
110137
<div class="chevrons">
111138
<div class="chevron"></div>
@@ -116,10 +143,11 @@ <h2 class="typing-text"></h2>
116143
</div>
117144
</div>
118145

146+
<!-- Секция навыков -->
119147
<section class="skills-section" id="skills">
120148
<h2 class="section-title animate-on-scroll">Навыки</h2>
121149
<div class="skills-container">
122-
<!-- Языки программирования -->
150+
<!-- Карточки с языками программирования -->
123151
<div class="skills-category languages animate-on-scroll">
124152
<h3>Языки программирования</h3>
125153
<div class="skills-grid">
@@ -170,7 +198,7 @@ <h4>Solidity</h4>
170198
</div>
171199
</div>
172200

173-
<!-- Базы данных -->
201+
<!-- Карточки с базами данных -->
174202
<div class="skills-category animate-on-scroll" data-aos-delay="100">
175203
<h3>Базы данных</h3>
176204
<div class="skills-grid">
@@ -192,7 +220,7 @@ <h4>MySQL</h4>
192220
</div>
193221
</div>
194222

195-
<!-- Веб-разработка -->
223+
<!-- Карточки с веб-технологиями -->
196224
<div class="skills-category animate-on-scroll" data-aos-delay="200">
197225
<h3>Веб Дизайн</h3>
198226
<div class="skills-grid">
@@ -217,7 +245,7 @@ <h4>JavaScript</h4>
217245
</div>
218246
</div>
219247

220-
<!-- Технологии -->
248+
<!-- Карточки с дополнительными технологиями -->
221249
<div class="skills-category animate-on-scroll" data-aos-delay="300">
222250
<h3>Технологии</h3>
223251
<div class="skills-grid">
@@ -241,6 +269,7 @@ <h4>Blender</h4>
241269
</div>
242270
</section>
243271

272+
<!-- Секция "Обо мне" -->
244273
<section class="about-section">
245274
<h2 class="section-title animate-on-scroll">Обо мне</h2>
246275
<div class="content-card animate-on-scroll">
@@ -253,13 +282,18 @@ <h2 class="section-title animate-on-scroll">Обо мне</h2>
253282
href="https://lyceum.yandex.ru/python"
254283
target="_blank"
255284
class="institution-link"
285+
rel="nofollow"
256286
>Яндекс Лицее</a
257287
>, где я освоил Python и основы алгоритмизации.
258288
</p>
259289
<br />
260290
<p>
261291
Сейчас я студент 3 курса
262-
<a href="https://mpt.ru" target="_blank" class="institution-link"
292+
<a
293+
href="https://mpt.ru"
294+
target="_blank"
295+
class="institution-link"
296+
rel="nofollow"
263297
>Московского приборостроительного техникума РЭУ им. Г. В.
264298
Плеханова</a
265299
>, где изучаю программирование и разработку программного
@@ -275,6 +309,7 @@ <h2 class="section-title animate-on-scroll">Обо мне</h2>
275309
href="https://www.rea.ru"
276310
target="_blank"
277311
class="institution-link"
312+
rel="nofollow"
278313
>РЭУ им Г.В. Плеханова</a
279314
>. Где изучаю языки на академическом уровне. А также изучаю
280315
экономику и прочие предметы нужные для IT.
@@ -283,6 +318,7 @@ <h2 class="section-title animate-on-scroll">Обо мне</h2>
283318
</div>
284319
</section>
285320

321+
<!-- Секция образования с временной шкалой -->
286322
<section class="education-section">
287323
<h2 class="section-title animate-on-scroll">Образование</h2>
288324
<div class="timeline">
@@ -313,6 +349,7 @@ <h3>Российский Экономический Университет им
313349
</div>
314350
</section>
315351

352+
<!-- Секция проектов -->
316353
<section class="projects-section">
317354
<h2 class="section-title animate-on-scroll">Проекты</h2>
318355
<div class="projects-grid">
@@ -364,7 +401,9 @@ <h3>Book Tracker</h3>
364401
</div>
365402
</section>
366403

404+
<!-- Подключение скриптов -->
367405
<script src="script.js"></script>
406+
<!-- Модальное окно для отображения сертификатов -->
368407
<div class="certificate-modal" onclick="closeCertificate()">
369408
<div class="close-button">&times;</div>
370409
<img src="" alt="Сертификат Python" />

‎script.js‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// Инициализация AOS
22
AOS.init({
3-
duration: 1000,
4-
once: true
3+
duration: 600,
4+
once: true,
5+
offset: 50,
6+
easing: 'ease-out'
57
});
68

79
// Инициализация particles.js только на десктопах
@@ -54,17 +56,20 @@ if (window.innerWidth > 768) {
5456
});
5557
}
5658

57-
// Заменяем старую функцию typeText на более плавную анимацию
5859
const initTextAnimation = () => {
5960
const phrases = [
6061
"SQL Developer",
61-
"Python Developer",
6262
"Data Analyst",
63+
"Python Developer",
6364
];
6465

6566
const textElement = document.querySelector('.typing-text');
6667
let currentPhraseIndex = 0;
6768

69+
// Сразу устанавливаем первую фразу без задержки
70+
textElement.textContent = phrases[2];
71+
textElement.style.opacity = '1';
72+
6873
const updateText = () => {
6974
textElement.style.opacity = '0';
7075
setTimeout(() => {
@@ -74,8 +79,9 @@ const initTextAnimation = () => {
7479
}, 500);
7580
};
7681

77-
updateText();
78-
setInterval(updateText, 3000);
82+
setTimeout(() => {
83+
setInterval(updateText, 2800);
84+
});
7985
};
8086

8187
// Анимация прогресс-баров навыков
@@ -95,7 +101,6 @@ const animateSkills = () => {
95101
});
96102
};
97103

98-
// Обновляем инициализацию
99104
document.addEventListener('DOMContentLoaded', () => {
100105
initTextAnimation();
101106
animateSkills();
@@ -111,14 +116,13 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
111116
});
112117
});
113118

114-
// Добавляем новую функцию для отслеживания направления прокрутки
119+
// Функцию для отслеживания направления прокрутки
115120
let lastScrollTop = 0;
116121

117122
window.addEventListener('scroll', () => {
118-
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
123+
const scrollTop = window.scrollY || document.documentElement.scrollTop;
119124
const scrollDirection = scrollTop > lastScrollTop ? 'down' : 'up';
120125

121-
// Находим все элементы, которые нужно анимировать
122126
const elements = document.querySelectorAll('.animate-on-scroll');
123127

124128
elements.forEach(element => {
@@ -130,7 +134,6 @@ window.addEventListener('scroll', () => {
130134
if (elementTop < windowHeight - 100 && elementBottom > 0) {
131135
element.classList.add('animate');
132136

133-
// Добавляем специальные классы в зависимости от направления прокрутки
134137
if (scrollDirection === 'up') {
135138
element.classList.add('scroll-up');
136139
} else {
@@ -164,9 +167,4 @@ document.addEventListener('keydown', function (event) {
164167
if (event.key === 'Escape') {
165168
closeCertificate();
166169
}
167-
});
168-
169-
// Предотвращение закрытия при клике на изображение
170-
document.querySelector('.certificate-modal img').addEventListener('click', function (event) {
171-
event.stopPropagation();
172170
});

0 commit comments

Comments
 (0)