Juun

Content Management

Markdown Input Renderer

Real-time markdown preview system demonstrating the custom content processing pipeline used throughout this project.

  • Live Preview: Debounced real-time rendering with URL-based state management for instant feedback
  • Custom Pipeline: Full unified/remark/rehype processing with Next.js Image, Link, and syntax-highlighted CodeBlock components
  • Production Pipeline: Uses the exact same markdown parser as the blog system for consistent rendering
  • Server-Side Rendering: React Server Components handle parsing and rendering, avoiding client-side serialization issues
3D

Cesium Utils Demo

Interactive demonstration for @juun-roh/cesium-utils npm package.

  • HybridTerrainProvider: Combines multiple terrain sources with automatic fallback handling (PR submitted to core library)
  • Collection: Type-safe wrapper for Cesium data structures with enhanced TypeScript support
  • Highlight: Flyweight visual highlighting with silhouette and surface effects
Cesium Utils Demo Thumbnail
UI

UI Tests

Experimental UI component showcase featuring custom-built interaction patterns and animation systems.

  • Marquee Component: Infinite scroll animation with bidirectional movement and seamless looping
  • Wheel Interfaces: A unique circular menu system for 3D scene interaction.
3D

Three.js with Physics

3D environment with Cannon physics engine integration.

  • Keyboard Controls: WASD/Arrow keys for vehicle movement with realistic steering and acceleration
  • Physics Simulation: Cannon.js rigid body dynamics with collision detection and constraints
  • Vehicle Mechanics: Raycast-based vehicle with suspension, friction, and wheel rotation
  • React Three Fiber: Component-based 3D scene management with hooks integration
UI

100 Days of CSS Challenge

Daily CSS animation practice showcasing 15 completed challenges focused on pure CSS techniques and interactive components.

  • Pure CSS Animations: Keyframe animations, transitions, and transforms without JavaScript dependencies
  • Interactive Components: Animated menu icons, user galleries with modals, and tab navigation systems
  • Visual Effects: Gradient backgrounds, hover states, overlay effects, and smooth state transitions
  • Gallery View: Iframe-based showcase with live previews, refresh functionality, and individual challenge links