mirsazzathossain.me скачать - mirsazzathossain.me исходный код скачать

mirsazzathossain.me

AI Исходный код

1.0.0

Скачать

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

mirsazzathossain.me

Это исходный код моего личного сайта mirsazzathossain.me. Этот сайт академического портфеля представляет собой всеобъемлющее и визуально привлекательное присутствие в Интернете, которое демонстрирует мои навыки, достижения и опыт в моей области обучения. Я построил веб-сайт, используя Next.js, очень популярную фреймворк JavaScript, которая позволяет создавать сервер-рендерированные и статически генерируемые веб-приложения. Чтобы обеспечить современный и профессиональный дизайн, я использовал Tailwind CSS, утилиту, первую структуру CSS, и была вдохновлена темой прожектора от пользовательского интерфейса Tailwind. Содержание моего веб -сайта управляется с помощью ContentLayer, платформы, которая упрощает создание и управление контентом и написано в Markdown для эффективной организации и форматирования. В блоге на моем веб-сайте представлены комментирующая система, основанная на Giscus, платформе для обсуждения на основе GitHub, которая позволяет интерактивно общение и отзывы от моей аудитории. Кроме того, я интегрировал веб -API Spotify, чтобы продемонстрировать мои недавно сыгранные песни на веб -сайте и использовал иконки от героев для улучшения визуальной привлекательности моего веб -сайта. Мой веб -сайт размещен на Vercel, надежной облачной платформе для размещения статических сайтов и функций без серверов, обеспечивая плавный и быстрый доступ для всех пользователей. В целом, я полагаю, что мой сайт академического портфеля демонстрирует мою преданность делу о том, чтобы быть в курсе современных технологий и представляет динамичное и визуально поразительное присутствие в Интернете.

Короче говоря, технический стек сайта заключается в следующем:

Структура: Next.js
Стиль: Tailwind CSS
Иконки: герои
Контент: отметка
Управление контентом: ContentLayer
Развертывание: Vercel
Комментарии: Гискус

Обзор

app/* : я использовал New.js Новую структуру каталогов app . Этот каталог содержит основное приложение.
components/* : Все пользовательские компоненты хранятся в этом каталоге.
content/* : Этот каталог содержит все содержимое ContentLayer.
public/* : Этот каталог содержит все статические активы веб -сайта.
public/content/* : Этот каталог содержит все статическое содержание веб -сайта. Например, проекты, опыт, образование и т. Д.
styles/* : я использовал Tailwind CSS для стиля. Этот каталог содержит глобальные стили CSS CSS и несколько пользовательских стилей для веб -сайта.
utils/* : Этот каталог содержит некоторые функции утилиты.

Клонирование и развязка

Если вы хотите клонировать или развеять этот репозиторий, пожалуйста, убедитесь, что удалите content и public каталоги, поскольку они содержат мой личный контент и активы. Вы можете добавить свой собственный контент и активы в content и public каталоги соответственно.

Клонировать репозиторий, выполнив следующую команду.

git clone https://github.com/mirsazzathossain/mirsazzathossain.me.git
# or
git clone [email protected]:mirsazzathossain/mirsazzathossain.me.git

Вы можете удалить content и public каталоги, выполнив следующие команды.

rm -rf content
rm -rf public

Добавьте свой собственный контент и активы в content и public каталоги соответственно.

Установка

Установите зависимости, выполнив следующую команду.

npm install
# or
yarn install

Наконец, запустите следующую команду, чтобы запустить сервер разработки.

npm run dev
# or
yarn dev

Откройте http: // localhost: 3000 с вашим браузером, чтобы увидеть результат.

Примечание . Вы должны создать файл .env в корневом каталоге и добавить следующие переменные среды, чтобы работать интеграцией Spotify.

SPOTIFY_CLIENT_ID=yourspotifyclientid
SPOTIFY_CLIENT_SECRET=yourspotifyclientsecret
SPOTIFY_REFRESH_TOKEN=yourspotifyrefreshtoken

Вы можете получить SPOTIFY_CLIENT_ID и SPOTIFY_CLIENT_SECRET от Dashboard Developer Spotify. Вы можете получить SPOTIFY_REFRESH_TOKEN из консоли Spotify Web API.