В современном мире разработки ПО личное портфолио перестало быть просто списком ссылок на GitHub. По мнению фулстек-разработчика и автора образовательного контента Джеймса Макартура, персональный сайт — это «цифровое пространство, демонстрирующее не только навыки, но и индивидуальность программиста» . В новом масштабном туториале на канале freeCodeCamp.org Макартур детально разбирает процесс создания высокопроизводительного и эстетичного веб-портфолио, используя связку SvelteKit и TailwindCSS.
🛠 Основы стека: Почему SvelteKit и TailwindCSS? 0:00
Выбор инструментов для проекта обусловлен их эффективностью и скоростью разработки. SvelteKit выступает в роли мощного фреймворка, обеспечивающего серверный рендеринг (SSR) и удобную систему роутинга . В отличие от традиционных библиотек, Svelte переносит большую часть работы на этап компиляции, что делает итоговые приложения легче.
TailwindCSS дополняет архитектуру как утилитарный CSS-фреймворк, позволяющий создавать уникальные интерфейсы без написания громоздких кастомных стилей . Макартур утверждает, что комбинация этих инструментов предоставляет разработчикам «бесшовный опыт» при создании интерактивных и адаптивных веб-приложений.
Проект, предлагаемый в обучении, включает:
- Интерактивную главную страницу с анимацией частиц.
- Раздел проектов с использованием переиспользуемых компонентов.
- Блок «О себе» с акцентом на UX и типографику.
- Сравнительную таблицу компетенций для потенциальных работодателей.
🚀 Инициализация и архитектура проекта 2:39
Процесс начинается с настройки рабочего окружения. Макартур использует Visual Studio Code и терминал для выполнения стандартных команд инициализации .
Основные шаги по развертыванию среды:
- Создание проекта:
npm create svelte@latest(выбирается шаблон Skeleton Project без проверки типов) . - Установка зависимостей Tailwind:
npm install -D tailwindcss postcss autoprefixer. - Инициализация конфигурации:
npx tailwindcss init -p.
Автор уделяет особое внимание структуре файлов в SvelteKit. Папка src/routes является ключевой: файл +layout.svelte служит оберткой для всего приложения, позволяя сохранять состояние хедера и футера при навигации, а +page.svelte отвечает за контент конкретной страницы . Для глобальных стилей создается файл app.css, где подключаются базовые директивы Tailwind (@tailwind base, components, utilities).
🎨 Визуальное оформление: Типографика и анимация 6:46
Для придания портфолио профессионального вида Макартур интегрирует внешние ресурсы. В качестве основного шрифта для заголовков выбран Poppins, а для основного текста — Roboto из библиотеки Google Fonts . Иконки подключаются через Font Awesome CDN .
Особый акцент сделан на библиотеке Particles.js. Это легковесное решение позволяет создать эффект «движущихся частиц» на заднем плане, что, по словам автора, делает сайт визуально «глубже и интереснее» .
Настройка анимации включает:
- Подключение скрипта Particles.js в
app.html. - Создание JSON-конфигурации в папке
static/assetsдля управления поведением частиц . - Использование абсолютного позиционирования с отрицательным Z-индексом, чтобы анимация не перекрывала контент .
🏗 Разработка компонентов: Хедер и логика скролла 15:06
Одной из «фишек» проекта является динамический хедер, меняющий свой вид при прокрутке страницы. Макартур реализует это через привязку переменной Y к состоянию окна браузера с помощью компонента <svelte:window bind:scrollY={y} /> .
Логика изменения стилей хедера:
- Если
y > 0(пользователь начал скролл), хедер получает фоновый цветslate-950и нижнюю границу (border-bottom) . - Если пользователь находится в самом верху, фон остается прозрачным.
Внутри хедера Макартур использует блок {#each tabs as tab, i} для итерации по массиву навигационных ссылок (проекты, о себе, блог) . Также реализована кнопка «Get in Touch», имеющая кастомный эффект наведения (hover) с использованием группы Tailwind-классов group-hover .
📂 Демонстрация работ через Slot и Props 34:44
Раздел проектов (Creative Endeavors) построен на принципе переиспользуемости. Макартур создает компонент Step.svelte, который принимает данные через пропсы (export let step) и использует механизм слотов (<slot />) для вставки произвольного HTML-кода .
В туториале разбираются три примера проектов:
- Small James Store — магазин мерча на Next.js и Stripe .
- Ultimate Todos — фулстек-приложение с использованием Firebase/Firestore .
- Pokedex — приложение на SvelteKit, потребляющее внешнее API .
Использование слотов позволяет гибко настраивать описание каждого проекта, сохраняя при этом единую визуальную структуру карточек с иконками и кнопками перехода .
📊 Таблица компетенций и блок «О себе» 50:01
Для секции «About Me» автор применяет псевдоэлементы before и after в Tailwind для создания стильных декоративных линий вокруг заголовков . Макартур подчеркивает важность «софт-скиллов», поэтому включает в описание такие пункты, как навыки коммуникации и продуктовый дизайн .
Финальным штрихом контентной части становится сравнительная таблица. В ней автор в шутливой, но эффективной форме противопоставляет «Кандидата №1» и «Меня», используя иконки галочек и крестиков для демонстрации превосходства в критическом мышлении и способностях к программированию .
Технически таблица реализована с горизонтальным скроллом на мобильных устройствах (overflow-x-scroll), чтобы данные оставались читаемыми на любых экранах .
🚀 Финализация и адаптивность 1:07:34
В завершение Макартур создает футер с контактами и ссылками на GitHub и LinkedIn . Особое внимание уделяется адаптивности (responsiveness): на протяжении всего урока используются префиксы sm:, md: и lg:, чтобы макет корректно перестраивался из одноколоночного на мобильных устройствах в многоколоночный на десктопах .
Автор призывает зрителей не просто копировать код, а вносить свои изменения и делиться результатами в сообществе. По мнению Джеймса, создание такого портфолио — это лучший способ заявить о себе в индустрии, имея на руках живой, размещенный в сети проект .
