Add Friends Module

content/friends/feuerhamster.json

@@ -0,0 +1,6 @@
+{
+    "profession": "Full-Stack-Developer",
+    "name": "Feuerhamster",
+    "url": "https://hamsterlabs.de",
+    "imageURL": "https://cdn.kevink.dev/assets/friends/feuerhamster.png"
+}

content/friends/jannik.json

@@ -0,0 +1,6 @@
+{
+    "profession": "",
+    "name": "Jannik Kiel",
+    "url": "https://unsplash.com/@jannikkiel",
+    "imageURL": "https://source.unsplash.com/user/jannikkiel/300x300"
+}

content/friends/timo.json

@@ -0,0 +1,6 @@
+{
+    "profession": "Systemadministrator",
+    "name": "Timo Strüker",
+    "url": "https://strueker.dev",
+    "imageURL": "https://cdn.kevink.dev/assets/friends/timo.jpg"
+}

src/pages/friends.js

@@ -0,0 +1,67 @@
+import React from "react"
+import Layout from "../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+import { graphql } from 'gatsby'
+
+import styles from "./friends.module.scss";
+
+export const query = graphql`
+query AllFriendsQuery {
+    allFriendsJson {
+      nodes {
+        name
+        profession
+        url
+        imageURL
+      }
+    }
+  }
+  
+`
+
+export default function SocialPage({data}) {
+    
+    const {t} = useI18next();
+
+    function shuffle(a) {
+        for (let i = a.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [a[i], a[j]] = [a[j], a[i]];
+        }
+        return a;
+    }
+
+    return (
+        <Layout module="social" title={t("friends")} description={t("friendsDescription")}>
+            <section>
+                <article>
+                    <h1><Trans>social</Trans></h1>
+
+                    <p><Trans>friendsDescription</Trans></p>
+
+                    <div className={styles.friendsList}>
+                        {
+                            shuffle(data.allFriendsJson.nodes).map((friend) => {
+                                return (
+                                    <div className={styles.friendProfile}>
+                                        <div className={styles.friendImage} style={{backgroundImage: "url("+friend.imageURL+")"}}>
+                                            <span className={styles.friendName}>{friend.name}</span>
+                                            <span className={styles.friendTitle}>{friend.profession}</span>
+                                        </div>
+                                        
+                                        {/*<span class="friendBio"></span>*/}
+                                        <div className={styles.contactLinks}>
+                                            <a className={styles.contactLink} href={friend.url} target="_blank" rel="noopener"><i class="fas fa-globe-europe" aria-hidden="true"></i> {friend.url}</a>
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        }
+                    </div>
+
+                    {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
+                </article>
+            </section>
+        </Layout>
+    );
+}

src/pages/friends.module.scss

@@ -0,0 +1,73 @@
+@import "../variables";
+
+.friendsList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.friendProfile {
+    max-width: 300px;
+    width: 100%;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
+    transition: transform .25s;
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+    color: white;
+    text-decoration: none;
+}
+
+.friendImage {
+    width: 100%;
+    height: 300px;
+    background-position: center;
+    background-size: cover;
+    display: flex;
+    padding: 10px;
+    flex-direction: column-reverse;
+    text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+}
+
+.friendBio {
+    padding: 15px;
+    flex-grow: 1;
+    text-align: justify;
+    display: block;
+    padding-bottom: 0;
+}
+
+.friendProfile .contactLinks {
+    padding: 15px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.contactLink {
+    transition: text-decoration .5s;
+    text-decoration: underline dotted rgba(0, 0, 0, 0);
+    padding: 6px 0 6px 25px;
+    color: $textColor;
+}
+
+.contactLink > i {
+    color: $accentColor;
+    margin-left: -25px;
+    margin-right: 5px;
+}
+
+.friendProfile:hover {
+    transform: scale(1.05);
+}
+
+.friendName {
+    font-size: 2em;
+    margin-top: -5px;
+}
+
+.friendTitle {
+    margin-top: auto;
+}