featured.js

[chantouu]

The following React component exemplifies a featured project section in a portfolio website using styled components, Gatsby, and animations:

import React, { useEffect, useRef } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import styled from 'styled-components';
import sr from '@utils/sr';
import { srConfig } from '@config';
import { Icon } from '@components/icons';
import { usePrefersReducedMotion } from '@hooks';

// Styled component definitions...

const Featured = () => {
  const data = useStaticQuery(graphql`
    {
      // GraphQL query for featured projects...
    }
  `);

  const featuredProjects = data.featured.edges.filter(({ node }) => node);
  const revealTitle = useRef(null);
  const revealProjects = useRef([]);
  const prefersReducedMotion = usePrefersReducedMotion();

  useEffect(() => {
    if (prefersReducedMotion) {
      return;
    }

    sr.reveal(revealTitle.current, srConfig());
    revealProjects.current.forEach((ref, i) => sr.reveal(ref, srConfig(i * 100)));
  }, []);

  return (
    <section id="projects">
      {/* Render featured projects */}
    </section>
  );
};

export default Featured;

This code creates a component that fetches data using GraphQL, displays featured projects with images, descriptions, and links, and implements scroll animations using the ScrollReveal library. The code is organized with styled components, making the styling part more modular and readable.