mirsazzathossain.me

mirsazzathossain.me

これは、私の個人的なウェブサイトmirsazzathossain.meのソースコードです。このアカデミックポートフォリオWebサイトは、私のスキル、成果、および私の研究分野での経験を紹介する包括的で視覚的に魅力的なオンラインプレゼンスです。 next.jsを使用してWebサイトを構築しました。これは、サーバーレンダリングおよび静的に生成されたWebアプリケーションの作成を可能にする非常に人気のあるJavaScriptフレームワークです。モダンでプロフェッショナルなデザインを確保するために、私はユーティリティファーストCSSフレームワークであるTailwind CSSを利用し、Tailwind UIのSpotlightテーマに触発されました。私のウェブサイトのコンテンツは、コンテンツの作成と管理を簡素化するプラットフォームであるContentLayerの助けを借りて管理されており、効率的な組織とフォーマットのためにMarkdownで記述されています。私のウェブサイトにあるブログの投稿には、GitHubベースのディスカッションプラットフォームであるGiscusが搭載したコメントシステムが掲載されており、視聴者からのインタラクティブなコミュニケーションとフィードバックが可能です。さらに、Spotify Web APIを統合して、最近再生した曲をWebサイトで紹介し、HeroIconsのアイコンを使用してWebサイトの視覚的な魅力を強化しました。私のウェブサイトは、静的サイトとサーバーレス関数をホストするための信頼できるクラウドプラットフォームであるVercelでホストされており、すべてのユーザーにスムーズで高速なアクセスを確保しています。全体として、私のアカデミックポートフォリオのウェブサイトは、最新のテクノロジーを最新の状態にとどめることへの献身を示しており、ダイナミックで視覚的に印象的なオンラインプレゼンスを提示していると思います。

要するに、ウェブサイトの技術スタックは次のとおりです。

• フレームワーク：next.js
• スタイリング：Tailwind CSS
• アイコン：HeroIcons
• コンテンツ：マークダウン
• コンテンツ管理：ContentLayer
• 展開：Vercel
• コメント：ギスカス

概要

• app/* ：next.js新しいappディレクトリ構造を使用しました。このディレクトリにはメインアプリが含まれています。
• components/* ：すべてのカスタムコンポーネントはこのディレクトリに保存されます。
• content/* ：このディレクトリには、すべてのContentLayerコンテンツが含まれています。
• public/* ：このディレクトリには、Webサイトのすべての静的資産が含まれています。
• public/content/* ：このディレクトリには、Webサイトのすべての静的なコンテンツが含まれています。たとえば、プロジェクト、経験、教育など
• styles/* ：スタイリングにTailwind CSSを使用しました。このディレクトリには、Tailwind CSSグローバルスタイルとWebサイトのカスタムスタイルが含まれています。
• 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 Developer DashboardからSPOTIFY_CLIENT_IDとSPOTIFY_CLIENT_SECRET取得できます。 Spotify Web APIコンソールからSPOTIFY_REFRESH_TOKEN入手できます。

インスピレーション

このウェブサイトを構築するためのインスピレーションとして、次のWebサイトを使用しました。

• Delba -delba.dev
• Lee Robinson -Leerob.io
• Manu Arora -Manuarora.in
• Tailwind NextJSスターターブログ

Webサイトのスタイルは、Tailwind UIによるSpotlightテーマデザインに触発されています。