Step 1: Editing the projects Array

Locate the projects Array

The projects array defines all the content for the cards displayed in the grid:

const projects = [
  {
    id: 1,
    name: "Project 01",
    category: "UI UX Design",
    href: "#",
    description: "Quisque magna ligula, commodo vel odio at, pulvinar sodales quam...",
    imageSrc: "/images/Image-1.webp",
    imageAlt: "Project Image alt tag",
  },
  ...
];

Edit Existing Items

• name: Title displayed on the card.

• category: Category label above the project name.

• href: Link where the card directs users upon clicking.

• description: Brief description of the project.

• imageSrc: Path or URL to the project image.

• imageAlt: Text describing the image for accessibility.

Example Update:

{
  id: 1,
  name: "UI Now Homepage",
  category: "Web Design",
  href: "/projects/ui-now-homepage",
  description: "A modern, responsive homepage for showcasing SaaS startup solutions.",
  imageSrc: "/images/ui-now-homepage.webp",
  imageAlt: "Screenshot of UI Now homepage design",
},

Add New Items

Add new objects to the projects array with unique id values.

Example:

{
  id: 4,
  name: "E-Commerce Dashboard",
  category: "Frontend Development",
  href: "/projects/ecommerce-dashboard",
  description: "A sleek and intuitive dashboard for managing e-commerce platforms.",
  imageSrc: "/images/ecommerce-dashboard.webp",
  imageAlt: "E-commerce dashboard design screenshot",
},

Remove Items

Delete any unwanted objects from the array.

Step 2: Customizing Animations

Title Animation

The title uses a fade-in animation:

const titleVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 1, ease: "easeInOut" },
  },
};

• Adjust Animation Duration:

• Change Easing:

Card Animation

Cards use staggered fade-in effects with easing:

const cardVariants = {
  hidden: { opacity: 0 },
  visible: (index) => ({
    opacity: 1,
    transition: {
      delay: index * 0.5, // Staggered delay
      duration: 1.0,
      ease: [0.25, 0.1, 0.25, 1], // Cubic-bezier easing
    },
  }),
};

• Change Stagger Delay: Modify delay: index * 0.5 for faster or slower stagger.

• Adjust Duration: Increase or decrease duration for smoother or quicker animations.

• Try Different Easing: Replace ease with a preset like "easeOut" or a custom cubic-bezier value.

Step 3: Adjusting Layout and Styling

Grid Layout

The grid layout is controlled with Tailwind classes:

<div className="grid grid-cols-1 gap-y-4 md:grid-cols-2 lg:grid-cols-3 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8">

• Number of Columns:

  • Single column: grid-cols-1

  • Two columns: md:grid-cols-2

  • Three columns: lg:grid-cols-3
    
    

• Spacing Between Cards:

  • Horizontal spacing: sm:gap-x-6

  • Vertical spacing: sm:gap-y-10

Example Update:

<div className="grid grid-cols-1 gap-y-6 md:grid-cols-3 sm:gap-x-8 lg:gap-y-12">

Card Styling

The card styling includes hover effects and rounded corners:

• Change Border Radius:

• Modify Hover Effects:

group-hover:opacity-90 transition-transform duration-300

Step 4: Accessibility Enhancements

1. Alt Text for Images

   • Ensure every imageAlt in the projects array is meaningful for screen readers and SEO.

2. ARIA Roles and Labels

   • Add aria-label to links for better screen reader support:

<Link href={project.href} aria-label={`View details about ${project.name}`}>

Step 5: Testing and Optimization

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

2. Responsive Testing: Verify the component looks great on all screen sizes.

3. Performance Optimization:

   • Use .webp images for smaller file sizes.

   • Lazy-load images using the loading="lazy" attribute.

Example Updated Projects Array

const projects = [
  {
    id: 1,
    name: "UI Now Landing Page",
    category: "Web Design",
    href: "/projects/ui-now-landing",
    description: "A modern, responsive landing page for UI Now.",
    imageSrc: "/images/ui-now-landing.webp",
    imageAlt: "UI Now landing page screenshot",
  },
  {
    id: 2,
    name: "E-Commerce Admin Panel",
    category: "Dashboard Design",
    href: "/projects/ecommerce-admin",
    description: "An intuitive admin panel for managing e-commerce platforms.",
    imageSrc: "/images/ecommerce-admin.webp",
    imageAlt: "E-commerce admin panel screenshot",
  },
];