Skip to content

6214 РодионовАА Лаб. 4 #433

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Brodyga63 wants to merge 1 commit into from
Closed

6214 РодионовАА Лаб. 4 #433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added avatar.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 67 additions & 0 deletions calc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вычислительный модуль | Lab 4</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="page-calc">
<div class="resume"> <header class="resume__header">
<div class="resume__title">
<div class="status-container">
<span class="status-dot"></span>
<span class="status-text">System Online</span>
</div>
<h1 class="resume__name">Calculator.exe</h1>
<p class="resume__role-container" style="color: var(--text-muted);">
Лабораторная работа №4: JavaScript Logic
</p>
</div>
</header>

<div class="terminal">
<div class="terminal__header">
<span class="terminal__dot"></span><span class="terminal__dot"></span><span class="terminal__dot"></span>
<span class="terminal__title">root@math_module:~</span>
</div>

<div class="terminal__body">
<div class="calc-form">
<div class="calc-form__row">
<span class="terminal__prompt">input_a:~$</span>
<input type="number" id="num1" class="calc-form__input" placeholder="0.00">
</div>

<div class="calc-form__row">
<span class="terminal__prompt">select_op:~$</span>
<select id="operator" class="calc-form__input calc-form__input--select">
<option value="add">Сложение (+)</option>
<option value="sub">Вычитание (-)</option>
<option value="mul">Умножение (*)</option>
<option value="div">Деление (/)</option>
</select>
</div>

<div class="calc-form__row">
<span class="terminal__prompt">input_b:~$</span>
<input type="number" id="num2" class="calc-form__input" placeholder="0.00">
</div>

<button id="calculateBtn" class="calc-form__btn">EXECUTE_CALCULATION</button>

<div class="calc-form__result" id="result">
<span class="terminal__prompt">output:~$</span> <span class="blink">_</span>
</div>
</div>
</div>
</div>

<footer class="resume__footer">
<a href="index.html" class="resume__link">← Вернуться в главное меню</a>
</footer>
</div>

<script src="script.js"></script>
</body>
</html>
192 changes: 192 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Антон Родионов | CV</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="resume">
<header class="resume__header">
<div class="resume__avatar-container">
<img src="avatar.jpg" alt="Rodionov Anton" class="resume__avatar">
</div>
<div class="resume__title">
<div class="status-container">
<span class="status-dot"></span>
<span class="status-text">Available for projects</span>
</div>
<h1 class="resume__name">Родионов Антон</h1>
<p class="resume__role-container">
<span class="resume__role"></span><span class="cursor">|</span>
</p>
<p class="resume__date">13 марта 2006 (19 лет) • Самара</p>
</div>
</header>

<main class="resume__content">
<section class="resume__section about">
<h2 class="resume__section-title">О себе</h2>
<p class="about__text">
Студент ИБАС Самарского Университета. Сочетаю технический склад ума специалиста по информационной безопасности со страстью к веб-разработке и системному администрированию.
Увлекаюсь CTF и прототипированием на Arduino. Имею опыт творческой работы в фото-салоне, что помогает мне находить баланс между функциональностью и эстетикой.
Свободное время посвящаю музыке и ведению блога, рассматривая код как еще один способ творческого самовыражения.
</p>

<div class="terminal">
<div class="terminal__header">
<span class="terminal__dot"></span><span class="terminal__dot"></span><span class="terminal__dot"></span>
<span class="terminal__title">bash — 80x24</span>
</div>
<div class="terminal__body">
<p><span class="terminal__prompt">anton@samara_univ:~$</span> whoami</p>
<p>Student, Musician, Tech-enthusiast.</p>
<p><span class="terminal__prompt">anton@samara_univ:~$</span> ls passions/</p>
<p>cyber_sec web_dev arduino music_production</p>
<p><span class="terminal__prompt">anton@samara_univ:~$</span> <span class="blink">_</span></p>
<p><span class="terminal__prompt">anton@samara_univ:~$</span> cat contacts.txt</p>
<p>TG: @Br0dy64 | Mail: rodionovaa1412@gmail.com</p>
</div>
</div>
</section>

<section class="resume__section skills">
<h2 class="resume__section-title">Навыки</h2>
<div class="skills__grid">
<div class="skills__category">
<h3>Hard Skills</h3>

<div class="skills__item">
<div class="skills__info"><span>Python / C / C++</span><span>45%</span></div>
<div class="skills__progress-bg">
<div class="skills__progress-fill" data-percent="45%"></div>
</div>
</div>

<div class="skills__item">
<div class="skills__info"><span>Linux / Git</span><span>60%</span></div>
<div class="skills__progress-bg">
<div class="skills__progress-fill" data-percent="60%"></div>
</div>
</div>

<div class="skills__item">
<div class="skills__info"><span>HTML / CSS</span><span>50%</span></div>
<div class="skills__progress-bg">
<div class="skills__progress-fill" data-percent="50%"></div>
</div>
</div>

<div class="skills__item">
<div class="skills__info"><span>Security / CTF</span><span>40%</span></div>
<div class="skills__progress-bg">
<div class="skills__progress-fill" data-percent="40%"></div>
</div>
</div>
</div>

<div class="skills__category">
<h3>Soft Skills</h3>
<ul class="skills__simple-list">
<li>Системный подход (видеть проблему целиком)</li>
<li>Аналитическое мышление</li>
<li>Креативность и находчивость</li>
<li>Стрессоустойчивость и быстрая обучаемость</li>
<li>Опыт работы с клиентами в фото-салоне</li>
</ul>
</div>
</div>
</section>
<section class="resume__section projects">
<h2 class="resume__section-title">Мои проекты</h2>
<div class="projects__grid">

<div class="projects__card">
<h4 class="projects__name">Lab 1: Базовая структура</h4>
<p class="projects__description">Создание первого HTML-документа, работа с заголовками, списками и текстом.</p>
<a href="lab1/index.html" class="resume__link">Открыть работу →</a>
</div>

<div class="projects__card">
<h4 class="projects__name">Lab 2: Стилизация и CSS</h4>
<p class="projects__description">Изучение селекторов, блочной модели и основ оформления внешнего вида.</p>
<a href="lab2/index.html" class="resume__link">Открыть работу →</a>
</div>

<div class="projects__card">
<h4 class="projects__name">Lab 3: Анимации и БЭМ</h4>
<p class="projects__description">Разработка данного резюме с использованием продвинутого CSS и анимаций.</p>
<a href="index.html" class="resume__link">Текущая страница</a>
</div>

<div class="projects__card">
<h4 class="projects__name">Lab 4: JS Калькулятор</h4>
<p class="projects__description">Интерактивный вычислительный модуль с обработкой ошибок на JavaScript.</p>
<a href="calc.html" class="resume__link">Запустить модуль →</a>
</div>

</div>
</section>
<section class="resume__section hobbies">
<h2 class="resume__section-title">Увлечения</h2>
<div class="hobbies__list">
<span>Музыка</span><span>Фотография</span><span>Блогинг</span>
<span>Arduino / Робототехника</span><span>Майнкрафт</span>
<span>Кулинария</span><span>Садоводство</span><span>Рукоделие</span>
</div>
</section>
</main>

<footer class="resume__footer">
<div class="footer__contacts">
<a href="mailto:rodionovaa1412@email.com" class="resume__link">Email</a> •
<a href="https://t.me/Br0dy64" class="resume__link">Telegram</a> •
<a href="https://github.com/Brodyga63" target="_blank" class="resume__link">GitHub</a>
</div>
<script>
// 1. Печатающая машинка
const textElement = document.querySelector(".resume__role");
const roles = ["Студент ИБАС", "Junior Web Developer", "Musician", "CTF Player"];
let roleIndex = 0; let charIndex = 0; let isDeleting = false;

function type() {
const currentRole = roles[roleIndex];
textElement.textContent = isDeleting
? currentRole.substring(0, charIndex - 1)
: currentRole.substring(0, charIndex + 1);

charIndex = isDeleting ? charIndex - 1 : charIndex + 1;
let typeSpeed = isDeleting ? 40 : 80;

if (!isDeleting && charIndex === currentRole.length) {
typeSpeed = 2000; isDeleting = true;
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
roleIndex = (roleIndex + 1) % roles.length;
typeSpeed = 500;
}
setTimeout(type, typeSpeed);
}

// 2. Прогресс-бары
function initBars() {
const bars = document.querySelectorAll('.skills__progress-fill');
bars.forEach(bar => bar.style.width = '0');
setTimeout(() => {
bars.forEach(bar => {
bar.style.width = bar.getAttribute('data-percent');
});
}, 600);
}

document.addEventListener("DOMContentLoaded", () => {
type();
initBars();
});
</script>

</body>
</html>
Binary file added lab1/image1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added lab1/image2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions lab1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лабораторная работа 1 (БЭМ)</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h2>Задание 1: Текстовый блок</h2>
<div class="text-block">
<p class="text-block__paragraph">JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).</p>
<p class="text-block__paragraph">JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.</p>
</div>


<h2>Задание 2: Картинки одна поверх другой</h2>
<div class="images">
<img src="image2.jpg" alt="Большое изображение" class="images__item images__item--size_big">
<img src="image1.jpg" alt="Малое изображение" class="images__item images__item--size_small">
</div>


<h2>Задание 3: Светофор</h2>
<div class="traffic-light">
<div class="traffic-light__light traffic-light__light--color_red"></div>
<div class="traffic-light__light traffic-light__light--color_yellow"></div>
<div class="traffic-light__light traffic-light__light--color_green"></div>
</div>


<h2>Задание 4: Лабиринт</h2>
<div class="maze">
<div class="maze__cell maze__cell--border_left maze__cell--border_top"></div>
<div class="maze__cell maze__cell--border_bottom"></div>
<div class="maze__cell maze__cell--border_top maze__cell--border_right"></div>


<div class="maze__cell maze__cell--border_bottom maze__cell--border_right maze__cell--border_left"></div>
<div class="maze__cell"></div>
<div class="maze__cell maze__cell--border_right maze__cell--border_bottom"></div>


<div class="maze__cell maze__cell--border_left maze__cell--border_bottom"></div>
<div class="maze__cell maze__cell--border_bottom"></div>
<div class="maze__cell maze__cell--border_bottom"></div>
</div>

</body>
</html>
Loading