jacques-fresco / caps

Сайт диджитал агентства CAPS

Проект CAPS Agency

Представляет собой одностраничное приложение для диджитал агентства CAPS Agency

Описание

В приложении реализован следующий функционал:

• бегущая строка с отображением текущих клиентов агентства
• якорные ссылки с плавным скроллом к различным секциям сайта
• при скролле вниз и исчезновении из области видимости первой основной секции появляется допонительное меню с навигацией в верхей части сайта
• слайдер с информацией о каждом сотруднике (переключение слайдов либо по стрелке в правой части карточки, либо при нажатии на соответсвующую специальность)
• голосовые сообщения сотрудников
• слайдер с карточками различных кейсов
• секция с услугами агентства, где все данные, введённые пользователем, собираются в один объект (отображается в консоли разработчика при отправке)

Технологии:

1. Адаптивная вёрсткая
2. Использование препроцессора Sass/SCSS
3. Использование методологии БЭМ
4. Приложение было собрано с помощью CRA (Create React App)
5. Был использован компонентный подход с использованием технологий React
6. Анимации появления элементов реализованы с помощью Intersection Observer API (react-intersection-observer) и библиотеки react-awesome-reveal
7. Голосовые сообщения реализованы при помощи wavesurfer.js

Инструкция по развёртыванию:

1. Клонируйте данный репозиторий локально на своё устройство
2. Установите зависимости при помощи команды npm i
3. Запустите проект с помощью команды npm run start

Статус разработки:

Разработан основной функционал приложения

Из доработок планируется:

• оптимизация ререндера компонентов
• отправка данных пользователя на бэкенд
• типизация кода на TypeScript

Ссылки

Демо: https://stankena.github.io/caps