Next.js, Typescript 및 TailwindCSS를 사용한 포트폴리오 템플릿

안녕하세요. 이 기사에서는 Next.js, Typescript 및 TailwindCSS로 만든 멋진 포트폴리오 템플릿을 공유합니다. 이 템플릿은 아름다운 개인 포트폴리오 웹사이트를 구축하기 위해 설계되었습니다. 훌륭한 사용자 정의 옵션이 있습니다. 완벽하게 반응하고 모든 장치에서 멋지게 보입니다. 이 템플릿에는 포트폴리오 및 블로그 게시물을 위한 맞춤형 페이지가 포함되어 있습니다. 자신의 프로젝트와 서비스를 보여주고 자신의 플랫폼에서 생각과 지식을 공유하려는 디자이너, 개발자 또는 프리랜서에게 적합합니다. 마지막으로 깔끔하고 미니멀한 디자인입니다.

데모 라이브 위치: https://pofology.bdlancers.com/

특징

Typescript, NextJS 및 Tailwindcss 기반 구축

밝고 어두운 테마 지원

모든 장치에서 반응 가능

모바일 장치의 플로팅 메뉴

React 아이콘과 통합됨

쉽게 사용자 정의 가능

재사용 가능한 구성 요소

사용하는 방법

NodeJ 설치

이 템플릿을 실행하려면 컴퓨터에 nodejs가 설치되어 있어야 합니다. https://nodejs.org에서 Node.js를 다운로드할 수 있습니다.

저장소 복제

   git clone [email protected]:mostafizurhimself/getprofile.git

프로젝트 디렉토리로 이동

   cd getprofile

그런 다음 사용하려는 템플릿 폴더로 이동합니다. 예를 들어 Pofology 템플릿을 사용하려면 pofology 폴더로 이동합니다.

    cd pofology

종속성 설치

    yarn install

또는 npm을 사용하는 경우

    npm install

프로젝트 실행

    yarn dev

또는 npm을 사용하는 경우

    npm run dev

이제 http://localhost:3000에서 실행 중인 프로젝트를 볼 수 있습니다.

NB: npm을 사용하는 경우 yarn.lock 파일을 제거하십시오.

프로젝트 구조

프로젝트 루트에는 두 개의 기본 폴더public 및 src와 기타 구성 관련 파일이 있습니다.

공개

글꼴 → 응용 프로그램 글꼴

이미지 → 애플리케이션 이미지

소스

구성 요소 → 재사용 가능한 반응 구성 요소

형태 → 형태 관련 부품

아이콘 → 사용자 정의 아이콘 구성 요소

부분 → 큰 레이아웃의 일부이지만 반복적으로 사용되지 않는 구성 요소

공유 → 반복적으로 사용되는 구성요소

데이터 → 애플리케이션용 정적 데이터

후크 → 재사용 가능한 맞춤형 반응 후크

레이아웃 → 앱 기본 레이아웃 포함

페이지 → 응용 프로그램

에 사용 가능한 페이지가 있습니다.

블로그

[ID].tsx

index.tsx

작품

[ID].tsx

index.tsx

_app.tsx

접촉.tsx

index.tsx

스타일 → 응용 프로그램 포함 . scss 파일

모듈 → 반응 구성 요소에서 직접 사용되는 스타일 모듈

부분 → SCSS 부분 파일

app.scss → 애플리케이션에 의해 로드되는 기본 SCSS 파일

유형 → 애플리케이션의 유형 정의

진행중인 작업

템플릿에 대한 백엔드 CMS를 추가합니다

.

더 많은 템플릿 추가

내 작업에 대한 업데이트를 받으려면 github에서 나를 팔로우하십시오.

궁금한 점이 있으면 언제든지 문의해 주세요. 그리고 이 프로젝트가 마음에 든다면 ⭐️를 주세요.