Add Social Module

content/socials/unsplash.json

@@ -0,0 +1,6 @@
+{
+    "platformName": "Unsplash",
+    "platformHandle": "@Unkn0wnCat",
+    "url": "https://unsplash.com/@unkn0wncat",
+    "image": "https://source.unsplash.com/user/unkn0wncat/300x300"
+}

locales/en/translation.json

@@ -21,5 +21,9 @@
     "projectViewGitHub": "View on GitHub",
     "projectViewWebsite": "View Project-Website",
     "projectsDescription": "This is what I am working on or have worked on.",
-    "projectView": "View"
+    "projectView": "View",
+    "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
+    "socialDescription": "Find me on other platforms!",
+    "friends": "Friends",
+    "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects."
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "kevin-k.dev",
+  "name": "kevink.dev",
   "version": "1.0.0",
   "private": true,
   "description": "KevinK.dev",

src/pages/social.js

@@ -1,17 +1,51 @@
 import React from "react"
 import Layout from "../layouts/default";
 import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+import { graphql } from 'gatsby'
 
-export default function SocialPage() {
+import styles from "./social.module.scss";
+
+export const query = graphql`
+query AllSocialsQuery {
+    allSocialsJson {
+      nodes {
+        image
+        platformHandle
+        platformName
+        url
+      }
+    }
+  }  
+`
+
+export default function SocialPage({data}) {
     
     const {t} = useI18next();
     return (
-        <Layout module="social" title={t("social")}>
+        <Layout module="social" title={t("social")} description={t("socialDescription")}>
             <section>
-                <div>
+                <article>
                     <h1><Trans>social</Trans></h1>
 
+                    <p><Trans i18nKey="socialDescriptionWithLink">socialDescriptionWith<Link to="/friends">Link</Link></Trans></p>
+
+                    <div className={styles.socialList}>
+                        {
+                            data.allSocialsJson.nodes.map((social) => {
+                                return (
+                                    <a className={styles.socialCard} href={social.url}>
+                                        <div className={styles.socialImage} style={{backgroundImage: "url("+social.image+")"}}>
+                                            <span className={styles.socialName}>{social.platformName}</span>
+                                            <span className={styles.socialUsername}>{social.platformHandle}</span>
                                         </div>
+                                    </a>
+                                );
+                            })
+                        }
+                    </div>
+
+                    {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
+                </article>
             </section>
         </Layout>
     );

src/pages/social.module.scss

@@ -0,0 +1,45 @@
+@import "../variables";
+
+.socialList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.socialCard {
+    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;
+}
+
+.socialImage {
+    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;
+}
+
+.socialName {
+    font-size: 2em;
+    margin-top: -5px;
+}
+
+.socialUsername {
+    margin-top: auto;
+}
+
+.socialCard:hover, .socialCard:focus {
+    transform: scale(1.05);
+}