System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 22:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

yay!

Browse source
This commit is contained in:
Toby Brown 2024-01-09 20:21:51 +00:00
parent 2f589d605f
commit a6d06dce6e
5 changed files with 83 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -58,6 +58,7 @@
"react-masonry-css": "^1.0.16",
"react-page-visibility": "^7.0.0",
"react-relative-time": "^0.0.9",
"react-responsive-carousel": "^3.2.23",
"react-reveal": "^1.2.2",
"react-scrolllock": "^5.0.1",
"react-snowfall": "^1.2.1",

116
pages/slack.js
View file

@ -24,6 +24,7 @@ import { thousands } from '../lib/members'
import { useRef, useState } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
import 'react-responsive-carousel/lib/styles/carousel.min.css'
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
@ -292,54 +293,56 @@ const SlackPage = () => {
Where the makers hang out...
</Text>
</Container>
<Grid
<Flex
sx={{
backgroundColor: '#f9fafc',
justifyItems: 'center',
alignItems: 'center',
}}
className="container"
ref={triggerRef}
>
<Container>
<Carousel>
<Container>
<Project
title="Brainwave device for thought-based computer interaction."
description="BCI&apos;s team organizes in #nest Velit voluptate deserunt
title="Brainwave device for thought-based computer interaction."
description="BCI&apos;s team organizes in #nest Velit voluptate deserunt
consequat. Velit voluptate deserunt consequat.Velit voluptate
deserunt consequat."
color={['red', '#F58695']}
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."
color={['orange', '#F2A510']}
/>
<Project
title="An open source VPN."
description="Burrow&apos;s team organizes in #burrow Velit voluptate deserunt
consequat. Velit voluptate deserunt consequat.Velit voluptate
deserunt consequat."
color={['yellow', '#FAE078']}
/>
<Project
title="Free compute infrastructure."
description="Nest&apos;s team organizes in #nest Velit voluptate deserunt
consequat. Velit voluptate deserunt consequat.Velit voluptate
deserunt consequat."
color={['green', '#51F5C5']}
/>
<Project
title="A chat app and cell phone carrier."
description="Nest&apos;s team organizes in #nest Velit voluptate deserunt
consequat. Velit voluptate deserunt consequat.Velit voluptate
deserunt consequat."
color={['cyan', '#88e5f8']}
/>
</Container>
</Grid>
<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."
color={['#ff8c37', '#F2A510']}
/>
<Project
title="An open source VPN."
description="Burrow&apos;s team organizes in #burrow Velit voluptate deserunt
consequat. Velit voluptate deserunt consequat.Velit voluptate
deserunt consequat."
color={['#f1c40f', '#FAE078']}
/>
<Project
title="Free compute infrastructure."
description="Nest&apos;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&apos;s team organizes in #nest Velit voluptate deserunt
consequat. Velit voluptate deserunt consequat.Velit voluptate
deserunt consequat."
img="purplebubble"
color={['#5bc0de', '#88e5f8']}
/>
</Container>
</Carousel>
</Flex>
<Container sx={{ py: [4, 5] }}>
<Flex sx={{ gap: '2rem' }}>
<Quote
@ -381,7 +384,7 @@ const SlackPage = () => {
>
<Box>
<Text as="h1" variant="title" sx={{ mb: 3, fontSize: ['36px', '48px', '56px'] }}>
There’s a whole new world for you to discover.
There&apos;s a whole new world for you to discover.
</Text>
<Link
href="#"
@ -410,7 +413,7 @@ const SlackPage = () => {
)
}
function Project({ title, description, sx, color }) {
function Project({ title, description, sx, color, img }) {
return (
<Box
sx={{
@ -419,25 +422,28 @@ function Project({ title, description, sx, color }) {
justifyContent: 'center',
backgroundColor: 'white',
rounded: 'lg',
height: '40vh',
width: 'full',
borderRadius: 12,
padding: '32px',
my: '2rem',
backgroundImage: t => t.util.gx(color[0], color[1]),
backgroundImage: t => `linear-gradient(to bottom, ${color[0]}, ${color[1]})`,
color: 'white',
textAlign: 'left',
width: 'full',
sx
}}
className="project"
className='embla__slide'
>
<Box>
<Text as="h1" variant="title" sx={{ width: 'copyUltra', }}>
{title}
</Text>
<Text as="p" variant="subtitle" sx={{ width: 'copyPlus', opacity: '75%' }}>
{description}
</Text>
<Box sx={{ paddingX: '32px', paddingTop: '10rem', paddingBottom: '2rem' }}>
<Text as="h1" variant="title" sx={{ width: 'copyUltra', }}>
{title}
</Text>
<Text as="p" variant="subtitle" sx={{ width: 'copyPlus', opacity: '75%' }}>
{description}
</Text>
</Box>
<Image
src={`/slack/${img}.png`}
sx={{ position: 'relative', bottom: 0 }}
/>
</Box>
)
}
@ -451,4 +457,12 @@ function Quote({ text, person, age, location }) {
)
}
function Carousel({ children }) {
return (
<Flex sx={{ overscrollBehaviorX: 'auto' }}>
{children}
</Flex>
)
}
export default SlackPage

BIN
public/slack/nest.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 553 KiB

BIN
public/slack/purplebubble.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 671 KiB

18
yarn.lock
View file

@ -6388,7 +6388,7 @@ prop-types@15.7.2:
object-assign "^4.1.1"
react-is "^16.8.1"
prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -6534,6 +6534,13 @@ react-dom@^17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-easy-swipe@^0.0.21:
version "0.0.21"
resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
dependencies:
prop-types "^15.5.8"
react-fast-compare@^3.0.1:
version "3.2.2"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
@ -6608,6 +6615,15 @@ react-resize-detector@^7.1.2:
dependencies:
lodash "^4.17.21"
react-responsive-carousel@^3.2.23:
version "3.2.23"
resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz#4c0016ff54603e604bb5c1f9e7ef2d1eda133f1d"
integrity sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==
dependencies:
classnames "^2.2.5"
prop-types "^15.5.8"
react-easy-swipe "^0.0.21"
react-reveal@^1.2.2:
version "1.2.2"
resolved "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz"