2021-07-10
2021-11-19
ポートフォリオサイトを大幅に改良しました
Next.js,
React.js,
portfolio,
TypeScript,
Tailwind.css,
以前にもこのサイトについて書いたのですが、あれから機能追加や変更を加えたのでその報告です。
使用している技術、制作期間
- React
- Next.js
- TypeScript
- tailwind.css
かかった期間としては、大体2週間ほど。平日は朝、休日は半日以上を費やしていました。自分の作品のアップデートなので全く苦にならずに黙々と作業していました。
作業はdevelopのブランチを切って行いました。GitHubの草はmergeするまで反映されないのですね。知らずに作業していたので、二週間分の緑が急に増えてびっくりしました。一気に緑が増えるのは、達成感を感じハマりそうです笑。
Tailwind.cssの導入
まずは、大きくスタイル修正をしました。material-uiなどを取り除き、Tailwind.cssでの大幅な変更をしました。ほぼ全てのスタイルを書き換えたので、Tailwindに慣れるいい機会になりました。tailwind.config.jsでのカスタム方法についての知識も増やすことができました。レスポンシブはうまくいってるんじゃないかと思います。それにしてもクラス名を考えなくていいのは、本当に楽ですね。コードを書く際のストレスが減ります。 一通り整えたとはいえ、まだまだ甘いところがあるのでそこは随時修正していきたいですね。
タグ検索、フォーム検索の実装
カスタムフックを実装しながら、タグ、フォーム検索機能の実装を行いました。 タグ検索の構築に苦戦しましたが、いい感じに仕上がったと思います。フォーム検索は、どうゆうアルゴリズムを組めばいいのかある程度の構成が頭に浮かび、スムージに作成できました。 コーディング力の向上を感じることができて、それがまたモチベーションになりながら改良を進めていくことができました。
今後も新しい機能を実装
自己満足のブログですが、これからもアップデートしていくので、お時間ある時にのぞいてくれると嬉しいです。 今後はお問い合わせフォームの実装、そして何より記事の本数を増やしていきます。目標は週一本ペースで頑張ります。