<h2 id="h9707d3a59a">概要</h2><p>このポートフォリオサイトです。Next.jsでSSGを用いて静的にhtmlを生成し、Vercelでホスティングしています。いわゆるJamstack構成です。</p><p>トップページとWorksページのコンテンツはヘッドレスCMSであるmicroCMSで管理しています。microCMSのリッチテキストで内容を書き保存すると、自動でビルドされ公開されます。</p><p><br></p><h2 id="h48162eced8">使用技術</h2><ul><li>Next.js</li><li>React</li><li>Chakra UI</li><li>TypeScript</li><li>Framer Motion</li><li>microCMS</li></ul><p><br></p><h2 id="hbde5a6bd22">ポイント1</h2><p>microCMSのリッチテキストフィールドから渡される値はHTMLで記述されているため、そのままではChakra UIのスタイルを適用することができません。そこで<a href="https://github.com/remarkablemark/html-react-parser" target="_blank" rel="noopener noreferrer">html-react-parser</a>を使用してHTMLをパースし、Chakra UIのコンポーネントに置換しています。</p><p><br></p><h2 id="h7251a3bad2">ポイント2</h2><p>ページをめくる様なページ遷移アニメーションはFramer Motionで実装しています。コンポーネントのマウント・アンマウントの制御に苦労しました。より深い階層のページに移動する場合は左に、浅い階層のページに移動する場合は右にめくるようになっています。</p><p><br></p><h2 id="h7b3c950f25">画像</h2><p><img src="https://images.microcms-assets.io/assets/82cead10ee8b4201aa778ba16c21e731/a270905680a6481cb14507eb88bd9508/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-27%2022.45.40.png" alt="" width="902" height="744"></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>

Portfolio (elecdeer.dev)

.css-kvj8dg{position:static;}.css-kvj8dg::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:1;width:100%;height:100%;}Works

概要

使用技術

ポイント1

ポイント2

画像

Works