Страница Портфолио
Новинка в AstroGlass: Страница Портфолио — это отдельный динамический маршрут, который обеспечивает богатую презентацию ваших проектов. Она включает фильтрацию по категориям, детальный просмотр проектов и дизайн, адаптирующийся к вашей активной теме.
Архитектура
Страница портфолио доступна по адресу /[theme]/portfolio (например, /liquid/portfolio, /glass/portfolio). Она использует стратегию динамической маршрутизации, аналогичную основным страницам тем.
Структура файлов
- Маршрут:
src/pages/[theme]/portfolio.astro— Обработчик динамического маршрута. - Компоненты:
src/components/pages/portfolio/{theme}/— Модульные реализации секций для конкретных тем (например,PortfolioHeroLiquid.astro,PortfolioGridLiquid.astro). - Контент:
src/locales/{lang}/portfolioPage.json— Весь текстовый контент, данные проектов и категории.
Настройка
В отличие от секций лендинга, Страница Портфолио полностью управляется данными через файлы локализации. Это позволяет легко добавлять проекты, не касаясь кода.
Управление проектами
Редактируйте src/locales/ru/portfolioPage.json для управления вашими проектами.
{ "projects": { "p1": { "title": "Название Проекта", "description": "Краткое описание для карточки.", "longDescription": "длинное описание для детального просмотра...", "category": "webapp", "techStack": ["React", "Node.js"], "color": "from-violet-500 to-fuchsia-500" } }}Категории
Категории определяются в том же JSON файле и используются для фильтрации.
{ "filterAll": "Все", "categoryLabels": { "webapp": "Веб-приложение", "mobile": "Мобильное прил." }}Возможности
- Динамическая фильтрация: Клиентская фильтрация по категориям с плавной анимацией.
- Детальный просмотр: Раскрывающаяся панель деталей для каждого проекта, показывающая “Задачу”, “Решение” и “Результат”.
- Адаптация темы: Автоматически использует правильный хедер, футер и стилизацию для активной темы.
- Адаптивность: Полностью адаптивная верстка, работающая на мобильных устройствах, планшетах и десктопах.