I was not familiar with Web, but I decided to create a portfolio site using a relatively new technology stack because I thought it was the minimum skill to work as an engineer in the future.
I wanted to use SSR or SSG because it is a portfolio site and a blog site. Currently, NextJS and NuxtJS are the two giants, and I had experience with both, but I preferred NextJS and chose NextJS because of the future of .tsx notation. Also, it was attractive that it could be easily deployed on Vercel.
On PC display, a toggle button for dark mode and language switching is displayed in the upper right corner of the screen, and on smartphone display, it is displayed in the hamburger menu. The point I was particular about was that I realized this function by switching CSS without reloading. Also, the user can display the most suitable display by referring to the browser's language and dark mode settings when accessing for the first time. Also, by using useLayoutEffect, flickering when reloading is prevented.
Blog articles are managed using markdown files. The blog article is displayed by converting markdown to HTML using unified (remark, rehype). Also, code blocks can be highlighted using Prism.js.
Example of code highlight
// Function to calculate Fibonacci sequence
int fib(int n){
if(n == 0) return 0;
if(n == 1) return 1;
return fib(n-1) + fib(n-2);
}
By describing the tag in the frontmatter of markdown, the tag function is implemented. By clicking on the tag displayed on the card of the blog article, you can display the article associated with the tag.
I tried to avoid depending on libraries as much as possible when creating the site this time. Therefore, I made breadcrumbs, hamburger menus, blog article cards, etc. myself.
I had almost no experience with TypeScript and NextJS, but I was able to implement it relatively easily. In the future, I would like to add blog articles and improve the design of blog article cards.
私自身、Web に明るい人間ではなかったが、これからエンジニアとして活動していくにあたり、最低限のスキルと考えたため、比較的新しい技術スタックを用いてポートフォリオサイトを作成することにした。
ポートフォリオサイト兼、ブログサイトであるため、SSRないしはSSGを使いたかった。現状、NextJSとNuxtJSが2台巨頭となっており、どちらも経験があったが、NextJSの方が好みであり、.tsx記法の将来性も考えて、NextJSを採用した。また、Vercelで簡単にデプロイできることも魅力的であった。
PC表示では画面の右上に、スマートフォン表示ではハンバーガーメニューに、ダークモードと言語切り替えのトグルボタンを実装した。拘った点は、リロードを介さず、CSSを切り替えることでこの機能を実現したことである。また、初回アクセス時はブラウザの言語、ダークモード設定を参照することで、ユーザーにとって最適な表示を行うことができるようになっている。また、useLayoutEffectを用いることで、リロード時のちらつきを防いでいる。
ブログ記事はmarkdownファイルを用いて管理している。markdownからunified(remark,rehype)を用いてHTMLに変換し、ブログ記事を表示している。また、コードブロックはPrism.jsを用いてハイライトできるようにしている。
コードハイライトの例
// フィボナッチ数列を計算する関数
int fib(int n){
if(n == 0) return 0;
if(n == 1) return 1;
return fib(n-1) + fib(n-2);
}
markdownのfrontmatterにタグを記述することで、タグ機能を実装している。ブログ記事のカードに表示されているタグをクリックすることで、タグに紐づく記事を表示することができる。
今回サイトを作成するにあたってできるだけライブラリに依存しないように心がけた。そのため、パンくずリストや、ハンバーガーメニュー、ブログ記事のカードなどは自作している。
TypeScript,NextJSともにほぼ未経験であったが、比較的簡単に実装することができた。今後は、ブログ記事の追加や、ブログ記事のカードのデザインの改善などを行っていきたい。