szmd.jpszmd.jp

つくったもの

サムネイルをクリックすると、実物が見られます。

szmd

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

tamalog

技術ブログ

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

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

ワイヤーフレームやデザインはFigmaで自作しました。定期的に機能追加も行っています。

koodori

koodori

ループシンセサイザー

  • 【技術】TypeScript, SCSS, Web Audio API

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

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

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

lp-environment-builder

lp-environment-builder

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

【技術】Node.js, cac, gulp

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

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