mirsazzathossain.me

mirsazzathossain.me

這是我個人網站mirsazzathossain.me的源代碼。這個學術投資組合網站是一個全面且具有視覺吸引力的在線形象，它展示了我在我的學習領域的技能，成就和經驗。我使用Next.js構建了網站，這是一個非常流行的JavaScript框架，允許創建服務器渲染和靜態生成的Web應用程序。為了確保現代專業的設計，我利用了Tailwind CSS，這是一個公用事業優先的CSS框架，並受到了Tailwind UI的聚光主題的啟發。我的網站的內容在ContentLayer的幫助下進行管理，該平台簡化了內容的創建和管理，並寫在Markdown中，以進行有效的組織和格式化。我網站上的博客文章具有由GISCUS提供支持的評論系統，Giscus是一個基於GitHub的討論平台，允許我的受眾進行交互式溝通和反饋。此外，我集成了Spotify Web API，以展示我最近在網站上播放的歌曲，並使用了英雄的圖標來增強網站的視覺吸引力。我的網站託管在Vercel上，Vercel是一個可靠的雲平台，用於託管靜態站點和無服務器功能，可確保所有用戶的平穩而快速訪問。總體而言，我相信我的學術作品集網站展示了我致力於使用現代技術保持最新狀態的奉獻精神，並展示了動態且視覺上引人注目的在線形象。

簡而言之，網站的技術堆棧如下：

• 框架：next.js
• 造型：尾風CSS
• 圖標：英雄
• 內容：Markdown
• 內容管理：ContentLayer
• 部署：Vercel
• 評論：giscus

概述

• app/* ：我已經使用了Next.js新app目錄結構。該目錄包含主應用。
• components/* ：所有自定義組件都存儲在此目錄中。
• content/* ：此目錄包含所有contentlayer內容。
• public/* ：此目錄包含網站的所有靜態資產。
• public/content/* ：此目錄包含網站的所有靜態內容。例如項目，經驗，教育等
• styles/* ：我已經使用了Tailwind CSS進行樣式。該目錄包含Tailwind 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開發人員儀表板中獲取SPOTIFY_CLIENT_ID和SPOTIFY_CLIENT_SECRET 。您可以從Spotify Web API控制台獲得SPOTIFY_REFRESH_TOKEN 。

靈感

我已經使用以下網站作為構建本網站的靈感。

• delba -delba.dev
• Lee Robinson -Leerob.io
• manu arora -manuarora.in
• tailwind NextJS入門博客

該網站的樣式靈感來自Tailwind UI的聚光主題設計。