Accessibility and SEO best practices changes

src/components/Card.js

@@ -11,7 +11,7 @@ const Card = ({ ...props }) => (
     <div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}>
       {props.image && <img className="w-full" src={props.image.src} />}
       {props.teamMember && (
-        <img className="w-full rounded" src={props.teamMember} />
+        <img className="w-full rounded" alt={props.imgAlt ? props.imgAlt : 'saburly image'} src={props.teamMember} />
       )}
       <div
         className={`px-6 py-4 ${

src/components/Footer.js

@@ -45,7 +45,11 @@ const Footer = () => (
         />
         <div className="flex justify-between social-icons py-2">
           <div>
-            <a href="https://facebook.com/saburly" target="_blank">
+            <a
+              href="https://facebook.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Facebook}
                 alt="Facebook Social Media"
@@ -54,7 +58,11 @@ const Footer = () => (
             </a>
           </div>
           <div>
-            <a href="https://instagram.com/saburly" target="_blank">
+            <a
+              href="https://instagram.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Instagram}
                 alt="Instagram Social Media"
@@ -63,7 +71,11 @@ const Footer = () => (
             </a>
           </div>
           <div>
-            <a href="https://twitter.com/saburly" target="_blank">
+            <a
+              href="https://twitter.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Twitter}
                 alt="Twitter Social Media"
@@ -72,7 +84,11 @@ const Footer = () => (
             </a>
           </div>
           <div>
-            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
+            <a
+              href="https://www.linkedin.com/company/saburly/"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={LinkedIn}
                 alt="LinkedIn Social Media"

src/components/Header.css

@@ -21,6 +21,14 @@
   width: 25px;
 }
 
+.side-toggle {
+  cursor: pointer;
+}
+
+.side-toggle:hover {
+  opacity: 0.7;
+}
+
 .menu_bar-mid {
   width: 20px;
 }

src/components/Header.js

@@ -20,18 +20,18 @@ class Header extends Component {
               <div className="max-w-xs mr-8">
                 <img
                   src={LogoSaburlyWhite}
-                  className="saburly-logo"
+                  className="saburly-logo saburly-transition"
                   alt="Saburly Logo"
                 />
               </div>
             </Link>
 
-            <div className="side-toggle">
+            <div className="side-toggle saburly-transition">
-              <button className="menu_icon visible lg:invisible">
+              <div className="menu_icon visible lg:invisible">
                 <span className="menu_bar-top" />
                 <span className="menu_bar-mid" />
                 <span className="menu_bar-bot" />
-              </button>
+              </div>
             </div>
 
             <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">

src/components/SideMenu.js

@@ -86,7 +86,11 @@ class SideMenu extends Component {
         </ul>
         <div className="absolute pin-b hidden social-icons p-8">
           <div>
-            <a href="https://facebook.com/saburly" target="_blank">
+            <a
+              href="https://facebook.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Facebook}
                 alt="Facebook Social Media"
@@ -95,7 +99,11 @@ class SideMenu extends Component {
             </a>
           </div>
           <div>
-            <a href="https://instagram.com/saburly" target="_blank">
+            <a
+              href="https://instagram.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Instagram}
                 alt="Instagram Social Media"
@@ -104,7 +112,11 @@ class SideMenu extends Component {
             </a>
           </div>
           <div>
-            <a href="https://twitter.com/saburly" target="_blank">
+            <a
+              href="https://twitter.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Twitter}
                 alt="Twitter Social Media"
@@ -113,7 +125,11 @@ class SideMenu extends Component {
             </a>
           </div>
           <div>
-            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
+            <a
+              href="https://www.linkedin.com/company/saburly/"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={LinkedIn}
                 alt="LinkedIn Social Media"

src/layouts/index.js

@@ -15,7 +15,9 @@ const Layout = ({ children, data }) => (
   <div className="font-sans mx-auto">
     <Helmet
       link={[{ rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` }]}
-    />
+    >
+      <html lang="en" />
+    </Helmet>
     <main className="side-panel panel">
       <Header />
       {children()}

src/pages/index.js

@@ -176,6 +176,7 @@ const IndexPage = ({ ...props }) => (
                   url={`blog/${node.slug}`}
                   title={node.title}
                   date={node.date}
+                  imgAlt={node.title}
                   excerpt={node.excerpt}
                   image={
                     node.featured_media

src/styles/general.css

@@ -143,6 +143,10 @@ body {
   max-height: 22px;
 }
 
+.saburly-logo:hover {
+  opacity: 0.7;
+}
+
 @media (min-width: 992px) {
   .saburly-logo {
     max-height: 30px;

src/templates/blog.js

@@ -45,6 +45,7 @@ class Blog extends Component {
                 <Card
                   title={node.title}
                   date={node.date}
+                  imgAlt={node.title}
                   excerpt={node.excerpt}
                   image={
                     node.featured_media

src/templates/post-default.js

@@ -30,7 +30,9 @@ class PostDefault extends Component {
           link={[
             { rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` },
           ]}
-        />
+        >
+          <html lang="en" />
+        </Helmet>
         <main className="container mx-auto p-4 max-w-lg sm:p-10">
           <img
             className="w-full rounded"