Задача

По условию экзамена нужно было реализовать веб-приложение для создания резюме на основе заданного grid-дизайна: набор блоков (аватар, инфо о себе, языки, образование, интересы, контакты, опыт) на сетке, каждый блок редактируется прямо на странице.

Архитектура

Я предпочёл не просто сверстать по шаблону, а реализовать масштабируемую и кастомизируемую систему.

Ключевое решение — свести задачу к добавлению нового типа блока, а не городить условную логику внутри одного компонента. В основе лежит базовый класс Component, от которого наследуется Box — общая коробка грида. От Box, в свою очередь, наследуются конкретные блоки резюме: AvatarBox, InfoBox, LanguagesBox, EducationBox, InterestsBox, ContactsBox, ToolsBox, ExperienceBox.

Каждый блок описывается объектом конфигурации с позицией в гриде (row, col, rows, cols) и полезной нагрузкой, специфичной для типа — например, у AvatarBox это src с путём к изображению. Для создания блоков и размещения их в Grid используется Фабричный метод, а для работы со свойствами — паттерн Конфигурационный объект. Стили при этом изолированы на уровне отдельных блоков, без завязки на глобальные классы.

Готовое резюме можно выгрузить в PDF прямо из браузера — страница рендерится в канвас через html2canvas и упаковывается в PDF через jsPDF, без похода на сервер.

Запуск

git clone https://github.com/tolstovrob/tbank-intensive-js-entry
cd tbank-intensive-js-entry
npm install
npm run dev