概要

自分自身のことや作ったものを事細かに書いたページ。開発経緯など技術的なこと以外はBlogを参照されたい。

サイトの構成

本ポートフォリオは、大きく以下の4つのページに別れている。

Top
Chronicles
Works
Blog

`Top`ページ

このサイトに訪問した人が必ず見るページ。初期の頃は、このページに載せるコンテンツがなかなか思いつかなかったが、結局、自分のスキルや好きなことといった、About me 的なページになった。

`Chronicles`ページ

自分のこれまでの歴史を時系列に見ることができる。これだけで、自分がどんなことをしてきたのか、何を目的に歩んできたのかがわかるページになっている。研究内容や自分の経歴など、あまり詳しく書いていないこともあるのでこれから充実させていきたい。

Worksページと連携して、ChroniclesをクリックしたらWorksへ飛べるようにしたい。

`Works`ページ

自分が今まで作ったものをまとめたページ。プログラミング以外につくったものもまとめていく予定。どこまで遡れるかわからないけど。

Worksの各リンクに飛ぶと、その作ったものの詳細を確認できる。開発経緯やそれがどのように自分に影響したかなど、詳しく記していく予定。

`Blog`ページ

個人ブログ。あまり書いていないので充実させていきたい。

本当はblog.woodnx.comみたいなサブドメインのほうが良かったのだが、indexページに更新情報を載せる都合、ポートフォリオに組み込む形となった¹。

技術スタック

本ポートフォリオは、静的Webサイトを作成できるフレームワークであるAstroを用いた。技術選定にあたって、考慮した点を以下に示す。

静的サイトのフレームワーク
コンポーネントによる構造化
キャッチアップの容易さ
日本語文献が豊富

個人的にうれしかったのは、日本語のチュートリアルがあったことである。有志に感謝。

割とPureに近い状態でHTMLやCSSを扱いながら、コンポーネントスタイルでプログラミングできるのが、とても魅力的に感じた。 Vue.jsやSvelteも同じようなことができなくはないが、静的サイトに特化したのが開発体験の良さにつながっているように思う。

ライブラリ

tailwindcss

初めて本格的にtailwindに触れたが、とても扱いやすかった。HTMLタグをきちんと使い分けする動機にもなったし、なにより普段UIコンポーネントによって隠蔽されている中身を垣間見られるのが楽しかった。

Day.js

JavaScript組み込みのDateオブジェクトが使いづらいので導入。dayjs().format()関数が非常に便利。

Expressive Code

リッチなコードブロックを表示できるライブラリ。コピーボタンの追加や、コードのハイライトができる。設定や使い方などはこの記事が参考になる。

pagefind

Blogにおける記事検索機能の実装に用いた。導入にはこの記事が参考になる。

自分でつくったもの

記事作成スクリプト

Zennのように、コマンドから記事のテンプレートを自動作成してくれるスクリプトを自作した。

1
import fs from 'fs';
2
import path from 'path';
3
import yaml from 'js-yaml';
4
import { customAlphabet } from 'nanoid';
5

6
const directory = './src/content/post';
7
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 16);
8
const frontmatter = {
9
  title: '',
10
  icon: '',
11
  category: '',
12
  tags: [],
13
};
14

15
if (!fs.existsSync(directory)) {
16
  fs.mkdirSync(directory, { recursive: true });
17
}
18

19
const frontmatterYAML = yaml.dump(frontmatter);
20
const markdownContent = `---\n${frontmatterYAML}---\n\n`;
21

22
const hash = nanoid();
23
const filename = `${hash}.md`;
24
const filePath = path.join(directory, filename);
25

26
fs.writeFileSync(filePath, markdownContent, 'utf-8');
27
console.log(`Markdown file created at: ${filePath}`);

1
---
2
import type { MarkdownHeading } from 'astro';
3

4
interface Props {
5
  headings: MarkdownHeading[],
6
}
7

8
const { headings } = Astro.props;
9
---
10
<div>
11
  <h2 class="text-sky-600">目次</h2>
12
  <hr class="h-1 border-t-0 bg-sky-600 rounded-t-full" />
13
  <div class="toc px-4 py-2 rounded-b-lg bg-white">
14
    <ol class="">
15
      {headings.map(({slug, depth, text}) => (
16
        <li class="relative pl-6 before:bg-sky-600 before:rounded-full before:absolute before:h-2 before:w-2 before:top-[0.6em] before:-left-[0.125em]">
17
          <a
18
            class={`${depth == 1 ? "font-bold" : "pl-[1em]"}`}
19
            href={`#${slug}`}
20
          >{text}</a>
21
        </li>
22
      ))}
23
    </ol>
24
  </div>
25
</div>

参考記事

ポートフォリオをつくるにあたって、主にデザイン面で参考にしたサイトをいくつか紹介する。

サイト全般のデザイン

あゆたそどっとこむ

About meページはだいたいこの方を参考にした、というよりほぼパクリ…? サイト全体のデザインも出来る限り似てしまうのを避けようと努力したが、結局ジェネリックみたいな感じになってしまった。本当に申し訳ない。

機能個別のデザイン

нуль

Worksの一覧表示用カードやBlogでの検索機能のデザインを参考にした。

この方のサイト、全体的なデザインが洗練されている。自分のポートフォリオもこんなサイトにしてみたいが、デザインセンスが皆無なので時間がかかりそう。

Zenn

言わずと知れたテックブログサイト。

記事の一覧表示の際に表示されるコンテンツのデザインを、アイコンの表示方法も含めて参考にした。

技術的な

フォント関連

本サイトのフォントはM PLUS Rounded 1cを使っているが、そのままではジャギーが発生してしまう。そのため、この記事を参考に然るべき箇所 (bodyタグなど) のCSSにtransform:rotateZ(0.03deg);を追加した。なお、サイト全体に適用してしまうと、サイト全体が若干傾いて見えるためbody要素などに限定した箇所でCSSを追加したほうがよい。

CSS

WorksやBlogの記事の本文はMarkdown記法で記述している。AstroはデフォルトでGithub Flavor Markdown (GFM) に対応しているが、そのスタイルは自前で用意しなければならない。そのため、この記事を参考にしてGithubのCSSテーマを本文に適用した。

なお、このCSSを適用しても、箇条書きをうまく表示されないことがある。これは、list-style-typeが正しく設定されないためであるが、その場合はCSSファイルの当該箇所を以下のようにすればよい。

440
.markdown-body ul,
441
.markdown-body ol {
442
  margin-top: 0;
443
  margin-bottom: 0;
444
  padding-left: 2em;
445
}
446

447
.markdown-body ul {
448
  list-style-type: disc; /* 箇条書きの点 */
449
  margin-top: 0;
450
  margin-bottom: 0;
451
  padding-left: 2em;
452
}
453

454
.markdown-body ol {
455
  list-style-type: decimal; /* 番号付きリスト */
456
  margin-top: 0;
457
  margin-bottom: 0;
458
  padding-left: 2em;
459
}
460

461
.markdown-body ul ul,
462
.markdown-body ul ol,
463
.markdown-body ol ol,
464
.markdown-body ol ul {
465
  margin-top: 0;
466
  margin-bottom: 0;
467
  padding-left: 2em;
468
}
469

470
.markdown-body ol ol {
471
  list-style-type: lower-roman; /* ネストされた番号付きリストのスタイル */
472
}
473

474
.markdown-body ul ul {
475
  list-style-type: circle; /* ネストされた箇条書きのスタイル */
476
}
477

478
.markdown-body ul ul ul {
479
  list-style-type: square;
480
}
481

482
.markdown-body ul.no-list,
483
.markdown-body ol.no-list {
484
  padding: 0;
485
  list-style-type: none; /* no-listクラスが付いている場合は点を表示しない */
486
}

これからやりたいこと

各種SNSリンクの追加
GitHub Actionsによる自動校正&デプロイ
スキル欄の充実
目次の改修
Worksにおいてタグをクリックすると404になる問題の解消

書いている途中に思ったのだが、RSSフィードを使えばうまく行けるのではと模索中 ↩

概要