[{"content":" Overview # ElectoLibrary is a complete client-server digital library. The frontend works with a REST API, data is stored in SQLite, the project runs in containers and covers the full user flow from book search to reservation.\nSource code on GitHub\nWhat is implemented # catalog search by title, author and publisher; filtering by availability and sorting by date or alphabet; create, view, edit and delete books; JPG cover upload with size validation; favorites, reservation and reservation cancellation; thematic collections and user sections; responsive navigation, notifications and a 404 page; SQLite persistence; API tests and reproducible Docker Compose launch. Architecture # Browser └─ Vue 3 + Vue Router ├─ views / components ├─ composable useBooks └─ API service └─ FastAPI ├─ CRUD and business operations ├─ cover uploads └─ SQLite The frontend is split into views, reusable components and an API access layer. Catalog logic is extracted into a composable, while the backend owns business operations and persistent state.\nRun # git clone https://github.com/pistaha/electolibrary-exam.git cd electolibrary-exam docker compose up --build Result # The project combines interface, API, database, file uploads, testing and containerization in one reproducible full-stack solution.\n","date":"June 19, 2026","externalUrl":null,"permalink":"/my-portfolio/en/portfolio/electolibrary/","section":"Projects","summary":"Vue 3 SPA + FastAPI + SQLite: catalog, CRUD, favorites, reservations, collections, cover uploads, tests and Docker.","title":"ElectoLibrary — full-featured digital library","type":"portfolio"},{"content":" A music service built like a real system # Spotifaychik is the flagship backend project in this portfolio. It is not a demo CRUD app: the repository contains the foundation of a music platform that can grow into a full streaming product.\nThe system manages artists, albums, tracks, users and playlists, supports search and personal scenarios, controls data access and runs in a containerized production environment. The path from HTTP request to Grafana metrics is designed as one connected application.\nSource code on GitHub\nProduct scenarios # explore artists, albums and tracks; search music globally and with advanced filters; create, edit and publish playlists; view popular tracks, artists and new releases; generate personal playlists from listening history; manage profile, friends and user statistics; upload covers and media with validation and image processing. Behind these scenarios is a full domain model: artists, releases, tracks, playlists, listening history, roles, permissions, sessions and security audit events.\nScale in numbers # Area Implementation API 11 controllers for music, users, auth, files, search, audit and diagnostics Domain 18 entities, including Track, Playlist, UserSession, Permission and SecurityAuditLog Application layer Commands, queries, DTOs, validators, mapping and pipeline behaviors Quality 50+ test files for domain, handlers, API, infrastructure and validation Production PostgreSQL, Docker, Nginx, TLS, API replicas, CI/CD, Prometheus, Grafana and Loki Architecture # MusicService.API ├─ controllers, authentication, authorization ├─ files, diagnostics, Swagger └─ HTTP boundary ↓ MusicService.Application ├─ CQRS commands and queries ├─ handlers, validators, DTOs and mapping └─ logging / validation pipeline ↓ MusicService.Domain └─ music, users, permissions, sessions and audit ↓ MusicService.Infrastructure ├─ EF Core, PostgreSQL and migrations ├─ password hashing and security services └─ file storage and background processes The layers keep business logic independent from HTTP and database details. CQRS separates reads from writes, while logging and validation are handled through shared pipeline behaviors.\nSecurity and operations # Authentication is based on JWT. Authorization goes beyond simple roles: the project includes permissions, role management, resource ownership checks and dedicated authorization handlers. Passwords are hashed with BCrypt, sessions are tracked separately, and sensitive actions are written to an asynchronous security audit log.\nThe production setup uses Nginx for TLS termination and load balancing, several ASP.NET Core API replicas, PostgreSQL with persistent storage, Prometheus metrics, Grafana dashboards, Loki logs and Docker event monitoring. Each backend instance returns X-Instance-Id, so round-robin balancing can be verified directly.\nRun # git clone https://github.com/pistaha/spotifaychik.git cd spotifaychik cp .env.example .env ./start.sh After startup, the API, Swagger, Prometheus metrics and Grafana dashboards are available through the prepared infrastructure.\nResult # Spotifaychik demonstrates system-level backend development: domain design, security, media handling, tests, CI/CD, monitoring and scalable deployment in one coherent project.\n","date":"May 29, 2026","externalUrl":null,"permalink":"/my-portfolio/en/portfolio/spotifaychik/","section":"Projects","summary":"A large ASP.NET Core music backend: catalog, users, playlists, search, security, PostgreSQL, tests and production infrastructure with load balancing and observability.","title":"Spotifaychik — music platform and production infrastructure","type":"portfolio"},{"content":" Overview # Algorithms \u0026amp; Data Structures Labs is a public repository with algorithms and data structures coursework. It is not a single small exercise: it is a set of independent C#/.NET console projects where foundational ADTs are implemented manually, without List\u0026lt;T\u0026gt;, Dictionary\u0026lt;TKey,TValue\u0026gt;, Stack\u0026lt;T\u0026gt;, Queue\u0026lt;T\u0026gt; or other built-in collections.\nRepository: github.com/pistaha/algorithms-data-structures-labs\nThe main branch works as a navigation page, while individual labs live in separate branches. Each lab has its own project, README, source code and docs/task.txt with the original assignment.\nWhat it demonstrates # ADT design through a public interface and multiple internal representations; array storage, linked structures, cursor positions and manual relation management; manual implementations of stacks, queues, lists, map/dictionary and hash tables; collision handling through separate chaining, closed hashing and linear probing; topological sorting with impossible-order detection; many-to-many modeling through a multilist and two linked rings; deterministic console demos for checking algorithm behavior locally. Labs # Branch Topic Implementation Link lab1 List ADT Doubly linked list, cursor-based list, duplicate removal for address book records Open branch lab2 Stack / Queue / Map ADT Array stack, linked stack, list-backed stack, array and circular queues, linked-list map Open branch lab3 Dictionary ADT Open hashing, closed hashing and linear probing Open branch lab4 Partial Order / Topological Sort Dependency storage, topological sorting and impossible ordering detection Open branch lab5 Student-Course Multilist Student/course hash tables and bidirectional many-to-many registration nodes Open branch Branch breakdown # lab1: List ADT # The first lab compares two implementations of the same abstract list: a doubly linked list and a cursor model over an array. The demo removes duplicate address book entries, while records store fields as fixed-size char[] values.\nKey files:\nalgo 1/dvus.cs; algo 1/curs.cs; algo 1/AddressBookEntry.cs; algo 1/Program.cs. lab2: Stack, Queue, List and Map # The second lab expands the ADT set and shows the same behavior through different storage strategies. The stack is implemented through an array, linked nodes and a custom list. The queue is implemented through an array, a circular linked structure and a list. The branch also includes a linked-list map with assignment, lookup and printing.\nlab3: Dictionary ADT and hashing # The third lab focuses on dictionary/set behavior through hash tables. It includes open hashing with collision chains and closed hashing with linear probing. The demo uses two sets, goodguys and badguys, with commands that update and check the status of a name.\nDemo commands:\nF name moves a name to the positive set; U name moves a name to the negative set; ? name checks status; P prints both sets; E exits. lab4: partial order and topological sorting # The fourth lab converts a partially ordered set into a linear order when possible. Constraints like x \u0026lt; y are stored as integer pairs and then transformed into an internal dependency structure. The algorithm selects valid next elements and detects cases where no linear order can be produced.\nlab5: student-course multilist # The fifth lab models a many-to-many relationship without a database or collection framework. Students and courses are stored in separate closed-hashing tables, while each registration is a node that belongs to two rings at once: courses of a student and students of a course.\nSupported operations:\nadd a student to a course; remove a student from a specific course; remove a student from all courses; remove all students from a course; print all students of a course; print all courses of a student. Engineering notes # The main value of the repository is that the data structures are implemented at a low level. The code makes array bounds, Full / Empty states, node deletion, pointer-like traversal, collision handling and bidirectional multilist consistency explicit. It complements the portfolio\u0026rsquo;s full-stack and backend projects by showing the algorithmic foundation underneath.\nStack # C#; .NET 8 / .NET 10; console applications; manual ADTs without built-in collections; Git branches as separate lab snapshots. Run # git clone https://github.com/pistaha/algorithms-data-structures-labs.git cd algorithms-data-structures-labs git switch lab1 dotnet run --project \u0026#34;algo 1/algo 1.csproj\u0026#34; git switch lab3 dotnet run --project \u0026#34;algo3/algo3.csproj\u0026#34; git switch lab5 dotnet run --project \u0026#34;algo 5/algo 5.csproj\u0026#34; Result # The repository adds a dedicated algorithms and data structures track to the portfolio. It shows competence beyond application development: ADTs, hashing, graph-like dependencies and manual in-memory relationship modeling.\n","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/portfolio/algorithms-data-structures-labs/","section":"Projects","summary":"A C#/.NET algorithms and data structures repository covering List, Stack, Queue, Map, Dictionary, hashing, topological sorting and multilist.","title":"Algorithms \u0026 Data Structures Labs — data structure coursework","type":"portfolio"},{"content":" Collection # A collection of visual work, from commissioned presentations and brand materials to typography studies, urban advertising, posters and e-commerce interfaces. Open any project directly on this page to view its fullscreen prototype with animation, transitions and clickable flows.\nLaunch prototype Client project · 2026 Mita Garden Hills — Luxury Residential Landing Page \u0026amp; 3D Experience A premium responsive landing page for a residential development in Minato, Tokyo, featuring an interactive 3D Masterplan. About the project A concept that translates Mita Garden Hills’ architecture, gardens, privacy and heritage into a calm digital experience shaped by Japanese quiet luxury.\nMy role: UX/UI design, art direction, desktop and mobile layouts, visual system, typography, 3D interface states, UI components and interactive prototype presentation.\nScope: desktop and mobile landing pages; Hero, Concept, Garden, Architecture, Facilities, Residences, Location and Contact; an interactive 3D Masterplan with building cards, filters, zoom controls and day/night states; UI kit, forms and responsive interactions.\nDesign by pistaha. Mita Garden Hills name, logo and related brand assets belong to their respective owners.\nDesktop Mobile Launch prototype Client project · 2026 Jennyhouse Salon — Business Card Design A double-sided business card for Jennyhouse Salon — a clean, premium print piece reflecting the brand’s visual identity. About the project Created to be easy to read while conveying the refined character of Jennyhouse Salon.\nMy role: business card design, layout, typography and presentation mockup.\nScope: front side with logo, reverse side with contact details and QR code, colour palette selection and print mockup visualisation.\nDesign by pistaha. Logo and brand assets belong to Jennyhouse Salon.\nOpen in Figma Launch prototype Client project · 2026 IWEIYI.com — Brand Presentation Design A 12-slide brand presentation for IWEIYI.com, an online flowers and gifts delivery platform. About the project The presentation introduces the website’s key services, product categories, delivery experience and customer care in a clear, visually consistent format aligned with the brand’s existing identity.\nMy role: presentation design, visual system, layout, information hierarchy and art direction.\nSource materials: official website content and product imagery.\nScope: brand overview, product categories, occasions, delivery, ordering flow, payments, customer care and contacts.\nDesign by pistaha. Website design and brand assets belong to IWEIYI.com.\nOpen in Figma Launch prototype Presentation Swiss Style A presentation about Swiss graphic design, built with its own principles: modular grid, geometry, contrast and functional typography. Open in Figma Launch prototype Social poster Your Trace A series of social posters about pollution. The visual metaphor of a trace shows personal responsibility for the planet. Open in Figma Launch prototype Urban advertising campaign Vyborg: Circle of Time A landing page for Vyborg’s advertising campaign and a poster series turn the city’s identity into a cohesive invitation, revealing a visitor’s route through architecture, cultural memory and northern atmosphere. Open in Figma Launch prototype Typography study Malevich Suprematism A study of type selection for photography and work with black-and-white images, graphics and high-contrast composition. Open in Figma Launch prototype Editorial design The Selena Gomez Four pages in different visual styles connected by one story. The key focus is expressive typography. Open in Figma Launch prototype Type design Custom Cyrillic A custom Cyrillic typeface: letter construction, character system, numerals and testing the typeface in layout. Open in Figma Launch prototype Web design Velvet Music A music store interface designed from another website’s grid and adapted into an original visual direction. Open in Figma Figma Open in Figma Loading interactive prototype ","date":"June 22, 2026","externalUrl":null,"permalink":"/my-portfolio/en/portfolio/figma-prototypes/","section":"Projects","summary":"Ten Figma projects: from a premium landing page with a 3D experience and a commissioned business card to urban campaigns, typography and web design.","title":"Figma Projects","type":"portfolio"},{"content":" О работе # В рамках лабораторной работы подготовлена Software Requirements Specification для веб-сервиса «ЛС ГЭОТАР». Это аналитический проект: я исследовал существующий продукт и формализовал требования к справочнику лекарственных средств, модулю оценки рисков фармакотерапии, подписке, корпоративному доступу и API.\nВариант: 467289\nФормат: SRS, use cases, acceptance criteria, COCOMO II\nИтоговая оценка: 19,5 человеко-месяца / 3120 человеко-часов\nРабота описывает требования и проектные оценки. Она не означает участие в разработке официального сервиса «ЛС ГЭОТАР».\nИсследованный продукт # Сервис предоставляет справочную информацию о препаратах, действующих веществах, БАД и гомеопатии. Отдельный сценарий — анализ лекарственных назначений: взаимодействия, противопоказания и дублирование эффектов.\nНа главной странице выделены ключевые продуктовые направления: универсальный поиск, энциклопедия лекарственных средств, оценка рисков, подписка и корпоративный доступ.\nЦель спецификации # Перевести возможности продукта в проверяемую систему требований, пригодную для дальнейшего проектирования, оценки сроков и приёмки. Для каждого ключевого требования определены:\nназначение и источник; приоритет; сложность и риски; измеримые критерии приёмки; оценка трудозатрат по COCOMO II. Пользователи и заинтересованные стороны # Роль Основная задача Требуемый доступ Гость Поиск и просмотр базовой лекарственной информации Бесплатный Зарегистрированный пользователь Расширенные лимиты и персональные сценарии Авторизованный Пользователь PRO Анализ назначений и расширенный функционал Платная подписка Корпоративный пользователь Интеграция с МИС и массовый доступ Организационный / API Администратор или редактор Управление данными, ролями, тарифами и аудитом Привилегированный Область продукта # справочник препаратов, веществ, БАД и гомеопатических средств; поиск по названию и характеристикам; классификаторы АТХ и МКБ-10; карточки лекарственных препаратов; оценка рисков фармакотерапии; регистрация, вход и восстановление доступа; подписки и тарифные ограничения; корпоративный API и интеграция с МИС; административное управление и аудит. Функциональные требования # ID Требование Приоритет Критерий приёмки Оценка FR-1 Универсальный поиск по препаратам, веществам, БАД и гомеопатии Must have Автодополнение с трёх символов; 95% запросов быстрее двух секунд 1,2 чел.-мес. FR-2 Структурированная карточка лекарственного препарата Must have Основные разделы корректны; открытие быстрее двух секунд 1,3 чел.-мес. FR-3 Навигация по АТХ, МКБ-10, компаниям и связанным сущностям Must have Фильтры, пагинация и переходы работают без ошибок 1,1 чел.-мес. FR-4 Анализ взаимодействий, противопоказаний и дублирования Must have Воспроизводимый отчёт формируется быстрее пяти секунд 2,4 чел.-мес. FR-5 Регистрация, аутентификация и восстановление доступа Must have Защищённые сессии и безопасное хранение паролей 1,5 чел.-мес. FR-6 Подписки, тарифы, лимиты и права доступа Must have Права активируются после оплаты; лимиты применяются корректно 1,4 чел.-мес. FR-7 API для интеграции с медицинскими системами Should have API документирован, защищён ключами и rate limiting 1,7 чел.-мес. FR-8 Административная панель Must have CRUD, роли и журнал действий работают согласованно 2,1 чел.-мес. Главный пользовательский сценарий # Модуль оценки рисков принимает список препаратов и формирует результат анализа. В требованиях отдельно учитываются тарифные ограничения, обработка неизвестного препарата и повторный расчёт после изменения списка.\nОсновной поток:\nПользователь открывает модуль оценки рисков. Добавляет препараты по международному непатентованному или торговому наименованию. Система проверяет допустимое количество препаратов для текущего тарифа. Выполняется анализ взаимодействий, противопоказаний и дублирования. Пользователь получает структурированный отчёт и рекомендации. Альтернативные сценарии предусматривают замену препарата, превышение лимита тарифа и отсутствие позиции в справочнике.\nПользовательские требования # ID Требование Метрика Оценка UR-1 Понятный интерфейс Сценарий «поиск → карточка → вывод» без обучения 0,7 чел.-мес. UR-2 Быстрый отклик Основные операции до трёх секунд в 95% случаев 0,8 чел.-мес. UR-3 Мобильная адаптация Работа в браузерах смартфонов и планшетов 0,8 чел.-мес. UR-4 Ясные предупреждения Медицинские дисклеймеры видимы в критических сценариях 0,3 чел.-мес. Требования владельца # ID Требование Назначение Оценка OR-1 Подписки и корпоративные тарифы Монетизация и разграничение функций 0,6 чел.-мес. OR-2 Аналитика использования Запросы, активность, конверсия и API 0,5 чел.-мес. OR-3 Контроль актуальности данных Версионность и отчётность по обновлениям 0,9 чел.-мес. OR-4 Поддержка пользователей Обращения, статусы и шаблоны ответов 0,5 чел.-мес. Нефункциональные требования # Производительность # до 10 000 пользователей в сутки; до 500 одновременных пользователей; загрузка основных страниц не более трёх секунд для 95% обращений. Надёжность # доступность не ниже 99,5% в год; регулярное резервное копирование; документированный план восстановления. Безопасность # HTTPS для всех соединений; безопасное хранение паролей; защита от SQL injection, XSS, CSRF и других рисков OWASP Top 10; соблюдение требований законодательства о персональных данных. Масштабируемость и совместимость # горизонтальное масштабирование web- и API-слоёв; stateless-подход и кэширование; Chrome, Firefox, Safari и Edge; мобильные браузеры iOS и Android. Карта рисков # Риск Вероятность Влияние Меры снижения Ошибки или неполнота лекарственных данных Средняя Высокое Валидация, контроль версий, отчёты по обновлениям Перегрузка системы Средняя Высокое Кэширование, балансировка, нагрузочное тестирование Неверная интерпретация медицинской информации Средняя Высокое Дисклеймеры, роли и журналирование Уязвимости безопасности Низкая Критическое OWASP-практики, аудит, WAF и MFA Сложность SSO, оплаты и API Средняя Среднее Тестовые стенды, контракты API и мониторинг Спецификации use cases # В отчёте описаны пять прецедентов по единому шаблону: акторы, цель, преимущества, частота, триггер, предусловия, постусловия, основной и альтернативный потоки, исключения.\nUC-1. Поиск препарата # Гость или авторизованный пользователь вводит название либо атрибут препарата. Система показывает подсказки и релевантные результаты, после выбора открывает карточку сущности. Для пустой выдачи предлагается изменить запрос.\nUC-2. Просмотр карточки препарата # Пользователь получает структурированную справочную информацию, инструкцию, статус, дату обновления и связанные материалы. Отдельно учитываются временная недоступность данных и ограничения просмотра.\nUC-3. Расчёт рисков фармакотерапии # Пользователь формирует список назначений, система применяет тарифные ограничения и рассчитывает взаимодействия, противопоказания и дублирование эффектов.\nUC-4. Оформление подписки # Авторизованный пользователь выбирает тариф, переходит к платёжному сервису и после подтверждения получает соответствующие права. Обрабатываются отказ оплаты и недоступность провайдера.\nUC-5. Управление данными и пользователями # Администратор управляет справочными сущностями, пользователями, тарифами и аудитом. Изменения валидируются, сохраняются и фиксируются в журнале действий.\nКритерии приёмки # Подготовлено десять сквозных проверок:\nрелевантность и скорость универсального поиска; полнота карточки препарата; работа справочников, фильтров и классификаторов; формирование воспроизводимого отчёта о рисках; безопасность регистрации и входа; автоматическое применение подписки и лимитов; API keys, rate limiting и журналирование; CRUD и аудит в административной панели; мобильная адаптация; HTTPS и отсутствие критических уязвимостей OWASP Top 10. Сводная оценка # Категория Количество требований Ключевая сложность Функциональные 8 Анализ рисков, безопасность, API и администрирование Пользовательские 4 Скорость, понятность и мобильная адаптация Требования владельца 4 Монетизация, аналитика и актуальность данных Нефункциональные 6 Надёжность, безопасность и масштабирование Всего 22 19,5 чел.-мес. / 3120 чел.-часов Результат # Получился связный SRS-документ, который переводит возможности сложного медицинского сервиса в измеримые требования и сценарии проверки. Его можно использовать как основу для проектирования архитектуры, формирования backlog, планирования команды и приёмочного тестирования.\nСкриншоты сделаны с официального сайта lsgeotar.ru 22 июня 2026 года и используются здесь только для иллюстрации учебного анализа.\n","date":"12.02.2026","externalUrl":null,"permalink":"/my-portfolio/portfolio/srs-geotar/","section":"Проекты","summary":"Системный анализ медицинского веб-сервиса: 22 требования, 5 use cases, 10 критериев приёмки, карта рисков и оценка 19,5 человеко-месяца.","title":"SRS-спецификация для веб-сервиса «ЛС ГЭОТАР»","type":"portfolio"},{"content":"","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/algorithms/","section":"Tags","summary":"","title":"Algorithms","type":"tags"},{"content":"","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/c-sharp/","section":"Tags","summary":"","title":"C-Sharp","type":"tags"},{"content":"","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/data-structures/","section":"Tags","summary":"","title":"Data-Structures","type":"tags"},{"content":"","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/dotnet/","section":"Tags","summary":"","title":"Dotnet","type":"tags"},{"content":"Hi, I’m Yaroslav Rybakov — a developer who builds complete projects: from interface and REST API to database, containers, tests and observability. My core stack is Vue 3, FastAPI, ASP.NET Core, PostgreSQL, Docker and Nginx.\nView projects GitHub\n","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/","section":"Home","summary":"","title":"Home","type":"page"},{"content":"This section keeps the strongest international portfolio cases: a production-grade music backend, a full-stack digital library and interactive Figma design work.\nOpen GitHub profile\n","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/portfolio/","section":"Projects","summary":"","title":"Projects","type":"portfolio"},{"content":"","date":"June 26, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":"","date":"June 22, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/figma/","section":"Tags","summary":"","title":"Figma","type":"tags"},{"content":"","date":"June 22, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/prototyping/","section":"Tags","summary":"","title":"Prototyping","type":"tags"},{"content":"","date":"June 22, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/typography/","section":"Tags","summary":"","title":"Typography","type":"tags"},{"content":"","date":"June 22, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/ui-ux/","section":"Tags","summary":"","title":"Ui-Ux","type":"tags"},{"content":"","date":"June 22, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/visual-design/","section":"Tags","summary":"","title":"Visual Design","type":"tags"},{"content":"","date":"22.06.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D0%B2%D0%B8%D0%B7%D1%83%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/","section":"Tags","summary":"","title":"Визуальный Дизайн","type":"tags"},{"content":"","date":"22.06.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D0%BF%D1%80%D0%BE%D1%82%D0%BE%D1%82%D0%B8%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5/","section":"Tags","summary":"","title":"Прототипирование","type":"tags"},{"content":"","date":"22.06.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0/","section":"Tags","summary":"","title":"Типографика","type":"tags"},{"content":"","date":"June 19, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/docker/","section":"Tags","summary":"","title":"Docker","type":"tags"},{"content":"","date":"June 19, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/fastapi/","section":"Tags","summary":"","title":"Fastapi","type":"tags"},{"content":"","date":"June 19, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/python/","section":"Tags","summary":"","title":"Python","type":"tags"},{"content":"","date":"June 19, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/spa/","section":"Tags","summary":"","title":"Spa","type":"tags"},{"content":"","date":"June 19, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/sqlite/","section":"Tags","summary":"","title":"Sqlite","type":"tags"},{"content":"","date":"June 19, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/vue/","section":"Tags","summary":"","title":"Vue","type":"tags"},{"content":"","date":"May 29, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/aspnet-core/","section":"Tags","summary":"","title":"Aspnet-Core","type":"tags"},{"content":"","date":"May 29, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/ci-cd/","section":"Tags","summary":"","title":"Ci-Cd","type":"tags"},{"content":"","date":"May 29, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/nginx/","section":"Tags","summary":"","title":"Nginx","type":"tags"},{"content":"","date":"May 29, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/observability/","section":"Tags","summary":"","title":"Observability","type":"tags"},{"content":"","date":"May 29, 2026","externalUrl":null,"permalink":"/my-portfolio/en/tags/postgresql/","section":"Tags","summary":"","title":"Postgresql","type":"tags"},{"content":"","date":"24.04.2026","externalUrl":null,"permalink":"/my-portfolio/tags/bootstrap/","section":"Tags","summary":"","title":"Bootstrap","type":"tags"},{"content":"","date":"24.04.2026","externalUrl":null,"permalink":"/my-portfolio/tags/javascript/","section":"Tags","summary":"","title":"Javascript","type":"tags"},{"content":"","date":"24.04.2026","externalUrl":null,"permalink":"/my-portfolio/tags/luxon/","section":"Tags","summary":"","title":"Luxon","type":"tags"},{"content":"","date":"24.04.2026","externalUrl":null,"permalink":"/my-portfolio/tags/vite/","section":"Tags","summary":"","title":"Vite","type":"tags"},{"content":"","date":"24.04.2026","externalUrl":null,"permalink":"/my-portfolio/tags/webpack/","section":"Tags","summary":"","title":"Webpack","type":"tags"},{"content":"","date":"24.04.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D0%B2%D0%B5%D0%B1/","section":"Tags","summary":"","title":"Веб","type":"tags"},{"content":" Оглавление # Этап 1 Этап 2 Этап 3 Этап 1 # Тема # Создание проекта с использованием webpack, luxon, Bootstrap CDN и Docker.\nЧто было сделано # В рамках задания был подготовлен отдельный проект labs/webpack2025 внутри репозитория с такими шагами:\nинициализирован npm-проект; установлены luxon, webpack, webpack-cli и serve; создан исходный файл src/index.js для сборки через webpack; добавлена веб-страница index.html с подключением Bootstrap по CDN; реализован крупный вывод даты и времени через luxon; создан Dockerfile на базе node:24-alpine; выполнены локальная сборка, запуск проекта и запуск в Docker-контейнере. Локальная среда:\nnode v24.15.0 npm 11.12.1 Docker 29.3.1 Структура проекта # Основные файлы лабораторной:\nlabs/webpack2025/src/index.js labs/webpack2025/src/renderClock.js labs/webpack2025/index.html labs/webpack2025/webpack.config.js labs/webpack2025/Dockerfile Результат команды npx webpack # Команда сборки:\nnpx webpack Результат сборки:\nasset main.js 69.1 KiB [emitted] [minimized] (name: main) orphan modules 256 KiB [orphan] 2 modules ./src/index.js + 2 modules 256 KiB [built] [code generated] webpack 5.106.2 compiled successfully in 404 ms Скриншот вывода команды:\nВеб-страница с Bootstrap CDN и Luxon # В index.html подключен Bootstrap через CDN:\n\u0026lt;link href=\u0026#34;https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34; integrity=\u0026#34;sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr\u0026#34; crossorigin=\u0026#34;anonymous\u0026#34; /\u0026gt; Время выводится через luxon крупным шрифтом и обновляется каждую секунду:\nimport { DateTime } from \u0026#34;luxon\u0026#34;; setInterval(() =\u0026gt; { hh.textContent = DateTime.local() .setLocale(\u0026#34;ru\u0026#34;) .toFormat(\u0026#34;dd.LL.y HH:mm:ss\u0026#34;); }, 1000); Скриншот внешнего вида страницы:\nСодержимое Dockerfile # Использован образ node:24-alpine, так как в задании рекомендовано применять alpine-версию образа.\nFROM node:24-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npx webpack EXPOSE 3000 CMD [\u0026#34;npx\u0026#34;, \u0026#34;serve\u0026#34;, \u0026#34;.\u0026#34;, \u0026#34;-l\u0026#34;, \u0026#34;3000\u0026#34;] Запуск приложения через Docker # Сборка образа:\ndocker build -t webpack2025-lab . Запуск контейнера:\ndocker run --rm -p 3001:3000 --name webpack2025-lab-container webpack2025-lab Проверка контейнера:\ndocker ps --filter name=webpack2025-lab-container Результат проверки:\nCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 7dc727533edf webpack2025-lab \u0026#34;docker-entrypoint.s…\u0026#34; About a minute ago Up About a minute 0.0.0.0:3001-\u0026gt;3000/tcp, [::]:3001-\u0026gt;3000/tcp webpack2025-lab-container Скриншот запущенного контейнера:\nСкриншот запуска контейнера через docker run:\nСкриншот страницы, запущенной из Docker-контейнера:\nПоследовательность действий для запуска # Если повторять запуск с нуля, достаточно выполнить:\ncd labs/webpack2025 npm install npx webpack npx serve . -l 3000 Для запуска в Docker:\ncd labs/webpack2025 docker build -t webpack2025-lab . docker run --rm -p 3001:3000 --name webpack2025-lab-container webpack2025-lab После этого приложение будет доступно по адресу:\nhttp://localhost:3000/ Для Docker-варианта:\nhttp://localhost:3001/ Вывод # Был создан рабочий проект с базовой сборкой через webpack, отображением времени через luxon, адаптивной страницей на Bootstrap CDN и запуском в Docker-контейнере на базе node:24-alpine. Вся часть, связанная с Vite, вынесена в отдельный третий этап.\nЭтап 2 # Тема # Интеграция Bootstrap 5 в приложение с использованием библиотеки Luxon.\nЧто было сделано # На втором этапе приложение с Luxon было встроено в шаблон на Bootstrap 5.\nВ работе были выполнены следующие шаги:\nподготовлена Bootstrap-разметка страницы с колонками в соотношении 2-8-2; в центральной колонке размещена большая красная кнопка Показать время; реализовано модальное окно Bootstrap; в заголовке модального окна выведена строка Выполнил: Рыбаков Ярослав; в теле модального окна через Luxon выводится текущая дата и время в формате dd.MM.yyyy HH:mm:ss; добавлены два способа закрытия окна: крестик в заголовке и кнопка Закрыть внизу справа; подготовлен итоговый экран для скриншота с HTML-кодом и открытым модальным окном. Структура проекта # Основные файлы второго этапа:\nlabs/webpack2025/index.html Подключение библиотек # Для выполнения второго этапа были подключены Bootstrap 5 и Luxon.\nСкриншот подключения и установки библиотек:\nПодключение Luxon # Библиотека Luxon используется для получения текущей даты и времени. В коде страницы она подключается отдельно, а значение даты и времени формируется в формате:\nluxon.DateTime.local().setLocale(\u0026#34;ru\u0026#34;).toFormat(\u0026#34;dd.LL.yyyy HH:mm:ss\u0026#34;); Пример результата:\n25.10.2025 18:06:07 Подключение Bootstrap 5 # Для оформления страницы использованы классы Bootstrap 5, а для всплывающего окна задействован стандартный компонент Modal.\nНа странице реализована сетка с тремя колонками по схеме 2-8-2. Центральная колонка является основной рабочей областью приложения.\nВ ней размещена большая красная кнопка:\nПоказать время Кнопка занимает всю ширину центральной колонки благодаря классам Bootstrap:\n\u0026lt;button id=\u0026#34;showTimeButton\u0026#34; type=\u0026#34;button\u0026#34; class=\u0026#34;btn btn-danger btn-lg w-100 h-100 py-3\u0026#34;\u0026gt; Показать время \u0026lt;/button\u0026gt; Модальное окно # После нажатия на кнопку открывается всплывающее окно Bootstrap.\nВ заголовке указано имя исполнителя:\nВыполнил: Рыбаков Ярослав В теле модального окна крупным шрифтом выводится текущее время, полученное через Luxon.\nОкно можно закрыть двумя способами:\nкрестиком в правом верхнем углу; кнопкой Закрыть в правом нижнем углу. Проверка результата # После подготовки страницы была выполнена проверка результата в браузере.\nСкриншот запуска и проверки страницы:\nИтоговый скриншот # Скриншот страницы:\nПоследовательность выполненных действий # Последовательность работы над вторым этапом была следующей:\nСоздание HTML-страницы с Bootstrap-разметкой. Размещение трёх колонок по схеме 2-8-2. Добавление большой красной кнопки Показать время в центральную колонку. Подключение Luxon для вывода текущей даты и времени. Подключение Bootstrap 5 для сетки, кнопки и модального окна. Реализация всплывающего окна с ФИО исполнителя. Настройка закрытия окна крестиком и кнопкой Закрыть. Проверка итогового интерфейса в браузере. Подготовка скриншота с HTML-кодом и внешним видом приложения. Вывод # Таким образом, была выполнена базовая сборка JavaScript-приложения через Webpack, проверен вывод времени с помощью библиотеки Luxon, добавлено оформление Bootstrap 5 через CDN, подготовлен альтернативный вариант сборки через Vite, а также выполнен запуск приложения в Docker-контейнере на базе alpine-образа. На втором этапе приложение было встроено в Bootstrap-шаблон с сеткой 2-8-2, большой красной кнопкой и модальным окном.\nЭтап 3 # Тема # Сборка Bootstrap-приложения с Luxon через Vite без использования стороннего CDN.\nЧто было сделано # На третьем этапе был создан отдельный проект labs/stage3-vite-bootstrap, в котором вся страница собирается локально через Vite.\nВ работе были выполнены следующие шаги:\nсоздана новая папка проекта labs/stage3-vite-bootstrap; настроен Vite для локальной разработки и production-сборки; установлены зависимости bootstrap, luxon, vite и sass; перенесён интерфейс второго этапа с колонками 2-8-2, большой красной кнопкой и модальным окном; подключен Luxon через npm и встроен вывод текущей даты и времени; для уменьшения размера бандла подключены только нужные SCSS-модули Bootstrap и только JS-модуль Modal; выполнена production-сборка и зафиксирован размер итогового бандла; собранная страница опубликована внутри статического сайта. Структура проекта # Основные файлы третьего этапа:\nlabs/stage3-vite-bootstrap/package.json labs/stage3-vite-bootstrap/vite.config.js labs/stage3-vite-bootstrap/index.html labs/stage3-vite-bootstrap/src/main.js labs/stage3-vite-bootstrap/src/style.scss Команды проекта # Основные команды для запуска и сборки:\nnpm install npm run dev npm run build Скриншот установки зависимостей:\nСкрипты в package.json:\n\u0026#34;scripts\u0026#34;: { \u0026#34;dev\u0026#34;: \u0026#34;vite --host 0.0.0.0 --port 3002 --open /\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;vite build\u0026#34;, \u0026#34;preview\u0026#34;: \u0026#34;vite preview --host 0.0.0.0 --port 4173\u0026#34; } Подключение Luxon # В src/main.js используется импорт библиотеки:\nimport { DateTime } from \u0026#34;luxon\u0026#34;; Текущее время формируется так:\nDateTime.local().setLocale(\u0026#34;ru\u0026#34;).toFormat(\u0026#34;dd.MM.yyyy HH:mm:ss\u0026#34;); Подключение Bootstrap 5 # Bootstrap в третьем этапе подключается не через CDN, а как зависимость проекта. Для уменьшения размера бандла в src/style.scss импортированы только нужные части Bootstrap:\nсетка; контейнеры; кнопки; модальное окно; утилиты и базовые стили. В JavaScript подключён только модуль:\nimport Modal from \u0026#34;bootstrap/js/dist/modal\u0026#34;; Размер полученного бандла # Результат команды npm run build:\ndist/index.html 2.02 kB │ gzip: 0.79 kB dist/assets/index-WBhvOPX7.css 116.67 kB │ gzip: 16.86 kB dist/assets/index-CW1BmQW8.js 94.15 kB │ gzip: 29.47 kB Скриншот запуска сборки:\nСкриншот результата сборки с размерами файлов:\nИтоговый production-бандл состоит из CSS-файла размером 116.67 kB и JavaScript-файла размером 94.15 kB. Общий размер основных файлов сборки без gzip: 116.67 kB + 94.15 kB = 210.82 kB. Общий размер в gzip: 16.86 kB + 29.47 kB = 46.33 kB.\nСкриншот интерфейса # Скриншот UI-страницы:\nСсылка на репозиторий # Исходные файлы проекта размещены в репозитории:\nРепозиторий с исходными файлами этапов 2 и 3\nСсылка на опубликованную страницу # Собранное приложение опубликовано на статическом сайте:\nОпубликованное приложение этапа 3\nСкриншот страницы, открытой из опубликованного портфолио:\nПоследовательность выполненных действий # Создание новой папки проекта для третьего этапа. Настройка Vite и package.json. Установка зависимостей bootstrap, luxon, vite и sass. Перенос интерфейса второго этапа в новый Vite-проект. Подключение Luxon через npm для обновления времени. Подключение Bootstrap 5 без CDN, с выборочным импортом модулей. Сборка проекта через npm run build. Фиксация размера полученного бандла. Публикация собранной страницы на статическом сайте. Вывод # На третьем этапе Bootstrap-приложение с Luxon было полностью переведено на сборку через Vite. Bootstrap больше не подключается через сторонний CDN: интерфейс собирается локально из зависимостей проекта. Для уменьшения размера бандла были импортированы только необходимые части Bootstrap, после чего собранная страница была опубликована как отдельное статическое приложение.\n","date":"24.04.2026","externalUrl":null,"permalink":"/my-portfolio/portfolio/webpack/","section":"Проекты","summary":"Продолжение отчета по лабораторной работе: этап 1 с webpack и Docker, этап 2 с Bootstrap 5 и Luxon, этап 3 с Vite.","title":"Создание проекта с использованием Webpack и Docker","type":"portfolio"},{"content":"","date":"12.02.2026","externalUrl":null,"permalink":"/my-portfolio/tags/srs/","section":"Tags","summary":"","title":"Srs","type":"tags"},{"content":"","date":"12.02.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0/","section":"Tags","summary":"","title":"Аналитика","type":"tags"},{"content":"","date":"12.02.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F/","section":"Tags","summary":"","title":"Документация","type":"tags"},{"content":"","date":"12.02.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D0%BC%D0%B5%D0%B4%D0%B8%D1%86%D0%B8%D0%BD%D0%B0/","section":"Tags","summary":"","title":"Медицина","type":"tags"},{"content":"","date":"12.02.2026","externalUrl":null,"permalink":"/my-portfolio/tags/%D1%82%D1%80%D0%B5%D0%B1%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F/","section":"Tags","summary":"","title":"Требования","type":"tags"},{"content":"I am a student and developer. I build web applications and backend systems end to end: design the structure, implement the interface and API, connect the database, tests, containers and infrastructure.\nWhat matters to me # Working result: a project should run reproducibly and solve the declared scenario. System thinking: clear module boundaries, reusable components and verifiable contracts. Engineering transparency: documentation, tests, migrations and an honest description of the current state. Tools and skills # Vue 3, Vite, JavaScript and responsive interfaces Python, FastAPI, REST API and SQLite C#, ASP.NET Core, PostgreSQL and layered architecture Docker, Docker Compose, Nginx, CI/CD and observability Git, GitHub, automated tests and technical documentation All key claims in this portfolio are backed by GitHub links. If you need a quick overview or a deeper technical review, contact me through the contact page.\n","externalUrl":null,"permalink":"/my-portfolio/en/about/","section":"Home","summary":"","title":"About","type":"page"},{"content":"","externalUrl":null,"permalink":"/my-portfolio/en/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"I am open to internships, freelance projects and collaborations. You can reach me by email or Telegram.\nEmail: rybakovpista@gmail.com Telegram: @pistaha GitHub: github.com/pistaha ","externalUrl":null,"permalink":"/my-portfolio/en/contact/","section":"Home","summary":"","title":"Contact","type":"page"}]