📦 NEW: Coding Crows Website #1

.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

components/Card.js

@@ -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/Coding_Crow.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/Footer.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/Pod.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_Leader.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/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;

components/Seo.js

@@ -0,0 +1,23 @@
+import Head from 'next/head';
+
+const SEO = () => {
+    return (
+        <Head>
+            <title>Coding Crows — Major league Hacking Pod 1.1.0</title>
+            <link rel='icon' href='/images/logo.png' />
+            <link
+                href='https://fonts.googleapis.com/css2?family=Lora&display=swap'
+                rel='stylesheet'
+            />
+            <meta charset='UTF-8' />
+            <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+            <meta name='description' content='MLH Fellowship Pod 1.1.0 Website' />
+            <meta
+                name='keywords'
+                content='MLH, MLH fellowship, MLH explorer, msaaddev, gasharova, aneeshkodali, nkosi-tauro, Levy-Naibei, aniats, Jorres, Acrylami, david-osas, yashika51'
+            />
+        </Head>
+    );
+};
+
+export default SEO;

data/podMembers.js

@@ -0,0 +1,78 @@
+module.exports = [
+    {
+        name: 'Angelina Gasharova',
+        url: '/images/Angelina_Gasharova.jpg',
+        github: 'https://github.com/angelinag',
+        linkedin: 'https://www.linkedin.com/in/gasharova/',
+        bio: `I've been coding since I was 13. Many languages and frameworks later I've finally settled with Python as my all-time favourite; it's extremely powerful, yet so simple. This way, I don't have to waste so much effort - so that I can then happily waste it on other activities, such as ranking up a videogame or climbing mountain tops.`,
+    },
+    {
+        name: 'Saad Irfan',
+        url: '/images/saad.jpg',
+        github: 'https://github.com/msaaddev',
+        linkedin: 'https://linkedin.com/in/msaaddev',
+        bio: `Aspiring JavaScript developer getting a Bachelor's degree in Computer Sciences. Introduced to coding at age of 12. An MLH '20 fellow, a Jr. Dev Advocate, an open-sourcer (authored several open-source tools), open-source contributor (contributed to the likes of Node.js, Fluid Project, Global Public Inclusive Infrastructure), former Google's Developer Student Clubs Lead, Beta – Microsoft Learn Student Ambassador, Technical Writer, Speaker, TV Show fanatic, Wannabe Photographer and a Guitarist.`,
+    },
+    {
+        name: 'Aneesh Kodali',
+        url: '/images/Aneesh_Kodali.jpeg',
+        github: 'https://github.com/aneeshkodali',
+        linkedin: 'https://linkedin.com/in/aneeshkodali',
+        bio: `Coming from data analytics background, I decided to pursue software engineering because I liked the idea of using code and logic and building things people can see and interact with. I like learning new languages (computer or otherwise). I enjoy playing tennis and eating, as I consider my day as just 'waiting until the next meal'`,
+    },
+    {
+        name: 'Nkosilathi Tauro',
+        url: '/images/Nkosilathi_Tauro.png',
+        github: 'https://github.com/nkosi-tauro',
+        linkedin: 'https://linkedin.com/in/nkosi-tauro',
+        bio: `I solve problems, often using technology. I take pride in writing high quality code. I enjoy mentoring others, in-person and virtually. I can identify and solve problems, and have excellent communication skills which allow me to work well independently or as part of a team. I have expertise in web development, data science and game development. I enjoy coding in Python , but overall I'm not fussy about what languages or stacks I work with. I am good at learning new skills as I need them.`,
+    },
+    {
+        name: 'Levy Naibei',
+        url: '/images/levy.jpeg',
+        github: 'https://github.com/Levy-Naibei',
+        linkedin: 'https://linkedin.com/in/Levy-Naibei/',
+        bio: `Passionate Full-stack JavaScript Developer | React.js, Node.js | Data Science and Cloud computing enthusiast | Hiking, enjoying nature, mentoring fellow young people |`,
+    },
+    {
+        name: 'Anna Tselikova',
+        url: '/images/ania.jpg',
+        github: 'https://github.com/aniats',
+        linkedin: 'https://linkedin.com/in/anna-tselikova-756496164/',
+        bio: `20 y.o. Software Engineer from Russia; also in love with travelling, foreign languages and financial markets`,
+    },
+    {
+        name: 'Egor Tarasov',
+        url: '/images/egor.jpeg',
+        github: 'https://github.com/Jorres',
+        linkedin: 'https://linkedin.com/',
+        bio: `20 y.o. software developer from Russia. Definitely not a competitive programmer.`,
+    },
+    {
+        name: 'Arlyn Miles',
+        url: '/images/arlyn.png',
+        github: 'https://github.com/Acrylami',
+        linkedin: 'https://www.linkedin.com/in/arlyn-m-06b4331b9/',
+        bio: `Final year BSc Computer Science  student, Technocamps ambassador for Computer Science education in South Wales`,
+    },
+    {
+        name: 'Osarumense Azamegbe',
+        url: '/images/osas.jpg',
+        github: 'https://github.com/david-osas',
+        linkedin: 'https://www.linkedin.com/in/osarumense-azamegbe/',
+        bio: `I am a Computer Engineering undergraduate and a full-stack developer using MERN technologies. I like creating awesome stuff with code, reading about new technological innovations, and discussing such with other people. I also like watching movies and anime, and I am also interested in other amazing fields of technology such as mobile development, machine learning, cloud computing, and robotics`,
+    },
+    {
+        name: 'Yashika Sharma',
+        url: '/images/yashika.jpg',
+        github: 'https://github.com/yashika51',
+        linkedin: 'https://www.linkedin.com/in/yashika51',
+        bio: `A soon to be graduated computer science engineer who loves to combine software engineering best practices with data science techniques to build impactful projects.
+I have been digging in the data science field for more than one year now. During my data science journey so far I worked as an ML Engineer at Omdena(worked on social good projects, because is it even tech if its isn't impactful?), data scientist at a startup called Mylo (I brought profits to company using NLP along with increasing the platform engagement by 2x) and as a MLH fellow where I spent amazing 12 weeks contributing to machine learning and deep learning organizations including scikit-learn, Keras and BentoML.
+
+Currently, I am working as a Junior Team Lead at MLH (because sharing my experience with others helps me to learn more and build a community), where I manage 10 brilliant fellows in US and Canada.
+
+Diversity matters a lot to me and to empower women in tech I lead Women Who Code Python track. They have some amazing study groups and AMA webinars going on that are led me.
+`,
+    },
+];