ポートフォリオサイトの技術仕様と再現性について

本サイトは、研究者が最小限のコストで「能力の証明(Proof of Work)」を世界に発信することを目的に構築されています。ここでは、本サイトの設計思想と、同様のサイトを構築・運用するための技術的仕様を記録します。

1. 設計要件

2. システム構成

3. 実装の工夫

多言語切り替えの仕組み

Markdown内にカスタム属性 data-lang-content を付与したタグを配置し、JavaScriptで表示/非表示を制御しています。これにより、1つのMarkdownファイルで多言語管理が可能になります。

ダークモードの実装

CSS変数(Custom Properties)を使用し、body タグの属性を切り替えることで配色を瞬時に変更します。

4. 日々の更新手順

新しい実績やプロジェクトを追加する際は、以下の手順のみで完結します。

  1. Markdownファイルを編集: index.mdachievements.md を開いて内容を追記。
  2. プッシュ: ターミナルで以下を実行。
    git add .
    git commit -m "update: 実績の追加"
    git push origin main
    

5. 再現のためのリポジトリ構造

このサイトの構成を流用する場合、以下の構成を維持することが重要です。


本サイトのソースコードは、私の GitHubリポジトリ で公開されています。

Technical Specifications & Reproducibility of This Site

This site is designed for researchers to showcase their “Proof of Work” globally with minimal overhead. This post documents the design philosophy and technical specifications required to build and operate a similar site.

1. Design Requirements

2. System Architecture

3. Implementation Details

Multilingual Logic

By using custom attributes like data-lang-content within Markdown and controlling visibility via JavaScript, we manage multiple languages in a single file.

Dark Mode

Implemented using CSS Variables (Custom Properties). Color schemes are swapped instantly by toggling attributes on the body tag.

4. Maintenance Workflow

Updating achievements or projects only requires these steps:

  1. Edit Markdown: Update index.md or achievements.md.
  2. Push:
    git add .
    git commit -m "update: add achievement"
    git push origin main
    

5. Repository Structure for Reproducibility

To reuse this setup, maintain the following structure:


The source code is available at my GitHub Repository.