mirror of
https://github.com/System-End/site.git
synced 2026-04-19 18:35:12 +00:00
Bin Gallery
This commit is contained in:
Clay Nicholson
parent
90f40fffe1
commit
17c48d380e
3 changed files with 282 additions and 0 deletions
23
components/bin/galleryview.js
Normal file
23
components/bin/galleryview.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
import styles from '../../public/bin/style/gallery.module.css'
|
||||
|
||||
const BinPost = ({title, desc, slack, link, image}) => {
|
||||
|
||||
const handleClick = () => {
|
||||
window.open("www.example.com", '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.gallery_card}
|
||||
onClick={handleClick}>
|
||||
<h1 className={styles.card_title}>
|
||||
{title}<br/>
|
||||
</h1>
|
||||
<p className={styles.card_desc}>{desc}</p>
|
||||
<p>{slack}</p>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BinPost;
|
||||
152
pages/bin/gallery.js
Normal file
152
pages/bin/gallery.js
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import React from 'react'
|
||||
import BinPost from '../../components/bin/galleryView'
|
||||
import styles from '../../public/bin/style/gallery.module.css'
|
||||
|
||||
|
||||
function Gallery() {
|
||||
|
||||
return(
|
||||
<section className='page'>
|
||||
<div className={styles.background}></div>
|
||||
|
||||
<h1 className={styles.title}>Bin Gallery</h1>
|
||||
<p className={styles.sub_title}>A display of all of bin's projects</p>
|
||||
|
||||
|
||||
<div className={styles.feed}>
|
||||
<BinPost
|
||||
title="Raspberry Pi Pico"
|
||||
desc="This is a Raspberry Pi Pico based Temperature and Humidity display that uses a combination of a motion sensor, photo resistor and IR remote/receiver to add some helpful The motion sensor turns on the display when it detects movement, but the photo resistor makes sure it stays off during the night unless you use the IR remote to turn it on in the dark. This way, it won't disrupt your sleep or work at night with accidental triggers of the motion sensor!"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
|
||||
<BinPost
|
||||
title="title"
|
||||
desc="lore ipsum"
|
||||
slack="@CAN"
|
||||
link="https://www.google.com"
|
||||
image="https://www.google.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Gallery
|
||||
107
public/bin/style/gallery.module.css
Normal file
107
public/bin/style/gallery.module.css
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
|
||||
|
||||
|
||||
.gallery_card {
|
||||
flex: 1;
|
||||
break-inside: avoid;
|
||||
border-radius: 0.5rem; /* Equivalent to rounded-lg */
|
||||
border: 1px solid #464646; /* Equivalent to border-gray-300 */
|
||||
background-color: rgba(158, 158, 158, 0.2); /* 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 */
|
||||
}
|
||||
|
||||
|
||||
.feed {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 5rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(to right, #f5740b, #d9a406, #fdff78);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sub_title {
|
||||
margin-top: -40px;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #5e5e5e;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
}
|
||||
|
||||
.pageBackground {
|
||||
background-color: #1c1c1c;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-top: -66.5px;
|
||||
}
|
||||
|
||||
.background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.card_title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: #e1e1e1;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card_desc {
|
||||
font-family: sans-serif;
|
||||
text-align: left;
|
||||
color: #a7a7a7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue