На данном этапе мы установим необходимое программное обеспечение и познакомимся с основами:
- React;
- Figma;
- Styled components;

А так же узнаем как создать React проект на TypeScript, как и зачем использовать на проекте Git, как добавить репозиторий на GitHub, а так же как выложить проект на GitHub Pages.

На данном этапе в нашем проекте мы:
- подключим шрифты;
- настроим файл с кастомными свойствами;
- добавим стили, как в макете и попутно изучим синтаксис и возможности Styled Сomponents.

Так же разберем такие темы, как:
- каскадность и приоритет стилей;
- свойство display;
- свойство box-sizing;
- функция calc() и ее применение;
- градиенты;
- тень и свойства box-shadow, text-shadow, filter: drop-shadow();
- фильтры и свойста filter и backdrop-filter;
- трансформации в CSS и свойство transform;
- позиционирование и свойсво z-index;
- псевдоэлементы;
- структурные псевдоклассы;
- динамические псевдоклассы;
- стилизация скролла;
- свойство cursor;
- использование сетки GRID.

Как дополнение познакомимся с таким понятием как контейнер и доступность, рассмотрим 2 способа как красиво обрезать текст, 8 способов как спрятать элемент и как правильно вставлять интерактивные карты Google и Yandex.

В результате у нас получится статичная desktop-версия портфолио, соответствующая дизайну макета.

На данном этапе мы сделаем нашу верстку адаптивной и отзывчивой, чтобы она красиво выглядела на экранах разных устройств (десктоп, планшет, мобильные телефоны). Разберемся, чем адаптивный сайт отличается от отзывчивого. Научимся грамотно использовать директиву @media.

Рассмотрим так же:
- медиазапросы;
- адаптив шрифтов;
- адаптив изображений;
- свойство overflow.

После того, как все будет готово, мы сделаем рефакторинг кода, наведем порядок и проверим нашу верстку на Pixel Perfect.

В результате наша верстка будет полностью соответствовать макету и будет выглядеть одинаково красиво на разных устройствах.

В последнем модуле мы оживим наше портфолио. Добавим красивых анимаций элементам и динамики интерактивным элементам, чтобы кнопки нажимались менюшки открывались, слайдеры листались а так же подключим и настроим различные внешние библиотеки и добавим эффекты, такие как:
- burger menu;
- tabs;
- slider;
- эффект печатоющегося текста (Typewritter-effect);
- эффект для фото на главной странице (React-paralax-tilt);
- эффект для фона блоков Main и Slogan (Particles);
- плавный скролл к блокам (React-scroll);
- кнопка GoTop;
- плавные переходы для элементов при наведении и появлении (Transition);
- анимация на скролле (React-awesome-reveal);
- анимация для проектов (FramerMotion)

В результате у нас получится проект с чистым кодом, адаптивной версткой, сделанной по Pixel Perfect и полностью работающим функционалом.