Dribbboxを使ってセルフホストドリブルポートフォリオを作成する

Dribbbleは、WIPプロジェクト、デザイン、モックアップ、さらには景品さえも共有できる、デザイン分野で人気のあるWebサイトです。その見返りに、あなたはあなたのデザインを次のレベルに押し上げるのに良い仲間のデザイナーからのフィードバックと批判を得るでしょう.

自分のポートフォリオの表示方法をカスタマイズしたい場合は、自分のドメインの下にショットを表示できます。それを手助けするために、あなたはDribbboxを試してみることができます.

Dribbboxは、Dribbbleショットを自分のドメインの下に表示するのに役立つライブラリです。芸術作品を紹介するための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であなたのポートフォリオ

設定は簡単です。 3列あります。連絡先の詳細は、左端の静的サイドバーにあります。ドリブルショットは中央のスクロール可能な列にあり、右側のビューアでは、プロジェクトを一度に1つずつフルビューで見ることができます。この設定は、一般の人があなたにコメントなどのようなフィードバックをすることができないことを意味するディスプレイとしてのみ完璧です。彼らもあなたの仕事を共有することはできません.

Dribbboxは、モバイルデバイスでの表示に最適化されています。 Webサイトがモバイルで表示されると、DOMツリーのレイアウトとHTMLが再構築されます。 mobile.js. ビューポートの幅を指定します。 mobile.js で行われるべきです index.html.

 （function（）var s = document.createElement（ "script"）s.src = "assets / js /" +（matchMedia（ "（最大幅：414px）"）。matches？ "mobile"： "desktop"） ）+ ".js" document.head.appendChild（s））（） 

結論

Dribbboxはあなた自身のドメイン名の下であなたのDribbbleショットを披露するのに便利なライブラリです。 JavaScriptがわからなくても、作業するのは非常に直感的です。単にあなたのユーザ名と（オプションで）あなたのEメールアドレスを追加すれば、あなたはすべて設定されています。デフォルトのプレゼンテーションが気に入らない場合は、CSSを使用して外観をさらにパーソナライズできます。.

Hongkiatの詳細：Pancakeを使用してDropboxで静的ウェブサイトをホストする