Проектная работа 1-й спринт

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+dist/

README.md

@@ -1,83 +1,84 @@
-### Ветка, в которой делаете задания спринта, должна называться sprint_i, где i - номер спринта. Не переименовывайте её.
+[![Netlify Status](https://api.netlify.com/api/v1/badges/2a668cd5-3654-4c56-a540-19a633e37d11/deploy-status)](https://app.netlify.com/sites/praktikum-timur233/deploys)
 
-### Откройте pull request в ветку main из ветки, где вы разрабатывали проект, и добавьте ссылку на этот pr в README.md в ветке main. 
-### ВАЖНО: pull request должен называться “Sprint i” (i — номер спринта).
 
-### Например, задания для проектной работы во втором спринте вы делаете в ветке sprint_2. Открываете из неё pull request в ветку main. Ссылку на этот pr добавляете в README.md в ветке main. После этого на платформе Практикума нажимаете «Проверить задание».
 
-### Также не забудьте проверить, что репозиторий публичный.
----
+## Проектная работа 1-й спринт
 
+Ссылка на развернутое приложение: https://incandescent-madeleine-05611b.netlify.app/
 
-Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README.
-
-README — первое, что прочитает пользователь, когда попадёт в репозиторий на «Гитхабе». Хороший REAMDE отвечает на четыре вопроса:
-
-- Готов ли проект к использованию?
-- В чём его польза?
-- Как установить?
-- Как применять?
-
-## Бейджи
-
-Быстро понять статус проекта помогают бейджи на «Гитхабе». Иногда разработчики ограничиваются парой бейджев, которые сообщат о статусе тестов кода:
-
-![Бэйджи](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/b.png)
-
-Если пользователь увидит ошибку в работе тестов, то поймёт: использовать текущую версию в важном проекте — не лучшая идея.
-
-Бейджи помогают похвастаться достижениями: насколько популярен проект, как много разработчиков создавало этот код. Через бейджи можно даже пригласить пользователя в чат:
-
-![Версии](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/vers.png)
-
-В README **Webpack** строка бейджев подробно рассказывает о покрытии кода тестами. Когда проект протестирован, это вызывает доверие пользователя. Последний бейдж приглашает присоединиться к разработке. 
-
-Другая строка убедит пользователя в стабильности инфраструктуры и популярности проекта. Последний бейдж зовёт в чат проекта.
+Ссылка на макет Figma: https://www.figma.com/design/oTk9ZR7RWDP9qwCUY03H1q/Practicum-sprint-1?node-id=0-1&t=opYGE62FZeSNiRjx-1
 
 ## Описание
 
-Краткое опишите, какую задачу решает проект. Пользователь не верит обещаниям и не готов читать «полотна» текста. Поэтому в описании достаточно нескольких строк:
-
-![Описание](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/desc.png)
-
-Авторы **React** дробят описание на абзацы и списки — так проще пробежаться глазами по тексту и найти ключевую информацию.
-
-Если у проекта есть сайт, добавьте ссылку в заголовок.
-
-## Установка
-
-Лучше всего пользователя убеждает собственный опыт. Чем быстрее он начнёт пользоваться проектом, тем раньше почувствует пользу. Для этого помогите ему установить приложение: напишите краткую пошаговую инструкцию.
-
-Если проект предназначен для разработчиков, добавьте информацию об установке тестовых версий. Например:
-
-- `npm install` — установка стабильной версии,
-- `npm start` — запуск версии для разработчика,
-- `npm run build:prod` — сборка стабильной версии.
-
-## **Примеры использования**
-
-Хорошо, если сразу после установки пользователь сможет решить свои задачи без изучения проекта. Это особенно верно, если ваш пользователь — не профессиональный разработчик. Но даже профессионал поймёт вас лучше, если показать примеры использования:
-
-![Ссылки](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/link.png)
-
-Для более подробных инструкции добавьте новые разделы или ссылки:
-
-- на документацию,
-- вики проекта,
-- описание API.
-
-В учебном проекте будут полезен раздел с описанием стиля кода и правилами разработки: как работать с ветками, пул-реквестами и релизами.
-
-### **Команда**
-
-Если вы работаете в команде, укажите основных участников: им будет приятно, а новые разработчики охотнее присоединятся к проекту. «Гитхаб» — не просто инструмент, это социальная сеть разработчиков.
-
-![Команда](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/team.png)
-
-### **Примеры README**
-
-- «[Реакт](https://github.com/facebook/react)»,
-- «[Эхо](https://github.com/labstack/echo)»,
-- «[Вебпак](https://github.com/webpack/webpack)»,
-- «[ТДенгине](https://github.com/taosdata/TDengine)»,
-- «[Соул-хантинг](https://github.com/vladpereskokov/soul-hunting/)».
+Макет отрисовал отталкиваясь от представленного макета на курсе и собственных наработок.
+
+Отверстал все страницы по макету, на главную добавил список ссылок на все страницы для удобной навигации. По возможности старался вынасить некоторые блоки, которые возможно будут использоваться где-то еще в проекте в отдельные компоненты. 
+
+Подключил шаблонизатор Handlebars. Так как я использовал подход при котором компиляция и рендеринг происходит на сервере, пришлось разместить все компоненты сайта в одной папке.
+
+## Структура проекта
+
+```bash
+project-root/
+│
+├── src/
+│   ├── components/
+│   │   ├── avatar.hbs
+│   │   ├── button.hbs
+│   │   ├── change-avatar.hbs
+│   │   ├── chat-item.hbs
+│   │   ├── error-message.hbs
+│   │   ├── form-group.hbs
+│   │   └── search-chats.hbs
+│   ├── pages/
+│   │   ├── error-not-found
+│   │   │   ├── index.html
+│   │   │   ├── index.js
+│   │   │   └── style.scss
+│   │   ├── error-server
+│   │   ├── login
+│   │   ├── messenger
+│   │   ├── profile
+│   │   ├── profile-change-data
+│   │   ├── profile-change-password
+│   │   └── sign-up
+│   ├── index.html
+│   ├── style.scss
+│   └── main.js
+│
+├── static/
+│   ├── assets/
+│   │   └── icons.svg
+│   └── favicon.png
+│
+├── dist/
+├── node_modules/
+│
+├── README.md
+├── .gitignore
+├── netlify.toml
+├── vite.config.js
+├── package-lock.json
+└── package.json
+```
+
+## Стек
+
+- ViteJS
+- Handlebars
+- SCSS
+- SVG
+
+## Установка проекта
+
+```bash
+npm install
+```
+
+## Основные команды
+
+```bash
+npm run dev — запуск версии для разработчика
+npm run start — запуск проекта
+npm run build — сборка стабильной версии
+```

netlify.toml

@@ -0,0 +1,10 @@
+# Global settings applied to the whole site.
+#
+# “base” is the directory to change to before starting build. If you set base:
+#        that is where we will look for package.json/.nvmrc/etc, not repo root!
+# “command” is your build command.
+# “publish” is the directory to publish (relative to the root of your repo).
+
+[build]
+  publish = "dist" 
+