mirsazzathossain.me

mirsazzathossain.me

이것은 내 개인 웹 사이트의 소스 코드 Mirsazzathossain.me입니다. 이 학술 포트폴리오 웹 사이트는 내 연구 분야의 기술, 업적 및 경험을 보여주는 포괄적이고 시각적으로 매력적인 온라인 존재입니다. 나는 서버 렌더링 및 정적으로 생성 된 웹 애플리케이션을 생성 할 수있는 매우 인기있는 JavaScript 프레임 워크 인 Next.js를 사용하여 웹 사이트를 구축했습니다. 현대적이고 전문적인 디자인을 보장하기 위해 유틸리티 우선 CSS 프레임 워크 인 Tailwind CSS를 활용했으며 Tailwind UI의 스포트라이트 테마에서 영감을 받았습니다. 내 웹 사이트의 내용은 컨텐츠 생성 및 관리를 단순화하는 플랫폼 인 ContentLayer의 도움으로 관리되며 효율적인 구성 및 형식을 위해 Markdown에 작성됩니다. 내 웹 사이트의 블로그 게시물에는 GitHub 기반 토론 플랫폼 인 GISCUS가 구동하는 댓글 시스템이있어 대화식 커뮤니케이션 및 청중의 피드백이 가능합니다. 또한 Spotify Web API를 통합하여 최근에 재생 된 웹 사이트에서 노래를 전시하고 Heroicon의 아이콘을 사용하여 웹 사이트의 시각적 매력을 향상 시켰습니다. 내 웹 사이트는 정적 사이트 및 서버리스 기능을 호스팅하기위한 신뢰할 수있는 클라우드 플랫폼 인 Vercel에서 호스팅되어 모든 사용자에게 부드럽고 빠른 액세스를 보장합니다. 전반적으로, 나는 Academic Portfolio 웹 사이트가 현대 기술에 대한 최신 기술에 대한 헌신을 보여주고 역동적이고 시각적으로 인상적인 온라인 존재를 제시한다고 생각합니다.

요컨대, 웹 사이트의 기술 스택은 다음과 같습니다.

• 프레임 워크 : Next.js
• 스타일링 : Tailwind CSS
• 아이콘 : 영웅
• 내용 : Markdown
• 컨텐츠 관리 : ContentLayer
• 배포 : Vercel
• 의견 : Giscus

개요

• app/* : Next.js New 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 Developer Dashboard에서 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의 Spotlight 테마 디자인에서 영감을 얻었습니다.