ポートフォリオサイトです。
https://portfolio2-nemutas.vercel.app/
サイトの特徴です。
トップページは、Google Mapのようにドラッグ操作によってスワイプできるデザインになっています。
画面内の情報量を抑えたり、サイトを見るだけではなく操作できことでユーザーの関心を惹く狙いがあります。
トップページから、外部サイトリンクや、ページリンクを押したときに、次のページに違和感なく遷移するためのアニメーションを施しています。
Applicationページでは、今までに作成した代表的なアプリケーションを表示しています。
アプリケーションのイメージ画像やタイトル、説明はOGP(Open Graph Protcol)を通して取得しています。これによって、ポートフォリオサイト側で管理する情報を、アプリケーションのURLだけに抑えています。
使用している技術です。
- Next.js
- Typescript
- OGP(Open Graph Protcol)
- Framer Motion
- anime.js
- Emotion(emotion/react)
サイトを作成する上で調べたことなどは、Qiitaの記事にまとめています。