https://github.com/sweetconsole/babushka
Верстка многостраничного сайта на React.js. про разработку сайтов и сервисов для ресторанов и баров
https://github.com/sweetconsole/babushka
framer-motion html javascript react react-router-dom react-scroll sass typescript vercel vite
Last synced: 24 days ago
JSON representation
Верстка многостраничного сайта на React.js. про разработку сайтов и сервисов для ресторанов и баров
- Host: GitHub
- URL: https://github.com/sweetconsole/babushka
- Owner: sweetconsole
- Created: 2025-03-03T21:27:27.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-22T16:19:16.000Z (10 months ago)
- Last Synced: 2025-07-22T18:08:45.224Z (10 months ago)
- Topics: framer-motion, html, javascript, react, react-router-dom, react-scroll, sass, typescript, vercel, vite
- Language: TypeScript
- Homepage: https://sweetconsole.github.io/babushka/dist/
- Size: 39.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Babushka
Многостраничный сайт на React.js. В качестве языка программирования используется TypeScript, сборщиком проекта является Vite.
## Технологии
## Тематика сайта
Разработка сайтов и сервисов для ресторанов и баров, а также их продвижение и SEO оптимизация. Сайт включает в себя главную страницу, страницы проектов, блогов, 4 статьи и 6 кейсов, обработки персональных данных, а также страницу 404.
## Особенности сайта
Визуальные:
* Анимации появления, сделанные при помощи Framer Motion.
* Анимация скроллинга при клике на кнопку ведущая на объект, реализованная при помощи React Scroll.
* Полностью адаптивный сайт.
* В подсказке поле имени случайного выбирается имя из конфига.
* Поля Ваше Имя и Ваш номер телефона имеют валидацию.
Технические:
* Стили являются модульными SCSS файлами.
* Навигация на сайте сделана при помощи конфига со всеми маршрутами, что помогает не ошибиться в написании url адресов.
* Если пользователь попадает на несуществующую страницу, то его перебрасывает на страницу 404.
* Все изображения имеют alt свойство, а кнопки-иконки aria-label.
* SEO оптимизация: Open Graph теги, описание, заголовок, иконки, автор и ключевые слова.
* Разделен бандл на два чанка: основной и плагины
## Превью сайта
#### Главная страница
#### Страница блогов
#### Страница блога
#### Страница кейсов
#### Страница кейса
## Архитектура
```
├── dist - директория билда проекта
├── public - директория для иконок и превью изображений
│
├── src - рабочая директория
│ ├── assets
│ │ ├── fonts - директория шрифтов
│ │ ├── images - директория изображений
│ │ └── styles
│ │ ├── fonts.scss - стили инициализация шрифтов
│ │ ├── reset.scss - файл сброса стилей браузеров
│ │ └── variables.scss - файлы переменных
│ │
│ ├── components
│ │ ├── * - компоненты
│ │ ├── ui
│ │ │ ├── * - компоненты ui элементов
│ │ │ ├── animated - директория анимированных компонентов
│ │ │ ├── blogs - директория компонентов страниц и блоков блога
│ │ │ ├── cases - директория компонентов страниц и блоков кейсов
│ │ │ ├── form - директория компонентов формы
│ │ │ └── index.ts - файл сокращения импортов
│ │ │
│ │ └── index.ts - файл сокращения импортов
│ │
│ ├── config
│ │ ├── names.config.ts - конфигурация для подсказки имени в форме
│ │ ├── pages.config.ts - конфигурация страни сайта
│ │ ├── social.config.ts - конфигурация ссылком и номеров (телефон, соц.сети, ОГРН, ИНН)
│ │ └── valid.config.ts - конфигурация паттернов валидации форм
│ │
│ ├── hooks
│ │ └── useMediaQuery.ts - хук получения размера экрана
│ │
│ ├── pages - директория страниц сайта
│ │ └── index.ts - файл сокращения импортов
│ │
│ ├── utility
│ │ ├── animation.ts - описание Framer Motion анимаций
│ │ ├── pickRandomItems.ts - функция, возращающая
│ │ ├── randomName.ts - функция, возращающая случайное именя из конфига имен
│ │ └── shuffledArray.ts - функция перемешивания массива
│ │
│ └── vite-env.d.ts - файл определения типов переменных окружения
│
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```
## Запуск проекта
Для запуска проекта необходимо выполнить следующие действия:
1. С клонировать проект на ваш компьютер с [Github](https://github.com/sweetconsole/babushka) с помощью команды:
```
git clone https://github.com/sweetconsole/babushka.git
```
2. Установить зависимости:
```
npm install
```
3. Запустить проект:
```
npm start
```