astro portfolio

? Это бесплатный шаблон для создания веб-сайта-портфолио с использованием Astro 4.0 + Tailwind CSS .

Темный режим

Светлый режим

Отчет маяка

Оглавление

• Демо
• Функции
• Структура проекта
• Команды
• Содействие
• Кредиты

Демо

? https://astro-fe-portfolio.netlify.app/

Функции

✔️ Интеграция с Tailwind CSS (@astrojs/tailwind) с поддержкой темного режима .

✔️ Использует следующие интеграции:

• @astrojs/mdx
• @astrojs/изображение
• @astrojs/tailwind — с более красивым плагином сортировки классов
• @astro-icon
• @astro-seo
• @astro-navbar

✔️(@Playwright) e2e-тесты настроены.

Блог с заголовком (заголовок, описание, автор, дата, изображение, теги) и RSS-каналом, картой сайта и файлом robots.txt.

Страница ошибки 404

Структура проекта

Внутри вашего проекта Astro вы увидите следующие папки и файлы:

 /
├── public/
│   └── favicon.ico
|   ├── hero.png
|   └── ...
├── src/
|   ├── assets/
|   |   ├── images/
│   │   |   ├── hero.png
|   |   |   └── ...
│   ├── components/
│   │   ├── ui/
│   │   |   ├── BackToTop.astro
|   |   |   └── ...
│   │   ├── About.astro
│   │   ├── Contact.astro
|   |   └── ...
│   ├── content/
│   │   ├── projects/
│   │   │   ├── project-1.md
│   │   │   ├── project-1.md
│   │   │   └── ...
│   │   └-- config.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   ├── tests/
│   │   ├── index.spec.ts
├── package.json
├── astro.config.mjs
└── ...

Astro ищет файлы .astro , .md или .mdx в каталоге src/pages/ . Каждая страница отображается как маршрут на основе имени ее файла.

src/components/ — это место, куда мы помещаем любые компоненты Astro, а также src/layouts/ для макетов.

Изображения можно разместить в src/images/ .

Содержимое блога и документации создается как коллекции файлов Markdown или MDX в src/content .

Любые статические активы, например. изображения можно разместить в каталоге public/ .

Команды

Все команды запускаются из корня проекта, из терминала:

Команда	Действие
yarn	Устанавливает зависимости
yarn dev	Запускает локальный сервер разработки по адресу localhost:3000
yarn build	Создайте свой производственный сайт в ./dist/
yarn preview	Предварительный просмотр сборки локально перед развертыванием
yarn astro ...	Запустите команды CLI, такие как astro add , astro preview
yarn astro --help	Получите помощь по использованию Astro CLI
yarn test:e2e	Проведите тесты драматурга

Содействие

Если у вас есть какие-либо идеи, предложения или вы обнаружили какие-либо ошибки, не стесняйтесь открыть обсуждение, задать вопрос или создать запрос на включение. Это было бы очень полезно для всех нас, и мы были бы рады выслушать и принять меры.

Кредиты

Ресурсы разработаны (Freepik)[www.freepik.com].