Writing Page — The Tomes & Animated Bookshelf UI

const writings = [
  {
    id: 1,
    title: "The Anatomy of a Memory Leak",
    type: "Bug Report",
    color: "bg-mystic-900 border-mystic-violet/40",
    textColor: "text-mystic-violet",
    summary: "A detailed chronicle of hunting down a elusive memory leak in a React application that only appeared during the full moon (or rather, after 4 hours of continuous use).",
    date: "Oct 2023",
  },
  {
    id: 2,
    title: "CSS Grid: Sacred Geometry",
    type: "Technical Writeup",
    color: "bg-mystic-950 border-mystic-teal/40",
    textColor: "text-mystic-teal",
    summary: "Demystifying CSS Grid layouts by comparing them to ancient architectural blueprints. Stop using flexbox for everything.",
    date: "Aug 2023",
  },
  {
    id: 3,
    title: "From Triage to Try/Catch",
    type: "Reflection",
    color: "bg-mystic-800 border-mystic-mint/40",
    textColor: "text-mystic-mint",
    summary: "Reflections on how nursing triage protocols map surprisingly well to handling production incidents and debugging complex systems.",
    date: "May 2023",
  },
  {
    id: 4,
    title: "Accessibility as Empathy",
    type: "General Audience",
    color: "bg-mystic-900 border-slate-500/40",
    textColor: "text-slate-300",
    summary: "A non-technical explanation of why semantic HTML matters, framed around the idea that building for everyone is the most fundamental form of digital hospitality.",
    date: "Jan 2023",
  },
  {
    id: 5,
    title: "State Management Rituals",
    type: "Technical Writeup",
    color: "bg-mystic-950 border-mystic-violet/40",
    textColor: "text-mystic-violet",
    summary: "Comparing Redux, Zustand, and Context API. Which summoning circle is right for your particular demon?",
    date: "Nov 2022",
  },
];

<motion.div
  className={`w-16 md:w-24 border-l border-r border-t rounded-t-md cursor-pointer
    flex flex-col items-center py-4 transition-all duration-300
    ${entry.color}
    ${isHovered ? "h-[95%] shadow-[0_0_30px_rgba(168,85,247,0.15)]" : "h-[85%]"}`}
  layout
  onMouseEnter={() => setHoveredBook(entry.id)}
  onMouseLeave={() => setHoveredBook(null)}
>
  {/* Icon, rotated title text, date */}
</motion.div>