Portfolio

UPDATE LOGS

System Changelog & Deployment History

Lighthouse Performance Overhaul & Hardware Acceleration (v2.3.0)

Latest
  • Lighthouse Score 92 (v2.3.0): Overhauled core performance metrics, raising the Google Lighthouse Performance Score from 67 to 92. Reduced First Contentful Paint (FCP) and Speed Index from 4.1s to 1.0s, and Largest Contentful Paint (LCP) from 6.9s to 1.7s.
  • GPU-Composited Transitions: Refactored global page navigation. Replaced the slow, non-composited 1000ms transition with a custom 250ms hardware-accelerated fade-in animation using GPU-composited opacity layer transitions to resolve composite warnings.
  • LCP Resource Prioritization: Configured map indexing in the main Project Showcase and implemented early preloading (`priority={index === 0}`) for the primary showcase image card, eliminating lazy-load overhead and improving image discoverability.
  • Dynamic API & CDN Preconnecting: Integrated a dynamic server-rendered preconnect hook in layout headers based on process.env settings, saving an estimated 350ms of DNS resolution and handshake latency for backend AWS API Gateway requests.
  • Google Fonts Optimization: Added head preconnect tags for Google Fonts and fonts.gstatic.com, and appended a display `display=block` parameter to the Material Symbols Outlined stylesheet URL to avoid render-blocking and layout-shifting delays.
  • TS Engine ES2022 Upgrade: Shifted target compilation standard in tsconfig.json from ES2017 to ES2022. Upgrades codebase compilation to modern ECMAScript, eliminating legacy JavaScript polyfills (saving 43 KiB of wasted code).

Block-Based CMS Architecture & Resilient SRE Telemetry (v2.1.0)

  • JSON Block-Based CMS (v2.1.0): Overhauled the Project Showcase portfolio data model to support a headless, block-based architecture. Decoupled raw strings and enwrapped articles into modular deep-dive components, enabling interleaved sections of technical content and optimized figures.
  • Image Interleaving & Containment: Redesigned the portfolio modal (`max-w-5xl`) to render dynamic project sections. Introduced CSS contain logic for next/image components to ensure network and architecture diagrams display gracefully without truncation.
  • Cross-Platform Telemetry Resilience: Hardened the Server-Sent Events (SSE) telemetry pipeline. Implemented platform-guarding for CPU/Disk metrics (`win32` checks) and suppressed terminal shell errors on local Windows environment startups.
  • SSE Connection Lifecycle Management: Integrated an asynchronous `isClosed` stream sentinel. Gracefully terminates and blocks enqueuing attempts to aborted ReadableStreams, preventing server-side `ERR_INVALID_STATE` unhandled rejections.
  • Next.js Open Graph SEO Integration: Authorized full Open Graph and Twitter Card tags in layout settings. Synchronized relative assets with the `metadataBase` origin URL to solve build-time compilation warnings and ensure correct social media crawling.

Serverless AST Engine & Real-time Telemetry (v2.0)

  • Env Tracker (v2.0): Completely re-engineered the environment variable scanner to a 100% Serverless Web Worker architecture. Shifting AST processing from the server to the browser sandbox, resulting in 0ms network latency and zero server-side CPU overhead.
  • In-Memory Virtual File System: Implemented a secure, local-first processing model using HTML5 File API and Browser RAM. Source code is analyzed in-memory and instantly purged; zero bytes are ever written to the EC2 disk (Malware-proof).
  • Parallel Stream-Chunking: Optimized folder uploads using an asynchronous chunking strategy (batches of 1,000 files). This prevents Main Thread starvation, maintaining 60FPS UI responsiveness even when scanning repositories with 50,000+ files.
  • Isomorphic Hydration & Caching: Integrated a dual-layered telemetry system. The server-side AST results are now cached in Node.js global memory after the first scan (0.5ms response time), while the frontend uses a compiled JSON snapshot for instant 0ms initial rendering.
  • SSE Telemetry Stream: Refactored the System Status dashboard from HTTP Short Polling to a persistent Server-Sent Events (SSE) pipeline. Reduced EC2 (t3.micro) overhead by 80% and eliminated Event Loop blocking caused by redundant TCP handshakes.
  • Mobile-First Fluid Layout: Enforced a strict min-width responsive architecture globally. Tool dashboards now utilize a dynamic flex-column-to-row transition, ensuring high-density data remains readable across mobile and ultrawide displays.

Resume Management Terminal & UX Refactoring

  • Resume Management Terminal: Engineered a specialized administrative sector at `/admin/resume` for document lifecycle management. Features direct AWS S3 synchronization and automated CloudFront Edge cache invalidation.
  • Hardened Deployment Logic: Implemented multi-layered validation for document uploads, including binary size clamping (10MB limit), MIME-type verification, and React-native `useRef` for deterministic DOM state management.
  • Global Page Transitions: Standardized application-wide navigation experience by implementing a unified CSS-based fade-in transition (`1000ms`) across all client-side routes via the root `ClientLayout`.
  • Portfolio UI Refinement: Optimized the "Direct Connection Channels" architecture. Transitioned the primary email display from a functional button to a high-visibility, non-actionable technical block for better visual hierarchy and UX consistency.
  • Engineering Aesthetic Polish: Standardized all UI labels to technical English, improved focal spacing in the Hero section, and synchronized technical icon palettes across administrative and public views.

Subnet Collision Solver (v2.2.0)

  • Overview: Launched a high-performance Network Infrastructure Utility to calculate and avoid IP Collision and Network Exhaustion for Local Environments (Docker/WSL) under dense Corporate Network or VPN constraints.
  • Bitwise Range-Jumping Algorithm: Engineered a core engine leveraging Unsigned Bitwise Operations (`>>> 0`) for near-instant performance—processing 5,000 occupied islands in ~2ms.
  • True Lazy Evaluation: Implemented a TypeScript Generator (`function*`) based architecture to yield only the first 5 candidates on demand, ensuring O(1) constant space complexity regardless of search space size.
  • Strict Separation of Concerns (SoC): Decoupled mathematical pure logic from the UI via a dedicated `useSubnetSolver` custom hook, enabling 100% automated test coverage.
  • Dynamic Block Allocation: Enabled customizable target block sizes from /16 to /28, allowing users to "request only what is needed" to preserve corporate network address space.
  • Advanced Boundary Clamping: Integrated security constraints that prevent the generator from leaking candidates into Public IP ranges.
  • Target-Specific Configuration: Synthesizes ready-to-use implementation code for Docker (`daemon.json`) across Windows, Mac, Linux, and WSL2 (`.wslconfig`).
  • Tactical UI Design: Designed a High-contrast Light Mode interface following the Blueprint Design System, featuring a progressive disclosure flow for configuration details.

The Great Infrastructure Migration (IaC)

  • Migration to Terraform: Transitioned all primary resource management to declarative Infrastructure as Code (HCL). The entire stack is now reproducible with a single `terraform apply` — eliminating manual console errors permanently.
  • CloudFront Distribution Orchestration: Rewrote the full `aws_cloudfront_distribution` block in Terraform to systematically link the CDN with the EC2 origin, enforcing consistent edge-to-origin routing.
  • EC2 Identity Fix: Resolved the "unnamed instance" problem by adding `tags` to `aws_instance` via Terraform, enabling precise CI/CD targeting by tag name instead of fragile instance IDs.
  • The Origin Link: Wired the Elastic IP public DNS directly as the CloudFront origin through IaC, bypassing Route 53 Free Tier management issues entirely.
  • Resolved: 504 Gateway Timeout: Fixed the CloudFront-to-EC2 pipeline blockage by setting `origin_protocol_policy` to `http-only` — the EC2 instance runs HTTP internally with TLS terminated at the edge.
  • Next.js RSC Cache Poisoning Fix: Prevented CloudFront from serving raw RSC JSON payloads as HTML by creating a custom Terraform-managed cache policy that whitelists `rsc`, `next-router-prefetch`, and `Accept` headers as cache key parameters.
  • CNAME Conflict Resolution: Cleaned up orphaned CNAME records left from manual console operations, allowing Terraform to assume full control of the `toey-sawatdee.me` domain mapping.
  • Zero-Footprint Secret Management: Eliminated exposed GitHub tokens from CI/CD logs by migrating to AWS SSM Parameter Store (SecureString) with KMS encryption at rest.
  • IAM Least Privilege Implementation: Authored a dedicated `ssm_parameter_read` policy in Terraform granting EC2 permission to self-retrieve the GHCR token (pull pattern) instead of receiving it externally (push pattern).
  • GitHub Actions Shell Overhaul: Fixed syntax errors in `aws ssm send-command` caused by incorrect backslash escaping. Enforced explicit `--region ap-southeast-2` on all SSM commands for deterministic execution.
  • Cleanup: Purged hardcoded AWS Access Keys from `userdata.sh` and `deploy.yml` — a critical security vulnerability that exposed credentials in plaintext.
  • Value Proposition Design: Introduced a new landing page section translating technical architecture into business outcomes (Security, Reliability, Performance, Cost) for non-technical stakeholders.
  • Infrastructure Pipeline Flow: Redesigned the data flow visualization with static SVG connectors replacing the unstable `getBoundingClientRect` dynamic path calculation.

Next.js SSR Migration & CloudFront Edge Infrastructure

  • Overview: Completely tore down the legacy static hosting architecture and migrated to a production-grade, containerized Server-Side Rendering (SSR) environment on AWS EC2.
  • Edge Delivery Network: Fronted the EC2 instance with AWS CloudFront CDN to cache static assets globally, drastically reducing origin server load and slashing latency to ~50ms.
  • Backdoor Origin Routing: Engineered a custom DNS topology (`origin.toey-sawatdee.me`) to act as a secure backdoor for CloudFront, bypassing infinite routing loop traps.
  • Reverse Proxy Implementation: Configured Nginx as the primary gatekeeper on the EC2 instance, securely intercepting port 80 traffic and proxying it to the internal Docker network.
  • Global HTTPS Encryption: Enforced strict SSL/TLS encryption across the entire application by attaching an AWS ACM Certificate directly to the CloudFront edge network.
  • Origin Protection: Eliminated direct public IP access to the application container; all public traffic must now pass through CloudFront and Nginx security layers.
  • Zero-Touch Deployment: Engineered a fully automated CI/CD pipeline using GitHub Actions, triggering build, publish, and deployment sequences on main branch merges.
  • Container Orchestration: Integrated GitHub Container Registry (GHCR) and automated remote SSH commands to pull new images and restart containers.
  • Aggressive Image Optimization: Implemented multi-stage Docker builds utilizing Next.js standalone mode, reducing final production image size to under 70MB.
  • Automated Cache Invalidation: Integrated CloudFront cache invalidation (`/*`) directly into the deployment pipeline for real-time content updates.
  • Deprecations: Sunset the legacy AWS S3 static site hosting architecture and removed raw EC2 public IP addresses from primary DNS A Records.

Precision Finance Engine & Universal Morph UI

  • Universal Inline Morph UI: Overhauled all ledgers (Assets, Income, Expenses, Goals) with in-place editing. Rows now "morph" into interactive input fields for rapid data adjustment without context switching.
  • 3-Step Gateway Calculation: Re-engineered the financial math core to handle recurring monthly, exact one-time matches, and month-only yearly cycles with high precision.
  • Embedded Tactical Paginator: Integrated the month-selection paginator directly into ledger rows for date-sensitive records during the editing phase.
  • Radar Lock Sync Protocol: Deployed a dynamic sync sensor in the HUD that flags out-of-period browsing in Amber and allows instant re-sync with a single click.
  • Multi-Phase Validation Engine: Implemented a robust security layer for data entry: The Ghost Trap (empty labels), The NaN Trap (invalid numbers), and The Negative Asset Trap (logical balance enforcement).
  • Zustand Partial Update Engine: Optimized the state store with surgical update actions (`updateAsset`, `updateIncome`, etc.) for high-performance data mutations.
  • Operational Safety Overhaul: Implemented global deletion protocols with confirmation safeguards and always-visible destruction triggers.

Tactical Finance Tracker & HUD System Integration

  • The Vault (Zustand Store): Implemented a high-performance finance engine with LocalStorage persistence and data versioning (V1) for long-term data integrity.
  • Financial Math Engine: Engineered real-time calculation logic for the 50/30/20 rule, Emergency Runways, and automated Sinking Fund distributions.
  • S.M.A.R.T Goal Architecture: Launched a goal-tracking system with "Lock-in" fund allocation, preventing double-counting of liquid assets and enforcing financial discipline.
  • Tactical HUD Header: Deployed a dynamic `HudHeader` system across all routes, providing contextual titles and navigational orientation.
  • Multi-Currency Protocol: Integrated full support for THB, AUD, USD, and EUR, localized via `Intl.NumberFormat`.
  • Administrative Structural Refactor: Migrated game server dashboards to a secure `/admin` scope and optimized sidebar navigation for authenticated sessions.
  • Hydration & Reliability: Eliminated flickering in stateful dashboard components by implementing a deterministic hydration strategy for persistent store data.

Blueprint Design System & Technical Aesthetics Overhaul

  • The Blueprint Grid: Migrated from solid backgrounds to a 24px precision graph-paper grid across all application routes.
  • Tracing Paper Cards: Implemented semi-translucent (`bg-white/80`) cards with backdrop-blur, allowing background grid lines to bleed through for a premium layered feel.
  • The Ink Palette: Replaced generic colors with a professional "Ink & Paper" palette (Slate-800/300) and Indigo-600 (Printer Blue) accents.
  • Monospace Dominance: Enforced `font-mono` across all metrics, latency values, and technical IDs to emphasize data precision.
  • Sharp Edge Architecture: Purged all shadows and consumer-grade rounded corners, adopting a ruler-sharp `rounded-sm` design system.
  • Micro-Interactions: Engineered a "Radar Pulse" (`animate-radar-ping`) for live status indicators, providing visual feedback of heartbeat synchronization.

Observability & Professional Dashboard Rebranding

  • System Status Page: Launched an enterprise-grade `/status` page with real-time infrastructure health monitoring.
  • Live Health Checks: Integrated authentic status tracking for AWS Cognito (via OIDC config) and CloudFront (via local asset verification).
  • Zero-Cost Latency Tracking: Implemented API latency monitoring using `OPTIONS` preflight requests to avoid unnecessary Lambda invocations and visitor counter increments.
  • Eradicated Layout Shift (CLS): Refactored Zomboid and Status components to eliminate "Black Hole" hydration flickering by ensuring deterministic SSR states.
  • Technical Rebranding: Purged marketing buzzwords across the site, replacing them with architectural trade-offs and engineering metrics.
  • Admin Log: Renamed "Server Status" to "Admin Log" and standardized the internal dashboard interface.

Zomboid Serverless Infrastructure & Guardian Agent (v2.0)

  • AWS Architecture & Backend: Corrected the Lambda function runtime mismatch (Node.js -> Python 3.12) and fixed the hardcoded AWS Region bug (ap-southeast-2).
  • CORS & Security: Fixed the double-header trap, properly configured AWS HTTP API CORS settings, and removed a useless API Gateway Authorizer blocking the public API.
  • DynamoDB Decimal Serialization: Implemented a custom DecimalEncoder in Python to prevent JSON parsing crashes.
  • The Guardian Agent: Completely rewrote the game server polling script with stateful memory tracking (Peak Players, Total Ping, Uptime).
  • Graceful Shutdown: Added SIGINT and SIGTERM signal listeners to push a final OFFLINE payload to AWS before dying, preventing "Ghost Online" statuses.
  • Direct File System Parsing: Bypassed GameDig limitations by directly reading the Zomboid servertest.ini configuration file to extract and push the active ModsList.
  • Frontend React Hydration Fix: Implemented an isMounted state to prevent server/client rendering mismatches caused by dynamic timestamps.
  • Offline Flex Dashboard: Revamped the UI logic to dynamically shift and show an AWS Serverless Architecture Diagram alongside Last Session Historical Stats during downtime.
  • Eradicated Ghost Data Bugs: Forced conditional rendering to cleanly display 0/0 and 0 ms when the server is down.

Zomboid Dashboard Redesign & Stability

  • Redesigned ZomboidStatus component to always display all stat fields (Map, Players, Ping, Last Update) even when the server is offline — showing zero / placeholder values.
  • Refactored Zomboid API route with graceful offline defaults so the page never renders an error state.
  • Aligned the Zomboid page to the project design system (white cards, Material Symbols icons, consistent spacing).
  • Converted all Thai text and comments to English across the Zomboid module for codebase consistency.
  • Added an offline hint banner explaining auto-refresh behavior to visitors.

Project Zomboid Server Integration

  • Integrated real-time Project Zomboid Server Dashboard into the public view.
  • Developed backend API polling leveraging the gamedig library.
  • Refactored ZomboidStatus component for centralized server monitoring.

Architectural Refactoring & UI Overhaul

  • Transitioned to a unified Light Theme and modernized the typography using the Inter font.
  • Engineered a Mobile-First Sidebar with an interactive slide-over menu and backdrop blur.
  • Implemented an Isolated Login Route with Auth Guard and Callback URLs.

Initial Infrastructure Deployment

  • Configured AWS S3 and CloudFront for global static asset delivery.
  • Integrated AWS Cognito User Pools for administrator access control.
  • Established automated CI/CD pipelines via GitHub Actions.