[{"content":" 项目概览 # ElectoLibrary 是一个完整的客户端-服务器电子图书馆。前端通过 REST API 与后端交互，数据保存在 SQLite 中，项目可通过容器运行，并覆盖从搜索图书到预约图书的完整用户流程。\nGitHub 源代码\n已实现功能 # 按书名、作者和出版社搜索目录； 按库存过滤，并按日期或字母排序； 创建、查看、编辑和删除图书； 上传 JPG 封面并校验大小； 收藏、预约和取消预约； 专题集合和独立用户页面； 响应式导航、通知和 404 页面； SQLite 持久化存储； API 测试和 Docker Compose 可复现启动。 架构 # Browser └─ Vue 3 + Vue Router ├─ views / components ├─ composable useBooks └─ API service └─ FastAPI ├─ CRUD and business operations ├─ cover uploads └─ SQLite 前端拆分为视图、可复用组件和 API 访问层。目录逻辑放在 composable 中，后端负责业务操作和持久化状态。\n运行 # git clone https://github.com/pistaha/electolibrary-exam.git cd electolibrary-exam docker compose up --build 结果 # 这个项目把界面、API、数据库、文件上传、测试和容器化组合成一个可复现的全栈解决方案。\n","date":"2026-06-19","externalUrl":null,"permalink":"/my-portfolio/zh/portfolio/electolibrary/","section":"项目","summary":"Vue 3 SPA + FastAPI + SQLite：目录、CRUD、收藏、预约、专题集合、封面上传、测试和 Docker。","title":"ElectoLibrary — 完整电子图书馆","type":"portfolio"},{"content":" 像真实系统一样构建的音乐服务 # Spotifaychik 是这个作品集中最重要的后端项目。它不是简单的 CRUD 示例，而是一个可以继续扩展为完整流媒体产品的音乐平台基础。\n系统管理艺术家、专辑、曲目、用户和播放列表，支持搜索和个性化场景，控制数据访问，并运行在容器化的生产环境中。从 HTTP 请求到 Grafana 指标，整个链路都作为一个整体设计。\nGitHub 源代码\n用户场景 # 浏览艺术家、专辑和曲目； 使用全局搜索和高级搜索查找音乐； 创建、编辑和发布播放列表； 查看热门曲目、艺术家和新发行内容； 根据播放历史生成个性化播放列表； 管理个人资料、好友和用户统计； 上传封面和媒体文件，并进行验证和图像处理。 这些场景背后是一套完整的领域模型：艺术家、发行、曲目、播放列表、收听历史、角色、权限、会话和安全审计事件。\n项目规模 # 范围 实现 API 11 个控制器，覆盖音乐、用户、认证、文件、搜索、审计和诊断 领域模型 18 个实体，包括 Track、Playlist、UserSession、Permission 和 SecurityAuditLog 应用层 命令、查询、DTO、验证器、映射和 pipeline behaviors 质量 50 多个测试文件，覆盖领域、处理器、API、基础设施和验证 生产环境 PostgreSQL、Docker、Nginx、TLS、API 副本、CI/CD、Prometheus、Grafana 和 Loki 架构 # 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 分层架构让业务逻辑不依赖 HTTP 和数据库细节。CQRS 将读写场景拆开，日志和验证通过统一 pipeline 处理。\n安全与运维 # 认证基于 JWT。授权不仅是角色判断，还包括 permissions、角色管理、资源所有者检查和独立的 authorization handlers。密码使用 BCrypt 哈希，用户会话单独记录，敏感操作进入异步安全审计日志。\n生产环境使用 Nginx 处理 TLS 和负载均衡，多副本 ASP.NET Core API 处理请求，PostgreSQL 使用持久化存储，Prometheus 收集指标，Grafana 展示看板，Loki 收集日志。每个后端实例返回 X-Instance-Id，可以直接验证轮询负载均衡。\n运行 # git clone https://github.com/pistaha/spotifaychik.git cd spotifaychik cp .env.example .env ./start.sh 启动后可以通过准备好的基础设施访问 API、Swagger、Prometheus 指标和 Grafana 看板。\n结果 # Spotifaychik 展示了系统级后端开发能力：领域设计、安全、媒体处理、测试、CI/CD、监控和可扩展部署都在同一个完整项目中实现。\n","date":"2026-05-29","externalUrl":null,"permalink":"/my-portfolio/zh/portfolio/spotifaychik/","section":"项目","summary":"大型 ASP.NET Core 音乐后端：目录、用户、播放列表、搜索、安全、PostgreSQL、测试，以及带负载均衡和可观测性的生产环境。","title":"Spotifaychik — 音乐平台与生产级基础设施","type":"portfolio"},{"content":" 项目概览 # Algorithms \u0026amp; Data Structures Labs 是一个公开的算法与数据结构实验仓库。它不是一个小练习，而是一组独立的 C#/.NET 控制台项目。项目中的基础 ADT 都是手动实现的，不依赖 List\u0026lt;T\u0026gt;、Dictionary\u0026lt;TKey,TValue\u0026gt;、Stack\u0026lt;T\u0026gt;、Queue\u0026lt;T\u0026gt; 或其他内置集合。\n具体仓库： github.com/pistaha/algorithms-data-structures-labs\nmain 分支作为导航页使用，每个实验保存在独立分支中。每个实验都有自己的项目、README、源代码和包含原始任务的 docs/task.txt。\n项目展示的能力 # 通过公共接口和不同内部表示设计 ADT； 数组存储、链式结构、游标位置和手动关系管理； 手动实现栈、队列、列表、map/dictionary 和哈希表； 使用 separate chaining、closed hashing 和 linear probing 处理冲突； 带有失败情况检测的拓扑排序； 使用 multilist 和两个环形链表建模多对多关系； 通过确定性的控制台演示在本地验证算法行为。 实验列表 # 分支 主题 实现内容 链接 lab1 List ADT 双向链表、基于游标的列表、通讯录记录去重 打开分支 lab2 Stack / Queue / Map ADT 数组栈、链式栈、基于列表的栈、数组队列、环形队列、linked-list map 打开分支 lab3 Dictionary ADT 开放哈希、闭合哈希和线性探测 打开分支 lab4 Partial Order / Topological Sort 依赖关系存储、拓扑排序和无法排序情况检测 打开分支 lab5 Student-Course Multilist 学生/课程哈希表，以及双向多对多注册节点 打开分支 分支说明 # lab1：List ADT # 第一个实验比较同一个抽象列表的两种实现：双向链表和基于数组的游标模型。演示任务用于删除通讯录中的重复记录，记录字段以固定长度 char[] 保存。\n关键文件：\nalgo 1/dvus.cs； algo 1/curs.cs； algo 1/AddressBookEntry.cs； algo 1/Program.cs。 lab2：Stack、Queue、List 和 Map # 第二个实验扩展了 ADT 集合，并用不同存储策略实现相同行为。栈通过数组、链式节点和自定义列表实现；队列通过数组、环形链式结构和列表实现；同时还包含支持赋值、查找和打印的 linked-list map。\nlab3：Dictionary ADT 和哈希 # 第三个实验关注基于哈希表的 dictionary/set 行为。项目包含带冲突链的开放哈希，以及带线性探测的闭合哈希。演示使用 goodguys 和 badguys 两个集合，通过命令修改和查询姓名状态。\n演示命令：\nF name：把姓名移动到正向集合； U name：把姓名移动到负向集合； ? name：查询状态； P：打印两个集合； E：退出。 lab4：偏序关系和拓扑排序 # 第四个实验在可能的情况下把偏序集合转换成线性顺序。x \u0026lt; y 这样的约束以整数对保存，然后转换成内部依赖结构。算法逐步选择可以放入结果的元素，并检测无法构造线性顺序的情况。\nlab5：学生-课程 multilist # 第五个实验在没有数据库和集合框架的情况下建模多对多关系。学生和课程分别存储在闭合哈希表中，每个注册记录都是一个节点，同时存在于两个环中：某个学生的课程环，以及某门课程的学生环。\n支持的操作：\n添加学生到课程； 从某门课程移除学生； 从所有课程移除学生； 从课程中移除所有学生； 输出某门课程的所有学生； 输出某个学生的所有课程。 工程细节 # 这个仓库的价值在于数据结构是低层级手动实现的。代码中可以直接看到数组边界、Full / Empty 状态、节点删除、类似指针的遍历、冲突处理，以及 multilist 中两个方向关系的一致性维护。它补充了作品集中 full-stack 和 backend 项目之外的算法基础。\n技术栈 # C#； .NET 8 / .NET 10； 控制台应用； 不使用内置集合的手动 ADT； 使用 Git 分支保存不同实验项目。 运行 # 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; 结果 # 该仓库为作品集增加了独立的算法与数据结构方向。它展示的不只是应用开发能力，还包括 ADT、哈希、图式依赖关系，以及内存中关系建模的基础能力。\n","date":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/portfolio/algorithms-data-structures-labs/","section":"项目","summary":"C#/.NET 算法与数据结构仓库：List、Stack、Queue、Map、Dictionary、哈希、拓扑排序和 multilist。","title":"Algorithms \u0026 Data Structures Labs — 数据结构课程实验","type":"portfolio"},{"content":" 项目集合 # 这组视觉作品涵盖定制演示与品牌物料、字体实验、城市推广、海报和电子商务界面。每个项目都可以直接在页面中打开，以全屏原型呈现动画、转场和可点击流程。\n启动原型 客户项目 · 2026 Mita Garden Hills — 高端住宅落地页与 3D 体验 为东京港区高端住宅项目打造的响应式落地页，包含互动式 3D 总平面体验。 项目介绍 该概念将 Mita Garden Hills 的建筑、园林、私密感与历史底蕴转化为宁静优雅的数字体验，呈现日式低调奢华。\n我的职责：UX/UI 设计、艺术指导、桌面端与移动端版式、视觉系统、字体、3D 界面状态、UI 组件与交互原型展示。\n工作范围：桌面端和移动端落地页；Hero、Concept、Garden、Architecture、Facilities、Residences、Location 和 Contact 页面模块；带建筑卡片、筛选、缩放与昼夜模式的互动 3D 总平面；UI kit、表单与响应式交互。\nDesign by pistaha。Mita Garden Hills 名称、标志及相关品牌素材归其权利人所有。\n桌面版 移动版 启动原型 客户项目 · 2026 Jennyhouse Salon — 名片设计 为 Jennyhouse Salon 设计的双面名片：简洁、高级，并体现品牌视觉识别。 项目介绍 设计目标是打造易于阅读的高级印刷品，并准确传达 Jennyhouse Salon 的品牌气质。\n我的职责：名片设计、版式、字体排印和展示效果图。\n工作范围：带标志的正面、包含联系方式和二维码的背面、色彩方案选择与印刷效果图可视化。\nDesign by pistaha。标志和品牌素材归 Jennyhouse Salon 所有。\n在 Figma 中打开 启动原型 客户项目 · 2026 IWEIYI.com — 品牌演示文稿设计 为线上鲜花与礼品配送平台 IWEIYI.com 制作的 12 页品牌演示文稿。 项目介绍 演示以清晰、统一的视觉形式介绍网站核心服务、商品类别、配送体验和客户关怀，并延续品牌现有的视觉识别。\n我的职责：演示文稿设计、视觉系统、版式、信息层级和艺术指导。\n素材来源：官方网站内容和产品图片。\n工作范围：品牌概览、商品类别、送礼场景、配送、订购流程、支付、客户服务和联系方式。\nDesign by pistaha。网站设计和品牌素材归 IWEIYI.com 所有。\n在 Figma 中打开 启动原型 演示文稿 瑞士风格 一份关于瑞士平面设计风格的演示，使用模块网格、几何关系、对比和功能性字体排版。 在 Figma 中打开 启动原型 社会海报 你的足迹 关于地球污染的社会海报系列，用“足迹”这一视觉隐喻表达每个人对环境的责任。 在 Figma 中打开 启动原型 城市推广活动 维堡：时间之环 为维堡城市推广活动设计的落地页和海报系列，将城市形象转化为完整邀约：通过建筑细节、文化记忆与北方气质，呈现给旅行者的探索路线。 在 Figma 中打开 启动原型 字体研究 马列维奇至上主义 围绕照片选择合适字体，并练习黑白照片、图形与高对比构图的视觉研究。 在 Figma 中打开 启动原型 编辑设计 The Selena Gomez 四个风格不同但主题统一的页面，重点训练字体表达和版面节奏。 在 Figma 中打开 启动原型 字体设计 原创西里尔字体 设计自己的西里尔字体：字形结构、符号系统、数字，并在排版中验证可用性。 在 Figma 中打开 启动原型 网页设计 Velvet Music 基于参考网站网格制作的音乐商店界面，并发展出自己的视觉风格。 在 Figma 中打开 Figma 在 Figma 中打开 正在加载交互式原型 ","date":"2026-06-22","externalUrl":null,"permalink":"/my-portfolio/zh/portfolio/figma-prototypes/","section":"项目","summary":"十个 Figma 项目：从带有 3D 体验的高端落地页和定制名片，到城市推广、字体排版与网页设计。","title":"Figma 项目","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":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/tags/algorithms/","section":"Tags","summary":"","title":"Algorithms","type":"tags"},{"content":"","date":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/tags/c-sharp/","section":"Tags","summary":"","title":"C-Sharp","type":"tags"},{"content":"","date":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/tags/data-structures/","section":"Tags","summary":"","title":"Data-Structures","type":"tags"},{"content":"","date":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/tags/dotnet/","section":"Tags","summary":"","title":"Dotnet","type":"tags"},{"content":"","date":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":"你好，我是 Yaroslav Rybakov，一名能够把项目完整做出来的开发者：从界面和 REST API，到数据库、容器、测试和可观测性。主要技术栈是 Vue 3、FastAPI、ASP.NET Core、PostgreSQL、Docker 和 Nginx。\n查看项目 GitHub\n","date":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/","section":"首页","summary":"","title":"首页","type":"page"},{"content":"这里保留三个最适合国际展示的核心案例：生产级音乐后端、完整的全栈电子图书馆，以及 Figma 交互设计项目。\n打开 GitHub 主页\n","date":"2026-06-26","externalUrl":null,"permalink":"/my-portfolio/zh/portfolio/","section":"项目","summary":"","title":"项目","type":"portfolio"},{"content":"","date":"2026-06-22","externalUrl":null,"permalink":"/my-portfolio/zh/tags/figma/","section":"Tags","summary":"","title":"Figma","type":"tags"},{"content":"","date":"2026-06-22","externalUrl":null,"permalink":"/my-portfolio/zh/tags/prototyping/","section":"Tags","summary":"","title":"Prototyping","type":"tags"},{"content":"","date":"2026-06-22","externalUrl":null,"permalink":"/my-portfolio/zh/tags/typography/","section":"Tags","summary":"","title":"Typography","type":"tags"},{"content":"","date":"2026-06-22","externalUrl":null,"permalink":"/my-portfolio/zh/tags/ui-ux/","section":"Tags","summary":"","title":"Ui-Ux","type":"tags"},{"content":"","date":"2026-06-22","externalUrl":null,"permalink":"/my-portfolio/zh/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":"2026-06-19","externalUrl":null,"permalink":"/my-portfolio/zh/tags/docker/","section":"Tags","summary":"","title":"Docker","type":"tags"},{"content":"","date":"2026-06-19","externalUrl":null,"permalink":"/my-portfolio/zh/tags/fastapi/","section":"Tags","summary":"","title":"Fastapi","type":"tags"},{"content":"","date":"2026-06-19","externalUrl":null,"permalink":"/my-portfolio/zh/tags/python/","section":"Tags","summary":"","title":"Python","type":"tags"},{"content":"","date":"2026-06-19","externalUrl":null,"permalink":"/my-portfolio/zh/tags/spa/","section":"Tags","summary":"","title":"Spa","type":"tags"},{"content":"","date":"2026-06-19","externalUrl":null,"permalink":"/my-portfolio/zh/tags/sqlite/","section":"Tags","summary":"","title":"Sqlite","type":"tags"},{"content":"","date":"2026-06-19","externalUrl":null,"permalink":"/my-portfolio/zh/tags/vue/","section":"Tags","summary":"","title":"Vue","type":"tags"},{"content":"","date":"2026-05-29","externalUrl":null,"permalink":"/my-portfolio/zh/tags/aspnet-core/","section":"Tags","summary":"","title":"Aspnet-Core","type":"tags"},{"content":"","date":"2026-05-29","externalUrl":null,"permalink":"/my-portfolio/zh/tags/ci-cd/","section":"Tags","summary":"","title":"Ci-Cd","type":"tags"},{"content":"","date":"2026-05-29","externalUrl":null,"permalink":"/my-portfolio/zh/tags/nginx/","section":"Tags","summary":"","title":"Nginx","type":"tags"},{"content":"","date":"2026-05-29","externalUrl":null,"permalink":"/my-portfolio/zh/tags/observability/","section":"Tags","summary":"","title":"Observability","type":"tags"},{"content":"","date":"2026-05-29","externalUrl":null,"permalink":"/my-portfolio/zh/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":"","externalUrl":null,"permalink":"/my-portfolio/zh/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"我是一名学生和开发者，擅长完整构建 Web 应用与后端系统：设计结构、实现界面和 API、接入数据库、测试、容器和基础设施。\n我重视什么 # 可运行的结果： 项目必须能够稳定复现并解决明确的场景。 系统化思维： 模块边界清晰，组件可复用，接口可验证。 工程透明度： 文档、测试、迁移，以及对项目状态的真实说明。 工具与技能 # Vue 3、Vite、JavaScript 和响应式界面 Python、FastAPI、REST API 和 SQLite C#、ASP.NET Core、PostgreSQL 和分层架构 Docker、Docker Compose、Nginx、CI/CD 和可观测性 Git、GitHub、自动化测试和技术文档 作品集中的关键内容都配有 GitHub 链接。如果需要快速了解或更深入的技术评审，可以通过联系方式联系我。\n","externalUrl":null,"permalink":"/my-portfolio/zh/about/","section":"首页","summary":"","title":"关于","type":"page"},{"content":"我对实习、自由职业项目和合作开放。可以通过邮箱或 Telegram 联系我。\n邮箱： rybakovpista@gmail.com Telegram： @pistaha GitHub： github.com/pistaha ","externalUrl":null,"permalink":"/my-portfolio/zh/contact/","section":"首页","summary":"","title":"联系","type":"page"}]