Тестовый проект для позиции Frontend Разработчика

Этот проект представляет собой тестовое задание для позиции frontend разработчика в компании Fruktorum. Задача состоит в разработке клиентской части веб-сайта, на котором владелец может публиковать статьи. Содержимое страниц генерируется динамически с использованием данных, полученных от headless CMS через API.

🚀 Посмотреть рабочий проект

Основные требования

• Использование Nuxt 3, Vite, Composition API, Pinia
• Использование PUG для vue шаблонов и SCSS + BEM для стилей
• Адаптивный дизайн
• Страницы должны максимально соответствовать предоставленному макету (Pixel perfect не требуется)

Структура проекта

API

Примеры запросов:

• http://devtwit8.ru/api/v1/page/?path=/
• http://devtwit8.ru/api/v1/page/?path=/article-1

Макет

Ссылка на макет в Figma

Типы блоков

1. Текстовый блок (text_block): содержит заголовки, параграфы, цитаты и списки.
2. Блок изображения (image_block): содержит изображение с возможным описанием.
3. Слайдер (slider_block): простой слайдер с изображениями.
4. Подписка на рассылку (subscribe_form_block): блок подписки.
5. Форма (cta_form_block): форма для обратной связи или других целей.
6. Список статей (article_list_block): блок с перечнем статей.
7. Вступительный блок статьи (article_intro_block): содержит заголовок, время чтения, количество просмотров, краткое описание и изображение.

Запуск проекта

Для запуска проекта выполните следующие шаги:

1. Клонируйте репозиторий
2. Установите зависимости, запустив npm install или yarn install
3. Запустите проект, выполнив npm run dev или yarn dev

Контактные данные:

• Телефон: 8 800 555-22-38
• Сайт: fruktorum.com/ru
• Email: hi@fruktorum.com