Portfolio

RimlことTakahashi Daikiのポートフォリオページとなります。
実際デプロイしたポートフォリオはこちら

概要

私のWeb名刺となるサイトを作成したいと思ったのが動機です。
私の自己紹介や好きなゲームのフレンドコードを楽に渡せないかと思いそれならばサイトにアクセスするだけで情報が簡単に得られると楽なのではないかと考えました。
他にもフロントエンド技術が好きということもあり新しい技術を用いて勉強を兼ねて制作しました。
結果、自分の自己紹介のときに提出したり、フレンドコードを教える際デプロイしたリンクを教え簡単に交換することが可能になりました。
勉強面でもいろんな機能を徐々に追加したりし学習の助けにもなっています。

使用技術

言語: TypeScript
FW/Lib: Next.js, React.js, ChakraUI, StoryBook, Recoil, Jest Deploy: GithubPages, GithubAction

インフラ構成図

自己評価 / 感想

デザインの設計が難しかったのが一番印象に残りました。
AtomicDesignを元に制作しようとふんわりした考えで初めコンポーネント分けで戸惑ったりし曖昧な分け方をしてしまったりと苦労して現在も修正を日々加えてサイトも自分も成長していこうと考えています。 他にも後々BFFかバックエンドを作成するためuseSWRを使用したりと工夫したり学ぶことがたくさんありました。

実行方法

パッケージ導入

yarn

デバック環境立ち上げ

yarn dev

ビルド方法

yarn build
※GithubActionsを用いておりmainブランチのほうにマージされた場合にGithubPagesにデプロイされるようにしています。

storybook立ち上げ

yarn storybook

lint実行

yarn lint

JESTを用いたテスト

yarn test

参考文献

Next.js & TypeScriptについて
Next.jsについて
chakraUIについて
motionを使ったアニメーションについて
デプロイ時のhaskyエラーについて
storybook導入について
storybookとchakraUIの同棲について
storybookの使い方について
Next.jsのPWA導入について