From e85292ef334901e76b478a04c8c402eec96b1949 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Tue, 14 Aug 2018 21:26:59 +1000
Subject: [PATCH] Added Props support to images, improved logo

---
 public/image/Image.jsx                        |  1 +
 public/language/en-AU.jsx                     | 18 +++++++++++++-
 public/nav/navbar/Navbar.jsx                  |  6 ++++-
 .../page/home/sections/PlatformsSection.jsx   | 24 +++++++++++++++----
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/public/image/Image.jsx b/public/image/Image.jsx
index a235a24..c2f0444 100644
--- a/public/image/Image.jsx
+++ b/public/image/Image.jsx
@@ -129,6 +129,7 @@ export default class Image extends React.Component {
       <picture>
         { sourceElements }
         <img
+          { ...sourceProps }
           onLoad={ this.onLoad.bind(this) }
           onError={ this.onError.bind(this) }
           src={ defaultSrc }
diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx
index 9e4be4e..471a8bf 100644
--- a/public/language/en-AU.jsx
+++ b/public/language/en-AU.jsx
@@ -54,7 +54,23 @@ module.exports = {
       },
       "platforms": {
         "heading": "Platforms I work with",
-        "footer": "... And many more!"
+        "footer": "... And many more!",
+        "shopify": "Shopify",
+        "react": "React",
+        "monogame": "MonoGame",
+        "nodejs": "NodeJS",
+        "csharp": "C#",
+        "php": "PHP",
+        "java": "Java",
+        "neto": "neto",
+        "pgsql": "PostgreSQL",
+        "mysql": "MySQL",
+        "heroku": "Heroku",
+        "opengl": "OpenGL",
+        "discord": "Discord",
+        "twitch": "Twitch",
+        "twitter": "Twitter",
+        "googlecloud": "Google Cloud Platform"
       },
       "work": {
         "heading": "Some of my work",
diff --git a/public/nav/navbar/Navbar.jsx b/public/nav/navbar/Navbar.jsx
index 4f0b22b..52c65fa 100644
--- a/public/nav/navbar/Navbar.jsx
+++ b/public/nav/navbar/Navbar.jsx
@@ -28,6 +28,7 @@ import { NavLink } from 'react-router-dom'
 import PageBoundary from './../../page/PageBoundary';
 import Language from './../../language/Language';
 import HamburgerMenu from './../menu/HamburgerMenu';
+import Image from './../../image/Image';
 
 const NavbarLink = function(props) {
   return (
@@ -51,10 +52,13 @@ class Navbar extends React.Component {
 
             {/* Logo */}
             <NavLink to="/" className="c-navbar__logo-container" activeClassName="is-active">
-              <img
+              <Image
                 src={ require('./../../images/logo.svg') }
                 className="c-navbar__logo"
                 alt={ Language.get("site.name") }
+                title={ Language.get("site.name") }
+                width="780"
+                height="200"
               />
             </NavLink>
 
diff --git a/public/page/home/sections/PlatformsSection.jsx b/public/page/home/sections/PlatformsSection.jsx
index 8f8c0ec..db3db7a 100644
--- a/public/page/home/sections/PlatformsSection.jsx
+++ b/public/page/home/sections/PlatformsSection.jsx
@@ -38,7 +38,7 @@ const Platform = (props) => {
 
   if(props.to) {
     children = (
-      <a href={props.to} target="_blank" className="p-home-page__brands-link">
+      <a href={props.to} target="_blank" className="p-home-page__brands-link" title={props.title}>
         {image}
       </a>
     );
@@ -77,12 +77,14 @@ export default (props) => {
             src={require('./../../../images/branding/shopify/shopify_glyph.svg')}
             from="left"
             to="//www.shopify.com"
+            title={ Language.get("pages.home.platforms.shopify") }
           />
           {/* React */}
           <Platform
             src={require('./../../../images/branding/react/react-logo.svg')}
             from="top"
             to="//reactjs.org"
+            title={ Language.get("pages.home.platforms.react") }
           />
 
           {/* MonoGame */}
@@ -90,6 +92,7 @@ export default (props) => {
             src={require('./../../../images/branding/monogame/monogame-logo.svg')}
             from="bottom"
             to="http://www.monogame.net"
+            title={ Language.get("pages.home.platforms.monogame") }
           />
 
           {/* PGSQL */}
@@ -97,6 +100,7 @@ export default (props) => {
             src={require('./../../../images/branding/pgsql/pgsql-logo.svg')}
             from="right"
             to="//www.postgresql.org"
+            title={ Language.get("pages.home.platforms.pgsql") }
           />
 
           {/* NodeJS */}
@@ -104,6 +108,7 @@ export default (props) => {
             src={require('./../../../images/branding/nodejs/nodejs-logo.svg')}
             from="top"
             to="//nodejs.org"
+            title={ Language.get("pages.home.platforms.nodejs") }
           />
 
           {/* C# */}
@@ -111,6 +116,7 @@ export default (props) => {
             src={require('./../../../images/branding/csharp/csharp-logo.svg')}
             from="top"
             to="//docs.microsoft.com/en-us/dotnet/csharp/"
+            title={ Language.get("pages.home.platforms.csharp") }
           />
 
           {/* PHP */}
@@ -118,6 +124,7 @@ export default (props) => {
             src={require('./../../../images/branding/php/php-logo.svg')}
             from="top"
             to="//php.net"
+            title={ Language.get("pages.home.platforms.php") }
           />
 
           {/* Java */}
@@ -125,13 +132,15 @@ export default (props) => {
             src={require('./../../../images/branding/java/java-logo.svg')}
             from="top"
             to="//java.com"
+            title={ Language.get("pages.home.platforms.java") }
           />
 
           {/* neto */}
           <Platform
             src={require('./../../../images/branding/neto/neto-logo.svg')}
             from="bottom"
-            to="http://www.monogame.net"
+            to="//www.neto.com.au"
+            title={ Language.get("pages.home.platforms.neto") }
           />
 
           {/* MySQL */}
@@ -139,6 +148,7 @@ export default (props) => {
             src={require('./../../../images/branding/mysql/mysql-logo.svg')}
             from="bottom"
             to="//www.mysql.com"
+            title={ Language.get("pages.home.platforms.mysql") }
           />
 
           {/* Heroku */}
@@ -146,6 +156,7 @@ export default (props) => {
             src={require('./../../../images/branding/heroku/heroku-logo.svg')}
             from="bottom"
             to="//heroku.com"
+            title={ Language.get("pages.home.platforms.heroku") }
           />
 
           {/* OpenGL */}
@@ -153,6 +164,7 @@ export default (props) => {
             src={require('./../../../images/branding/opengl/opengl-logo.svg')}
             from="bottom"
             to="//www.opengl.org"
+            title={ Language.get("pages.home.platforms.opengl") }
           />
 
           {/* Discord */}
@@ -160,6 +172,7 @@ export default (props) => {
             src={ require('./../../../images/branding/discord/discord-logo.svg') }
             from="right"
             to="//discordapp.com"
+            title={ Language.get("pages.home.platforms.discord") }
           />
 
           {/* Twitch */}
@@ -167,6 +180,7 @@ export default (props) => {
             src={ require('./../../../images/branding/twitch/twitch-logo.svg') }
             from="right"
             to="//twitch.tv"
+            title={ Language.get("pages.home.platforms.twitch") }
           />
 
           {/* Twitter */}
@@ -174,15 +188,15 @@ export default (props) => {
             src={require('./../../../images/branding/twitter/twitter-logo.svg')}
             from="left"
             to="//twitter.com"
+            title={ Language.get("pages.home.platforms.twitter") }
           />
 
           {/* Google Cloud */}
           <Platform
-            src={
-              require('./../../../images/branding/google-cloud/google-cloud-logo.svg')
-            }
+            src={ require('./../../../images/branding/google-cloud/google-cloud-logo.svg') }
             from="left"
             to="//console.cloud.google.com"
+            title={ Language.get("pages.home.platforms.googlecloud") }
           />
         </div>