つくったもの

szmd

ポートフォリオサイト

技術TypeScript, Next.js, Emotion, Three.js (react-three-fiber), framer-motion, Blender, Vercel, Contentful

Three.js (react-three-fiber)を用いて3D表現を実装しています。Blenderで自作した3Dキャラクターモデルを利用し、オリジナリティのあるサイトに仕上げました。Three.jsとframer-motionを併用することで、ページ遷移時にシームレスにビジュアルが切り替わる演出を取り入れました。

コンテンツ管理にはHeadless CMSのContentfulを用いており、更新時にWebhookによってビルドが走るようになっています。

tamalog

技術ブログ

技術TypeScript, Gatsby.js, CSS Modules, Storybook, Atomic Design, Figma, Netlify

メモや技術記事、趣味について記載するブログです。Gatsby.jsでSSGを行う構成になっており、非常に高速なサイトアクセスが可能です。定期的に機能追加を行い、改善を続けています。

ワイヤーフレームやデザインはFigmaで自作しました。

koodori

ループシンセサイザー

技術TypeScript, SCSS, Web Audio API

JSのWeb Audio APIを活用して制作したシンセサイザーアプリです。

ステップシーケンサー機能を搭載しており、単に音を鳴らすだけではなく手軽に演奏が楽しめます。けっこう面白いので、ぜひ一度遊んでみてください。Qiitaで技術解説も行っています。

2022年5月18日、このアプリについて「Web x 音楽」の勉強会で登壇させていただきました。

lp-environment-builder

静的ページ制作向け環境セットアップツール

技術Node.js, cac, gulp

ちょっとしたLPなどをサクッと作りたいときに、HTML/CSS/JSの開発環境をいちいちセットアップするのは面倒……そんな悩みを解決するために生まれたコマンドラインツールです。

必要に応じてpugやSCSSの選択や、レガシー環境向けにjQueryを利用する開発環境をセットアップすることもできるなど、開発現場の様々な事情にフィットする作りになっています。実業務でも多数の利用実績があります！