あなたのポートフォリオのチュートリアル

あなたのポートフォリオにスキルを表示する
潜在的顧客、クライアント、または雇い主があなたがよく知られている技術を見ることができるようにあなたのポートフォリオのウェブサイト上であなたのスキルを表示することが重要です.あなたのウェブサイト上でこれらのスキルを表示するために複数のアプローチがあります.いくつかは、スキルバー、箇条書きのポイント、注文リスト、テーブル、および詳細が含まれます.私はこれらのほとんどすべてを使用しているが、どちらかを読むのは難しいか、またはスキルバーの場合、解釈するのは難しいが見つかりました.私は、あなたの聴衆のためにあなたが使用したソフトウェアツールを知っているためにより重要であると思います.
これはよくわかりますか.より良い何かをしましょう!🐱‍🏍


マイアプローチ
私は技術の迅速な表現のための認識可能な企業のロゴと一緒に色の素敵なポップを示すこの素晴らしいアイコンを使用することを決めた.私はこの驚くべき資源を見つけましたDevicon すべての主要な開発ツール、ライブラリ、およびフレームワークの150 + SVGとフォントベースのアイコンを生成します.私はSVGバージョンを選びました、しかし、あなたはどんなバージョンでも使うことができて、この同じガイドに続くことができます.

生の例
あなたが私のポートフォリオウェブサイトをチェックしてくださいhttps://chrisbenjamin.dev

コンポーネント
私は私のスキルセクションの2つのコンポーネントを作成するので、私のウェブサイトに反応を使用します.スキルがあります.JSコンポーネントとスキル.jsコンポーネント.
当社のサイト上のすべてのスキルアイコンの再利用可能なコンポーネントになるスキルコンポーネントを作りましょう.

ファイルを作るSkill.js 次のコードを入れます

// This component will be sent props for the image Source, alt text, and title. 
// It will return a HTML image tag (img) with the sourced image, some alt text
// with the name for the technology the image represents, and a title tag which adds
// a hover effect for people to identify the name of the technology by hovering 

function Skill({source, alt, title}) {
    return  <img src={source} alt={alt} title={title}/>
}

export default Skill

完璧なので、今ではコンポーネントを設定して、プロテクターをスキルコンポーネントに渡し、イメージタグを返します.

ファイルを作るSkills.js 次のコードを入れます
これは7つのアイコンを開始する:反応、HTML、CSS、TailWindCSS、github、NPM、およびnodejsを作成します.あなた自身のスキルセットのためにこれらを更新してください.

// import the Skill component as Skill for use in this component
import Skill from './Skill'

function Skills() {
    return (
        <div className="skills">
                {* heading for title *}
                <h2>I have experience with these technologies</h2>
                {* Create a div and give it a class of skillsGrid for styling *}
            <div className="skillsGrid">
                {* Let's render multiple copies of the Skill component. Make sure you update *}the source, alt, and title for each icon
                <Skill source="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original-wordmark.svg" alt="The logo icon for react" title="React"/>
                <Skill source="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original-wordmark.svg" alt="The logo icon for HTML 5" title="HTML 5"/>
                <Skill source="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original-wordmark.svg" alt="The logo icon for CSS3" title="CSS 3"/>
                <Skill source="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original-wordmark.svg" alt="The logo icon for TailwindCSS" title="Twilwind CSS"/>
                <Skill source="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original-wordmark.svg" alt="The logo icon for GitHub" title="GitHub"/>
                <Skill source="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/npm/npm-original-wordmark.svg" alt="The logo icon for NPM" title="NPM"/>
                <Skill source="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original-wordmark.svg" alt="The logo icon for NodeJS" title="Node JS"/>
            </div>            
        </div>
    )
}
export default Skills

あなたは偉大なことをしている!これで2つのコンポーネントがあり、あなたのサイトにこれを追加する準備が整いました.私のページは1ページのサイトなので、私はApp.js ファイルをここに配置します.これらのコンポーネントをインポートするように選択することができますどこでも合うように.

import Skills from "./Components/Skills";
const App = () => {
return (
    <div className="App">
      // Nav, Header, and other components should be here. I'm only importing my Skills component for styling. 
      <Skills />
    </div>
  );
};

export default App;

CSSスタイリング🖥
我々は、画面のサイズに基づいてレイアウトを設定するためのこのガイドでは、メディアクエリを使用するつもりです.我々のより小さいスクリーンのために、我々は3つのコラム幅が欲しいだけです.画面が大きくなると、より良いユーザー体験のためのグリッドの列を変更します.

魔法をしましょう🚀
あなたの標準的なアプリを使用することができます.これらのCSSファイル、または独自のCSSファイルを作成し、アプリケーションにインポートします.スキルセクションのためのJSファイル.私は私のアプリでこの権利を置くつもりです.今すぐCSS.

小さな画面( 640 pxの最大幅)
これは3つの列を持ち、画像サイズは75 px角75 pxになります.
我々は、グリッドの3等分の列と20 pxの間の写真のギャップを使用している.また、画面の中央にこれらのアイコンを中心に配置されます.

/* Small Screens max width 640px */
@media screen and (max-width: 640px) {
  .skillsGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    grid-auto-rows: auto;
    height: auto;
  }
.skillsGrid img {
  height: 75px;
  width: 75px;
}
.skills{
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}
}

次のようになります.


少なくとも480 px
ここでは、4列に列をステップアップし、写真のサイズを増やし、いくつかの余分なギャップを追加します.

/* Medium Screens min width 641px change to 4 columns */
@media screen and (min-width: 641px) {
  .skillsGrid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    grid-auto-rows: auto;
    height: auto;
  }
.skillsGrid img {
  height: 100px;
  width: 100px;
}
.skills{
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}
}

画面を少し大きくすると、このように見えるはずです.


大きなスクリーン
ここでは大きな画面とデスクトップのユーザーのために我々は6行に増加し、ギャップを増加し、再びイメージサイズを増加する予定です.

@media screen and (min-width: 1080px) {
  .skillsGrid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 50px;
    grid-auto-rows: auto;
    height: auto
  }
.skillsGrid img {
  height: 150px;
  width: 150px;
}
.skills{
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
}

大きな画面で少なくとも1080 pxワイドに見えるものがあります.

あなたは素晴らしい行いました!😎

結論
おめでとう、今あなたのポートフォリオサイトの驚くべきスキルセクションを持っている.これは明らかにあなたの聴衆はあなたが使用するツールを知っているし、いくつかの経験を使用していることができます.あなたが使用するツールを追加するか、あなたのウェブサイト流れに合うためにアイコンとコラムサイズを調整して、調整してください.
この記事は役に立つと思います.あなたが他の開発者がこれから利益を得ることができると思うならば、あなたのTwitterでそれを共有してください.