Project Guide | KIM3310 Systems

KIM3310 Systems Gallery

Operations-first systems gallery for enterprise GenAI, data-center security operations, military MW communications, IT infrastructure operations, secure automation, AI runtimes, operations workbenches, data contracts, and applied ML workflows. Built with React + TypeScript and deployed on GitHub Pages.

The page is product-focused: military 24/7 communications and security monitoring, CCTV/VMS/NVR operation, access-control and intrusion-alert handling, completed InterX infrastructure role context, education, certifications, project cards, capability lanes, verification posture, and repository links. It is written to show the working habit behind each system: define the operator problem, bound the data and trust model, leave a runnable verification path, and document the gap between demo evidence and production claims. It avoids private data, credential requirements, and external tenant assumptions. Private case studies are labeled without exposing repository links that public visitors cannot open.

System Overview

A compact public gallery that makes each system read like a product, not a scattered project list.

Area	Details
Users	Technical evaluators, AI platform teams, operations leaders, and partners evaluating product judgment.
Technical path	Validate the demo, README, architecture notes, and quality gate before deeper workflow review.
System scope	Each card exposes stack tags, runtime boundaries, architecture links, live evidence, demos, and repository routes.
Operating boundary	The site avoids client secrets and only displays public-safe project summaries and generated visual assets.
Evaluation path	`npm run verify` checks type safety, content guarantees, tests, and production build before deployment.

Three-Minute Proof

Open the live gallery and scan the first flagship lane.
Expand one project card and confirm it exposes stack tags, runtime boundary, architecture route, and live evidence.
Open docs/live-service-screenshots.md and docs/repository-upgrade-audit.md.
Run npm run verify before treating the gallery as current.

Evaluation Path

Start here: Open the live gallery, scan flagship lanes, then jump to the repository coverage ledger.
Local demo: Run npm install && npm run dev, then open http://localhost:5173.
Checks: Run npm run verify; it covers type safety, tests, content guarantees, and production build.
Chrome audit: Run npm run audit:chrome to open every portfolio demo in Google Chrome and record desktop/mobile layout signals.
Live proof: Current service screenshots are tracked in docs/live-service-screenshots.md.
Repo audit: The 35 editable-repo validation pass is recorded in docs/repository-upgrade-audit.md.
Demo catalog: Supporting repos without service URLs now have GitHub Pages demos listed in docs/public-demo-catalog.md.
Service read: Use the gallery as the portfolio router for GenAI operations, incident ops, runtime reliability, and governed analytics.

Technology Stack And Architecture

Frontend/runtime: React, Vite, Next.js, TypeScript, Vitest, Cloudflare Pages, and package/runtime surfaces.
Backend/automation: Python, FastAPI, controlled scripts, report generation, audit paths, and local-first services.
Data systems: SQL, Spark, Snowflake, data contracts, semantic views, quality gates, and export boundaries.
Infrastructure: Terraform, Docker, local compose, GitHub Actions, private deployment notes, and secrets outside source.
Architecture route: each active public repository now links to docs/system-architecture.md from the project index Architecture section.

System Architecture

System architecture maps the runtime boundary, data/control flow, cloud or local deployment surface, and operating assumptions for this repository.

Service Architecture

Service architecture defines cloud resources, account information, operational controls, and production guardrails for a scoped technical workflow.
Repository service architectures maps all 35 editable repos to resource needs, launch sequencing, and account information.
Revenue architecture index maps every active repository to a productized offer, first paid SKU, free lead magnet, free-tier-first launch stack, and upgrade boundary.
Service launch plan defines the account setup and 14-day technical readiness path.
Free resource and payment wiring explains the DaesikPage/public-apis-4Kr overlay, Cloudflare deployment path, and payment-account secret boundaries.
Service consolidation explains the seven outcome-focused offers and which experimental surfaces stay guarded.
Design source of truth defines the premium storefront design contract, visual language, accessibility, responsive rules, and verification expectations.
Service launch playbook maps the repository to its product scope, operating gates, launch steps, and risk boundaries.

Architecture Notes

Architecture guide summarizes the system scope, first files to inspect, runtime commands, and known boundaries.
Quality notes lists the local checks, CI surface, and release expectations for this repository.
Enterprise readiness notes outlines security, data, operations, integration, and handoff expectations.
Readiness snapshot records the latest local verification and the external checks that should be rerun before an important external review.

What Changed

Rebuilt the UI as a light, minimalist product gallery with tighter spacing, quieter contrast, and responsive proof-first layouts.
Rebuilt the first screen as a compact systems gallery.
Added market, architecture-signal, and service-path fields to every displayed project so the gallery reads as a product portfolio, not a loose demo list.
Foregrounded ROK Defense Communication Command MW communications squad leader experience.
Added InterX IT Infrastructure Operations Manager experience for Apr-May 2026.
Restored education, Microsoft AI School training, language, and certification details.
Removed legacy packets, generated documents, and archived runtime bridge files.
Consolidated the page around active repositories and reusable engineering patterns.
Promoted AIX Pilot as the current flagship enterprise GenAI product surface.
Added live service screenshots for the current public proof surfaces and refreshed repository coverage to the audited 35 editable repos.
Added a narrated English TTS evidence reel generated from the current live service screenshots and repository posture.
Cleaned public/private repository link handling and clarified consolidated-lane metrics.
Kept static evidence assets for visual context without requiring live credentials.
Added a liquid-glass progressive disclosure pass so dense project, experience, outcome, and credential details stay inspectable without overwhelming the first scan.
Tightened filter chips, disclosure controls, and responsive glass surfaces for cleaner keyboard and mobile behavior.
Added active-section navigation polish so the gallery keeps orientation while visitors move through project evidence and the repository ledger.
Added GitHub Pages demo surfaces for 18 previously demo-less supporting repositories and turned the coverage ledger into clickable demo routes.
Added a readiness snapshot based on local verification, recorded demo checks, homepage metadata, portfolio verification, and UX checks.
Added a per-repository architecture audit covering service direction, architecture priority, critical blockers, and priority fixes for all 35 editable coverage repositories.
Added an architecture plan so visitors can evaluate scoped proof surfaces before browsing the full repository gallery.
Added public API readiness proof for twincity-ui, smallbiz-ops-copilot, and districtpilot-ai using provider metadata aligned with public-apis-4Kr without storing provider secrets.
Added a storefront-level free-resource/payment wiring panel from DaesikPage and public-apis-4Kr, with Cloudflare-first deployment and Toss/PortOne/Stripe secret-slot boundaries.
Consolidated 35 repositories into seven outcome-focused offers and added a Cloudflare D1-backed private inquiry route with repository-to-service validation, atomic email/network/global rate limits, one-way abuse-prevention fingerprints, and an independent daily retention Worker.
Upgraded the storefront visual system with a premium design contract, commercial-lane ordinal cards, proof chips, refined glass/elevation tokens, and mobile-first touch rhythm.

Project Lanes

IT infrastructure operations
Military MW communications, CCTV/VMS/NVR, access-control, intrusion-alert, and 24/7 incident operations
Runtime reliability
Enterprise GenAI pilot operations
Governance and secure automation
Operations workbenches
Data contracts and governed analytics
Manufacturing and field operations
Applied ML and vision workflows

Quick Start

git clone https://github.com/KIM3310/doeon-kim-portfolio.git
cd doeon-kim-portfolio
npm install
npm run dev

Open http://localhost:5173 in your browser.

Repo Map

App.tsx, components/, constants.ts, and index.css define the page.
public/evidence/ keeps static visual evidence assets.
public/evidence/portfolio-reel/ keeps the narrated evidence reel, poster frame, and transcript.
scripts/verify-gallery.mjs checks that the page contract remains intact.
scripts/chrome-service-audit.mjs drives Google Chrome through DevTools for portfolio demo QA.
npm run evidence:reel regenerates the narrated MP4 evidence reel on macOS with say, afconvert, and headless Chrome.

Build

npm run verify

The command above runs typecheck, tests, content verification, and the production build.

Deploy

The site is deployed at https://kim3310-doeon-kim-portfolio.pages.dev/ via Cloudflare Pages.

Cloud + AI Architecture

Cloud + AI architecture blueprint
Machine-readable architecture manifest
Validation command: python3 scripts/validate_architecture_blueprint.py

Enterprise Productization

Product operating model defines the product scope, trust boundary, operating checks, and service path for this repository.

Service Architecture

Service architecture defines cloud resources, account information, operational controls, and production guardrails for a scoped technical workflow.

Search And Service Surface

Public entry: free systems gallery with live demos and architecture links
Paid boundary: paid architecture pack bundle, implementation sprint, or private adaptation of a repo
Canonical URL: https://kim3310-doeon-kim-portfolio.pages.dev/
Lead capture: https://kim3310-doeon-kim-portfolio.pages.dev/?offer=doeon-kim-portfolio&inquiry=architecture-scope-sprint#private-inquiry
Resource route: https://kim3310-doeon-kim-portfolio.pages.dev/resources/doeon-kim-portfolio/
Commercial route: https://kim3310-doeon-kim-portfolio.pages.dev/?offer=doeon-kim-portfolio#service-offers
Machine-readable offer: docs/service-offer.json
Search growth implementation: docs/search-growth-implementation.md
Revenue architecture: docs/revenue-architecture.md