diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..40221e6f Binary files /dev/null and b/.DS_Store differ diff --git a/assets/images/cat-avatar.jpg b/assets/images/cat-avatar.jpg new file mode 100644 index 00000000..278024f5 Binary files /dev/null and b/assets/images/cat-avatar.jpg differ diff --git a/calculator.css b/calculator.css new file mode 100644 index 00000000..b171ab7f --- /dev/null +++ b/calculator.css @@ -0,0 +1,304 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +body { + background: linear-gradient(135deg, #5a0b4d, #8a1c7c, #c44569); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + animation: gradientShift 15s ease infinite; + background-size: 400% 400%; +} + +@keyframes gradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.calculator-container { + background-color: #ffe6e6; + border-radius: 20px; + box-shadow: 0 15px 35px rgba(139, 0, 0, 0.3); + width: 100%; + max-width: 550px; + padding: 40px; + text-align: center; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 230, 230, 0.3); +} + +.calculator-header h1 { + color: #800020; + margin-bottom: 10px; + font-size: 2.2rem; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +} + +.subtitle { + color: #a0525d; + margin-bottom: 30px; + font-size: 1rem; +} + +.input-group { + margin-bottom: 25px; + text-align: left; +} + +.input-group label { + display: flex; + align-items: center; + margin-bottom: 8px; + color: #5d001e; + font-weight: 600; + font-size: 0.95rem; + gap: 8px; +} + +.input-hint { + font-size: 0.85rem; + color: #a0525d; + margin-top: 5px; + height: 20px; +} + +input, select { + width: 100%; + padding: 15px; + border: 2px solid #d8a7a7; + border-radius: 10px; + font-size: 1rem; + transition: all 0.3s ease; + background-color: #fff5f5; +} + +input:focus, select:focus { + outline: none; + border-color: #800020; + box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.2); + background-color: white; +} + +.operation-container { + margin-bottom: 25px; + position: relative; +} + +.operation-container label { + display: flex; + align-items: center; + margin-bottom: 8px; + color: #5d001e; + font-weight: 600; + font-size: 0.95rem; + gap: 8px; +} + +.operation-icon { + font-size: 2rem; + color: #800020; + margin: 15px 0; + display: flex; + justify-content: center; + align-items: center; + height: 50px; +} + +.button-container { + display: flex; + gap: 15px; + margin-top: 20px; +} + +.calculate-btn, .clear-btn { + flex: 1; + padding: 18px; + border-radius: 10px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + border: none; + color: white; + background: linear-gradient(to right, #800020, #a52a5a); + +.calculate-btn:hover, .clear-btn:hover { + background: linear-gradient(to right, #5d001e, #800020); + transform: translateY(-2px); + box-shadow: 0 7px 14px rgba(128, 0, 32, 0.4); +} + +.calculate-btn:active, .clear-btn:active { + transform: translateY(0); +} + +.result-container { + margin-top: 30px; + background: linear-gradient(to right, #fff0f0, #ffe6e6); + border-radius: 15px; + padding: 25px; + text-align: left; + border-left: 5px solid #800020; +} + +.result-header { + display: flex; + align-items: center; + margin-bottom: 10px; + gap: 10px; +} + +.result-label { + font-size: 1.1rem; + color: #5d001e; + font-weight: 600; +} + +#result { + min-height: 3rem; + word-break: break-all; + transition: all 0.3s ease; + margin: 10px 0; +} + +#result.info { + color: #800020 !important; + font-size: 1.2rem; + line-height: 1.4; +} + +#result.info p { + margin: 5px 0; + font-weight: normal; +} + +#result.error { + color: #c41e3a !important; + font-size: 1.8rem; + font-weight: bold; +} + +#result.success { + color: #228b22 !important; + font-size: 2.5rem; + font-weight: 800; +} + +.calculation-info { + margin-top: 10px; + font-size: 0.9rem; + color: #a0525d; + min-height: 20px; +} + +@keyframes scalePulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +.result-animate { + animation: scalePulse 0.3s ease; +} + +.operation-examples { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-top: 30px; +} + +.example { + background-color: #fff5f5; + border-radius: 10px; + padding: 15px; + text-align: center; + transition: transform 0.3s ease; + border: 1px solid #d8a7a7; +} + +.example:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(128, 0, 32, 0.2); + background-color: #ffe6e6; +} + +.example-icon { + font-size: 2rem; + margin-bottom: 10px; + color: #800020; +} + +.example-title { + font-weight: 600; + color: #5d001e; + margin-bottom: 5px; +} + +.example-formula { + color: #a0525d; + font-size: 0.9rem; +} + +.calculator-footer { + margin-top: 30px; + color: #a0525d; + font-size: 0.9rem; +} + +.calculator-footer p { + margin-bottom: 5px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.footer-hint { + font-size: 0.8rem; + color: #b56576; +} + +@media (max-width: 600px) { + .calculator-container { + padding: 25px 20px; + } + + .calculator-header h1 { + font-size: 1.8rem; + } + + .operation-examples { + grid-template-columns: 1fr; + } + + .button-container { + flex-direction: column; + } + + #result.info { + font-size: 1rem; + } + + #result.error { + font-size: 1.5rem; + } + + #result.success { + font-size: 2rem; + } +}} \ No newline at end of file diff --git a/calculator.html b/calculator.html new file mode 100644 index 00000000..c099b22c --- /dev/null +++ b/calculator.html @@ -0,0 +1,110 @@ + + + + + + Простой калькулятор + + + + +
+
+

Калькулятор

+

Калькулятор для выполнения основных математических операций

+
+ +
+
+ + +
Введи любое число
+
+ +
+ + +
+ +
+
+ +
+ + +
Введи любое число
+
+ +
+ + +
+ +
+
+ + Результат: +
+
+

1) введи числа

+

2) выбери операцию

+
+
+
+ +
+
+
+ +
+
Сложение
+
1 + 1 = 2
+
+
+
+ +
+
Вычитание
+
1 - 1 = 0
+
+
+
+ +
+
Умножение
+
1 × 1 = 1
+
+
+
+ +
+
Деление
+
1 ÷ 1 = 1
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/calculator.js b/calculator.js new file mode 100644 index 00000000..43731960 --- /dev/null +++ b/calculator.js @@ -0,0 +1,265 @@ +const num1Input = document.getElementById('num1'); +const num2Input = document.getElementById('num2'); +const operationSelect = document.getElementById('operation'); +const calculateBtn = document.getElementById('calculate-btn'); +const clearBtn = document.getElementById('clear-btn'); +const resultElement = document.getElementById('result'); +const operationIcon = document.getElementById('operation-icon'); +const calculationInfo = document.getElementById('calculation-info'); +const hint1 = document.getElementById('hint1'); +const hint2 = document.getElementById('hint2'); +operationSelect.addEventListener('change', updateOperationIcon); + +function updateOperationIcon() { + const operation = operationSelect.value; + let iconClass = 'fas fa-plus'; + + switch(operation) { + case 'add': + iconClass = 'fas fa-plus'; + break; + case 'subtract': + iconClass = 'fas fa-minus'; + break; + case 'multiply': + iconClass = 'fas fa-times'; + break; + case 'divide': + iconClass = 'fas fa-divide'; + break; + } + + operationIcon.innerHTML = ``; +} + +function validateInputs() { + let isValid = true; + + if (num1Input.value.trim() === '') { + showHintError(hint1, 'Введите первое число'); + highlightInputError(num1Input); + isValid = false; + } else if (isNaN(parseFloat(num1Input.value))) { + showHintError(hint1, 'Введите корректное число'); + highlightInputError(num1Input); + isValid = false; + } else { + showHintSuccess(hint1, '✓ Корректное число'); + highlightInputSuccess(num1Input); + } + + if (num2Input.value.trim() === '') { + showHintError(hint2, 'Введите второе число'); + highlightInputError(num2Input); + isValid = false; + } else if (isNaN(parseFloat(num2Input.value))) { + showHintError(hint2, 'Введите корректное число'); + highlightInputError(num2Input); + isValid = false; + } else { + showHintSuccess(hint2, '✓ Корректное число'); + highlightInputSuccess(num2Input); + } + + return isValid; +} + +function showHintError(hintElement, message) { + hintElement.textContent = message; + hintElement.style.color = '#7a1c24ff'; +} + +function showHintSuccess(hintElement, message) { + hintElement.textContent = message; + hintElement.style.color = '#7a1c24ff'; +} + +function highlightInputError(inputElement) { + inputElement.style.borderColor = '#742027ff'; + inputElement.style.boxShadow = '0 0 0 3px rgba(255, 71, 87, 0.2)'; +} + +function highlightInputSuccess(inputElement) { + inputElement.style.borderColor = '#61e899ff'; + inputElement.style.boxShadow = '0 0 0 3px rgba(46, 213, 115, 0.2)'; +} + +function resetInputStyles() { + [num1Input, num2Input].forEach(input => { + input.style.borderColor = '#e0e0e0'; + input.style.boxShadow = 'none'; + }); + + [hint1, hint2].forEach(hint => { + hint.textContent = 'Введи любое число'; + hint.style.color = '#777'; + }); +} + +function calculate() { + + if (!validateInputs()) { + resultElement.innerHTML = 'Ошибка ввода'; + resultElement.className = 'error'; + calculationInfo.textContent = 'Пожалуйста, исправьте ошибки в полях ввода'; + return; + } + + const num1 = parseFloat(num1Input.value); + const num2 = parseFloat(num2Input.value); + const operation = operationSelect.value; + + const calculationResult = performCalculation(num1, num2, operation); + + handleCalculationResult(calculationResult, num1, num2); +} + +function performCalculation(num1, num2, operation) { + let result; + let operationSymbol = ''; + let errorMessage = ''; + + switch(operation) { + case 'add': + result = num1 + num2; + operationSymbol = '+'; + break; + case 'subtract': + result = num1 - num2; + operationSymbol = '-'; + break; + case 'multiply': + result = num1 * num2; + operationSymbol = '×'; + break; + case 'divide': + if (num2 === 0) { + return { + type: 'division_by_zero_error', + errorMessage: 'Деление на ноль невозможно', + displayMessage: 'Ошибка: Деление на ноль' + }; + } + result = num1 / num2; + operationSymbol = '÷'; + break; + default: + return { + type: 'unknown_operation_error', + errorMessage: 'Неизвестная операция', + displayMessage: 'Ошибка: Неизвестная операция' + }; + } + + return { + type: 'success', + result: result, + operationSymbol: operationSymbol + }; +} + +function handleCalculationResult(calculationResult, num1, num2) { + if (calculationResult.type === 'division_by_zero_error') { + + resultElement.innerHTML = calculationResult.displayMessage; + resultElement.className = 'error'; + calculationInfo.textContent = calculationResult.errorMessage; + highlightInputError(num2Input); + showHintError(hint2, 'Нельзя делить на ноль'); + return; + } + + if (calculationResult.type === 'unknown_operation_error') { + resultElement.innerHTML = calculationResult.displayMessage; + resultElement.className = 'error'; + calculationInfo.textContent = calculationResult.errorMessage; + return; + } + + if (calculationResult.type === 'success') { + displaySuccessResult( + calculationResult.result, + calculationResult.operationSymbol, + num1, + num2 + ); + } +} + +function displaySuccessResult(result, operationSymbol, num1, num2) { + const formattedResult = parseFloat(result.toFixed(10)); + resultElement.innerHTML = formattedResult; + resultElement.className = 'success'; + + calculationInfo.textContent = `${num1} ${operationSymbol} ${num2} = ${formattedResult}`; + + resultElement.classList.add('result-animate'); + setTimeout(() => { + resultElement.classList.remove('result-animate'); + }, 300); +} + +function clearAll() { + num1Input.value = ''; + num2Input.value = ''; + operationSelect.selectedIndex = 0; + resultElement.innerHTML = '

1) введи числа

2) выбери операцию

'; + resultElement.className = 'info'; + calculationInfo.textContent = ''; + + resetInputStyles(); + updateOperationIcon(); + + num1Input.focus(); +} + +calculateBtn.addEventListener('click', calculate); + +clearBtn.addEventListener('click', clearAll); + +function handleEnterKey(event) { + if (event.key === 'Enter') { + calculate(); + } +} + +num1Input.addEventListener('keypress', handleEnterKey); +num2Input.addEventListener('keypress', handleEnterKey); +operationSelect.addEventListener('keypress', handleEnterKey); + +function resetResultOnInput() { + if (resultElement.className !== 'info') { + resultElement.innerHTML = '

1) введи числа

2) выбери операцию

'; + resultElement.className = 'info'; + calculationInfo.textContent = ''; + resetInputStyles(); + } +} + +num1Input.addEventListener('input', resetResultOnInput); +num2Input.addEventListener('input', resetResultOnInput); +operationSelect.addEventListener('change', resetResultOnInput); + +window.addEventListener('DOMContentLoaded', function() { + updateOperationIcon(); + num1Input.focus(); + num1Input.addEventListener('focus', function() { + hint1.textContent = 'Можно использовать десятичные числа (например: 3.14)'; + }); + + num1Input.addEventListener('blur', function() { + if (num1Input.value.trim() === '') { + hint1.textContent = 'Введи любое число'; + } + }); + + num2Input.addEventListener('focus', function() { + hint2.textContent = 'Можно использовать десятичные числа (например: -2.5)'; + }); + + num2Input.addEventListener('blur', function() { + if (num2Input.value.trim() === '') { + hint2.textContent = 'Введи любое число'; + } + }); +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..8e6d1a15 --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ + + + + + + Резюме студента - Козленко Екатерина + + + + + + +
+
+
+ человек паук с котом +
+
+ +
+

Козленко Екатерина Игоревна

+
+ + Дата рождения: 8 июня 2006 года +
+

Студентка 2-го курса направления 10.05.03

+

Любитель комиксов и котов-супергероев

+
+
+ +
+ +
+ +
+

+ Увлечения +

+
    +
  • + Чтение комиксов +
    • +
  • + Просмотр фильмов ужасов +
    • +
  • + Компьютерное зрение +
    • +
  • + Веб-разработка +
    • +
  • + Цифровая графика +
    • +
+
+ +
+

+ Мои проекты +

+
+ + CSS верстка + + + CSS селекторы + + + Калькулятор + +
+

Нажмите на проект, чтобы открыть его

+
+ +
+

+ GitHub +

+ + Перейти в профиль GitHub + +

Тут можно найти мои проекты по веб-разработке

+
+ +
+

+ Контакты +

+
+ + +7 (123) 456-78-90 +
+
+ + K.E.I.@yandex.ru +
+
+ + г. Самара +
+
+ +
+ + +
+ +
+

+ О себе +

+
+

Я студентка 2-го курса, увлеченный веб-технологиями и разработкой программного обеспечения. С детства интересуюсь комиксами и историей супергероев, что вдохновило меня на изучение компьютерной графики и анимации.

+

В рамках учебных проектов я создала несколько веб-приложений, включая калькулятор с обработкой ошибок, страницы с различными CSS-эффектами и анализировала алгоритмы сортировки.

+

Моя цель — выжить.

+
+
+ +
+

+ Hard-скиллы +

+
+ HTML5/CSS3 + Python + Git/GitHub + SQL/MySQL + JavaScript + Алгоритмы +
+
+ +
+

+ Soft-скиллы +

+
+ Креативное мышление + Работа в команде + Адаптивность + Решение проблем +
+
+ +
+

+ Образование +

+

Самарский государственный аэрокосмический университет им. С. П. Королёва (СГАУ)

+

Институт Информатики и Кибернеттики, направление "Информационная Безопасность Автоматизированных Систем"

+

2024 — настоящее время (2 курс)

+
+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/lab1-css-layout.html b/lab1-css-layout.html new file mode 100644 index 00000000..be816ad2 --- /dev/null +++ b/lab1-css-layout.html @@ -0,0 +1,95 @@ + + + + + + Лабораторная работа 1: CSS верстка + + + + + +
+

Лабораторная работа 1

+

CSS верстка и позиционирование

+
+ + +
+

JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).

+

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

+
+ + +
+ Изображение 1 + Изображение 2 +
+ + +
+
+
+
+
+ + +
+ +
+
+
+ +
+
+
+ +
+
+
+
+ + Вернуться к резюме + + + \ No newline at end of file diff --git a/lab1-css-selectors.html b/lab1-css-selectors.html new file mode 100644 index 00000000..504fc12b --- /dev/null +++ b/lab1-css-selectors.html @@ -0,0 +1,114 @@ + + + + + + Лабораторная 1: CSS селекторы + + + + + +
+

Лабораторная работа 1

+

CSS селекторы и наследование

+

Изучение различных CSS селекторов и принципов наследования стилей

+
+ +
+

Популярные видеоигры:

+ +
+ +
+

Семейство элементов (CSS наследование):

+ +
+

Parent 1

+
child 1
+
child 2
+
child 3
+
child 4
+
+ +
+

Parent 3

+
child 1
+
child 2
+
+ +
+

Parent 2

+
child 1
+
child 2
+
+ +
+

Parent 3

+
child 1
+
child 2
+
child 2
+
+
+ +
+

Языки программирования:

+ +
+ + ← Вернуться к резюме + + + \ No newline at end of file diff --git a/lab2-css-layout.html b/lab2-css-layout.html new file mode 100644 index 00000000..45fdd04a --- /dev/null +++ b/lab2-css-layout.html @@ -0,0 +1,117 @@ + + + + + + Лабораторная 2: CSS верстка + + + + + +
+

Лабораторная работа 2

+

CSS верстка и позиционирование

+

Работа с CSS Grid, Flexbox, позиционированием и наложением элементов

+
+ + +
+

Задание 1: Стилизация текста

+
+

JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).

+

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

+
+
+ + +
+

Задание 2: Наложение изображений

+

Использование абсолютного позиционирования для наложения одного изображения на другое:

+
+ Изображение 1 + Изображение 2 +
+
+ + +
+

Задание 3: Светофор

+

Создание светофора с использованием Flexbox:

+
+
+
+
+
+
+ + +
+

Задание 4: Лабиринт 3x3

+

Создание лабиринта с использованием CSS Grid и границ:

+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + ← Вернуться к резюме + + + \ No newline at end of file diff --git a/lab2-css-selectors.html b/lab2-css-selectors.html new file mode 100644 index 00000000..52aafc3c --- /dev/null +++ b/lab2-css-selectors.html @@ -0,0 +1,131 @@ + + + + + + Лабораторная работа 2: CSS селекторы + + + + + +
+

Лабораторная работа 2

+

CSS селекторы и наследование

+
+ +
+

Популярные видеоигры:

+ +
+ +
+
+

Parent 1

+
child 1
+
child 2
+
child 3
+
child 4
+
+ +
+

Parent 3

+
child 1
+
child 2
+
+ +
+

Parent 2

+
child 1
+
child 2
+
+ +
+

Parent 3

+
child 1
+
child 2
+
child 2
+
+
+

Parent 3

+
child 1
+
child 2
+
child 2
+
+
+

Parent 3

+
child 1
+
child 2
+
child 2
+
+
+ +
+

+ Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение, веб-приложения, игры, алгоритмы и многое другое. + Каждый язык имеет свои особенности, синтаксис и сферу применения. Ниже представлены некоторые из наиболее известных языков: +

+ + + +

+ Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить. +

+
+ + Вернуться к резюме + + + \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 00000000..d681d230 --- /dev/null +++ b/scripts.js @@ -0,0 +1,198 @@ +function updateFooterDates() { + const now = new Date(); + const currentYear = now.getFullYear(); + + const months = [ + 'январь', 'февраль', 'март', 'апрель', 'май', 'июнь', + 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь' + ]; + + const yearElement = document.getElementById('current-year'); + if (yearElement) { + yearElement.textContent = currentYear; + } + + const dateElement = document.getElementById('current-date'); + if (dateElement) { + const currentMonth = months[now.getMonth()]; + dateElement.textContent = `${currentMonth} ${currentYear}`; + } + + console.log('Даты в подвале обновлены'); +} + +function animateSections() { + const sections = document.querySelectorAll('.section'); + + sections.forEach((section, index) => { + setTimeout(() => { + section.classList.add('section_animated'); + }, 100 + index * 150); + }); + + console.log(`Анимировано ${sections.length} секций`); +} + +function initSkillTags() { + const skillTags = document.querySelectorAll('.tag'); + + skillTags.forEach(tag => { + tag.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-3px) scale(1.05)'; + this.style.boxShadow = '0 6px 12px rgba(138, 79, 255, 0.2)'; + }); + + tag.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0) scale(1)'; + this.style.boxShadow = 'none'; + }); + + tag.addEventListener('click', function() { + this.style.transform = 'scale(0.95)'; + setTimeout(() => { + this.style.transform = ''; + }, 200); + console.log(`Нажат навык: ${this.textContent}`); + }); + }); + + console.log(`Инициализировано ${skillTags.length} тегов навыков`); +} + +function initGitHubLink() { + const githubLink = document.querySelector('.link_github'); + + if (githubLink) { + githubLink.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-3px)'; + }); + + githubLink.addEventListener('mouseleave', function() { + if (!this.classList.contains('clicked')) { + this.style.transform = 'translateY(0)'; + } + }); + + githubLink.addEventListener('click', function() { + this.classList.add('clicked'); + this.style.transform = 'translateY(-1px) scale(0.98)'; + console.log('Переход на GitHub профиль'); + }); + } +} + +function initAvatar() { + const avatarImage = document.querySelector('.header__avatar-image'); + + if (avatarImage) { + avatarImage.addEventListener('click', function() { + this.style.transform = 'scale(0.95) rotate(5deg)'; + + setTimeout(() => { + this.style.transform = 'scale(1.05)'; + }, 200); + + console.log('Аватарка кликнута!'); + }); + + avatarImage.addEventListener('load', function() { + console.log('Изображение аватарки загружено'); + }); + + avatarImage.addEventListener('error', function() { + console.error('Ошибка загрузки изображения аватарки'); + this.alt = 'Изображение не загружено'; + this.style.border = '2px dashed #a82c2e'; + }); + } +} + +function initHobbyItems() { + const hobbyItems = document.querySelectorAll('.list__item'); + + hobbyItems.forEach(item => { + item.addEventListener('mouseenter', function() { + this.style.paddingLeft = '15px'; + this.style.backgroundColor = 'rgba(138, 79, 255, 0.15)'; + }); + + item.addEventListener('mouseleave', function() { + this.style.paddingLeft = '0'; + this.style.backgroundColor = ''; + }); + + item.addEventListener('click', function() { + const hobbyText = this.textContent.trim(); + console.log(`Выбрано увлечение: ${hobbyText}`); + }); + }); +} + +function initProjectLinks() { + const projectLinks = document.querySelectorAll('.link_project'); + + projectLinks.forEach(link => { + link.addEventListener('click', function(e) { + console.log(`Открывается проект: ${this.textContent.trim()}`); + }); + + link.addEventListener('mouseenter', function() { + this.style.transform = 'translateX(5px)'; + this.style.backgroundColor = 'rgba(138, 79, 255, 0.2)'; + }); + + link.addEventListener('mouseleave', function() { + this.style.transform = 'translateX(0)'; + this.style.backgroundColor = ''; + }); + }); + + console.log(`Инициализировано ${projectLinks.length} ссылок на проекты`); +} + +function initContactItems() { + const contactItems = document.querySelectorAll('.contact-item'); + + contactItems.forEach(item => { + item.addEventListener('mouseenter', function() { + this.style.transform = 'translateX(5px)'; + this.style.backgroundColor = 'rgba(138, 79, 255, 0.2)'; + }); + + item.addEventListener('mouseleave', function() { + this.style.transform = 'translateX(0)'; + this.style.backgroundColor = ''; + }); + }); +} + +function init() { + console.log('Инициализация страницы резюме...'); + + updateFooterDates(); + animateSections(); + initSkillTags(); + initGitHubLink(); + initAvatar(); + initHobbyItems(); + initProjectLinks(); + initContactItems(); + + console.log('Страница полностью инициализирована!'); +} + +document.addEventListener('DOMContentLoaded', init); + +if (typeof module !== 'undefined' && module.exports) { + module.exports = { + updateFooterDates, + animateSections, + initSkillTags, + initGitHubLink, + initAvatar, + initHobbyItems, + initProjectLinks, + initContactItems, + init + }; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..2cc22d94 --- /dev/null +++ b/style.css @@ -0,0 +1,86 @@ +.list__items { + list-style-type: disc; + padding-left: 20px; +} + +.list__item { + color: black; + transition: color 0.5s ease; +} + +.list__item:hover { + color: #0078ff; +} + + +.family__parent { + margin-bottom: 40px; +} + +.family__title { + font-weight: bold; +} + +.family__child { + margin-left: 20px; + padding: 2px 4px; +} + +.family__parent--first .family__child { + color: red; +} + +.family__parent--second { + color: orange; +} + +.family__parent--second .family__child { + color: #b4005a; + border: 1px dotted orange; + width: 100px; +} + +.family__parent--third { + color: inherit; +} +.family__parent--third .family__child--guest { + color: purple; + margin-left: 20px; + padding: 2px 4px; + border: none; +} + +.family__parent--second ~ .family__parent--third, +.family__parent--second ~ .family__parent--third .family__child { + color: green; +} + +.languages { + max-width: 700px; + margin-top: 20px; + line-height: 1.5; +} + +.languages__link { + font-weight: bold; + text-decoration: none; + color: inherit; + position: relative; +} + +.languages__link::after { + content: " 🌐"; + font-weight: normal; +} + +.languages__list::after { + content: ""; + display: block; + width: auto; + height: 100px; + background-color: #2780E3; + margin: 15px auto 0; + background-image: url("https://ssau.ru/i/logo/logo-white-ru.svg"); + background-repeat: no-repeat; + background-position: center; +} diff --git a/styles-light.css b/styles-light.css new file mode 100644 index 00000000..0f90c8ba --- /dev/null +++ b/styles-light.css @@ -0,0 +1,613 @@ +:root { + --primary-color: #2a1b3d; + --primary-light: #1c1427; + --primary-lighter: #24182f; + --primary-dark: #120c1a; + --accent-color: #8a4fff; + --accent-light: #a67cff; + --dark-bg: #0f0a18; + --dark-border: #3a2a4d; + --text-color: #e0d6ff; + --text-light: #b8a9e0; + --tag-hard: #3a2a4d; + --tag-hard-text: #c9b5ff; + --tag-soft: #2d2140; + --tag-soft-text: #e0d6ff; + --shadow-color: rgba(138, 79, 255, 0.15); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: var(--dark-bg); + color: var(--text-color); + line-height: 1.6; + padding: 20px; + background-image: + radial-gradient(circle at 10% 20%, rgba(138, 79, 255, 0.05) 0%, transparent 20%), + radial-gradient(circle at 90% 80%, rgba(138, 79, 255, 0.05) 0%, transparent 20%); +} + +.resume { + max-width: 1100px; + margin: 0 auto; + background-color: var(--primary-color); + border-radius: 16px; + box-shadow: + 0 10px 30px var(--shadow-color), + 0 5px 15px rgba(0, 0, 0, 0.2); + overflow: hidden; + border: 1px solid var(--dark-border); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.resume:hover { + transform: translateY(-5px); + box-shadow: + 0 15px 35px var(--shadow-color), + 0 8px 20px rgba(0, 0, 0, 0.3); +} + +.header { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); + color: var(--text-color); + padding: 40px; + display: flex; + align-items: center; + flex-wrap: wrap; + position: relative; + overflow: hidden; + border-bottom: 3px solid var(--accent-light); +} + +.header::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: + radial-gradient(circle at 20% 30%, rgba(138, 79, 255, 0.08) 0%, transparent 50%), + radial-gradient(circle at 80% 70%, rgba(138, 79, 255, 0.08) 0%, transparent 50%); + z-index: 1; + pointer-events: none; +} + +.header__avatar-container { + width: 200px; + height: 200px; + border-radius: 50%; + margin-right: 40px; + position: relative; + z-index: 3; + background: var(--primary-light); + padding: 10px; + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.3), + inset 0 0 20px rgba(138, 79, 255, 0.1); +} + +.header__avatar-image { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--primary-light); + position: relative; + z-index: 2; + transition: all 0.3s ease; + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.3), + inset 0 0 20px rgba(138, 79, 255, 0.15); + filter: brightness(0.9) contrast(1.1); +} + +.header__avatar-frame { + position: absolute; + top: -10px; + left: -10px; + right: -10px; + bottom: -10px; + border-radius: 50%; + border: 2px solid var(--accent-light); + z-index: 1; + pointer-events: none; + animation: pulse 3s infinite alternate; +} + +.header__avatar-image:hover { + transform: scale(1.05) rotate(2deg); + box-shadow: + 0 8px 25px rgba(138, 79, 255, 0.25), + inset 0 0 30px rgba(138, 79, 255, 0.2); + filter: brightness(1) contrast(1.2); +} + +.header__personal-info { + flex: 1; + position: relative; + z-index: 3; +} + +.header__title { + font-size: 2.5rem; + margin-bottom: 10px; + color: var(--text-color); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + font-weight: 700; + background: linear-gradient(90deg, var(--text-color), var(--accent-color), var(--text-color)); + background-size: 200% auto; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: shimmer 3s linear infinite; +} + +.header__description { + font-size: 1.1rem; + color: var(--text-light); + margin-bottom: 5px; +} + +.header__birthday { + font-size: 1.1rem; + display: flex; + align-items: center; + margin-top: 5px; + margin-bottom: 20px; + position: relative; + z-index: 3; + padding: 10px 15px; + background: rgba(138, 79, 255, 0.1); + border-radius: 8px; + border-left: 4px solid var(--accent-color); +} + +.header__birthday-icon { + margin-right: 12px; + color: var(--accent-color); + font-size: 1.2rem; +} + +.header__birthday-text { + color: var(--text-color); +} + +.content { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 0; + background: linear-gradient(to right, var(--primary-light) 0%, var(--primary-color) 30%); +} + +.column { + padding: 35px; +} + +.column_left { + background-color: var(--primary-light); + border-right: 1px solid var(--dark-border); + position: relative; +} + +.column_right { + background-color: var(--primary-color); +} + +.section { + margin-bottom: 40px; + padding: 25px; + background: var(--primary-lighter); + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + border: 1px solid var(--dark-border); + transition: all 0.3s ease; + opacity: 0; + transform: translateY(20px); +} + +.section:hover { + box-shadow: 0 6px 20px rgba(138, 79, 255, 0.15); + transform: translateY(-2px); +} + +.column_left .section { + background: rgba(42, 27, 61, 0.8); + backdrop-filter: blur(10px); +} + +.section__title { + color: var(--accent-color); + font-size: 1.4rem; + margin-bottom: 20px; + padding-bottom: 12px; + border-bottom: 2px solid var(--accent-light); + display: flex; + align-items: center; + font-weight: 600; +} + +.section__title-icon { + margin-right: 12px; + color: var(--accent-color); + background: var(--primary-dark); + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.section__text { + margin-bottom: 10px; + color: var(--text-color); +} + +.section__text:last-child { + margin-bottom: 0; +} + +.list { + list-style-type: none; +} + +.list__item { + margin-bottom: 15px; + display: flex; + align-items: center; + padding: 12px 15px; + background: var(--primary-dark); + border-radius: 8px; + transition: all 0.3s ease; + border-left: 4px solid transparent; +} + +.list__item:hover { + background: rgba(138, 79, 255, 0.15); + border-left: 4px solid var(--accent-color); + padding-left: 20px; + transform: translateX(5px); +} + +.list__item:last-child { + margin-bottom: 0; +} + +.list__icon { + color: var(--accent-color); + margin-right: 15px; + width: 24px; + font-size: 1.2rem; + text-align: center; +} + +.tags-list { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.tag { + padding: 10px 18px; + border-radius: 25px; + font-size: 0.9rem; + font-weight: 600; + transition: all 0.3s ease; + border: 1px solid var(--dark-border); + cursor: default; + position: relative; + overflow: hidden; +} + +.tag::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(138, 79, 255, 0.2), transparent); + transition: left 0.5s; +} + +.tag:hover { + transform: translateY(-3px); + box-shadow: 0 6px 15px rgba(138, 79, 255, 0.2); + border-color: var(--accent-color); +} + +.tag:hover::before { + left: 100%; +} + +.tag_type_hard { + background: linear-gradient(135deg, var(--tag-hard) 0%, #3a2a4d 100%); + color: var(--tag-hard-text); +} + +.tag_type_soft { + background: linear-gradient(135deg, var(--tag-soft) 0%, #2d2140 100%); + color: var(--tag-soft-text); +} + +.about { + text-align: justify; + line-height: 1.8; + color: var(--text-color); +} + +.about__text { + margin-bottom: 20px; + padding: 0 5px; + position: relative; +} + +.about__text::first-letter { + font-size: 1.5em; + color: var(--accent-color); + font-weight: bold; + margin-right: 2px; +} + +.about__text:last-child { + margin-bottom: 0; +} + +.link { + display: inline-flex; + align-items: center; + text-decoration: none; + font-weight: 600; + transition: all 0.3s ease; +} + +.link_github { + background: linear-gradient(135deg, var(--accent-color) 0%, #6a3fcc 100%); + color: white; + padding: 14px 28px; + border-radius: 30px; + margin-top: 10px; + box-shadow: 0 4px 15px rgba(138, 79, 255, 0.25); + position: relative; + overflow: hidden; +} + +.link_github::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; +} + +.link_github:hover { + background: linear-gradient(135deg, #6a3fcc 0%, var(--accent-color) 100%); + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(138, 79, 255, 0.35); +} + +.link_github:hover::before { + left: 100%; +} + +.link__icon { + margin-right: 12px; + font-size: 1.3rem; +} + +.text-note { + font-size: 0.9rem; + margin-top: 10px; + color: var(--accent-color); + font-style: italic; + position: relative; + z-index: 3; + padding: 8px 12px; + background: rgba(138, 79, 255, 0.1); + border-radius: 6px; + display: inline-block; + border-left: 3px solid var(--accent-light); +} + +.footer { + text-align: center; + margin-top: 40px; + color: var(--text-light); + font-size: 0.9rem; + padding: 20px; + border-top: 1px solid var(--dark-border); + background: var(--primary-light); + border-radius: 0 0 16px 16px; +} + +.footer__text { + color: var(--text-light); + margin-bottom: 5px; +} + +.contact-item { + margin-bottom: 10px; + display: flex; + align-items: center; + padding: 10px; + background: var(--primary-dark); + border-radius: 8px; + transition: all 0.3s ease; +} + +.contact-item:hover { + background: rgba(138, 79, 255, 0.15); + transform: translateX(5px); +} + +.contact-item__icon { + color: var(--accent-color); + margin-right: 12px; + width: 24px; + font-size: 1.2rem; + text-align: center; +} + +.contact-item__text { + color: var(--text-color); +} + +/* Стили для раздела проектов */ +.projects-list { + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 10px; +} + +.link_project { + display: flex; + align-items: center; + background: var(--primary-dark); + color: var(--text-color); + text-decoration: none; + padding: 15px 20px; + border-radius: 10px; + font-weight: 600; + transition: all 0.3s ease; + border: 2px solid transparent; + border-left: 4px solid var(--accent-color); +} + +.link_project:hover { + background: rgba(138, 79, 255, 0.15); + transform: translateX(5px); + border-color: var(--accent-light); + box-shadow: 0 4px 12px rgba(138, 79, 255, 0.15); +} + +.link_project .link__icon { + margin-right: 12px; + color: var(--accent-color); + font-size: 1.2rem; + width: 24px; + text-align: center; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulse { + 0% { + border-color: var(--accent-light); + transform: scale(1); + } + 100% { + border-color: var(--accent-color); + transform: scale(1.02); + } +} + +@keyframes shimmer { + 0% { + background-position: -200% center; + } + 100% { + background-position: 200% center; + } +} + +.section_animated { + animation: fadeInUp 0.6s ease forwards; +} + +/* АДАПТИВНОСТЬ */ + +@media (max-width: 900px) { + .content { + grid-template-columns: 1fr; + background: linear-gradient(to bottom, var(--primary-light) 0%, var(--primary-color) 30%); + } + + .column_left { + border-right: none; + border-bottom: 1px solid var(--dark-border); + } + + .header { + flex-direction: column; + text-align: center; + padding: 30px 20px; + } + + .header__avatar-container { + margin-right: 0; + margin-bottom: 25px; + width: 180px; + height: 180px; + } + + .section { + padding: 20px; + } +} + +@media (max-width: 600px) { + .header { + padding: 25px 15px; + } + + .header__title { + font-size: 2rem; + } + + .column_left, .column_right { + padding: 20px 15px; + } + + .section { + padding: 15px; + margin-bottom: 25px; + } + + .tags-list { + gap: 8px; + } + + .tag { + padding: 8px 14px; + font-size: 0.85rem; + } + + .header__avatar-container { + width: 150px; + height: 150px; + } + + body { + padding: 10px; + } + + .link_github { + padding: 12px 20px; + font-size: 0.9rem; + } + + .link_project { + padding: 12px 16px; + font-size: 0.9rem; + } +} \ No newline at end of file diff --git a/styles2.css b/styles2.css new file mode 100644 index 00000000..76a581ed --- /dev/null +++ b/styles2.css @@ -0,0 +1,112 @@ +@charset "UTF-8"; + +/* Общие стили */ +body { + font-family: Arial, sans-serif; + margin: 20px; + padding: 20px; + background-color: #f5f5f5; +} + +/* Задание 1: Текст с выравниванием и цветами */ +.text-block { + background-color: #1962B3; /* Цвет фона */ + padding: 30px; + margin: 20px 0; + border-radius: 10px; + max-width: 800px; +} + +.text-block p { + color: #7DCC94; /* Цвет текста */ + text-align: justify; /* Выравнивание по ширине */ + line-height: 1.6; + margin: 15px 0; +} + +/* Задание 2: Наложение изображений */ +.image-container { + position: relative; /* Контейнер для позиционирования */ + width: 300px; + height: 200px; + margin: 30px 0; + border: 2px dashed #ccc; +} + +.image-base { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + top: 0; + left: 0; +} + +.image-overlay { + width: 200px; + height: 150px; + object-fit: cover; + position: absolute; + top: 25px; /* Центрирование по вертикали */ + left: 50px; /* Центрирование по горизонтали */ + border: 3px solid white; + box-shadow: 0 0 10px rgba(0,0,0,0.3); +} + +/* Задание 3: Светофор */ +.traffic-light { + width: 100px; + background-color: #333; + padding: 20px; + border-radius: 10px; + margin: 30px 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; +} + +.light { + width: 60px; + height: 60px; + border-radius: 50%; + border: 2px solid #666; +} + +.red { + background-color: #ff4757; +} + +.yellow { + background-color: #ffa502; +} + +.green { + background-color: #2ed573; +} + +/* Задание 4: Лабиринт 3x3, исправлен */ +.maze { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + width: 300px; + height: 300px; + background-color: rgb(138, 202, 222); +} + +.border-top { + border-top: 3px solid rgb(96, 135, 179); +} + +.border-right { + border-right: 3px solid rgb(96, 135, 179); +} + +.border-bottom { + border-bottom: 3px solid rgb(96, 135, 179); +} + +.border-left { + border-left: 3px solid rgb(96, 135, 179); +} \ No newline at end of file