principle_01
Ship production-ready interfaces that work across desktop and mobile.
session://portfolio/en
v0.1.0Portfolio 2026
Building polished web products with React, Next.js, and AI workflows.
I’m Panyakorn Boonyong, a frontend-focused web developer with 5+ years of experience building production applications, financial and exchange-style flows, authentication, KYC, wallet experiences, and AI-integrated product features.
$whoamiPanyakorn Boonyong
$roleBangkok-based Frontend / Full-stack Developer
$focusProduction frontend architecture, AI product integrations, secure user flows, and reusable UI systems.
$statusAvailable for frontend, full-stack, and AI-enabled product teams.
/profile/preview
Panyakorn Boonyong
5+
Years building production web apps
React
Next.js, TypeScript, state and data architecture
AI
LLM APIs, n8n automation, AI workflows
cat about.md
01 / 07Frontend craft with product, security, and AI context.
I work across product requirements, API integration, frontend architecture, and production support. My strongest fit is a team that needs someone who can own complex web flows end-to-end: from typed data fetching and state management to reusable UI systems and user-facing polish.
principle_02
Build secure user journeys around auth, KYC, wallet, and transaction flows.
principle_03
Turn APIs into typed, reusable frontend data layers and UI patterns.
principle_04
Use AI tools pragmatically to automate workflows and accelerate product delivery.
ls projects/
02 / 07Private project experience, written as portfolio-safe case studies.
These highlights avoid confidential project names while still showing the scope, responsibilities, and technical depth behind the shipped work.
case_01
Financial platform
Exchange-style web experience
Frontend modules for market pages, trading and convert journeys, dashboard, wallet, deposit, withdrawal, fiat and OTC flows, and transaction history.
- Authentication-aware routing with access and refresh-token handling plus protected pages.
- KYC, email verification, 2FA checks, OTP requests, withdrawal pre-checks, and confirmation modals.
- Thai and English structure using Next.js App Router and i18n routing patterns.
Next.jsReactTypeScriptAxiosi18nKYC
case_02
AI product
AI-enabled web application console
Feature modules for chatbot configuration, knowledge management, workflow management, meetings, billing-related screens, and team-owned product areas.
- Typed data layers with React Query, query-key factories, mutation hooks, and SDK clients.
- Auth0 authentication and real-time updates through SSE and WebSocket integrations.
- Shared UI components inside a pnpm and Turborepo monorepo with strict TypeScript boundaries.
React QueryAuth0SSEWebSocketTurborepoLLM
case_03
Commerce
Bilingual storefront and automation flows
Commerce and reseller features covering product catalog, cart, checkout and payment, customer accounts, flash sales, commission logic, and CMS-driven content.
- Built account, checkout, payment, and reseller or commission user journeys.
- Created mobile deep-link previews, store fallback, and Open Graph sharing infrastructure.
- Self-hosted n8n with Docker to connect LLM outputs into downstream workflow steps.
Next.jsCMSn8nDockerOpen GraphPayments
Portfolio ecosystem
03 / 07A connected portfolio, AI console, backend API, and custom skill system.
These public repositories work together as a production portfolio stack: the frontend presents the experience, the backend powers content and AI endpoints, the AI console demonstrates the private assistant workspace, and the custom skills repository manages reusable AI context for public and internal surfaces.
repo_01
Frontend platform
Bilingual portfolio with live AI assistant
A production Next.js portfolio for presenting frontend, full-stack, and AI integration work with Thai/English content, articles, contact flows, and a public-safe AI assistant.
- Built a bilingual portfolio experience with localized metadata, content, navigation, and SEO-ready routes.
- Integrated contact and article flows through a separate backend API instead of putting database logic in the frontend.
- Added a streaming portfolio assistant experience that can answer visitor questions using public-safe skill context.
Next.jsReactTypeScriptTailwind CSSDockerGitHub Actions
github.com/panyakorn04/portfolio-2026
repo_02
Backend API
Go API for content, contact, admin, and AI routes
A separate Go backend that keeps database, admin, contact, article, and AI adapter logic outside the frontend while exposing clean HTTP APIs for the portfolio site.
- Built public endpoints for articles, contact inquiries, and the portfolio AI assistant.
- Added admin, session, article, and contact management APIs with structured response envelopes.
- Used the backend as a safe adapter between frontend surfaces and internal Ollama/AI services.
Gogo-zeroSupabase RESTRedisDockerOllama
github.com/panyakorn04/portfolio-backend-2026
repo_03
AI workspace
Open WebUI-inspired private AI console
A custom AI console interface inspired by Open WebUI and the panyakorn.com dark emerald visual system, designed for a VPS-hosted Ollama stack.
- Designed a dark emerald, glassmorphism chat workspace with sidebar, sessions, model/status panels, and responsive layout.
- Connected the composer to backend AI chat streaming endpoints through same-origin API routing.
- Used this visual system as the design reference for the portfolio’s current AI-console-inspired theme.
Next.jsReactTanStack AITailwind CSSSSEOllama
github.com/panyakorn04/open-webui-theme
repo_04
AI context system
Repo-managed skills for public and internal AI assistants
A repository for managing AI skill profiles, Ollama Modelfiles, and deployment assets so different AI surfaces can load the right context safely.
- Split skills into public portfolio-site context and internal ai-console context.
- Kept visitor-facing assistant answers focused on profile, services, stack, and collaboration while avoiding private infrastructure details.
- Synced AI assets through GitHub Actions so the backend and Ollama stack can load updated context from the VPS.
PythonOllama ModelfileGitHub ActionsSkill profilesVPS
github.com/panyakorn04/custom-ai-skills
cat stack.json
04 / 07Modern frontend systems with pragmatic AI workflows.
The stack is broad, but the through-line is consistent: clear architecture, reliable delivery, and interfaces that stay maintainable after launch.
Frontend
React.jsNext.jsTypeScriptJavaScriptHTML5CSS3responsive UI
State / Data
React QueryReduxRTK QueryZustandContext APIAxiosREST APIs
UI Systems
Tailwind CSSAnt DesignMaterial UIRadix UIBootstrapStyled-components
AI / LLM
Claude APIOpenAI APIprompt designn8n workflow automationAI-assisted development
Backend / CMS
Node.jsGolangPHP / WordPressDirectusJSON APIs
Tools
GitDockerpnpmTurborepoVitestBiomePostmanSwaggerJIRAConfluence
history --career
05 / 07Web Developer
EdTech / Education Streaming Company · Mar 2021 – Present · Bangkok, Thailand · Promoted from Junior Web Developer
current_role
EdTech / Education Streaming Company
Mar 2021 – Present · Bangkok, Thailand · Promoted from Junior Web Developer
availability
- Develop and maintain production web applications with React.js, Next.js, TypeScript, RESTful APIs, and responsive UI patterns across desktop and mobile experiences.
- Build features from API integration through state management, validation, error handling, and reusable UI components using Redux, Zustand, React Query, Tailwind CSS, Material UI, and Ant Design.
- Integrate LLM APIs and AI-assisted workflows including Claude and OpenAI API usage, prompt and data-flow design, n8n automation, and AI-assisted development tools.
Next improvements
- Add a custom domain after Vercel deployment.
- Replace confidential placeholders with approved screenshots or sanitized mockups.
- Add measurable impact metrics such as performance, conversion, or delivery speed.
cat ./articles
06 / 07Notes on frontend architecture, AI product work, and practical delivery.
A small library of portfolio-safe articles about building production interfaces, integrating AI into products, and keeping web systems maintainable.
Frontend systems6 min
Shipping frontend systems that stay understandable after launch
A practical look at breaking complex product flows into reusable UI systems, typed data boundaries, and reviewable states.
AI integration5 min
Designing AI workflows that help the product instead of decorating it
How I think about embedding LLM features into real workflows with clear inputs, safe outputs, and handoff points that teams can support.
Next.js7 min
A clean localization pattern for Next.js portfolio and product routes
Notes on organizing locale-aware routes, metadata, and content files in a way that scales from a portfolio to a larger product surface.
Latest articlesopen contact/
07 / 07Let’s build useful, secure, and polished web products.
Open to frontend, full-stack, AI integration, and product-focused web development opportunities.
contact://intake
POST /api/contactSend a project note directly from the site.
This form now posts into the portfolio backend, stores the inquiry in PostgreSQL, and can optionally forward it to a webhook for follow-up workflows.
channels
/legal
Official Terms and Privacy links, ready to submit.
Use these permanent URLs for platform setup, app review forms, and public legal references.