Портфолио беті

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 - Барлық мәтіндік мазмұн, жоба деректері және санаттар.

Баптау (Customization)

Негізгі лендинг бетінің арнайы бөлімдерінен айырмашылығы, Портфолио беті локализация файлдары арқылы толығымен деректермен басқарылады. Бұл кодқа тиіспей-ақ жобаларды қосуды жеңілдетеді.

Жобаларды басқару

Жобаларыңызды басқару үшін src/locales/kk/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": "Мобильді қолданба"
  }
}

Мүмкіндіктер

• Динамикалық сүзгілеу: Таза анимациялары бар клиент жағындағы санаттар бойынша сүзгілеу.
• Егжей-тегжейлі көрініс (Detail View): “Қиындық”, “Шешім” және “Әсерді” (Impact) көрсететін әрбір жоба үшін кеңейтілетін мәліметтер тақтасы.
• Тақырыпқа бейімделу: Белсенді тақырып үшін дұрыс тақырыпты (header), төменгі колонтитулды (footer) және стилизацияны автоматты түрде пайдаланады.
• Адаптивті: Мобильді құрылғыларда, планшеттерде және жұмыс үстелінде жұмыс істейтін толық адаптивті макет.