🖱 ⌨️ 🖥 Мы - команда амбициозных дизайнеров и разработчиков, которые любят создавать бренд и качественный продукт, которые полностью удовлетворяют требованиям заказчика. Наша команда поможет вам реализовать самые безумные идеи для ваших сайтов, a также создать современный и востребованный дизайн. Каждый сайт, созданный в нашей студии, находится на первой строчке в поисковой выдаче.
Сайт - перейти
Дизайн - figma.com
1 --- Антон, главный по верстке
2 --- Наиль, главный по анимациям
3 --- Руслан, главный по адаптации
4 --- Софья, тимлид и дизайнер
11.12.2022 - началась верстка первой страницы.
22.12.2022 - конец работы над проектом.
Для распределения задач мы решили использовать Github Projects, чтобы отслеживать там полученные задания, правки и процесс выполнения. Задачи выдавала тимлид, в большинстве случаев они были сразу адресованы каждому участнику, иногда задачи оставались без получателя, и члены команды разбирали и выполняли их сами.
После выполнения, работа проверялась тимлидом - если были правки, о них сообщалось исполнителю, после чего он их фиксил, либо же тимлид делала это сама.
Была проделана масштабная работа, а именно:
- сверстаны 5 страниц;
- реализованы более 5 крупных анимаций;
- кнопка, копирующая ссылку нашего сайта (конечно же для того, чтобы поделиться им со всеми!);
- смена темы на темную со светлой и обратно;
- смена языка на англиский;
- необычная анимация прелоадера;
- карта с любимыми местами каждого участника;
- поиск среди выполненых проектов, который реализован с помощью выборки по тегам (у каждого проекта есть свой тег, который может повторяться);
- большой и уникальный дизайн-проект с адаптацией под 4 разрешения экранов;
- необычная фавиконка собственного производства;
- уникальные шрифты, которые не часто встретишь в обычных проектах;)
Главная страница
Темная тема
Страница "О нас"
Блок "Наши качества"
Технологии, которыми владеют участники
Наша команда
При наведении на фотографии можно увидеть магию✨
Любимые места с отметками на карте и ссылками
Страница "Портфолио"
Тут показаны наши проекты, а слева располагается поиск проектов по тегам
При выбраном теге будут отображаться все проекты
Кнопка "Посмотреть ещё", которая при нажатии отображает +4 проекта (всего 12)
Страница "Контакты"
Контакты нашего местонахождения вместе с картой
Форма обратной связи с нами, вместе с валидацией
если вы хотите сделать с нами что-нибудь вместе, обязательно пишите!
При добавлении данных, после прохождения валидации и согласии на обработку персональных данных, все написанное отправляется на почту одному из учатсников, где он может это видеть и контроллировать
Компоненты
Preloader
Меню бургер
С анимацией при наведении на ссылки:
Страница 404
Она была свёрстана без библиотек.
На ней присутствуют ссылки, которые имеют hover анимацию при наведении. Кнопка "поделиться" копирует ссылку на страницу, после того, как ссылка будет скопирована, название кнопки заменится на "Скопировано!".
Кнопка "посмотреть" также имеет анимацию при наведении, а при нажатии ведет на страницу "О нас".
В нижней правой части находятся кнопки смены языка - при нажатии на EN язык сменится на английский, а при нажатии на RU - обратно на русский. Это выбло выполнено при помощи библиотеки i18next. Суть в том, то создается два файла перевода на разные языки, каждому слову или фразе задается ключ, переводится на другой язык, и после в коде фраза заменяется этим ключом с функцией перевода.
Рядом присутсвует кнопка смены тем. При нажатии на нее один раз - она меняет тему на другую, при повторном нажатии - возвращает прошлую.
----> Страница "О нас".
В первом блоке идёт небольшая информация о нас, обрамлённая двумя стрелочками, которые меняют свое положение при адаптации.
Дальше идёт блок "наши качества" - в нём присутствует анимация при наведении на слова, которая была выполнена на чистом css, без использования библиотек. Следующий блок показывает технологии, которые использует наша студия. Анимация движущегося текста была сделана также на чистом css.
В блоке "познакомьтесь с командой" присутствуют наши фотографии, а снизу чёрные блоки; при наведении на такой блок показываются технологии, которыми владеет каждый участник и ссылки на его социальные сети, а при наведении на фотографию - происходит магия, на ней появляеться необычный фильтр.
В блоке "наши любимые места" присутствует карта с отметками мест в разных городах, а сверху ссылки на эти места в Яндекс картах. Карта была встроена с помощью конструктора карт.
----> Страница "Портфолио".
На этой странице расположены личные проекты каждого участника. Проекты находяться в сетке, шириной по 2. По умолчанию показывается 4 проекта и кнопка посмотреть ещё, при нажатии на данную кнопку появляются ещё проекты. Сами данные о проектах находятся в отдельном js файле, а значит, что их можно легко отредактировать. Слева сверху находится поиск проектов по тегам, при нажатии на тег показывается число проектов с этим тегом. Это всё было выполнено на чистом JavaScript.
----> Страница "Контакты".
На последней странице показывается карта во всю ширину экрана с адресом на наш главный офис.
Ниже находится форма обратной связи с нами.
Вы можете оставить нам свои контактные данные и мы с вами свяжемся. Для того, чтобы это сделать, нужно заполнить 4 обязательных поля:
- имя, фамилия;
- email;
- телефон;
- согласие на обработку персональных данных.
После нажатия на кнопку отправки, данные попадают на почту одному из участников.
Данная форма была выполнена с помощью библиотеки react-hook-form.
Адаптация была сделала с помощью медиазапросов в css, и библиотеки react-responsive.