feat: add projects
This commit is contained in:
Jianqi Jin
@@ -0,0 +1,21 @@
|
||||
import { useContainer } from "unstated-next";
|
||||
import DropdownContainer from "../components/DropdownContainer";
|
||||
import GlobalStore from "../store/global";
|
||||
import NavBar from "../components/NavBar";
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
const AppOuter = ({ children }) => {
|
||||
const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
|
||||
return (
|
||||
<div className="container">
|
||||
{isHamburger ? (
|
||||
<DropdownContainer hamburgerToggle={setIsHamburger} />
|
||||
) : null}
|
||||
<div style={{ marginTop: 70 }}>{children}</div>
|
||||
<NavBar hamburgerToggle={setIsHamburger}></NavBar>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppOuter;
|
||||
+93
-19
@@ -1,22 +1,96 @@
|
||||
import React, { Component } from "react";
|
||||
import backgroundVideo from "../assets/video.mp4";
|
||||
import "../assets/stylesheets/home.scss";
|
||||
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';
|
||||
|
||||
export default class Projects extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="home">
|
||||
<video autoPlay loop muted className="home__video">
|
||||
<source src={backgroundVideo} type="video/mp4" />
|
||||
</video>
|
||||
<div className="home__content">
|
||||
<label className="home__content__title">
|
||||
ILLINOIS TECH
|
||||
<br />
|
||||
ROBOTICS
|
||||
</label>
|
||||
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;
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import Waterfall from "waterfalljs-layout/react";
|
||||
import "../assets/stylesheets/waterfall.scss";
|
||||
|
||||
const defimages = [
|
||||
"https://picsum.photos/640/200/?random",
|
||||
"https://picsum.photos/360/640/?random",
|
||||
"https://picsum.photos/480/720/?random",
|
||||
"https://picsum.photos/480/640/?random",
|
||||
"https://picsum.photos/360/?random",
|
||||
"https://picsum.photos/360/520/?random",
|
||||
"https://picsum.photos/520/360/?random",
|
||||
"https://picsum.photos/520/360/?random",
|
||||
"https://picsum.photos/520/360/?random",
|
||||
"https://picsum.photos/720/640/?random",
|
||||
];
|
||||
|
||||
export default function WaterfallPositionDemo() {
|
||||
const [images, setImages] = useState(defimages);
|
||||
const ulMaxHRef = useRef(0);
|
||||
|
||||
const handleSearchImage = async () => {
|
||||
function random(min, max) {
|
||||
return min + Math.floor(Math.random() * (max - min + 1));
|
||||
}
|
||||
const arr = [];
|
||||
for (let i = 0; i < 9; i++) {
|
||||
const imgSrc = `${defimages[i]}=${random(1, 10000)}`;
|
||||
arr.push(imgSrc);
|
||||
}
|
||||
setImages((prev) => [...prev, ...arr]);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "600px",
|
||||
width: "520px",
|
||||
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 style={{ textAlign: "center" }}>
|
||||
<button
|
||||
onClick={() => handleSearchImage()}
|
||||
style={{ margin: "30px auto" }}
|
||||
>
|
||||
LOAD MORE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user