Category Cards 01

Category Cards 01

Category Cards 01

The CardsMarquee component is a dynamic, interactive marquee slider for showcasing profiles or items with hover effects and smooth animations. This guide will help you:

  1. Edit or add items (names, titles, tags, images, and links).

  2. Customize animations (speed, easing, and hover behavior).

  3. Adjust layout and appearance (card styles, dimensions, and gaps).

  4. Ensure accessibility and responsiveness.

Tutorial

Step 1: Editing the items Array

Locate the items Array

The items array contains all the data for the cards displayed in the marquee:

const items = [
  {
    name: "Mercedes Bazan",
    title: "Illustrator",
    tags: ["Graphic Design", "Illustration"]

Edit Existing Items

  • name: The name displayed at the top of the card.

  • title: The title or role shown below the name.

  • tags: Tags or skills listed at the bottom of the card.

  • imageSrc: The URL of the image displayed in the card.

  • alt: Descriptive text for the image (important for accessibility and SEO).

  • href: The link where the card directs users upon clicking.

Example Update:

{
  name: "UI Now",
  title: "Web Development",
  tags: ["Next.js", "React", "Design"]

Add New Items

Add new objects to the items array to include more cards.

Example:

{
  name: "New Designer",
  title: "Graphic Designer",
  tags: ["Branding", "Illustration"]

Remove Items

Remove unwanted objects from the array.

Step 2: Customizing Animations

Default Marquee Speed

The marquee animation speed is defined in the handleMouseEnter and handleMouseLeave functions:


  • Increase Speed: Reduce duration.

  • Decrease Speed: Increase duration.

Example Update:


Hover Behavior

When hovered, the animation speed changes via handleMouseEnter and handleMouseLeave:

  • Hover Speed:

  • Default Speed:

Adjust the speeds as needed for your project.

Step 3: Adjusting Layout and Appearance

Card Dimensions

The card size is controlled by the MarqueeItem component:

<div className="w-[300px] h-[400px] rounded-3xl overflow-hidden shadow-lg flex-shrink-0">
  • Change Card Width:

w-[350px]
  • Change Card Height:

h-[450px]

Gap Between Cards

The gap between cards is set in the marquee container:

  • Increase/Decrease Gap:

Card Styling

The card styling includes hover effects and transitions:

  • Change Hover Scale:

  • Adjust Transition Speed:

Step 4: Accessibility Enhancements

  1. Alt Text for Images

    • Ensure every alt property in the items array has meaningful text for screen readers and SEO.

  2. Focus and Keyboard Navigation

    • Add aria-label to the card container for screen reader support:

Step 5: Testing and Optimization

  1. Run Locally: Use npm run dev to preview changes.

  2. Test Responsiveness: Verify the component looks good on mobile, tablet, and desktop.

  3. Performance Check: Optimize images to reduce load time using .webp or a CDN.

Example Updated Items

const items = [
  {
    name: "Jane Doe",
    title: "Web Designer",
    tags: ["UI/UX", "Prototyping"],
    imageSrc: "/images/jane-doe.jpg",
    alt: "Jane Doe Portrait",
    href: "/profile/jane-doe",
  },
  {
    name: "John Smith",
    title: "Frontend Developer",
    tags: ["React", "JavaScript", "CSS"]