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的聚光主题设计。