From 17c48d380e19471e918fea4376e3328256151b75 Mon Sep 17 00:00:00 2001
From: Clay Nicholson <clayanicholson@gmail.com>
Date: Sat, 10 Aug 2024 01:24:32 -0400
Subject: [PATCH] Bin Gallery

---
 components/bin/galleryview.js       |  23 +++++
 pages/bin/gallery.js                | 152 ++++++++++++++++++++++++++++
 public/bin/style/gallery.module.css | 107 ++++++++++++++++++++
 3 files changed, 282 insertions(+)
 create mode 100644 components/bin/galleryview.js
 create mode 100644 pages/bin/gallery.js
 create mode 100644 public/bin/style/gallery.module.css

diff --git a/components/bin/galleryview.js b/components/bin/galleryview.js
new file mode 100644
index 00000000..caab65ab
--- /dev/null
+++ b/components/bin/galleryview.js
@@ -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;
\ No newline at end of file
diff --git a/pages/bin/gallery.js b/pages/bin/gallery.js
new file mode 100644
index 00000000..11d0ed10
--- /dev/null
+++ b/pages/bin/gallery.js
@@ -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
\ No newline at end of file
diff --git a/public/bin/style/gallery.module.css b/public/bin/style/gallery.module.css
new file mode 100644
index 00000000..975cfa8f
--- /dev/null
+++ b/public/bin/style/gallery.module.css
@@ -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;
+}
\ No newline at end of file