Skip to content

Commit

Permalink
restore unwanted changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@asl3
asl3 committed Mar 19, 2024
1 parent 046ba99 commit 6db2c82
Show file tree
Hide file tree
Showing 3 changed files with 491 additions and 1,131 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,8 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-slick": "^0.30.2",
"react-transition-group": "^4.3.0",
"scrollreveal": "^4.0.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.0"
},
"devDependencies": {
Expand Down
155 changes: 7 additions & 148 deletions src/components/sections/featured.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,8 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import styled from 'styled-components';
import sr from '@utils/sr';
import { srConfig } from '@config';
import { Icon, IconStar } from '@components/icons';
import { Icon } from '@components/icons';
import { usePrefersReducedMotion } from '@hooks';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const StyledProjectsGrid = styled.ul`
${({ theme }) => theme.mixins.resetList};
Expand Down Expand Up @@ -306,117 +303,6 @@ const StyledProject = styled.li`
}
`;

// const Featured = () => {
// const data = useStaticQuery(graphql`
// {
// featured: allMarkdownRemark(
// filter: { fileAbsolutePath: { regex: "/content/featured/" } }
// sort: { fields: [frontmatter___date], order: ASC }
// ) {
// edges {
// node {
// frontmatter {
// title
// cover {
// childImageSharp {
// gatsbyImageData(width: 700, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
// }
// }
// keywords
// github
// external
// cta
// }
// html
// }
// }
// }
// }
// `);

// 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">
// <h2 className="numbered-heading" ref={revealTitle}>
// Featured Blog Posts
// </h2>

// <StyledProjectsGrid>
// {featuredProjects &&
// featuredProjects.map(({ node }, i) => {
// const { frontmatter, html } = node;
// const { external, title, keywords, github, cover, cta } = frontmatter;
// const image = getImage(cover);

// return (
// <StyledProject key={i} ref={el => (revealProjects.current[i] = el)}>
// <div className="project-content">
// <div>
// <p className="project-overline">Restaurant review</p>

// <h3 className="project-title">
// <a href={external}>{title}</a>
// </h3>

// <div
// className="project-description"
// dangerouslySetInnerHTML={{ __html: html }}
// />

// {keywords.length && (
// <ul className="project-keywords-list">
// {keywords.map((keywords, i) => (
// <li key={i}>{keywords}</li>
// ))}
// </ul>
// )}

// <div className="project-links">
// {cta && (
// <a href={cta} aria-label="Course Link" className="cta">
// Learn More
// </a>
// )}
// {github && (
// <a href={github} aria-label="GitHub Link">
// <Icon name="GitHub" />
// </a>
// )}
// {external && !cta && (
// <a href={external} aria-label="External Link" className="external">
// <Icon name="External" />
// </a>
// )}
// </div>
// </div>
// </div>

// <div className="project-image">
// <a href={external ? external : github ? github : '#'}>
// <GatsbyImage image={image} alt={title} className="img" />
// </a>
// </div>
// </StyledProject>
// );
// })}
// </StyledProjectsGrid>
// </section>
// );
// };

const Featured = () => {
const data = useStaticQuery(graphql`
{
Expand Down Expand Up @@ -450,49 +336,22 @@ const Featured = () => {
const revealProjects = useRef([]);
const prefersReducedMotion = usePrefersReducedMotion();

// const NextArrow = props => {
// const { className, style, onClick } = props;
// return (
// <div className={className} style={{ ...style, display: 'block' }} onClick={onClick}>
// <Icon name="ArrowRight" />
// </div>
// );
// };

// const PrevArrow = props => {
// const { className, style, onClick } = props;
// return (
// <div className={className} style={{ ...style, display: 'block' }} onClick={onClick}>
// <Icon name="ArrowLeft" />
// </div>
// );
// };

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

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

const sliderSettings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: <IconStar />,
prevArrow: <IconStar />,
};

return (
<section id="projects">
<h2 className="numbered-heading" ref={revealTitle}>
Featured Blog Posts
</h2>

<Slider {...sliderSettings}>
<StyledProjectsGrid>
{featuredProjects &&
featuredProjects.map(({ node }, i) => {
const { frontmatter, html } = node;
Expand All @@ -503,7 +362,7 @@ const Featured = () => {
<StyledProject key={i} ref={el => (revealProjects.current[i] = el)}>
<div className="project-content">
<div>
<p className="project-overline">Featured Blog Post</p>
<p className="project-overline">Restaurant review</p>

<h3 className="project-title">
<a href={external}>{title}</a>
Expand All @@ -516,8 +375,8 @@ const Featured = () => {

{keywords.length && (
<ul className="project-keywords-list">
{keywords.map((keyword, j) => (
<li key={j}>{keyword}</li>
{keywords.map((keywords, i) => (
<li key={i}>{keywords}</li>
))}
</ul>
)}
Expand Down Expand Up @@ -550,7 +409,7 @@ const Featured = () => {
</StyledProject>
);
})}
</Slider>
</StyledProjectsGrid>
</section>
);
};
Expand Down
Loading

0 comments on commit 6db2c82

Please sign in to comment.