Merge pull request #2 from msaaddev/master

📦 NEW: Coding Crows Website #1

Author: gasharova

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2020 msaaddev
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,27 @@
+<div align="center">
+<img src="https://i.imgur.com/pz4WpwS.png" alt="coding crows">
+<h1>Coding Crows Website</h1>
+</div>
+
+## 👨🏻‍💻 Pod Leader
+
+- [Arslan Dilawar](https://github.com/khattakdev)
+
+## 👥 Pod Members
+
+- [Saad Irfan](https://github.com/msaaddev)
+- [Angelina Gasharova](https://github.com/angelinag)
+- [Aneesh Kodali](https://github.com/aneeshkodali)
+- [Nkosilathi Tauro](https://github.com/nkosi-tauro)
+- [Levy Naibei](https://github.com/Levy-Naibei)
+- [Anna Tselikova](https://github.com/aniats)
+- [Egor Tarasov](https://github.com/Jorres)
+- [Arlyn Miles](https://github.com/Acrylami)
+- [Osarumense Azamegbe](https://github.com/david-osas)
+- [Yashika Sharma](https://github.com/yashika51)
+- [Jordan](https://github.com/nykez)
+- [Reda Tawfik](https://github.com/redatawfik)
+
+## 🔑 License
+
+- MIT

_config.yml

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import styles from '../styles/Card.module.css';
+
+const Card = ({ url, name, pod, github, linkedin, bio, project, openPopupboxForPod }) => {
+    const [podClass, setPodClass] = useState(styles.card);
+    useEffect(() => {
+        if (pod === true) {
+            setPodClass(styles.pod);
+        }
+    }, []);
+
+    return (
+        <div className={podClass}>
+            <img src={url} alt={name} />
+            <h3>{name}</h3>
+            <div className={styles.social}>
+                {pod === true && project === false ? (
+                    <>
+                        <Link href={github} passHref={true}>
+                            <a>
+                                <img src='./icons/github_logo.png' alt='github' />
+                            </a>
+                        </Link>
+                        <Link href={linkedin} passHref={true}>
+                            <a>
+                                <img src='./icons/linkedin_logo.png' alt='github' />
+                            </a>
+                        </Link>
+                    </>
+                ) : (
+                    <>
+                        <Link href='https://github.com/khattakdev' passHref={true}>
+                            <a>
+                                <img src='./icons/github_logo_white.png' alt='github' />
+                            </a>
+                        </Link>
+                        <Link href='https://linkedin.com/in/khattakdev' passHref={true}>
+                            <a>
+                                <img src='./icons/linkedin_logo_white.png' alt='github' />
+                            </a>
+                        </Link>
+                    </>
+                )}
+            </div>
+            {(pod === true && project === false && (
+                <div className={styles.read_more_btn}>
+                    <button onClick={() => openPopupboxForPod(bio)}>Read More</button>
+                </div>
+            )) ||
+                (pod === true && project === true && (
+                    <div className={styles.read_more_btn}>
+                        <Link href={github} passHref={true}>
+                            <a>
+                                <button>Read More</button>
+                            </a>
+                        </Link>
+                    </div>
+                )) ||
+                (pod === false && project === false && (
+                    <div className={styles.read_more_btn}>
+                        <Link href='https://www.khattak.dev/' passHref={true}>
+                            <a>
+                                <button>Read More</button>
+                            </a>
+                        </Link>
+                    </div>
+                ))}
+        </div>
+    );
+};
+
+export default Card;

components/Card.js

@@ -0,0 +1,12 @@
+import styles from '../styles/Coding_Crow.module.css';
+
+const Coding_Crow = () => {
+    return (
+        <div className={styles.pod_img}>
+            <img src='/images/logo.png' alt='coding crow' />
+            <h1>Coding Crows</h1>
+        </div>
+    );
+};
+
+export default Coding_Crow;

components/Coding_Crow.js

@@ -0,0 +1,11 @@
+import styles from '../styles/Footer.module.css';
+
+const Footer = () => {
+    return (
+        <div className={styles.footer}>
+            <h3>Made With ❤️. © All Rights Reserved</h3>
+        </div>
+    );
+};
+
+export default Footer;

components/Footer.js

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import data from '../data/podMembers';
+import Card from './Card';
+import styles from '../styles/Pod.module.css';
+
+const Pod = ({ openPopupboxForPod }) => {
+    const [podMembers] = useState(data);
+
+    return (
+        <div className={styles.pod_details}>
+            <h2>Meet the pod</h2>
+            <div className={styles.pod_members}>
+                {podMembers.map(member => (
+                    <Card
+                        url={member.url}
+                        name={member.name}
+                        github={member.github}
+                        linkedin={member.linkedin}
+                        bio={member.bio}
+                        pod={true}
+                        key={Math.floor(Math.random() * 10000)}
+                        openPopupboxForPod={openPopupboxForPod}
+                        project={false}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Pod;

components/Pod.js

@@ -0,0 +1,28 @@
+import styles from '../styles/Pod_leader.module.css';
+import Card from './Card';
+
+const Pod_Leader = () => {
+    return (
+        <div className={styles.pod_leader}>
+            <h2>Meet our pod leader</h2>
+            <div className={styles.leader_description}>
+                <Card
+                    url='/images/arsalan.jpg'
+                    name='Arslan Khattak'
+                    bio=''
+                    project={false}
+                    pod={false}
+                />
+                <p>
+                    I'm a Computer Science Junior and a Full Stack (MERN) Developer and open source
+                    contributor. Being MLH'20 Fellow, I'm active Next.Js Contributor. Writing down
+                    what I have learned and sharing it with others is what I love to do. I love to
+                    write and speak about new technologies. I am also an active member of technical
+                    communities. I am DSC LEAD and Microsoft Student Partner.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default Pod_Leader;

components/Pod_Leader.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;