CUIでも操作できるポートフォリオサイトを作成しました。
フロントエンドはフルスクラッチで作成し、サーバーサイドには、友人と開発したWEBフレームワーク(Puddle)を用いました。 サーバーへのデータのリクエストを減らす工夫や、レスポンシブな表示を行っています。
目次
仕様技術について
- フロントエンド: HTML/CSS/JavaScript(フルスクラッチ)
- サーバー実行環境: Deno
- サーバー言語: TypeScript
- サーバーフレームワーク: Puddle Framework
- サーバー環境: AWS Lightsail
レスポンシブデザインについて
どのような画面サイズでも意図したように表示されるよう徹底しました。 また、スマートフォンでの表示の際は、ページを切り替えるリンクを下に配置し、メニューは横スライドで展開できるようにするなど、UXに配慮した工夫も行いました。
ページ遷移時のストレス軽減対策について
各ページのデータを動的に読み込むことで、不要なデータの読み込みを低減させています。また、一度読み込んだデータは内部で保持させることで、再びそのページを開いた際にリクエストを行わないようにしています。
プログラマらしいポートフォリオにするために
ポートフォリオにプログラマらしさを出すために、CUIでページを操作できるギミックを付けました。PC表示で画面左の疑似コンソールに「help」と入力してEnterを押すことで、使用できるコマンドが表示されます。
