Explore Design changes

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
+}

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
 }

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
 }

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
 }

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
 }

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
 }

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
 }

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: {

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"
 }

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"
 }

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;
             }
         }

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;

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;

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%;
+        width: 100%;
-        max-width: 900px;
+        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 {

src/pages/friends.module.scss

@@ -8,6 +8,8 @@
         @include cardGeneric;
         display: flex;
         flex-direction: column;
+        width: 300px;
+        flex-shrink: 0;
 
         .friendImage {
             width: 100%;

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>

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;
@@ -149,3 +148,11 @@
         }
     }
 }
+
+.seeMoreButton {
+    @include button;
+    width: fit-content;
+    margin: 0 auto;
+    margin-top: 40px;
+    padding: 10px 20px;
+}

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.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>

src/pages/projects.module.scss

@@ -11,15 +11,8 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    width: calc(100% / 4);
+    width: 250px;
-
+    flex-shrink: 0;
-    @media(max-width: 800px) {
-        width: calc((100% / 2) - 30px);
-    }
-
-    @media(max-width: 500px) {
-        width: 100%;
-    }
 
     .projectCardActivityIndicator {
         position: absolute;
@@ -45,20 +38,27 @@
     }
 
     .projectCardImage {
-        display: block;
+        width: 100%;
-        height: 150px;
+        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 {

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;

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}>

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;
+        height: 300px;
-        background: rgba(0, 0, 0, .5);
+        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;
     }
 }