Portfolio

概要

このページそのものです。svgで画像をアニメーションさせることを思いつき、制作しました。

屋号を"cathiecode”に改めた後、".codes”ドメインがあることを知り、ドメインを取得しました。

レスポンシブデザインになっていて、スマートフォンでもPCでも読みやすいようにできています。（ウィンドウサイズを変えて試してみてください！）

技術

• 使用言語: HTML5, CSS, SVG
• グラフィック: Inkscape
• コードホスティング: Git, GitHub, Netlify
• その他: Cloudflare(CDN)

リポジトリ

概要

Twitterでの投稿を念頭においたミニブログです。ヘッドレスCMSのデータを使用したSSG(静的サイトジェネレーション)を駆使したサイトになっています。

OGP画像(Twitterのカード)を自動生成したいな、と思いつき、SSGならば許容できる負荷であろうと結論づけ開発を開始しました。

Next.jsと協力して、SVGのテキスト要素を差し替えた画像をDockerコンテナ上で生成しています。

開発期間24時間。もう少しかわいいデザインにしたいなぁ、と画策しています。

技術

• 使用言語: JavaScript
• グラフィック: Inkscape
• コードホスティング: Git, GitHub, Netlify
• その他: Next.js, sharp

リンク

概要

初めて製作したゲーム作品です。 「アクションパズルブロック崩しRPG」。

ストーリー

ある日絵本を見てみると真っ黒に塗りつぶされていた！？ しかも知らない絵が動いてる…

ボールを触れる「絵本のあなた」とシールを使える「現実のあなた」。 協力しあって、塗りつぶされた絵本の世界に豊かな色彩を取り戻そう。

技術

• 使用言語: Procossing(Java系言語)
• グラフィック: Krita, GIMP, Inkscape
• コードホスティング: Git, GitHub
• その他: VSCode, InnoSetup

ダウンロード

概要

公立はこだて未来大学のLMSである「HOPE」(Moodle)に時間割表を追加するアドオン/カスタムスクリプトです。 HOPEへの移行前に使用していたLMSである「manaba」にあった時間割機能がなくなってしまったため、その代替として作成されました。

HOPEを改善・拡張するプロジェクトである「BetterHOPE」プロジェクトの一員です。

機能

• 時間割表の追加
• 登録コースからの時間割への追加
• デバイス間同期機能

技術

• 使用言語: TypeScript
• 使用ライブラリ: Preact, SWR
• コードホスティング: Git, GitHub, Netlify
• その他: Bash, ESLint, Prettier, esbuild, Firebase Cloud Firestore

リンク