Update README.md

README.md

@@ -3,35 +3,62 @@
 
 <img style="width:350px;" src="https://github.com/424Nkita-Csharsfta4/SkillWave/assets/103760832/e1670d51-5fd5-463a-b19e-85168e0980c0"/>
 
-
+<nav>
+    <ul>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#description">Описание</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#technologies">Стек технологий</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#features">Функциональные возможности</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#functionality">Функционал</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#additional">Дополнительные возможности</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#community">Развитие сообщества</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#mentoring">Программа менторства</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#integration">Интеграция с индустрией</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#perspectives">Перспективы</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#ui-ux">UI/UX</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#bloc-cubit">Bloc/Cubit</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#supabase">SupaBase</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#visualization">Визуализация</a></li>
+        <li><a style="text-decoration: none;  font-family: 'Poppins', sans-serif;" href="#conclusion">Заключение</a></li>
+    </ul>
+</nav>
+
+
+
 ## Описание
 
+<div id="description">
 Skillwave - это мобильное приложение обучающей платформы, предназначенной для людей, желающих расширить свои знания и навыки.
-В приложении доступны разнообразные курсы, аналогичные тем, что представлены на платформах Stepik и Udemy.
+В приложении доступны разнообразные курсы, аналогичные тем, что представлены на платформах Stepik и Udemy.  
+</div>
+
+
+
 
 ## Стек технологий
-<div style="display:flex;">
+<div id="technologies">
+<div style="display:flex; background-color:white;">
 <img style="width:70px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/dart/dart-original-wordmark.svg" />
 <img style="width:70px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/flutter/flutter-original.svg" />
 <img style="width:70px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original-wordmark.svg" />
 <img style="width:70px;" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/supabase/supabase-original-wordmark.svg" />
 </div>
 
+
 Skillwave разработан с использованием следующих технологий:
 
 - Dart/Flutter для мобильной разработки
 - Bloc для управления состоянием
 - Supabase для базы данных
 - Node.js для backend
 - UI/UX
-  
+</div>
 <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMWlwcXh5cmoweTd2dm9sajkzemMzazFyZDZ6NzQxeWFhbmkyYndocyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/kQ3FSVoJrkYWk/giphy.gif"/>
 
 
 ## Функциональные возможности
 
 ### Плюсы
-
+<div id="features">
 - Доступ к широкому выбору обучающих курсов
 - Интерактивный и дружественный пользовательский интерфейс
 - Возможность оформления подписки для получения дополнительных материалов и функций
@@ -40,83 +67,91 @@ Skillwave разработан с использованием следующи
 
 - Возможны ограничения доступа к некоторым курсам без подписки
 - Требуется подключение к интернету для загрузки курсов и обновлений
+</div>
 
 ## Функционал
-
+<div id="functionality">
 - Регистрация и аутентификация пользователей
 - Просмотр информации о каждом курсе, включая описание, автора, рейтинг и отзывы
 - Возможность просмотра примеров кода из курсов
 - Поддержка различных форматов обучения, включая видеоуроки, статьи и задания
 - Возможность обновления профиля пользователя
 - Механизм оплаты подписки и управления ею
-
+</div>
 <img src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExazU1aGJrbW5qY3JreWl1OGVrMXlqNzR4YWFpM3dnemgwMzdsODEyMiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/11KzOet1ElBDz2/giphy.gif"/>
 
 ## Дополнительные возможности
+<div id="additional">
 Адаптивный дизайн
 - Skillwave обеспечивает отличное пользовательское взаимодействие на устройствах с разными разрешениями экрана, благодаря своему адаптивному дизайну.
-
-## Социальные функции
-- Пользователи могут обмениваться своими успехами, обсуждать курсы и задавать вопросы друг другу в специальных форумах или чатах внутри приложения.
-
-## Персонализированные рекомендации
-- Skillwave предлагает пользователям персонализированные рекомендации по курсам на основе их предпочтений, ранее пройденных курсов и активности.
-
-## Оффлайн доступ
-- Пользователи могут скачивать курсы на устройства для последующего просмотра без доступа к интернету, обеспечивая удобство обучения в любом месте и в любое время.
+</div>
 
 ## Развитие сообщества
+<div id="community">
 - Партнерство с образовательными учреждениями
 - Skillwave может установить партнерские отношения с университетами и другими образовательными учреждениями для предоставления доступа к их курсам и сертификатам через приложение.
+</div>
 
 <img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExcHV4c29oaDJsb21xMnJ3N3ZpMHF2ZmkxYXRwNXB6Z2dnc2UwNnkzMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Ejw31fJJkDfQ4/giphy.gif"/>
 
 ## Программа менторства
+<div id="mentoring">
 - Платформа может запустить программу менторства, где опытные пользователи могут помогать новичкам в освоении новых тем и консультировать их по вопросам обучения.
+</div>
 
 ## Интеграция с индустрией
+<div id="integration">
 - Skillwave может предложить интеграцию с компаниями и предприятиями, чтобы предоставлять им возможность создания собственных обучающих материалов или проведения корпоративного обучения через приложение.
+</div>
 
 ## Перспективы
+<div id="perspectives">
 - Skillwave постоянно развивается и стремится предоставить пользователям ещё больше возможностей для обучения и саморазвития.
 - С постоянным добавлением новых курсов, улучшением функциональности и расширением сообщества пользователей, приложение продолжает быть лидером в области онлайн-обучения.
+</div>
 
 <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExNjBsbHVqNDh5NGl5eWQ3ZmRjNGpod2hmZmk0ZTN3NmlibzJsemtieCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/jIqh3ym2s7GU/giphy.gif"/>
 
 ## UI/UX
+<div id="ui-ux">
 - Дизайн в Figma
 - Скоро ссылку загружу
-
+</div>
+
 ![image](https://github.com/424Nkita-Csharsfta4/SkillWave/assets/103760832/b8fc6ef7-c444-4215-9dc8-5579ccd9a8ca)
 
 ## Bloc/Cubit
+<div id="bloc-cubit">
 - Bloc (Business Logic Component) и Cubit - это паттерны управления состоянием в приложениях Flutter,
 - которые позволяют эффективно разделять бизнес-логику и пользовательский интерфейс.
 - Они обеспечивают чистоту кода, упрощают тестирование и делают приложение более масштабируемым,
 - позволяя разработчикам создавать отдельные компоненты для управления состоянием и событиями.
 - Использование Bloc/Cubit помогает улучшить архитектуру приложения и делает его более
 - поддерживаемым и понятным для разработчиков.
-- -  <a href="[https://supabase.com/docs/reference/dart/installing](https://bloclibrary.dev/ru/bloc-concepts/)">Основная дока для работы с Flutter и BLOC</a>
+- <a href="[https://supabase.com/docs/reference/dart/installing](https://bloclibrary.dev/ru/bloc-concepts/)">Основная дока для работы с Flutter и BLOC</a>
+</div>
 
 ## SupaBase
+<div id="supabase">
 - Supabase - это открытая платформа для разработки приложений с базами данных PostgreSQL. 
 - Supabase предоставляет разработчикам готовое API для работы с базой данных, аутентификацией пользователей и многое другое.
 -  Документация по работе с Supabase в Flutter/Dart предоставляет инструкции по настройке подключения к базе данных, выполнению запросов и обработке результатов в мобильных приложениях на Flutter.
 -  <a href="https://supabase.com/docs/reference/dart/installing">Основная дока для работы с Flutter и Supabase</a>
+</div>
 
 ![image](https://github.com/424Nkita-Csharsfta4/SkillWave/assets/103760832/3b1c2b08-c0c5-4479-b5fa-36d830b2b300)
 
 
 ## Визуализация
-
+<div id="visualization">
 <img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExbG95aW11YnlrNXNyYnVlMGN5enRrODhlaWRjY3N0d3l6OWw5bW93YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eemPC4yhITcTm/giphy.gif"/>
-
+</div>
 
 
 ## Заключение
-
+<div id="conclusion">
 Skillwave - это мощный инструмент для тех, кто стремится к саморазвитию и обучению новым навыкам. 
 Благодаря его широкому выбору курсов, удобному интерфейсу и разнообразию функциональных возможностей пользователи могут найти именно то, что им нужно для роста и достижения своих целей.
-
+</div>
 <img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExb3p6NWxzNGM0MGVjc2Y4cThuMjlzd2pscGxiaXNseXkwOGswaDh0NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/anDhBXwgvIa7m/giphy.gif"/>