Make your own porfolio | Nguyen T.T. Nguyen

自己紹介

グエン（D2）です。CaTARo-AIS研究グループ（介護訓練支援ロボット）のリーダーを務めています。研究テーマはヒューマノイドの顔の表情生成における生成モデルの応用です。

Transformer/Vector Quantization (VAE) を用いたリスニング表情生成
2D/3D顔表現（3DMM、2Dランドマークなど）
顔アバターのための3Dガウススプラッティング（CUDA、OpenGL）
現在はFlow Matching/Diffusion Generative Modellingに取り組んでいます。

Some examples aout 3D Facial Avatar (Expression Transferring). Credit: [GHA](https://yuelangx.github.io/gaussianheadavatar/)

.--------------------------------------.
|                                      |
|  +-------------+                     |
|  | Camera, Mic |                     |
|  | Force Sensor|                     |
|  +-------------+                     |
|        |                             |
|        v                             |
|  +------------+                      |
|  |   Facial   |                      |
|  | Recognition|                      |
|  |   Model    |                      |
|  +------------+                      |
|        |                             |
|        v                             |
|  +------------+                      |
|  |   Facial   |                      |
|  |  Reaction  |                      |
|  |   Model    |                      |
|  +------------+                      |
|        |                             |
|        v                             |
|   +--------+  +--------+  +--------+ |
|   |   3D   |  |   2D   |  |   VR   | |
|   | Avatar |  |Display |  |Glasses | |
|   +--------+  +--------+  +--------+ |
|        |          ^            ^     |
|        |          |            |     |
|        +----------+------------+     |
|                                      |
'--------------------------------------'

淡海医療センター（滋賀）でのCaTARoチームの実験

今日の目標

Jekyll/Github Pagesのクイックスタート。

Jekyll/Github Actionで最初のウェブサイトをデプロイ。

ウェブサイトをカスタマイズ。

パーソナルブランディング

パーソナルブランディングの本質は、あなた自身をユニークなプロフェッショナルとしてマーケティングすることです。これは、あなたのスキル、経験、価値観を潜在的な雇用主にどのように伝えるかということです。

インターネット上で常に無料で利用可能（今日作成すれば）なので、誰でもあなたの情報を検索できます。ブログを書いて、世界にあなたの声を届けることもできます。

なぜポートフォリオが必要？

大学院生がポートフォリオを作成することは、多くの利点があります：

スキルとプロジェクトのアピール: 学術的および個人的なプロジェクトを展示し、スキルと専門知識を示すことができます。
就職市場で目立つ: 競争の激しい就職市場で、ポートフォリオは能力と成果の証拠を提供し、他の候補者との差別化を図れます。
成長の振り返り: ポートフォリオを作ることで、学術的な成長を振り返り、強みと改善点を見つけることができます。
ネットワーキングの機会: 名刺にポートフォリオのリンクを載せて、会議やネットワーキングイベントで交換できます。

自分で作る vs. Jekyll/GitHub Pagesを使う

タスク	自分でウェブサイトを作る	Jekyll/GitHub Pagesを使う
HTMLデザイン	各ページごとにHTMLを書く	テンプレートを使うのでHTMLを書く必要なし
CSSデザイン	自分でスタイルシートを作成	テーマを使うか、自分でカスタマイズ
JavaScript	インタラクティブな要素のためにJSを書く	必要に応じてJSを追加、多くの機能が内蔵
レスポンシブデザイン	全デバイスでレスポンシブにする	多くのテーマが既にレスポンシブ
ホスティング	ホスティングプロバイダーを探して支払う	GitHub Pagesで無料ホスティング
ドメイン名	ドメイン名を購入	カスタムドメインか無料のGitHub Pagesサブドメインを使用
SEO最適化	検索エンジン向けに最適化	プラグインや設定でSEO対応
メンテナンス	定期的に更新とメンテナンス	GitHub Pagesが多くのメンテを処理、Jekyllで簡単更新
コスト	使用するサービスによって異なる	無料ホスティング、カスタムドメインはオプションで有料

JekyllでMarkdownを使ってコンテンツを管理することには、従来のHTML/CSSを使うよりもいくつかの利点があります：

シンプルさ: Markdownは軽量なマークアップ言語で、学習と使用が簡単です。プレーンテキスト形式でコンテンツを書き、それがHTMLに変換されます。このシンプルさにより、フォーマットを気にせずに執筆に集中できます。
バージョン管理: JekyllはGitとシームレスに統合されており、コンテンツのバージョン管理が可能です。これにより、変更の追跡、他者との共同作業、必要に応じた以前のバージョンへの復元ができます。
パフォーマンス: Jekyllは静的サイトを生成するため、従来のHTML/CSSで構築された動的サイトよりも高速で安全です。静的サイトはデータベースやサーバーサイドの処理を必要としないため、セキュリティの脆弱性リスクが減り、読み込み時間が短縮されます。
カスタマイズ: Jekyllはカスタマイズの柔軟性が高いです。カスタムテンプレート、レイアウト、プラグインを作成して、サイトを特定のニーズに合わせることができます。このレベルの制御は、従来のHTML/CSSでは達成が難しいことが多いです。
データベース管理不要: Jekyllはデータベースを必要としないため、データベース管理の必要がなく、サイトのセットアップが簡素化されます。これにより、障害点が少なくなり、バックアップも容易になります。

HTML, CSS, JSの紹介

HTML

HTML（HyperText Markup Language）は、ウェブページの構造を作成するためのマークアップ言語です。見出し、段落、リンク、画像などを定義します。
CSS（Cascading Style Sheets）は、ウェブページの見た目を装飾するためのスタイルシート言語です。色、フォント、レイアウトなどを指定します。
JavaScriptは、ウェブページに動的な動作を追加するためのプログラミング言語です。ユーザーの操作に応じてコンテンツを変更したり、アニメーションを作成したりします。

Jekyllとは？

Jekyllは、MarkdownやTextileなどで書かれたコンテンツを静的なウェブサイトに変換する静的サイトジェネレーターです。

コンテンツ作成: Markdownファイルでコンテンツを書きます。これにはブログ投稿やページなどが含まれます。
設定: _config.ymlファイルでサイトを設定します。このファイルには、サイトのタイトルや説明などの設定が含まれます。
テンプレート: Liquidというテンプレート言語を使ってテンプレートを作成します。これらのテンプレートは、ページや投稿のレイアウトなど、サイトの構造を定義します。
ビルドプロセス: Jekyllを実行すると、コンテンツとテンプレートが処理されます。Markdownファイルが、定義したテンプレートを使ってHTMLに変換されます。
デプロイ: 静的サイトを任意のウェブサーバーにデプロイできます。JekyllはGitHub Pagesと統合されており、GitHubリポジトリから直接サイトをホストすることもできます。

my-jekyll-site/
├── _config.yml
├── _posts/
│   └── 2024-05-01-my-first-post.md
├── _layouts/
│   └── default.html
├── _includes/
│   └── header.html
├── index.html
└── about.md

実践セッション

Jekyllテンプレート - Al-Folio をあなたのGithubリポジトリ <your account>.github.io にプルします。含まれているGithubアクションが静的ファイルをビルドし、デプロイします。

1. GitHubリポジトリをフォークする

Al-Folio リポジトリにアクセスし、右上の “Fork” ボタンをクリックしてリポジトリをフォークします。
フォークしたリポジトリの名前を <your account>.github.io に変更します。

Fork the template repo and rename it as your `github.io` format.

2. `Deploy site` GitHubアクションをトリガーする

このアクションは、初回にJekyll用のビルド環境（OS、Rubyなど）をセットアップし、ブログ投稿を変更/追加してGitHubにプッシュするたびにトリガーされます。すべてのアクションは、テンプレートリポジトリの .github/workflow/ ディレクトリにあります。

GitHubアクションの構文の意味についての説明も添付しましたので、興味があればご覧ください。

name: Deploy site  # ワークフローの名前

on:
  push:  # コードがプッシュされたときにトリガー
    branches:
      - master  # master ブランチにプッシュ時に実行
      - main    # main ブランチにプッシュ時に実行
    paths:  # 指定されたファイルが変更された場合のみ実行
      - "assets/**"  # 画像、CSS などのアセットファイル
      ...
      - "!*.md"  # 一般的なドキュメントを除外（README.md など）

  pull_request:  # master/main へのプルリクエスト時にも実行
    branches:
      - master
      - main
    paths:  # push の場合と同じファイル変更条件
      - "assets/**"
      - "!*.md"

  workflow_dispatch:  # GitHub の Actions タブから手動実行を許可

permissions:
  contents: write  # デプロイのためにリポジトリの書き込み権限を付与

jobs:
  deploy:  # デプロイ処理を実行するジョブ
    runs-on: ubuntu-latest  # 最新の Ubuntu 環境で実行

    steps:
      - name: Checkout 🛎️  # リポジトリのコードを取得
        uses: actions/checkout@v4

      - name: Setup Ruby 💎  # Ruby のセットアップ
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: "3.3.5"  # Ruby のバージョンを指定
          bundler-cache: true  # Bundler のキャッシュを有効化し、依存関係のインストールを高速化

      - name: Setup Python 🐍  # Python のセットアップ
        uses: actions/setup-python@v5
        with:
          python-version: "3.13"  # Python のバージョンを指定
          cache: "pip"  # pip のキャッシュを有効化し、依存関係のインストールを高速化

      - name: Update _config.yml ⚙️  # Jekyll の設定ファイルを更新
        uses: fjogeleit/yaml-update-action@main
        with:
          commitChange: false  # ファイルを更新するが、コミットはしない
          valueFile: "_config.yml"  # 変更対象の YAML ファイル
          propertyPath: "giscus.repo"  # 更新するプロパティのパス
          value: $  # 現在のリポジトリ名に変更

      - name: Install and Build 🔧  # 必要なツールをインストールし、Jekyll サイトをビルド
        run: |
          sudo apt-get update && sudo apt-get install -y imagemagick  # 画像処理ツール ImageMagick をインストール
          pip3 install --upgrade nbconvert  # Python の nbconvert を更新
          export JEKYLL_ENV=production  # Jekyll を本番モードで実行
          bundle exec jekyll build  # Jekyll のビルドコマンドを実行

      - name: Purge unused CSS 🧹  # 使われていない CSS を削除して軽量化
        run: |
          npm install -g purgecss  # PurgeCSS をインストール
          purgecss -c purgecss.config.js  # 設定ファイルを使って不要な CSS を削除

      - name: Deploy 🚀  # GitHub Pages にデプロイ
        if: github.event_name != 'pull_request'  # プルリクエスト時はデプロイしない
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: _site  # Jekyll のビルド出力フォルダをデプロイ対象に指定

`Deploy`アクションによって新しい`gh-page`ブランチが作成されます。

アクションが完了すると、静的ウェブサイトが生成される新しいgh-pageブランチが作成されます。

リポジトリの設定に移動し、GitHubページを有効にして、gh-pageブランチを使用して<your account>.github.ioドメインでウェブサイトをホスティングします。

いくつかの練習:

ホームページのアバター、名前、プロフィールを編集する。

投稿のタイトル、内容、日付を編集する。

新しい投稿を作成し、ホームページに添付する。

3. Setup Jekyll local environment (Optional)

GitHubアクションはウェブサイトのビルドに時間がかかります（約5分）。
自分のローカル環境をセットアップすることができます。詳細はJekyllのドキュメントを参照してください。
コンテンツは即座に生成され、localhost:4000でアクセス可能です。
HERE または GitHubには無料のテーマがたくさんあります。.
自由に遊んで、何か質問があれば僕に聞いてね。

自己紹介

今日の目標