Dribbbox를 사용하여 자체 호스팅 Dribbble 포트폴리오 만들기

Dribbble은 디자인 영역에서 WIP 프로젝트, 디자인, 실물 모형 및 공짜 물건을 공유 할 수있는 인기있는 웹 사이트입니다. 그 답례로 디자인을 한 단계 높여주는 동료 디자이너들의 피드백과 비판을 받게됩니다..

포트폴리오를 표시하는 방법을 개인 설정하려는 경우 자신의 도메인 아래에 샷을 표시 할 수 있습니다. 이를 돕기 위해 Dribbbox를 사용해 볼 수 있습니다..

Dribbbox는 우리 도메인에서 Dribble 샷을 표시하는 데 도움이되는 라이브러리입니다. Dribbbox를 설정하여 아트 작품을 보여줄 수있는 방법을 살펴 보겠습니다..

Dribbbox 설치

도메인 및 서버 설정이 있다고 가정합니다. 공유 호스팅은 잘 작동합니다. 그렇지 않으면 로컬 서버가없는 경우 로컬 서버를 실행할 수 있습니다. AMPPS를 사용하여 로컬 서버를 설정하는 방법에 대한 지침이 필요하면 여기에서 읽어보십시오..

ZIP 패키지를 다운로드하고 컨텐츠를 서버에 업로드하십시오. index.html, config.js 및 assets 폴더를 포함하십시오..

그 config.js Dribbble에서 포트폴리오를 검색 할 사용자 이름을 지정하십시오.

이 경우 데모 용으로 Thoriq Firdaus의 포트폴리오를 사용하고 있습니다. 포트폴리오를 검색하는 방법은 다음과 같습니다..

 dribbbox.config = dribbble_username : "tfirdaus", short_description : "세계적인 디자이너가되고 싶습니다.", email_address : "[email protected]" 

저장하고 페이지를 새로 고칩니다..

정말 간단합니다. 그렇지 않습니다.?

Dribbbox의 포트폴리오

설정은 간단합니다. 당신은 세 개의 기둥이 있습니다. 연락처 세부 정보는 정적 측면 막대의 맨 왼쪽에 있습니다. Dribbble 샷은 가운데 스크롤이 가능한 열에 있으며, 오른쪽에서는 한 번에 하나씩 전체보기에서 프로젝트를 볼 수 있습니다. 설정은 대중이 의견이나 좋아하는 것과 같은 피드백을 줄 수 없도록하는 디스플레이로서 만 완벽합니다. 그들은 너의 일을 나눌 수 없을 것이다..

Dribbbox는 모바일 장치에서보기에 최적화되어 있습니다. 웹 사이트를 모바일에서 볼 때 레이아웃과 DOM 트리의 HTML은 다음과 같이 재구성됩니다. mobile.js. 뷰포트 너비를 지정하십시오. mobile.js 에서 일어나야한다. index.html.

 "mobile": "desktop"과 일치합니다 (function () var s = document.createElement ( "script") s.src = "assets / js /"+ (matchMedia ( "(최대 너비 : 414px) ) + ".js"document.head.appendChild (s)) () 

결론

Dribbbox는 자신의 도메인 이름으로 Dribble 샷을 과시하는 편리한 라이브러리입니다. JavaScript를 모르는 경우에도 작업하기가 매우 직관적입니다. 단순히 사용자 이름과 이메일 주소를 추가하면 모든 설정이 완료됩니다. 기본 프리젠 테이션이 마음에 들지 않으면 CSS를 통해 모양을 더 개인화 할 수 있습니다..

Hongkiat에 대한 자세한 정보 : 팬케이크로 Dropbox에 정적 웹 사이트 호스팅