Explore Design changes

2025-04-28 09:46:52 +02:00 · 2020-12-26 20:41:53 +01:00 · 2020-12-26 20:41:53 +01:00 · df08385cc5
commit df08385cc5
parent 85d749d33d
22 changed files with 146 additions and 53 deletions
--- a/content/projects/_schema.json
+++ b/content/projects/_schema.json
@ -0,0 +1,12 @@
+{
+    "urlname": "foobar",
+    "lang": "ignoreme",
+    "name": "foobar",
+    "shortDescription": "foobar",
+    "links": {
+        "website": "https://foo.bar",
+        "github": "https://foo.bar"
+    },
+    "image": "../images/test.jpg",
+    "featured": 0
+}
--- a/content/projects/else.de.json
+++ b/content/projects/else.de.json
@ -6,5 +6,6 @@
    "links": {
        "website": "https://schuelerzeitung-elsensee.de"
    },
-    "image": "../images/ELSE.png"
+    "image": "../images/ELSE.png",
+    "featured": 2
 }
--- a/content/projects/else.en.json
+++ b/content/projects/else.en.json
@ -6,5 +6,6 @@
    "links": {
        "website": "https://schuelerzeitung-elsensee.de"
    },
-    "image": "../images/ELSE.png"
+    "image": "../images/ELSE.png",
+    "featured": 2
 }
--- a/content/projects/kevink-dev.de.json
+++ b/content/projects/kevink-dev.de.json
@ -8,5 +8,6 @@
        "website": "https://kevink.dev",
        "github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
    },
-    "image": "../images/KevinK.dev.png"
+    "image": "../images/KevinK.dev.png",
+    "featured": 0
 }
--- a/content/projects/kevink-dev.en.json
+++ b/content/projects/kevink-dev.en.json
@ -8,5 +8,6 @@
        "website": "https://kevink.dev",
        "github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
    },
-    "image": "../images/KevinK.dev.png"
+    "image": "../images/KevinK.dev.png",
+    "featured": 0
 }
--- a/content/projects/kreig.de.json
+++ b/content/projects/kreig.de.json
@ -7,5 +7,6 @@
    "links": {
        "website": "https://kreig.de"
    },
-    "image": "../images/KREIG.de.jpg"
+    "image": "../images/KREIG.de.jpg",
+    "featured": 1
 }
--- a/content/projects/kreig.en.json
+++ b/content/projects/kreig.en.json
@ -7,5 +7,6 @@
    "links": {
        "website": "https://kreig.de"
    },
-    "image": "../images/KREIG.de.jpg"
+    "image": "../images/KREIG.de.jpg",
+    "featured": 1
 }
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -25,7 +25,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
    result.data.allProjectsJson.nodes.forEach((node) => {
        console.log("Creating Page: ", `/${node.lang}/projects/${node.urlname}`);

-        createPage({
+        if(node.lang !== "ignoreme") createPage({
            path: `/${node.lang}/projects/${node.urlname}`,
            component: projectTemplate,
            context: {
--- a/locales/de/translation.json
+++ b/locales/de/translation.json
@ -29,5 +29,7 @@
    "donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}}</1> wenn du mit mir über irgendwas reden möchtest!",
    "donateThanks": "Danke für die Spende!",
    "donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
-    "donate": "Spenden"
+    "donate": "Spenden",
+    "featuredProjects": "Vorgestellte Projekte",
+    "seeMore": "Mehr erkunden"
 }
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@ -29,5 +29,7 @@
  "donate": "Donate",
  "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
  "donateThanks": "Thanks for donating!",
-  "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!"
+  "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
+  "featuredProjects": "Featured Projects",
+  "seeMore": "See more"
 }
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@ -8,8 +8,6 @@
 }

@mixin cardGeneric {
-    max-width: 300px;
-    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
@ -21,7 +19,7 @@

    &:hover, &:active, &:focus {
        transform: scale(1.05);
-        box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.4);
+        box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.2), -1px 11px 33px -10px rgba($accentColor, .75);
    }
 }

@ -32,6 +30,12 @@
    background: $accentColor;
    color: white;
    text-decoration: none;
+    box-shadow: 0 0 33px -10px rgba($accentColor, .5);
+    transition: box-shadow .25s;
+
+    &:hover, &:active, &:hover {
+        box-shadow: 0 0 33px -10px rgba($accentColor, .9);
+    }
 }

@mixin button {
@ -40,7 +44,7 @@
 }

@mixin homeBanner {
-    background: #10141e;
+    background: lighten($background, 1);
    cursor: pointer;
    display: block;
    text-decoration: none;
@ -62,7 +66,7 @@
            margin-left: auto;
            margin-right: auto;

-            > i {
+            > i, > i::before {
                line-height: 50px !important;
            }
        }
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -1,6 +1,7 @@
-$layoutWidth: 900px;
+$layoutWidth: 1200px;
 $accentColor: #e5502b;
-$background: #0d0d0d;
+$background: #070707;
 $textColor: white;
+$layoutPadding: 20px;

 $mainFont: 'Anonymous Pro', monospace;
--- a/src/layouts/default.js
+++ b/src/layouts/default.js
@ -12,7 +12,7 @@ class Layout extends React.Component {
        return (
            <>
                <SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
-                <Navigation isHome={this.props.module == "home"} module={this.props.module} />
+                <Navigation isHome={this.props.transparentTopbar} module={this.props.module} />
                <div id="content" role="main">
                    {this.props.children}
                </div>
@ -29,6 +29,7 @@ Layout.defaultProps = {
    module: `none`,
    meta: [],
    description: ``,
+    transparentTopbar: false
 }

 Layout.propTypes = {
@ -36,7 +37,8 @@ Layout.propTypes = {
    lang: PropTypes.string,
    meta: PropTypes.arrayOf(PropTypes.object),
    title: PropTypes.string.isRequired,
-    module: PropTypes.string.isRequired
+    module: PropTypes.string.isRequired,
+    transparentTopbar: PropTypes.bool
 }

 export default Layout;
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@ -20,7 +20,7 @@ body, html, #___gatsby, #gatsby-focus-wrapper {
 }

 footer {
-    background: #000710;
+    background: darken($background, 1);
    width: 100%;
    color: white;
    padding: 5px;
@ -45,19 +45,28 @@ footer {
    left: 0;
    display: flex;
    width: 100%;
-    background: #000710;
+    background: rgba($background, .95);
+    backdrop-filter: blur(5px);
    z-index: 999;
    transition: background .25s;

    .topBarInner {
        display: flex;
-        width: 90%;
-        max-width: 900px;
+        width: 100%;
+        max-width: $layoutWidth;
        margin: auto;
        
+        > :first-child {
+            padding-left: $layoutPadding;
+        }
+        
+        > :last-child {
+            padding-right: $layoutPadding;
+        }
+        
        a {
            display: block;
-            padding: 10px 15px;
+            padding: 10px $layoutPadding;
            color: white;
            /*text-decoration: underline dotted white;*/
            text-decoration: none;
@ -76,6 +85,7 @@ footer {

 .homeBar.homeBarTransparent {
    background: transparent;
+    backdrop-filter: blur(0);
 }

 .flexSpacer {
--- a/src/pages/friends.module.scss
+++ b/src/pages/friends.module.scss
@ -8,6 +8,8 @@
        @include cardGeneric;
        display: flex;
        flex-direction: column;
+        width: 300px;
+        flex-shrink: 0;

        .friendImage {
            width: 100%;
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -2,13 +2,14 @@ import * as React from "react"
 import Layout from "../layouts/default"

 import styles from "./index.module.scss"
+import projectStyles from "./projects.module.scss"

 import { Trans, Link } from "gatsby-plugin-react-i18next"
 import {graphql} from "gatsby";


 export const query = graphql`
-  query {
+  query GetMetaAndProjects($language: String) {
    site {
      siteMetadata {
        contactEmail
@ -18,6 +19,22 @@ export const query = graphql`
        contactGitHub
      }
    }
+    allProjectsJson(filter: {lang: {eq: $language}, featured: {ne: null}}, sort: {fields: featured, order: ASC}) {
+      nodes {
+        lang
+        urlname
+        name
+        image {
+          childImageSharp {
+            resize(width: 400, quality: 90) {
+              src
+            }
+          }
+        }
+        shortDescription
+        featured
+      }
+    }
  }
 `;

@ -26,7 +43,7 @@ class IndexPage extends React.Component {
    let meta = this.props.data.site.siteMetadata;

    return (
-      <Layout title="Kevin Kandlbinder" module="home">
+      <Layout title="Kevin Kandlbinder" module="home" transparentTopbar={true}>
        <section className={styles.heroSection}>
          <div className={styles.profile + " profile"}>
            <div data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" style={{backgroundImage: "url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)"}} className={styles.profileImage + " lazy"}></div>
@ -58,6 +75,31 @@ class IndexPage extends React.Component {
            <i className="fas fa-fw fa-chevron-right"></i>
          </div>
        </a>
+        <section className="featuredSection">
+          <article>
+            <h1><Trans>featuredProjects</Trans></h1>
+            <div className={projectStyles.projectList}>
+                {this.props.data.allProjectsJson.nodes.map((project) => {
+                    return (
+                        <div className={projectStyles.projectCard}>
+                            {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
+                            <div className={projectStyles.projectCardImage} style={{ backgroundImage: "url("+project.image.childImageSharp.resize.src+")" }}>
+                              <div className={projectStyles.projectCardMeta}>
+                                  <span className={projectStyles.projectCardTitle}>{project.name}</span>
+                                  <span className={projectStyles.projectCardTeaser}>{project.shortDescription}</span>
+                              </div>
+                            </div>
+                            
+                            <div className={projectStyles.projectCardCTAContainer}>
+                                <div className={projectStyles.projectCardCTA}><Link to={"/projects/"+project.urlname}><Trans>projectView</Trans></Link></div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            <Link to="/projects" className={styles.seeMoreButton}><Trans>seeMore</Trans> <i className="fas fa-fw fa-chevron-right"></i></Link>
+          </article>
+        </section>
        <Link className={styles.section + " " + styles.donationSection} to="/donate">
          <div>
            <span><Trans>donationCatchphrase</Trans></span>
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@ -4,10 +4,10 @@
 .heroSection {
    width: 100%;
    background: #000710;
-    min-height: 500px;
+    min-height: 600px;
    padding-top: 100px;
    overflow: hidden;
-    background: radial-gradient(ellipse at top left, #1f0ba659, transparent), radial-gradient(ellipse at bottom right, #4a086829, transparent);
+    background: linear-gradient(to bottom, transparent 80%, $background), radial-gradient(ellipse at top left, #1f0ba659, transparent), radial-gradient(ellipse at bottom right, #4a086829, transparent);

    @media(pointer: coarse), (pointer: none) {
        min-height: 700px;
@ -136,7 +136,6 @@

 .creditSection {
    @include homeBanner;
-    background: #060606;
    
    > div {
        padding: 15px !important;
@ -148,4 +147,12 @@
            line-height: 15px !important;
        }
    }
+}
+
+.seeMoreButton {
+    @include button;
+    width: fit-content;
+    margin: 0 auto;
+    margin-top: 40px;
+    padding: 10px 20px;
 }
--- a/src/pages/projects.js
+++ b/src/pages/projects.js
@ -14,7 +14,7 @@ query GetProjects($language: String) {
      name
      image {
        childImageSharp {
-          resize(width: 250) {
+          resize(width: 400, quality: 90) {
            src
          }
        }
@ -41,11 +41,13 @@ export default function ProjectsPage({data}) {
                            return (
                                <div className={styles.projectCard}>
                                    {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
-                                    <div className={styles.projectCardImage} style={{ backgroundImage: "url("+project.image.childImageSharp.resize.src+")" }}></div>
-                                    <div className={styles.projectCardMeta}>
-                                        <span className={styles.projectCardTitle}>{project.name}</span>
-                                        <span className={styles.projectCardTeaser}>{project.shortDescription}</span>
+                                    <div className={styles.projectCardImage} style={{ backgroundImage: "url("+project.image.childImageSharp.resize.src+")" }}>
+                                      <div className={styles.projectCardMeta}>
+                                          <span className={styles.projectCardTitle}>{project.name}</span>
+                                          <span className={styles.projectCardTeaser}>{project.shortDescription}</span>
+                                      </div>
                                    </div>
+                                    
                                    <div className={styles.projectCardCTAContainer}>
                                        <div className={styles.projectCardCTA}><Link to={"/projects/"+project.urlname}><Trans>projectView</Trans></Link></div>
                                    </div>
--- a/src/pages/projects.module.scss
+++ b/src/pages/projects.module.scss
@ -11,15 +11,8 @@
    display: flex;
    flex-direction: column;
    flex-grow: 1;
-    width: calc(100% / 4);
-
-    @media(max-width: 800px) {
-        width: calc((100% / 2) - 30px);
-    }
-
-    @media(max-width: 500px) {
-        width: 100%;
-    }
+    width: 250px;
+    flex-shrink: 0;

    .projectCardActivityIndicator {
        position: absolute;
@ -45,20 +38,27 @@
    }

    .projectCardImage {
-        display: block;
-        height: 150px;
+        width: 100%;
+        height: 250px;
        background-position: center;
        background-size: cover;
+        text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
    }

    .projectCardMeta {
        padding: 10px;
        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        height: 100%;
+        background: linear-gradient(to bottom, transparent, black);
    }

    .projectCardTitle {
        display: block;
-        font-size: 1.2em;
+        font-size: 1.5em;
+        margin-top: auto;
    }

    .projectCardCTA {
--- a/src/pages/social.module.scss
+++ b/src/pages/social.module.scss
@ -10,7 +10,7 @@
        flex-direction: column;

        .socialImage {
-            width: 100%;
+            width: 300px;
            height: 300px;
            background-position: center;
            background-size: cover;
--- a/src/templates/project.js
+++ b/src/templates/project.js
@ -32,9 +32,9 @@ export default function ProjectTemplate({data}) {
  let projectName = project.name;

    return (
-        <Layout description={project.shortDescription} title={t("project")+": "+projectName}>
+        <Layout description={project.shortDescription} title={t("project")+": "+projectName}  transparentTopbar={true}>
          <section className={styles.projectHeader}>
-            <div>
+            <div style={{paddingTop: 0}}>
              <div className={styles.headerBackground} style={{backgroundImage: "url("+project.image.publicURL+")"}}></div> 
              <header>
                <div className={styles.headerInner}>
--- a/src/templates/project.module.scss
+++ b/src/templates/project.module.scss
@ -9,7 +9,7 @@
        position: absolute;
        left: 0;
        width: 100%;
-        height: 200px;
+        height: 300px;
        background-position: center;
        background-size: cover;
    }
@ -18,14 +18,15 @@
        position: absolute;
        left: 0;
        width: 100%;
-        height: 200px;
-        background: rgba(0, 0, 0, .5);
+        height: 300px;
+        background:linear-gradient(to bottom, rgba($background, .95), rgba($background, .5) 20%);
        
        .headerInner {
            max-width: $layoutWidth;
            width: 100%;
            margin: 0 auto;
-            padding: 65px 20px 0;
+            padding: 225px 20px 0;
+            text-shadow: 0 0 20px black, 0 0 20px black;

            * {
                margin: 0;
@ -41,7 +42,7 @@

    .headerPlaceholder {
        width: 100%;
-        height: 200px;
+        height: 270px;
    }
 }