Welcome to my MDX page!

This is some bold and italics text.

This is a list in markdown:

• One
• Two
• Three

Checkout my React component:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.5.3 scene-hy.glb -T
Files: scene-hy.glb [105.26KB] > /public/assets/models/scene-hy-transformed.glb [16.78KB] (84%)
*/
"use client";
import React from "react";
import { useGraph, Canvas } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";
import { SkeletonUtils } from "three-stdlib";

export function BasicHY(props) {
  return (
    <Canvas
      shadows
      className="mx-auto h-[300px]! w-full max-w-3xl"
      camera={{ position: [0, 0, 12], fov: 60, near: 1, far: 30 }} // Camera setup
      {...props}
    >
      <Model />
      <hemisphereLight skyColor={0x487cd0} groundColor={0xfb0404} decay={2} position={[0, 10, 10]} intensity={1.2} />
    </Canvas>
  );
}

function Model(props) {
  const { scene } = useGLTF("/assets/models/scene-hy-transformed.glb");
  const clone = React.useMemo(() => SkeletonUtils.clone(scene), [scene]);
  const { nodes } = useGraph(clone);

  return (
    <group {...props} dispose={null}>
      <directionalLight intensity={1.2} decay={2} position={[9, 10, 17]} target={nodes.DirectionalLight.target}>
        <primitive object={nodes.DirectionalLight.target} position={[0, 0, -1]} />
      </directionalLight>
      <mesh geometry={nodes.Capsule.geometry} material={nodes.Capsule.material} position={[-5.5, 0, 0]} />
      <mesh geometry={nodes.Capsule_1.geometry} material={nodes.Capsule_1.material} position={[3.5, -1.095, 0]} />
    </group>
  );
}

useGLTF.preload("/assets/models/scene-hy-transformed.glb");