できること

  • オフライン HTML ファイル 1 つ、または React・Vue・Svelte・Astro プロジェクトの実ルート
  • ホーム、実績と事例、執筆と記事、登壇、Uses、About、履歴書、問い合わせ、404
  • 写真の背景の上に HTML の製品パネルで描いたプロジェクトカバー
  • コマンドパレット、経歴タブ、リポジトリ一覧、フィルター、検証付きフォーム
  • PopNow による背景や写真(任意、支払い前に見積もり)

向いている用途

  • 個人サイトが欲しいエンジニアや個人開発者
  • 事例付きの採用向けページが必要な求職者
  • 執筆や登壇の情報を一か所にまとめたい開発者

向いていない用途

  • 明るい色やカラフルなブランド(デザインはダーク専用)
  • 作品の大半が画像のビジュアルデザイナー
  • 企業サイトやオンラインストア

使い方

Claude・ChatGPT で

PopNow のスキル「エンジニア向けポートフォリオサイト」(developer-portfolio-website)を使って、次のことをしてください:私の個人サイトを作って。ベルリンのバックエンドエンジニアで、履歴書、プロジェクト 3 件、ブログ記事 2 本は ./notes にあります。

コーディングエージェントで

/popnow-developer-portfolio-website 私の個人サイトを作って。ベルリンのバックエンドエンジニアで、履歴書、プロジェクト 3 件、ブログ記事 2 本は ./notes にあります。

次はこれ

4 つ目のプロジェクト用に、同じダークストーン調の背景を作って。先に見積もって。

登壇セクションを削除して、Uses を Process に変えて。

用意しておくもの

  • 職歴、期間、具体的な成果
  • 課題・主な判断・成果を添えたプロジェクト 2〜6 件
  • 実際にある記事、登壇、リポジトリ、ツール
  • 自分のポートレートと実際のイベント写真

似ているスキル

すべて見る →

よくある質問

プロジェクトのカバーがスクリーンショットでないのはなぜですか?

各カバーは、あなたの分野のデータを使って HTML と CSS で作った小さな製品インターフェースです。どのサイズでも鮮明で、サイトの配色に合い、実際の画面の個人データが映り込むこともありません。

PopNow は必要ですか?

不要です。同梱のストーンやサンドの背景はプロジェクトに使い回せ、登壇には描画したサムネイルを使えます。新しい背景、デスクの写真、ポートレートの色調補正に PopNow を使うのは任意で、毎回先に料金を提示します。

登壇やオープンソースのリポジトリがない場合は?

実際の内容がないセクションは、リンクごと削除します。実在の人物について、登壇、リポジトリ、スター数、顧客をスキルが作り上げることはありません。

既存の Next.js アプリに組み込めますか?

できます。技術スタックを検出し、無関係なファイルはそのままに、同じトークンとフォントで同じルートを実際のページとして作り直します。