portfolioサイトを作りました！
この記事を見てくれた皆様ありがとうございます。 文系大学生の4年生絶賛就活中のものです！ 今まで自分で１から考えて作ったものがなかったので最近学んだReact.jsを使ってPortfolioサイトを作ろうと考えました。 初学者なのでまだまだ理解できていないところもあるとは思いますが、自分自身のアウトプットのためにこの記事を書いているので、至らない点などあればご指摘ください！
はじめに
作ったものをスクショしたものがこちらになります！ herokuにアップしているのですがどうもものすごく重い。。。 一様linkも貼っておきます。お時間ある方だけのぞいてくれると喜びます！！ heroku↓ https://secret-river-81904.herokuapp.com/
少しでも気になるという方がいましたらGitHubアカウントを覗いてもらえると泣いて喜びます。 https://github.com/soraoka0418/Portfolio 
デザインについて
恥ずかしながらデザインの知識が全くありませんでした。 作ってみるかーー！でいきなりコードを書き始めてしまい後から後悔することになりました。。。 もし私と同じようにPortfolioサイト作ってみよう！と思った方がいればはじめにデザインの大まかなものを作ってから始めることを強くお勧めします （当たり前なのかもしれない。。。）
ディレクトリ構造について
アトミックデザインなるものを採用しました。 （できているのかはわからないが。） 結果的なディレクトリ構造はこちらのようになりました
components
├ atoms ───── img
│ ├── HeaderLink.js
│ └── icon.js
│
├ organisms──── layout ──── Header.js
│ │ └── SelfDrawer.js
│ ├── Card.js
│ ├── HeaderNav.js
│ ├── HomeButton.js
│ ├── HomeMessage.js
│ ├── Selfintroduction.js
│ └── SelfLink.js
│
└ pages ─── Contact.js
├── Home.js
└── Skill.js
これについてもあらかじめ決めていたわけではなく、コードを書いていくうちにコードが長くなってしまった為、component化していたらこうなってしまいました。 （計画性ゼロ）
使用した技術について
タイトルにも書いている通り、React.jsを使いまいした。今までhtmlやCSS、jQueryでLP制作などをしていたため、React.jsで何かを作るのは初めてでした。 CSSについてはChakra-UIを使用してみました！ 個人的にとても便利だと感じた点は、どこにどのスタイルが当たっているか分かりやすい点やもともと用意されているものが豊富で、それをimportするだけで使えるのはとてもありがたかったです！！
<Heading as="h3" pb="6" borderBottom="1px" borderColor="teal.500">
{props.title}
</Heading>
これは見出しの部分のコードですがこんな風にして簡単にスタイルをあてることができます！！詳しくはドキュメントを見てください。。。 →https://chakra-ui.com/
ルーティングについて
export const Router = memo(() => {
return (
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/Contact">
<Contact />
</Route>
<Route path="/Skill">
<Skill />
</Route>
</Switch>
);
});
こんな感じでsrcフォルダ配下にrouterフォルダを作り記述しました。 ルーティング周りはまだ苦手意識があるのでこれから克服していきたいと考えています。
最後に
もしここまで見てくださった方がいたならとてもうれしい気持ちでいっぱいです。 記事を書いたりするのも初めてのことでいろいろ戸惑いながら書いています 絶賛就活中でエンジニアを志望しているのですがなかなかうまくいかないです 。。。 この記事のご意見ご感想をもらえるととてもモチベーションになりますのでどうか初学者のためだと思って一言よろしくお願いいたします。 （図々しい。。。） それではここまで読んでくださり本当にありがとうございました。