項目作品/Humphrey 作品集 (Laravel + React)

PHP 8.4Laravel 12React 19Inertia.js v2TypeScriptTailwind CSS v4PostgreSQL 17RedisDocker

Humphrey 作品集 (Laravel + React)

live · maintained

語言版本：

用 Laravel 12、React 19、Inertia.js v2 建構嘅全端作品集與內容引擎,整合咗 MCP 伺服器。

造訪網站 ↗查看源碼 ↗

humphrey.humfurie.org

Humphrey 作品集 (Laravel + React) screenshot 1

Cover

用 Laravel 12、React 19 同 Inertia.js v2 建構嘅高性能全端個人作品集、網誌平台與無頭 MCP 內容系統。具備多層快取(HomepageCacheService)、非同步瀏覽量計數隊列任務、帶動態 Schema.org JSON-LD SEO 嘅 TipTap v3 富文本編輯器、用於 AI 代理交互嘅 Model Context Protocol(MCP)工具伺服器整合,以及企業級 RBAC 管理面板。

Featured Engineering & Architecture

How the Hardest Problems Were Solved

Key architectural decisions, concrete code implementations, and performance wins behind this project.

Explore repository →

Architectureapp/Mcp/Servers/PortfolioServer.php

Model Context Protocol (MCP) Server Integration

The Challenge

Enabling external AI agents to securely query and mutate portfolio content and site metrics without custom one-off API adapters.

The Architectural Solution

Implemented an MCP Server using Laravel MCP tools, OAuth 2.0 discovery endpoints, and strict FormRequest-backed schema validators.

Impact:Enables end-to-end headless AI agent management with strict validation and RBAC parity.

app/Mcp/Servers/PortfolioServer.php

class PortfolioServer extends Server

{

protected string $name = 'Humphrey Portfolio';

protected string $version = '1.0.0';

protected array $tools = [

ListBlogs::class,

GetBlog::class,

CreateBlog::class,

ListProjects::class,

GetProject::class,

CreateProject::class,

UpdateProject::class,

GetDashboardStats::class,

];

}

Discuss this snippet (app/Mcp/Servers/PortfolioServer.php)

Databaseapp/Services/HomepageCacheService.php

Multi-Layer Cache Invalidation with Model Observers

The Challenge

Aggregating complex relational datasets on every homepage visit causes high database CPU utilization and slow TTFB.

The Architectural Solution

Built HomepageCacheService with fine-grained TTLs coupled to Eloquent Observers that surgically flush keys upon create/update/delete events.

Impact:Maintains sub-40ms TTFB across the homepage with 0% risk of stale cache drifts.

Backendapp/Jobs/IncrementViewCount.php

Non-Blocking Asynchronous View Counting Queue

The Challenge

Synchronously incrementing view counters on high-traffic content triggers database row write-lock contention.

The Architectural Solution

Decoupled metrics tracking into an asynchronous queue job implementing ShouldQueue dispatched non-blockingly during requests.

Impact:Eliminated page view write bottlenecks, reducing project show endpoint latency by ~65%.

Databasedatabase/migrations/2025_12_11_000000_migrate_projects_to_real_estate_projects.php

Zero-Downtime Migration from Real Estate to Dual-Domain Schema

The Challenge

Repurposing the legacy real estate 'projects' table for a software developer portfolio while preserving legacy data and polymorphic image bindings.

The Architectural Solution

Executed atomic schema migration with dynamic table introspection, data copying into 'real_estate_projects', and batch updates on polymorphic morph types.

Impact:100% data integrity preservation with zero broken polymorphic image references.

Databasedatabase/migrations/2026_01_12_212839_add_composite_indexes_to_images_table.php

Polymorphic Composite Indexing for Media Relations

The Challenge

Media lookups across Project, Blog, and Deployment models were causing sequential scans as the images table expanded.

The Architectural Solution

Created composite indexes targeting general queries, primary image lookups, and sequence display ordering.

Impact:Lowered image relation query execution times down to 1.5ms (40-60% query speedup).

Backendapp/Services/ImageService.php

Automated Multi-Resolution Responsive Image Pipeline

The Challenge

High-resolution user-uploaded assets ballooning frontend payload sizes and harming Core Web Vitals.

The Architectural Solution

Engineered an image processing pipeline using Intervention Image that auto-resizes uploads into small (300px), medium (800px), and large (1200px) tiers.

Impact:Reduced bandwidth consumption by over 75% on card listings and mobile viewport displays.

Seoapp/Http/Controllers/OgImageController.php

On-Demand Dynamic OpenGraph Social Card Generator

The Challenge

Static social previews fail to capture dynamic blog titles, project tech tags, and author branding when shared across social channels.

The Architectural Solution

Implemented dynamic server-side image generation endpoints with disk-based caching responding to /og-image/{type}/{slug}.

Impact:100% automated, high-DPI branded social share cards for every single project and article.

Securityapp/Http/Controllers/Admin/ProjectController.php

PHP 8 Attribute-Driven Declarative RBAC Authorization

The Challenge

Imperative policy validation inside controller actions creates boilerplate and increases the risk of forgotten permission checks.

The Architectural Solution

Applied native PHP 8 #[Authorize] attributes to route handlers bound to centralized Laravel Policies and DB permission matrices.

Impact:Zero-boilerplate declarative security model preventing authorization bypasses.

// community_discussion

Architecture Feedback & Questions

Have thoughts, questions, or ideas regarding this system's architecture? Leave a comment below with your GitHub account.