world engine / interface boot
FERIKO
FERIKO
render lattice / signal alignment / diagnostics warmup
render runtime shader boot telemetry sync
Senior Frontend Architect · Ukraine

BUILD
BEYOND
LIMITS.

Architecting high-performance web experiences at the intersection of game development, systems design, and bleeding-edge browser technology. 60 FPS or nothing.

WebGL2 live
Worker active
Custom GLSL runtime
View Projects ↓ GitHub ↗
Render Loop
60
FPS · Main Thread · WebGL Pipeline
Particle Pool
142
Active Nodes · BufferGeometry
Live Edges
0
Connections · Adaptive Distance
Web Worker
—
Primes · Isolated Thread
Draw Calls
2
GPU Instructions · Per Frame
01 — Architecture Domains

Senior-Level
Expertise Stack

// Four domains that separate architects from developers

01 · HIGH-PERFORMANCE RENDERING
⬡
WebGL / WebGPU & Custom Shaders

Custom GLSL point and line shaders now power the live hero scene. Three.js scene graphs, draw call budgets, and Web Workers handle real-time rendering + compute. WebGPU & OffscreenCanvas stay in active R&D.

Three.js WebGL 2.0 Custom GLSL Web Workers
Implemented WebGPU · R&D OffscreenCanvas · R&D
// Fragment shader — volumetric glow pass uniform float uTime; uniform sampler2D uScene; varying vec2 vUv; vec4 bloom(sampler2D tex, vec2 uv) { vec4 col = vec4(0.0); for(int i = -4; i <= 4; i++) { float off = float(i) * 0.003; col += texture2D(tex, uv + vec2(off)); } return col / 9.0; } void main() { vec4 base = texture2D(uScene, vUv); gl_FragColor = base + bloom(uScene, vUv) * 0.4; }
02 · ARCHITECTURE & STATE MANAGEMENT
◈
ECS · Edge RSC · CRDTs

Entity-Component-System architecture for game worlds with thousands of objects. Next.js RSC with Edge streaming for fast TTFB. CRDT-based sync for offline-first real-time apps.

ECS Pattern Next.js RSC Optimistic UI CRDTs
ECS · Implemented Next.js · Production CRDTs · R&D
// ECS World — query by component composition class World { private archetypes = new Map<string, Archetype>(); query<T extends ComponentTuple>( ...types: ComponentTypes<T> ): EntityView<T> { return [...this.archetypes.values()] .filter(a => hasAll(a.mask, types)) .flatMap(a => a.getEntities()) as EntityView<T>; } }
03 · INFRASTRUCTURE & TOOLING
◧
Monorepos · Custom Bundlers · CI/CD

Turborepo monorepos with isolated engine/UI/app layers. Custom Vite plugins for asset pipelines. GitHub Actions CI with Lighthouse performance budget gates.

Turborepo Docker GitHub Actions Vite / esbuild
Turborepo · Production Vite Plugins · Implemented
// Custom Vite plugin — WASM asset pipeline export function wasmPlugin(): Plugin { return { name: 'vite-plugin-wasm-optimize', async transform(code, id) { if (!id.endsWith('.wat')) return; const wasm = await wat2wasm(code); return wasmToESM(wasm, { simd: true }); } }; }
04 · AI-DRIVEN FRONTEND
◉
MCP · WebGPU Inference · Context NPCs

Exploring client-side LLM inference via WebGPU and Transformers.js. Model Context Protocol for context-aware game NPCs. Active research area — building toward AI agents that understand and mutate UI state.

Model Context Protocol Transformers.js Context-aware NPC
WebGPU AI · R&D MCP · Experimental
// MCP — context-aware NPC agent const npc = await createMCPAgent({ model: 'phi-3-mini', backend: 'webgpu', context: { world: world.snapshot(), player: player.getHistory(50), tools: [worldQueryTool, dialogueTool, questTool], } }); const { dialogue, action } = await npc.respond(event);
02 — Selected Works

Flagship
Repositories

// Architecture-first builds with live rendering, deterministic systems, and production-grade trade-offs instead of template work.

03 selected systems
WebGL realtime focus
ECS architecture-led
01
SAO Web Game

Sword Art Online–inspired real-time browser RPG. Custom ECS architecture, distance-based collision culling, WebGL rendering pipeline with animated sprites and particle effects.

TypeScript ECS Architecture WebGL Real-time Physics Active Dev
↗
02
Riftborn Chronicles

Procedural world engine in TypeScript. Modular component system for narrative generation, deterministic world state with event sourcing, and seeded procedural generation pipelines.

TypeScript Procedural Gen Event Sourcing World Engine
↗
03
Ashen Throne

Dark fantasy browser experience. Atmospheric WebGL shader pipeline, custom particle system, scroll-driven narrative. Zero runtime dependencies — pure HTML/CSS/JS, fully optimized.

HTML WebGL Shaders Particle System Zero-dep
↗
03 — Architecture Decisions

Proof Over
Promises

// Real trade-offs, real constraints, real outcomes

Case Study — SAO Web Game
problem .............. Rendering 500+ entities at 60 FPS in a browser
constraint ........... No WebGPU fallback, mobile must work
choice ............... ECS over Redux — flat memory, O(1) lookups
alternative .......... MobX + class hierarchy (rejected: GC spikes)
outcome .............. Stable 60 FPS with 500 entities on mid-tier HW
next iteration ....... WASM physics, spatial hash grid, WebGPU path
test coverage ........ unit + integration, CI-gated
deploy target ........ Vercel Edge + static fallback
entity load
500+
runtime target
60 FPS
delivery mode
mobile-safe
Architecture — Rendering Pipeline
┌─────────────────────────────────────┐
│ Main Thread │
│ Input → ECS Systems → Scene Graph │
│ ↓ ↓ │
│ Web Worker WebGL Renderer │
│ Physics/AI Draw Calls: 2-4 │
│ postMessage() requestAnimFrame │
└─────────────────────────────────────┘
draw call budget .... < 5 per frame
geometry reuse ....... instanced + shared buffers
state sync ........... postMessage (structured clone)
memory policy ........ pooled ArrayBuffers, zero GC
culling strategy ..... frustum + distance LOD
Performance Budget
lighthouse perf ...... ≥ 95 (CI gate)
first contentful ..... < 1.2s
total blocking ....... < 150ms
bundle size .......... < 80KB gzipped (app code)
three.js ............. tree-shaken, ~45KB gzip
enforcement .......... GitHub Actions + Lighthouse CI
Maturity Legend
■ Implemented ........ Live on this page or in shipped projects
■ Production ......... Used in production codebases
■ R&D / Experimental . Active research, prototypes exist
// Every claim on this page is tagged with its
// maturity level. No overstatements.
total claims ......... 17 tagged
verified live ........ this page (section 04)
04 — Live System Telemetry

Running Right Now

// The hero canvas is a live Three.js scene using custom GLSL point + line shaders. The Worker below runs off the main thread.

WebGL Thread — Three.js Scene
renderer ............. WebGL 2.0 + custom GLSL
fps .................. 60
frame time ........... 16.67ms
draw calls ........... 2
active particles ..... 142
live edges ........... 0
shader mode .......... default
geometries ........... 2
main thread load ..... low
Web Worker — Off-Thread Compute
thread ............... Worker #1 (isolated)
algorithm ............ Sieve of Eratosthenes
main thread blocked .. 0ms (never)
primes found ......... computing…
search limit ......... —
compute time ......... —
iterations ........... 0
status ............... running
Runtime Control Panel
shader mode
benchmark density
local mode preview
Default field profile
142 nodes
Balanced cyan baseline with neutral motion and default line response.
mode default
particles 142
line budget 1800
Capability Matrix
webgl2 support ....... checking…
shader pipeline ...... checking…
workers .............. checking…
offscreen canvas ..... checking…
hardware threads ..... checking…
device memory ........ checking…
motion profile ....... checking…
gpu vendor ........... checking…
pixel ratio .......... checking…
viewport ............. checking…
runtime tier
checking…
fallback posture
checking…
preferred pipeline
checking…
runtime profile
checking…
Frame History
avg 60
min 60
max 60
samples 48
Runtime Notes
benchmark model ...... interactive particle density
line strategy ........ adaptive connection distance
render profile ....... GPU-first, low DOM churn
proof style .......... live diagnostics over static claims
fallback posture ..... capability-driven, progressive
render lane
gpu + worker
interaction
live-tuned
fallback mode
progressive
05 — Background

About
Education & Languages

// Short profile, academic path, and communication levels

About

My name is Nikita and I’m a frontend developer focused on high-performance interfaces, real-time browser graphics, and architecture-first web experiences.

I am currently studying for a Bachelor’s degree in Computer Science while building projects around TypeScript, WebGL, ECS, and performance-driven UI systems.

Beyond implementation, I care about interaction quality, visual precision, and making interfaces feel fast, polished, and intentional.

TypeScript
WebGL
Three.js
ECS
React
Next.js
WASM
UI Systems
Education
2024 — 2028
Military Institute of Telecommunications and Informatization (MITIT)
Bachelor’s Degree in 122 — Computer Science
period
2024 — 2028
program
122 CS
degree
bachelor
Languages
01
Ukrainian
Native
02
English
B2
06 — Get In Touch

LET'S
BUILD
SOMETHING.

// Open to senior roles · architectural consulting · ambitious projects
// WebGL · ECS · WebAssembly · Edge · MCP · AI-driven experiences

GitHub ↗ Telegram @Skkdsaq ↗ nikseh2003@gmail.com →