97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
import React, { useEffect, useMemo } from "react";
|
|
import { AnimationOnScroll } from "react-animation-on-scroll";
|
|
import "../assets/stylesheets/project.scss";
|
|
import { useContainer } from "unstated-next";
|
|
import GlobalStore from "../store/global";
|
|
import { Image } from 'antd';
|
|
import projects from '../assets/data/projects';
|
|
|
|
const Project = () => {
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, []);
|
|
|
|
const {bodySize} = useContainer(GlobalStore);
|
|
const count = useMemo(() => {
|
|
if (bodySize.width > 850) {
|
|
return 3;
|
|
}
|
|
return 2;
|
|
}, [bodySize]);
|
|
return (
|
|
<div className="project">
|
|
<div className="project__content">
|
|
<div className="project__content__main">
|
|
<AnimationOnScroll
|
|
animateIn="animate__fadeInDown"
|
|
animateOnce="true"
|
|
duration={1}
|
|
delay={0}
|
|
>
|
|
<h1 className="projects__title">Active Projects</h1>
|
|
<div className="projects_wrap" size={16}>
|
|
{projects.active.map((item) => (
|
|
<div
|
|
className="project__content__main__container"
|
|
style={{ width: `calc(${100 / count}% - 16px)` }}
|
|
>
|
|
<h3 style={{ color: "#fff", marginBottom: 12 }}>{item.title}</h3>
|
|
<div className="project_item_content">
|
|
<Image width={"100%"} src={item.img}></Image>
|
|
<span>{item.content}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<h1 className="projects__title">Retired/Inactive Projects</h1>
|
|
<div className="projects_wrap" size={16}>
|
|
{projects.inactive.map((item) => (
|
|
<div
|
|
className="project__content__main__container"
|
|
style={{ width: `calc(${100 / count}% - 16px)` }}
|
|
>
|
|
<h3 style={{ color: "#fff", marginBottom: 12 }}>{item.title}</h3>
|
|
<div className="project_item_content">
|
|
<Image width={"100%"} src={item.img}></Image>
|
|
<span>{item.content}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* <div
|
|
style={{
|
|
height: "100vh",
|
|
width: "100vw",
|
|
border: "1px solid",
|
|
marginTop: "30px",
|
|
overflowY: "scroll",
|
|
}}
|
|
>
|
|
<Waterfall
|
|
columnWidth={236}
|
|
columnCount={2}
|
|
columnGap={24}
|
|
rowGap={24}
|
|
onChangeUlMaxH={(h) => (ulMaxHRef.current = h)}
|
|
>
|
|
{images.map((item, index) => {
|
|
return (
|
|
<li key={index} onClick={() => alert("图片地址为:" + item)}>
|
|
<div>
|
|
{index + 1}
|
|
<img src={item} alt="" />
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</Waterfall>
|
|
</div> */}
|
|
</AnimationOnScroll>
|
|
</div>
|
|
{/* <WaterfallPositionDemo /> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default Project;
|