🎉

ポートフォリオを作った

by fkunn1326
#astro #tailwindcss #web

初めてのポートフォリオサイトを作った！結構こだわったつもり。

高1の頃にはすでにデザイン案があったのに、だらだらしていたら3年も経ってしまっていた…。 今回は、普段あまり使う機会のなかったAstroを採用してみた。

使った技術

  • Astro: 静的サイトジェネレーター
  • Tailwind CSS: スタイリング
  • MDX: ブログ記事の執筆
  • Expressive Code: コードハイライト
  • Swup: ページ遷移アニメーション
  • Cloudflare Workers: デプロイ先

Expressive Code

Expressive Codeは、コードブロックにシンタックスハイライトをつけたり、いい感じに装飾してくれるライブラリ。 ハイライトのエンジンにはShikiが使われているらしい。

とにかく機能が豊富。例えばこんな感じで、特定の行にマーカーを引いたり、長いコードを折りたたんだりできる。

sample.rs


// This is a comment, and is ignored by the compiler.
7 collapsed lines
// You can test this code by clicking the "Run" button over there ->
// or if you prefer to use your keyboard, you can use the "Ctrl + Enter"
// shortcut.


// This code is editable, feel free to hack it!
// You can always return to the original code by clicking the "Reset" button ->




// This is the main function.
fn main() {
    // Statements here are executed when the compiled binary is called.


    // Print text to the console.
    println!("Hello World!");
}

これ以外にも便利な機能がいっぱいありそう。

Expressive Code

Present your source code on the web, making it easy to understand and visually stunning. All batteries included!

swup.js

swupは、Astroのような静的サイトでもSPA(Single Page Application)のように滑らかな画面遷移を実現できるライブラリ。

最初はReactのmotionでアニメーションを書いていたんだけど、Astroとの相性があまり良くなかったのでSwupに乗り換えた。 Preload（先読み）の設定などが簡単で気が楽だし、アニメーション自体もシンプルに記述できて楽しかった。

swup — Versatile and extensible page transition library for server-rendered websites

Versatile and extensible page transition library for server-rendered websites

Cloudflare Workers

リンクカードのOGPデータ取得には、Cloudflare WorkersのService Bindingを利用している。

SSR(Server Side Rendering)とこれを組み合わせることで、埋め込みコンテンツの表示が爆速になった。 リロードしてもリンクカードがすぐ表示されるはずなので、よかったら確認してみて。

そのうちTwitterやGitHubの埋め込みも、自前のコンポーネントで作ろうかなと思ってる。

Service bindings

Facilitate Worker-to-Worker communication.

サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル

その他

実はこのサイト、Googleが公開した、AntigravityというAIエディタを使って開発していた。

AIによる Vibe Codingの強さはかなり感じたものの、エディター自体がまだ未熟なのか、以下の致命的なバグがあった。

  • Redo/Undoの挙動がおかしい
  • 日本語入力がたまにできなくなる

あとは、何回もファイルを破壊して、「ファイルを破壊しました、修正します」ってやってトークンを消費したりする。

Antigravity

まだいまは不安定版。

Google Antigravity

Google Antigravity - Build the new way

まとめ

  • ポートフォリオとブログを作った
  • これからいろいろいじっていく予定
  • Antigravityはもう少しいじってみる

サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル