Add circles

src/content/Chart.tsx

@@ -1,9 +1,50 @@
+import { useState } from 'react'
+import ChartCircles, { CircleType } from './ChartCircles'
+
+export type ActiveItemsType = {
+  ux: boolean
+  ui: boolean
+  dev: boolean
+  paper: boolean
+  figma: boolean
+  react: boolean
+}
+
+const circles: CircleType[] = [
+  {
+    for: 'ux',
+    size: '421px',
+    color: '#DDDF73',
+    top: '10%',
+    left: '5%',
+    z: 1,
+  },
+  {
+    for: 'ui',
+    size: '564px',
+    color: '#FEC84B',
+    top: '2%',
+    left: '30%',
+    z: 1,
+  },
+]
+
 const Chart = () => {
+  const [activeItems] = useState<ActiveItemsType>({
+    ux: true,
+    ui: true,
+    dev: true,
+    paper: true,
+    figma: true,
+    react: true,
+  })
+
   return (
     <div className="h-[200vh]">
-      <div className="re sticky top-0 h-screen w-full bg-red-500">
-        <div className="absolute inset-0 bg-white/20 backdrop-blur-3xl"></div>
-        <div className="relative z-10 flex size-full flex-col justify-between p-12">
+      <div className="re sticky top-0 h-screen w-full">
+        <div className="absolute inset-0 z-10 bg-white/30 backdrop-blur-[80px]"></div>
+        <ChartCircles circles={circles} activeItems={activeItems} />
+        <div className="relative z-20 flex size-full flex-col justify-between p-12">
           <div className="flex items-baseline gap-12">lkasdf</div>
           <div className="flex items-baseline justify-end gap-12">lkasdf</div>
         </div>

src/content/ChartCircles.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import { ActiveItemsType } from './Chart'
+
+export type CircleType = {
+  for: string
+  size: string
+  color: string
+  top: string
+  left: string
+  z: number
+}
+
+const ChartCircles = ({
+  circles,
+  activeItems,
+}: {
+  circles: CircleType[]
+  activeItems: ActiveItemsType
+}) => {
+  return (
+    <div className="absolute inset-0 size-full">
+      {circles.map((circle) => (
+        <div
+          className={clsx('absolute rounded-full')}
+          style={{
+            width: circle.size,
+            height: circle.size,
+            background: circle.color,
+            top: circle.top,
+            left: circle.left,
+            zIndex: circle.z,
+          }}
+        ></div>
+      ))}
+    </div>
+  )
+}
+export default ChartCircles