Developer · Creator · Product Builder

Nguyễn Thành Lộc

阮城禄 · DEVELOPER · CREATOR · PRODUCT BUILDER

Building useful products with code, AI and design. Turning conceptual ideas into robust, living digital software.

loc-studio / main.ts

interface ProductBuilder {
  vision: "Empowering practical human utility";
  stack: ["TypeScript", "Modern Web", "AI Workflows"];
  approach: "Requirements → UI/UX → Code → Iteration";
}

// Active session: Building high-craft digital experiences
const loc = new ProductBuilder();
loc.synthesize({ craft: "editorial", performance: "60fps" });

Nguyễn Thành Lộc

阮城禄 · Studio Identity

“我努力不一定会成功但我不努力一定会失败”

Direct Line & Location

Ho Chi Minh City, VN 0866 192 413

Available for software & design projects

Ho Chi Minh City, VN

Scroll

TypeScript

AI Agent Workflows

GSAP 3 & ScrollTrigger

Lenis Smooth Scroll

Progressive Web Apps (PWA)

UI/UX Interaction Design

Prompt Architecture

Butter-Smooth 60 FPS

Editorial Typography

TypeScript

AI Agent Workflows

GSAP 3 & ScrollTrigger

Lenis Smooth Scroll

Progressive Web Apps (PWA)

UI/UX Interaction Design

Prompt Architecture

Butter-Smooth 60 FPS

Editorial Typography

Philosophy & Practice

Where code, design, and AI converge.

I explore the intersection of AI, software development, product design, and practical problem-solving.

I use AI-assisted development to turn ideas into functional digital products, from product requirements and interface design to implementation, testing, and continuous iteration.

Core Interests & Domains

AI-assisted development Web applications & PWA UI/UX & interaction design Product engineering Photography & visual storytelling Trekking & outdoor exploration Chinese language learning

Requirements & Spec Crystallization

Distilling amorphous problems into crisp architectural specifications, data schemas, and user journeys before writing a single line of production code.

Interface Architecture & Spatial Design

Composing refined, editorial UI layouts where typography, generous whitespace, and subtle micro-interactions establish visual hierarchy without unnecessary noise.

AI-Augmented Engineering

Pairing deeply with specialized AI agents and autonomous reasoning loops to accelerate code generation, type-safety verification, and edge-case testing.

Rigorous In-Browser Verification

Every interaction is audited across real viewports for 60fps frame pacing, accessible keyboard navigation, and honest reduced-motion safety.

Curated Personal Projects

Featured Works

03 Flagship Projects · Interactive Previews

知行合一

zhī xíng hé yī

Unity of Knowledge & Action

SRS Retention

94%

Click card to cycle vocabulary · Spaced repetition

01 // PROJECT Language Learning · PWA

LỘC LEARN

A language-learning application focused on HSK vocabulary, flashcards, spaced repetition, listening practice, and learning progress. Engineered to make daily retention consistent, tactile, and natural.

HSK 1-6 Spaced Repetition Audio Drills

✦ LỘC MONEY 2

● Live Ready

5 Phân hệ lõi Financial AI

Khám phá

02 // FINANCIAL SUITE Mobile-First · Financial Suite

LỘC MONEY 2

Financial Intelligence — Quản lý tiền thông minh. Kết hợp quản lý tài sản, phân tích tài chính, dự báo dòng tiền, nhật ký cuộc sống và xây dựng nền tảng tài chính bền vững.

“Hiểu tiền hôm nay. Nhìn thấy ngày mai.”

Tổng quan & Dự báo Giao dịch & Giỏ tiền Nhật ký cuộc sống Cá nhân & Streaks

Article URL

→

Narration

→

Visuals

→

Timeline

→

MP4

Export

03 // PROJECT AI Workflow · Media

LỘC VIDEO

An AI-assisted workflow for transforming web articles into structured data, narration, visual sequences, timelines, and short MP4 videos. Synthesizes editorial text into synchronized multi-modal media.

Semantic Parser TTS Narration MP4 Render

The Signature Move

The Synthesis Matrix

Explore the three core disciplines behind my work. Switch modes to inspect how code, AI architecture, and editorial design interact in practice.

Architecture & Resilience runtime: browser / edge

Deterministic, Composited Frontend

Every animation executes via GPU-accelerated transform and opacity. Frame pacing is unified into a single RAF playhead through Lenis and GSAP, avoiding layout thrashing.

// Lenis + GSAP ticker synchronization
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));
gsap.ticker.lagSmoothing(0);

Structured Prompt Pipelines pipeline: multi-stage agent

From Unstructured Text to Structured Schema

Turning raw articles into structured timeline cues, script paragraphs, and audio prompts. Strict schemas validate outputs to prevent hallucinations and enforce deterministic processing.

// Structured Schema Extraction Schema
const ArticleVideoSchema = z.object({
  headline: z.string(),
  narrativeBeats: z.array(z.object({
    cueTime: z.number(),
    voiceScript: z.string(),
    visualKeywords: z.array(z.string())
  }))
});

Warm Editorial Studio palette: ivory & champagne

Quiet Luxury & Meaningful Restraint

Replacing generic dark themes with warm ivory tones, serif italic flair, refined hair-thin borders, and gentle spring physics that reward interaction without overwhelming the reader.

#FAF7F2 Ivory

#F4EFE6 Cream

#1C1A17 Ink

#B88E38 Gold

Field Notes & Perspectives

Explorations Outside the Screen

Inspiration drawn from physical nature, visual observation, and ancient linguistic nuances.

Photography & Visual Storytelling

Observing geometry, natural daylight, delicate floral stillness, and spatial harmony in everyday moments.

Still Life & Drapery · Visual Balance

Trekking & Outdoors

Seeking clarity and endurance across highland trails, foggy ridges, and quiet mountain forests.

Highland Trails · Physical Endurance

知行合一阮城禄 · 语言与心智

Chinese Language & Philosophy

Studying HSK characters and philosophical expressions where language mirrors worldview: “我努力不一定会成功但我不努力一定会失败”.

HSK Studies · Hanzi Calligraphy

Standards & Ethos

Engineering Principles

01 / HONESTY

Zero Slop & Honest Claims

Personal projects are presented for what they are: practical, thoughtful software. No fabricated user counts, false venture metrics, or inflated marketing jargon.

02 / PERFORMANCE

Butter-Smooth 60 FPS

Every visual motion is computed via composited GPU properties. Zero layout thrashing, single unified requestAnimationFrame loop, and minimal bundle footprint.

03 / PURPOSE

Restrained, Meaningful Motion

Animation is choreography, not decoration. Every transition clarifies spatial hierarchy and guides the user's attention to what matters most.

04 / ACCESSIBILITY

Accessible & Motion-Safe

Full support for prefers-reduced-motion, semantic HTML structure, high-contrast typography, and visible keyboard focus management.

Authentic Identity // Connect

Nguyễn Thành Lộc (阮城禄)

Building useful products with code, AI and design. Kết nối qua mạng xã hội hoặc liên hệ trực tiếp đến tôi.

Đã sao chép SĐT: 0866192413