# Создание профессионального веб-портфолио на SvelteKit и TailwindCSS: полный гайд
Источник: https://www.youtube.com/watch?v=-2UjwQzxvBQ
Канал: freeCodeCamp.org
Опубликовано: 03.10.2023
---
В современном мире разработки ПО личное портфолио перестало быть просто списком ссылок на GitHub. По мнению фулстек-разработчика и автора образовательного контента Джеймса Макартура, персональный сайт — это «цифровое пространство, демонстрирующее не только навыки, но и индивидуальность программиста» [0:52]. В новом масштабном туториале на канале freeCodeCamp.org Макартур детально разбирает процесс создания высокопроизводительного и эстетичного веб-портфолио, используя связку SvelteKit и TailwindCSS.
## 🛠 Основы стека: Почему SvelteKit и TailwindCSS?
[[JUMP:0:00]]
Выбор инструментов для проекта обусловлен их эффективностью и скоростью разработки. SvelteKit выступает в роли мощного фреймворка, обеспечивающего серверный рендеринг (SSR) и удобную систему роутинга [0:12]. В отличие от традиционных библиотек, Svelte переносит большую часть работы на этап компиляции, что делает итоговые приложения легче.
TailwindCSS дополняет архитектуру как утилитарный CSS-фреймворк, позволяющий создавать уникальные интерфейсы без написания громоздких кастомных стилей [0:26]. Макартур утверждает, что комбинация этих инструментов предоставляет разработчикам «бесшовный опыт» при создании интерактивных и адаптивных веб-приложений.
Проект, предлагаемый в обучении, включает:
* Интерактивную главную страницу с анимацией частиц.
* Раздел проектов с использованием переиспользуемых компонентов.
* Блок «О себе» с акцентом на UX и типографику.
* Сравнительную таблицу компетенций для потенциальных работодателей.
## 🚀 Инициализация и архитектура проекта
[[JUMP:2:39]]
Процесс начинается с настройки рабочего окружения. Макартур использует Visual Studio Code и терминал для выполнения стандартных команд инициализации [3:32].
Основные шаги по развертыванию среды:
1. Создание проекта: `npm create svelte@latest` (выбирается шаблон Skeleton Project без проверки типов) [3:06].
2. Установка зависимостей Tailwind: `npm install -D tailwindcss postcss autoprefixer` [3:46].
3. Инициализация конфигурации: `npx tailwindcss init -p` [3:58].
Автор уделяет особое внимание структуре файлов в SvelteKit. Папка `src/routes` является ключевой: файл `+layout.svelte` служит оберткой для всего приложения, позволяя сохранять состояние хедера и футера при навигации, а `+page.svelte` отвечает за контент конкретной страницы [4:52]. Для глобальных стилей создается файл `app.css`, где подключаются базовые директивы Tailwind (@tailwind base, components, utilities).
## 🎨 Визуальное оформление: Типографика и анимация
[[JUMP:6:46]]
Для придания портфолио профессионального вида Макартур интегрирует внешние ресурсы. В качестве основного шрифта для заголовков выбран **Poppins**, а для основного текста — **Roboto** из библиотеки Google Fonts [12:37]. Иконки подключаются через Font Awesome CDN [7:50].
Особый акцент сделан на библиотеке **Particles.js**. Это легковесное решение позволяет создать эффект «движущихся частиц» на заднем плане, что, по словам автора, делает сайт визуально «глубже и интереснее» [1:46].
Настройка анимации включает:
* Подключение скрипта Particles.js в `app.html` [9:13].
* Создание JSON-конфигурации в папке `static/assets` для управления поведением частиц [11:19].
* Использование абсолютного позиционирования с отрицательным Z-индексом, чтобы анимация не перекрывала контент [9:26].
## 🏗 Разработка компонентов: Хедер и логика скролла
[[JUMP:15:06]]
Одной из «фишек» проекта является динамический хедер, меняющий свой вид при прокрутке страницы. Макартур реализует это через привязку переменной `Y` к состоянию окна браузера с помощью компонента `` [16:53].
Логика изменения стилей хедера:
* Если `y > 0` (пользователь начал скролл), хедер получает фоновый цвет `slate-950` и нижнюю границу (border-bottom) [24:04].
* Если пользователь находится в самом верху, фон остается прозрачным.
Внутри хедера Макартур использует блок `{#each tabs as tab, i}` для итерации по массиву навигационных ссылок (проекты, о себе, блог) [21:22]. Также реализована кнопка «Get in Touch», имеющая кастомный эффект наведения (hover) с использованием группы Tailwind-классов `group-hover` [26:21].
## 📂 Демонстрация работ через Slot и Props
[[JUMP:34:44]]
Раздел проектов (Creative Endeavors) построен на принципе переиспользуемости. Макартур создает компонент `Step.svelte`, который принимает данные через пропсы (`export let step`) и использует механизм слотов (``) для вставки произвольного HTML-кода [41:16].
В туториале разбираются три примера проектов:
1. **Small James Store** — магазин мерча на Next.js и Stripe [46:43].
2. **Ultimate Todos** — фулстек-приложение с использованием Firebase/Firestore [47:41].
3. **Pokedex** — приложение на SvelteKit, потребляющее внешнее API [48:39].
Использование слотов позволяет гибко настраивать описание каждого проекта, сохраняя при этом единую визуальную структуру карточек с иконками и кнопками перехода [43:03].
## 📊 Таблица компетенций и блок «О себе»
[[JUMP:50:01]]
Для секции «About Me» автор применяет псевдоэлементы `before` и `after` в Tailwind для создания стильных декоративных линий вокруг заголовков [52:02]. Макартур подчеркивает важность «софт-скиллов», поэтому включает в описание такие пункты, как навыки коммуникации и продуктовый дизайн [56:31].
Финальным штрихом контентной части становится сравнительная таблица. В ней автор в шутливой, но эффективной форме противопоставляет «Кандидата №1» и «Меня», используя иконки галочек и крестиков для демонстрации превосходства в критическом мышлении и способностях к программированию [1:02:15].
Технически таблица реализована с горизонтальным скроллом на мобильных устройствах (`overflow-x-scroll`), чтобы данные оставались читаемыми на любых экранах [1:05:42].
## 🚀 Финализация и адаптивность
[[JUMP:1:07:34]]
В завершение Макартур создает футер с контактами и ссылками на GitHub и LinkedIn [1:09:48]. Особое внимание уделяется адаптивности (responsiveness): на протяжении всего урока используются префиксы `sm:`, `md:` и `lg:`, чтобы макет корректно перестраивался из одноколоночного на мобильных устройствах в многоколоночный на десктопах [28:09].
Автор призывает зрителей не просто копировать код, а вносить свои изменения и делиться результатами в сообществе. По мнению Джеймса, создание такого портфолио — это лучший способ заявить о себе в индустрии, имея на руках живой, размещенный в сети проект [1:05].