mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
hello world
This commit is contained in:
Toby Brown
parent
c55642f9a3
commit
deb1a8ecdb
3 changed files with 167 additions and 101 deletions
|
|
@ -53,6 +53,7 @@
|
|||
"react-before-after-slider-component": "^1.1.8",
|
||||
"react-datepicker": "^4.24.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-horizontal-scrolling-menu": "^4.1.2",
|
||||
"react-konami-code": "^2.3.0",
|
||||
"react-marquee-slider": "^1.1.5",
|
||||
"react-masonry-css": "^1.0.16",
|
||||
|
|
|
|||
241
pages/slack.js
241
pages/slack.js
|
|
@ -21,65 +21,82 @@ import Nav from '../components/nav'
|
|||
import Header from '../components/slack/header'
|
||||
import fetcher from '../lib/fetcher'
|
||||
import { thousands } from '../lib/members'
|
||||
import { useRef, useState } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
|
||||
import { useRef, useState, useContext } from 'react'
|
||||
import Slider from 'react-slick'
|
||||
|
||||
import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu'
|
||||
import 'react-horizontal-scrolling-menu/dist/styles.css'
|
||||
|
||||
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: 'Brainwave device for thought-based computer interaction.',
|
||||
description:
|
||||
"BCI's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
|
||||
img: 'bci',
|
||||
color: ['#ec3750', '#F58695'],
|
||||
itemId: 1
|
||||
},
|
||||
{
|
||||
title: 'A free domain service.',
|
||||
description:
|
||||
'Obl.ong’s team organizes in #oblong Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.',
|
||||
img: 'oblong',
|
||||
color: ['#ff8c37', '#F2A510']
|
||||
},
|
||||
{
|
||||
title: 'An open source VPN.',
|
||||
description:
|
||||
"Burrow's team organizes in #burrow Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
|
||||
img: 'burrow',
|
||||
color: ['#f1c40f', '#FAE078']
|
||||
},
|
||||
{
|
||||
title: 'Free compute infrastructure.',
|
||||
description:
|
||||
"Nest's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
|
||||
img: 'nest',
|
||||
color: ['#33d6a6', '#51F5C5']
|
||||
},
|
||||
{
|
||||
title: 'A chat app and cell phone carrier.',
|
||||
description:
|
||||
"Nest's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.",
|
||||
img: 'purplebubble',
|
||||
color: ['#5bc0de', '#88e5f8']
|
||||
}
|
||||
]
|
||||
|
||||
const SlackPage = () => {
|
||||
const { data: millionCount } = useSWR(
|
||||
'https://jia.haas.hackclub.com/api/currentNumber',
|
||||
fetcher,
|
||||
{ refreshInterval: 10_000 }
|
||||
)
|
||||
const [color, setColors] = useState(['red', '#F58695'])
|
||||
const [totalMessagesOblong, setTotalMessagesOblong] = useState(0)
|
||||
|
||||
const triggerRef = useRef(null)
|
||||
const nameInputRef = useRef(null)
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
const [items, setItems] = useState(projects)
|
||||
const [selected, setSelected] = useState([])
|
||||
const [position, setPosition] = useState(0)
|
||||
|
||||
/*useEffect(() => {
|
||||
const sections = gsap.utils.toArray('.project')
|
||||
const { isLastItemVisible, scrollNext } = useContext(VisibilityContext)
|
||||
const { isFirstItemVisible, scrollPrev } = useContext(VisibilityContext)
|
||||
|
||||
const projects = gsap.to(sections, {
|
||||
xPercent: -100 * (sections.length - 1),
|
||||
ease: 'none',
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: triggerRef.current,
|
||||
start: 'top top',
|
||||
end: () => '+=' + document.querySelector('.container').offsetWidth,
|
||||
scrub: 1.25,
|
||||
pin: true,
|
||||
anticipatePin: 1,
|
||||
invalidateOnRefresh: true,
|
||||
snap: 0.5 * (1 / (sections.length - 1))
|
||||
},
|
||||
onUpdate: function () {
|
||||
const progress = this.progress()
|
||||
if (progress < 1 / 6) {
|
||||
setColors(['red', '#F58695'])
|
||||
} else if (progress < 2 / 6) {
|
||||
setColors(['orange', '#F2A510'])
|
||||
} else if (progress < 3 / 6) {
|
||||
setColors(['yellow', '#FAE078'])
|
||||
} else if (progress < 4 / 6) {
|
||||
setColors(['green', '#51F5C5'])
|
||||
} else if (progress < 5 / 6) {
|
||||
setColors(['cyan', '#88e5f8'])
|
||||
} else {
|
||||
setColors(['purple', '#d786ff'])
|
||||
}
|
||||
}
|
||||
})
|
||||
return () => {
|
||||
projects.kill()
|
||||
const isItemSelected = id => !!selected.find(el => el === id)
|
||||
|
||||
const handleClick =
|
||||
id =>
|
||||
({ getItemById, scrollToItem }) => {
|
||||
const itemSelected = isItemSelected(id)
|
||||
|
||||
setSelected(currentSelected =>
|
||||
itemSelected
|
||||
? currentSelected.filter(el => el !== id)
|
||||
: currentSelected.concat(id)
|
||||
)
|
||||
}
|
||||
}, [])*/
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -298,53 +315,33 @@ const SlackPage = () => {
|
|||
sx={{
|
||||
backgroundColor: '#f9fafc',
|
||||
justifyItems: 'center',
|
||||
alignItems: 'center'
|
||||
alignItems: 'center',
|
||||
width: 'fit-content',
|
||||
position: 'relative',
|
||||
display: 'grid',
|
||||
paddingLeft: '25vw'
|
||||
}}
|
||||
className="container"
|
||||
>
|
||||
<Container>
|
||||
<Project
|
||||
title="Brainwave device for thought-based computer interaction."
|
||||
description="BCI's team organizes in #nest Velit voluptate deserunt
|
||||
consequat. Velit voluptate deserunt consequat.Velit voluptate
|
||||
deserunt consequat."
|
||||
img="bci"
|
||||
color={['#ec3750', '#F58695']}
|
||||
/>
|
||||
<Project
|
||||
title="A free domain service."
|
||||
description="Obl.ong’s team organizes in #oblong Velit voluptate deserunt
|
||||
consequat. Velit voluptate deserunt consequat.Velit voluptate
|
||||
deserunt consequat."
|
||||
img="oblong"
|
||||
color={['#ff8c37', '#F2A510']}
|
||||
/>
|
||||
<Project
|
||||
title="An open source VPN."
|
||||
description="Burrow's team organizes in #burrow Velit voluptate deserunt
|
||||
consequat. Velit voluptate deserunt consequat.Velit voluptate
|
||||
deserunt consequat."
|
||||
img="burrow"
|
||||
color={['#f1c40f', '#FAE078']}
|
||||
/>
|
||||
<Project
|
||||
title="Free compute infrastructure."
|
||||
description="Nest's team organizes in #nest Velit voluptate deserunt
|
||||
consequat. Velit voluptate deserunt consequat.Velit voluptate
|
||||
deserunt consequat."
|
||||
img="nest"
|
||||
color={['#33d6a6', '#51F5C5']}
|
||||
/>
|
||||
<Project
|
||||
title="A chat app and cell phone carrier."
|
||||
description="Nest's team organizes in #nest Velit voluptate deserunt
|
||||
consequat. Velit voluptate deserunt consequat.Velit voluptate
|
||||
deserunt consequat."
|
||||
img="purplebubble"
|
||||
color={['#5bc0de', '#88e5f8']}
|
||||
/>
|
||||
</Container>
|
||||
<ScrollMenu>
|
||||
{projects.map((project, index) => (
|
||||
<Project
|
||||
title={project.title}
|
||||
description={project.description}
|
||||
img={project.img}
|
||||
color={project.color}
|
||||
itemId={project.itemId}
|
||||
handleClick={handleClick}
|
||||
isItemSelected={isItemSelected}
|
||||
id={index}
|
||||
/>
|
||||
))}
|
||||
</ScrollMenu>
|
||||
</Grid>
|
||||
<a disabled={isFirstItemVisible} onClick={() => scrollPrev()}>Left</a>
|
||||
<a disabled={isLastItemVisible} onClick={() => scrollNext()}>
|
||||
Right
|
||||
</a>
|
||||
<Container sx={{ py: [4, 5] }}>
|
||||
<Box sx={{ gap: '2rem', display: ['grid', 'flex'] }}>
|
||||
<Quote
|
||||
|
|
@ -430,7 +427,17 @@ const SlackPage = () => {
|
|||
)
|
||||
}
|
||||
|
||||
function Project({ title, description, sx, color, img }) {
|
||||
function Project({
|
||||
title,
|
||||
description,
|
||||
sx,
|
||||
color,
|
||||
img,
|
||||
itemId,
|
||||
handleClick,
|
||||
isItemSelected,
|
||||
id
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -443,6 +450,9 @@ function Project({ title, description, sx, color, img }) {
|
|||
overflow: 'clip',
|
||||
sx
|
||||
}}
|
||||
itemId={itemId}
|
||||
onClick={handleClick(id)}
|
||||
selected={isItemSelected(id)}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -503,18 +513,47 @@ function Quote({ text, person, age, location, img }) {
|
|||
)
|
||||
}
|
||||
|
||||
function CarouselComponent({ children }) {
|
||||
var settings = {
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
centerMode: true,
|
||||
focusOnSelect: true
|
||||
}
|
||||
|
||||
return <Slider {...settings}>{children}</Slider>
|
||||
}
|
||||
|
||||
export default SlackPage
|
||||
|
||||
/*
|
||||
Here lies the horizontal scroll menu. It's not currently in use, but it's here if anyone every wants it! - Toby
|
||||
const triggerRef = useRef(null)
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
useEffect(() => {
|
||||
const sections = gsap.utils.toArray('.project')
|
||||
|
||||
const projects = gsap.to(sections, {
|
||||
xPercent: -100 * (sections.length - 1),
|
||||
ease: 'none',
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: triggerRef.current,
|
||||
start: 'top top',
|
||||
end: () => '+=' + document.querySelector('.container').offsetWidth,
|
||||
scrub: 1.25,
|
||||
pin: true,
|
||||
anticipatePin: 1,
|
||||
invalidateOnRefresh: true,
|
||||
snap: 0.5 * (1 / (sections.length - 1))
|
||||
},
|
||||
onUpdate: function () {
|
||||
const progress = this.progress()
|
||||
if (progress < 1 / 6) {
|
||||
setColors(['red', '#F58695'])
|
||||
} else if (progress < 2 / 6) {
|
||||
setColors(['orange', '#F2A510'])
|
||||
} else if (progress < 3 / 6) {
|
||||
setColors(['yellow', '#FAE078'])
|
||||
} else if (progress < 4 / 6) {
|
||||
setColors(['green', '#51F5C5'])
|
||||
} else if (progress < 5 / 6) {
|
||||
setColors(['cyan', '#88e5f8'])
|
||||
} else {
|
||||
setColors(['purple', '#d786ff'])
|
||||
}
|
||||
}
|
||||
})
|
||||
return () => {
|
||||
projects.kill()
|
||||
}
|
||||
}, [])*/
|
||||
|
|
|
|||
26
yarn.lock
26
yarn.lock
|
|
@ -3164,6 +3164,11 @@ commondir@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
|
||||
integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
|
||||
|
||||
compute-scroll-into-view@^1.0.20:
|
||||
version "1.0.20"
|
||||
resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
|
||||
integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
|
||||
|
||||
concat-map@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
|
||||
|
|
@ -6563,6 +6568,13 @@ react-fast-compare@^3.2.0:
|
|||
resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
|
||||
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
|
||||
|
||||
react-horizontal-scrolling-menu@^4.1.2:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-4.1.2.tgz#18a278256d4ceac357f53263822760807fd09e8f"
|
||||
integrity sha512-qcIgZ9Ck5HHfLpZy2iGqpYxGx3zPtRkWBN/i8M3hX3x4SjxmAupgRV4js5TsoMsHOWOvP190IrVULE9sxmWsGQ==
|
||||
dependencies:
|
||||
smooth-scroll-into-view-if-needed "~1.1"
|
||||
|
||||
react-is@16.13.1, react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
|
||||
|
|
@ -7148,6 +7160,13 @@ scheduler@^0.20.2:
|
|||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
scroll-into-view-if-needed@^2.2.28:
|
||||
version "2.2.31"
|
||||
resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz#d3c482959dc483e37962d1521254e3295d0d1587"
|
||||
integrity sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==
|
||||
dependencies:
|
||||
compute-scroll-into-view "^1.0.20"
|
||||
|
||||
semver@^5.4.1:
|
||||
version "5.7.2"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
|
||||
|
|
@ -7248,6 +7267,13 @@ slash@^4.0.0:
|
|||
resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
|
||||
integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
|
||||
|
||||
smooth-scroll-into-view-if-needed@~1.1:
|
||||
version "1.1.33"
|
||||
resolved "https://registry.yarnpkg.com/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.33.tgz#2c7b88c82784c69030cb0489b9df584e94e01533"
|
||||
integrity sha512-crS8NfAaoPrtVYOCMSAnO2vHRgUp22NiiDgEQ7YiaAy5xe2jmR19Jm+QdL8+97gO8ENd7PUyQIAQojJyIiyRHw==
|
||||
dependencies:
|
||||
scroll-into-view-if-needed "^2.2.28"
|
||||
|
||||
source-map-js@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue