a bd.me

Мой личный сайт

Веб-сайт моего личного портфолио спроектирован так, чтобы быть простым и понятным, но в то же время включает в себя такие функции, как сообщения в блоге MDX с количеством просмотров, переключение темного режима, список оборудования, страницу «О нас» и многое другое.

Технический стек

бэкэнд:

• Next.js/ТипСкрипт
• MDX/Contentlayer (сообщения в блоге)
• PlanetScale (база данных)
• Призма (ОРМ)

внешний интерфейс:

• CSS попутного ветра (стиль)
• Radix Primitives (безголовые компоненты пользовательского интерфейса)
• Цвета пользовательского интерфейса Radix (система цвета)
• Framer Motion (анимация)

Начиная

Убедитесь, что на вашем компьютере установлен Node.js v18.17.0+.

1. Зависимости установки : npm install
2. Переменные среды : скопируйте .env.example в новый .env.local
3. Настройка базы данных : см. Настройка базы данных.
4. Настройка Prisma : npm install @prisma/client (если вы еще этого не сделали), затем запустите npx prisma generate .
5. Начните разработку : npm run dev . Это автоматически создаст файлы .contentlayer и запустит сервер разработки Next.js.

Настройка базы данных

• Зарегистрируйте учетную запись PlanetScale
• Создайте новую базу данных в PlanetScale.
• Обновите переменную среды DATABASE_URL в файле .env.local вашего проекта, указав строку подключения, предоставленную PlanetScale.

Развертывание

Этот проект можно быстро развернуть в Верселе. Просто подключите свою учетную запись Vercel к репозиторию GitHub, и Vercel будет автоматически создавать и развертывать ваше приложение при каждом новом отправке в основную ветку.

Добавьте переменные проекта .env в настройки проекта Vercel.