mirror of
https://github.com/System-End/site.git
synced 2026-04-19 22:05:11 +00:00
Added gallery
This commit is contained in:
Clay Nicholson
parent
b29a62371f
commit
b9790f1ef7
4 changed files with 264 additions and 5 deletions
61
components/arcade/post.js
Normal file
61
components/arcade/post.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import React from 'react'
|
||||
import styles from './post.module.css'
|
||||
import { useRef } from 'react';
|
||||
|
||||
|
||||
const Post = ({ id, title, desc, slack, scrapbook, playable, images, githubProf}) => {
|
||||
const cardRef = useRef(null);
|
||||
var backgroundImage = `url(https://via.placeholder.com/300x300)`;
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
const card = cardRef.current;
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left; // x position within the element
|
||||
const y = e.clientY - rect.top; // y position within the element
|
||||
|
||||
const centerX = rect.width / 3;
|
||||
const centerY = rect.height / 3;
|
||||
|
||||
const percentX = (x - centerX) / centerX;
|
||||
const percentY = (y - centerY) / centerY;
|
||||
|
||||
const rotateX = percentY * -2 // Rotate between -15deg to 15deg
|
||||
const rotateY = percentX * 2; // Rotate between -15deg to 15deg
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
const card = cardRef.current;
|
||||
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
|
||||
};
|
||||
|
||||
if (images){
|
||||
|
||||
if (images.length !== 0) {
|
||||
backgroundImage = `url(${images[0].url})`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
alt={id}
|
||||
className={styles.gallery_card}
|
||||
ref={cardRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{ backgroundImage }}
|
||||
>
|
||||
<h1 className={styles.card_title}>
|
||||
{title}<br/>
|
||||
</h1>
|
||||
<div className={styles.overlay}>
|
||||
<p className={styles.description}>{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Post
|
||||
88
components/arcade/post.module.css
Normal file
88
components/arcade/post.module.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.gallery_card{
|
||||
flex: 1;
|
||||
break-inside: avoid;
|
||||
border-radius: 0.5rem; /* Equivalent to rounded-lg */
|
||||
background-color: rgba(158, 158, 158, 1); /* Equivalent to bg-white/20 */
|
||||
background-clip: padding-box; /* Equivalent to bg-clip-padding */
|
||||
padding: 1.5rem 1.5rem 1rem 1.5rem; /* Equivalent to p-6 pb-4 */
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
|
||||
height: fit-content; /* Equivalent to h-fit */
|
||||
width: 100%; /* Make the card width responsive within the column */
|
||||
margin-bottom: 24px; /* Add space between cards vertically */
|
||||
min-height: 300px;
|
||||
background-image: url("https://img.buzzfeed.com/buzzfeed-static/static/2020-05/21/17/asset/19f3032de0de/sub-buzz-1010-1590082675-7.png");
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.feed {
|
||||
min-height: 1000px;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
align-self: center;
|
||||
column-gap: 24px;
|
||||
padding: 24px;
|
||||
|
||||
|
||||
@media (min-width: 640px) {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
/* Medium screens */
|
||||
@media (min-width: 768px) {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
/* Large screens */
|
||||
@media (min-width: 1024px) {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.card_title{
|
||||
font-family: 'Trebuchet MS';
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: #e1e1e1;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0); /* Transparent initially */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: 0.5rem;
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
.description {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery_card:hover .overlay {
|
||||
background-color: rgba(0, 0, 0, 0.6); /* Black overlay with 60% opacity */
|
||||
}
|
||||
|
||||
.gallery_card:hover .description {
|
||||
opacity: 1;
|
||||
}
|
||||
0
pages/api/arcade/showcase/my.js
Normal file
0
pages/api/arcade/showcase/my.js
Normal file
|
|
@ -1,19 +1,129 @@
|
|||
import React from 'react'
|
||||
import Nav from '../../components/Nav'
|
||||
import Footer from '../../components/Footer'
|
||||
import Footer from '../../components/arcade/Footer'
|
||||
import BGImg from '../../components/background-image'
|
||||
import AssembleImgFile from '../../public/home/assemble.jpg'
|
||||
import background from '../../public/home/assemble.jpg'
|
||||
import { Badge, Box, Button, Card, Container, Grid, Heading, Link, Text } from 'theme-ui'
|
||||
import SlideDown from '../../components/slide-down'
|
||||
import Post from '../../components/arcade/post'
|
||||
import styles from '../../components/arcade/post.module.css'
|
||||
|
||||
export async function getStaticProps() {
|
||||
const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://hackclub.com';
|
||||
const res = await fetch(`${host}/api/arcade/gallery`);
|
||||
const posts = await res.json();
|
||||
|
||||
const filteredPosts = posts;
|
||||
|
||||
return {
|
||||
props: { posts: filteredPosts,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const gallery = () => {
|
||||
const gallery = ({ posts }) => {
|
||||
console.log(posts);
|
||||
return (
|
||||
<section>
|
||||
<Nav />
|
||||
<BGImg
|
||||
src={AssembleImgFile}
|
||||
alt="Hack Clubbers assemble at Figma HQ for the first IRL hackathon in SF since 2020: Assemble. 📸 Photo by Kunal Botla, Hack Clubber in MA!"
|
||||
src={background}
|
||||
alt="Arcade Gallery BG Img"
|
||||
priority
|
||||
/>
|
||||
|
||||
|
||||
<SlideDown duration={768}>
|
||||
<Heading
|
||||
as="h1"
|
||||
variant="ultratitle"
|
||||
sx={{
|
||||
color: 'white',
|
||||
textShadow: 'text',
|
||||
filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
|
||||
WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
|
||||
maxWidth: [null, 'copyUltra'],
|
||||
my: [3, 4],
|
||||
mx: 'auto',
|
||||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: ['2px', '3px'],
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}}
|
||||
>
|
||||
Arcade Gallery
|
||||
</Text>
|
||||
<br />
|
||||
<Button
|
||||
as="a"
|
||||
variant="ctaLg"
|
||||
href="https://apply.hackclub.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Add a Project
|
||||
</Button>
|
||||
</Heading>
|
||||
</SlideDown>
|
||||
|
||||
<div className={styles.feed}>
|
||||
{posts.map(post => {
|
||||
return (
|
||||
<Post
|
||||
id={post.id}
|
||||
title={post.name}
|
||||
desc={post.desc}
|
||||
slack={post.slack}
|
||||
codeLink={post.codeLink}
|
||||
playable={post.playable}
|
||||
images={post.images}
|
||||
githubProf={""}
|
||||
/>)
|
||||
|
||||
})}
|
||||
<Post
|
||||
title="My project"
|
||||
|
||||
/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
<Post/>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue