Harshith Nayaka L portfolio

Harshith — ポートフォリオ

AI エンジニアのポートフォリオです。1ページをスクロールして閲覧する構成（プロフィール、About、Work、What I build、Experience、Stack、Agent skills、GitHub activity、Questions、Contact）に、プロジェクトごとのケーススタディページと法的情報ページを加え、2000年代初頭のモータースポーツをイメージしたデザインにしています。展示されたF1ヘルメット、当時のデジカメ、カーオーディオ、画面を横切る車が登場します。ライトなキャンバスにダークモードを備え、見出しにはInstrument Serif、本文とラベルにはInterを使用しています。以前のデザインはclassic-designブランチにアーカイブされています。

このサイトは機械による読み取りにも対応しています。すべてのページは静的HTMLに事前レンダリングされ、Markdown版も用意されており、読み取り専用のJSON APIにもミラーされています。

スタック

• Vite + React 18 + TypeScript
• Tailwind CSS v4（@tailwindcss/vite）。すべてのテーマトークンはsrc/index.cssにあります
• ケーススタディと法的情報のルートにはReact Routerを使用
• @fontsource経由でセルフホストするフォント：Inter Variable（本文とラベル）、Instrument Serif（ディスプレイ見出し）、Poppins（ヒーローの見出し）。public/fontsから配信し、index.htmlでプリロードします
• Phosphorアイコン
• マスコットのジオメトリには@bible-strong/avatar-coreを使用
• コンテンツネゴシエーションのミドルウェアには@vercel/edgeを使用

アニメーションライブラリは使用していません。スクロール時の表示とページ遷移はCSSキーフレームとIntersectionObserverで実装しています。ランタイムを追加するとライブラリ全体が初期バンドルに含まれてしまうためです。

開発

npm install
npm run dev      # http://localhost:5173
npm run build    # type-check, client build, SSR build, prerender, API
npm run preview  # serve the production build
npm run lint     # type-check only

npm run buildは4段階で実行されます。重要なのは後半の段階です。vite buildでクライアントバンドルを出力し、2回目のvite build --ssrでdist-ssr/entry-server.jsを出力します。scripts/prerender.mjsがすべてのルートを巡回し、実際のHTMLと各ページのMarkdown版を生成します。最後に、scripts/build-api.mjsが静的JSON APIを出力します。通常のvite build（npm run build:client）ではこれらの処理がすべて省略され、空のシェルだけのSPAが生成されます。

チェック

npm run verify:negotiation   # 25 client shapes get the right representation
npm run verify:onee          # every mascot animation is reachable
npm run verify:llms <origin> # needs a Vercel deployment, not npm run preview

verify:llmsは最初の引数にオリジンを指定します。Vercelのデプロイ先を渡してください。vite previewではミドルウェアもリライトも実行されず、ネストされたすべてのルートでルートページにフォールバックするため、本番環境では問題のないページも失敗します。

デプロイ

Vercelを使用します。ビルドコマンドはnpm run build、出力先はdistです。

• middleware.tsはエッジで実行され、コンテンツネゴシエーション、APIのルートテーブル、/api配下のすべてのリクエストに対するJSONエラーを処理します。
• vercel.jsonにはリライトとヘッダーが設定されています。
• public/_redirectsはNetlify用です。Vercelでは読み込まれません。

コンテンツ

実際のコンテンツはすべてsrc/data/にあります。

• projects.ts — Selected Workのカードに加え、メールアドレス、GitHub、LinkedInを定義します。
• caseStudies.ts — 詳細なケーススタディ（課題、構築内容、パイプライン図、判断内容、成果、技術）。アーキテクチャ図はデータ駆動型です。pipeline配列を編集すると、ノードグラフが再レンダリングされます。
• skills.ts — Agent Skillsセクションを定義します。
• seo.ts — ルートごとのタイトル、説明、JSON-LDを定義します。
• onee.avatar.json — マスコットの定義です。

プロジェクトを追加または削除する場合は、projects.ts、caseStudies.ts、middleware.ts内のスラッグセットを変更します。これらに不整合があると scripts/build-api.mjsがビルドに失敗するため、問題を検出してデプロイを防げます。

ナビゲーションバーのガラス効果

src/components/GlassFilter.tsxには、liquid-glass.ybouane.comのパラメーター名を使用するCONFIGブロックがあります。blurAmount、refraction、chromAberration、edgeHighlight、fresnel、zRadiusなどの値を変更してバーを調整します。フィルターグラフはこれらの値から構築されます。

このライブラリ自体はここでは動作しません。屈折するすべての領域に合わせてWebGLキャンバスのサイズを変更しますが、このページの高さはデスクトップで12,473px、スマートフォンで19,236pxとなり、Chromiumの上限である16,384pxを超えるキャンバスが必要になるためです。そこで、この効果をbackdrop-filterから参照する単一のSVGフィルターとして再構築しています。WebKitとGeckoはそこでのフィルター参照を解決できないため、併記した通常のぼかしにフォールバックします。縁の屈折はありませんが、同じ霜がかった質感を保てます。

未対応

• カスタムドメイン。正規 URL と og:url は、現在 vercel.app サブドメインを指しています。
• iOS Safari でガラス表現を確認します。フォールバックが最初に宣言されているため機能するはずですが、実際の WebKit エンジンではまだ確認されていません。
• プリレンダリングされた HTML は約 110KB です。そのうち約 40% が Tailwind のクラス属性（642 個の要素で 47,748 バイト）、11% が JSON-LD です。