メインに戻る

ポートフォリオ

フロントエンド開発者ノ・ヒョンスのポートフォリオ

React、TypeScript、Tailwind CSSで構築された個人ポートフォリオウェブサイトです。レスポンシブデザイン、ダークテーマ、スムーズなアニメーション、最適化されたパフォーマンスが特徴です。プロジェクトショーケース、スキルセクション、お問い合わせフォーム、ゲストブック機能が含まれています。継続的インテグレーションでVercelを使用してデプロイされています。

TypeScriptReactTailwind CSSMotionShadcn/uiTanstack QueryReact RouterReact Hook FormSupabaseBiomeGoogle Analytics
参加人数
1名
期間
2024.12 ~ 進行中
関連リンク
GitHubデプロイサイト

詳細内容

  • モーダルルーティングおよびプロジェクト詳細ページ

    • React Routerのlocation stateを活用し、モーダルと全体ページの2つの方法でプロジェクト詳細を表示できるルーティングシステムを実装
    • URL直接アクセスとモーダルポップアップの両方をサポート
    モーダルルーティングおよびプロジェクト詳細ページ

  • Supabaseベースのプロジェクトデータ管理

    • SupabaseとReact Queryを活用してプロジェクトデータの照会、キャッシング、エラー処理を開発
    • コード再デプロイなしでSupabaseダッシュボードを通じてリアルタイムでプロジェクト情報を追加・修正できるように実装
    • snake_caseからcamelCaseへの自動変換ユーティリティ関数caseConverter.tsを作成して適用
    Supabaseベースのプロジェクトデータ管理

  • パフォーマンス最適化とスケルトンUI

    • useProjectSkeletonLoadingフックによるローディング状態管理と最小表示時間保証でユーザー体験を改善
    • es-toolkitのthrottleを使用したスクロールイベント最適化を適用
    パフォーマンス最適化とスケルトンUI

  • ウェブアクセシビリティおよびSEO最適化

    • ARIAラベル、セマンティックHTML、キーボードナビゲーションサポートでウェブアクセシビリティを確保
    • 構造化データ(Schema.org)とメタタグ最適化でSEOパフォーマンスを改善

  • 継続的なパフォーマンス最適化を実施中

    • Google Lighthouseパフォーマンス測定を通じて、Performance、Accessibility、SEO、Best Practicesを継続的に最適化しています。Performanceは平均70点以上を維持しています。
    • 画像最適化、コード分割、ARIAアクセシビリティ改善、メタタグ最適化など、総合的なウェブ標準準拠を実装しました。
    • デスクトップ基準でFCP 70%短縮(1.75秒→0.5秒)、LCP 46%改善(4.6秒→2.5秒)を達成し、継続的なパフォーマンス最適化を通じてユーザー体験を改善し続けています。
    Lighthouseパフォーマンス測定結果