YT-TechDev logoYT-TechDevPortfolio & Blog
HomeAboutProjectsLabBlogContact
YT-TechDev logoYT Tech DevBlog Portfolio

A personal portfolio and engineering blog focused on frontend development, interactive UI, React Three Fiber, and practical product building.

Next.jsTypeScriptR3FSupabaseCloudFlarevercel

Site

  • Home
  • About
  • Projects
  • Blog

Explore

  • Lab
  • Portfolio
  • Contact

Focus

  • Frontend
  • React Three Fiber
  • Design Notes

© 2026 YT Tech Dev. All rights reserved.

Built withNext.js, Tailwind CSS, and Supabase.

ENOriginalJA日本語

Lab

Experiments & Notes

The Lab is a place for experiments, prototypes, visual systems, and development notes that may not be full products yet, but still help build better frontend systems.

React Three Fiber / GLB

Built

3D Web Experiments

Experiments with GLB assets, animated scenes, browser-based 3D presentation, and lightweight model optimization for web delivery.

R3FThree.jsGLBBlender

Creative Coding

In Progress

SVG Particle Generators

A handmade approach for converting simple icon shapes into particle point data, designed to keep visual systems lightweight and controllable.

SVGCanvasTypeScriptParticles

Visual System

Built

Code Rain Background

A canvas-based background effect used to create a technical atmosphere without turning supporting pages into heavy 3D scenes.

CanvasAnimationUI Design

3D Workflow

Notes

Blender Optimization Notes

Notes on reducing, decimating, cleaning, exporting, and compressing 3D models from Blender so they can be used more comfortably on the web.

BlenderGLBOptimization3D Assets

Workflow

Active

AI-Assisted Development Flow

A practical development workflow that uses AI as a design and implementation partner while keeping architecture, responsibility separation, and source code review under human control.

ArchitecturePromptingReviewRefactoring

React Three Fiber

Built

R3F Particle Skill Stage

An interactive skill stage where selected technologies are represented as morphing particles instead of being displayed only as plain text.

R3FThree.jsuseFrameParticles

Responsive Motion

Built

Mobile Skill Ticker

An infinite right-to-left skill ticker for mobile layouts, designed to show technology lists naturally even on smaller screens.

ReactCSS AnimationResponsiveUX

Interactive UI

Built

Horizontal Content Phase

A homepage content phase that presents Projects and Blog entries horizontally, connecting the interactive entrance with standard detail pages.

Next.jsFramer MotionUI DesignRouting

Blog UI

Built

Blog Image Slideshow

A slideshow UI for blog detail pages that allows multiple image-based content items to be viewed in a structured and readable way.

ReactTypeScriptImage UIBlog

Data Fetching

Built

Supabase Blog Fetching

A server-side data fetching design for retrieving published blog content from Supabase while keeping the public portfolio lightweight.

SupabaseServer ComponentTypeScriptPostgreSQL

Page 1 / 2

← Previous
12
Next →

Direction

From experiments to projects

Some experiments start as visual ideas, technical tests, small utilities, or architecture notes. When they become stable enough to explain as a complete system, they can move into Projects or become detailed Blog articles.