📦 NEW: project section

Author: msaaddev

components/Pod.js

@@ -20,6 +20,7 @@ const Pod = ({ openPopupboxForPod }) => {
                         pod={true}
                         key={Math.floor(Math.random() * 10000)}
                         openPopupboxForPod={openPopupboxForPod}
+                        project={false}
                     />
                 ))}
             </div>

components/Pod_Leader.js

@@ -9,8 +9,9 @@ const Pod_Leader = () => {
                 <Card
                     url='/images/arsalan.jpg'
                     name='Arslan Khattak'
-                    pod=''
-                    more='https://www.khattak.dev/'
+                    bio=''
+                    project={false}
+                    pod={false}
                 />
                 <p>
                     I'm a Computer Science Junior and a Full Stack (MERN) Developer and open source

components/Project.js

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import Card from './Card';
+import data from '../data/projects';
+import styles from '../styles/Project.module.css';
+
+const Projects = ({ openPopupboxForPod }) => {
+    const [projects] = useState(data);
+    return (
+        <>
+            <div className={styles.main_projects}>
+                <div className={styles.heading}>
+                    <h2>Take A Look At Our Projects</h2>
+                </div>
+            </div>
+            <div className={styles.projects}>
+                {projects.map(project => (
+                    <Card
+                        url={project.url}
+                        name={project.name}
+                        bio={project.info}
+                        github={project.github}
+                        pod={true}
+                        project={true}
+                        key={Math.floor(Math.random() * 10000)}
+                        openPopupboxForPod={openPopupboxForPod}
+                    />
+                ))}
+            </div>
+        </>
+    );
+};
+
+export default Projects;

data/projects.js

@@ -0,0 +1,50 @@
+module.exports = [
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+    {
+        name: 'Lorem Ipsum',
+        url: '/projects/sample.png',
+        info: `Some Project Info Here`,
+        github: `https://github.com`,
+    },
+];

pages/index.js

@@ -2,6 +2,7 @@ import SEO from '../components/Seo';
 import Coding_Crow from '../components/Coding_Crow';
 import Pod_Leader from '../components/Pod_Leader';
 import Pod from '../components/Pod';
+import Projects from '../components/Project';
 import Footer from '../components/Footer';
 import { PopupboxManager, PopupboxContainer } from 'react-popupbox';
 import 'react-popupbox/dist/react-popupbox.css';
@@ -31,6 +32,7 @@ export default function Home() {
             <Coding_Crow />
             <Pod_Leader />
             <Pod openPopupboxForPod={openPopupboxForPod} />
+            <Projects openPopupboxForPod={openPopupboxForPod} />
             <Footer />
             <PopupboxContainer {...popupboxConfig} />
         </>

styles/Footer.module.css

@@ -1,5 +1,5 @@
 .footer {
-    height: 40vh;
+    height: 10vh;
     display: flex;
     justify-content: center;
     align-items: center;

styles/Project.module.css

@@ -0,0 +1,36 @@
+.main_projects {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    opacity: 0;
+    transition: all 0.1s;
+}
+
+.main_projects:hover {
+    opacity: 1;
+}
+
+.heading h2 {
+    text-transform: uppercase;
+    font-size: 2.5rem;
+}
+
+.projects {
+    height: 100vh;
+    background-color: #000000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    overflow: scroll;
+}
+
+/* responsive styles */
+
+@media screen and (max-width: 600px) {
+    .heading h2 {
+        font-size: 1.7rem;
+        align-items: center;
+    }
+}