Setting availability

Author: lassegit

src/assets/scss/_alert.scss

@@ -0,0 +1,7 @@
+.alert {
+  padding: 10px;
+  color: #721c24;
+  background-color: #f8d7da;
+  border-bottom: 1px solid #f5c6cb;
+  text-align: center;
+}

src/assets/scss/style.scss

@@ -1,5 +1,6 @@
 @import '../../../node_modules/node-normalize-scss/_normalize.scss';
 @import 'vars';
+@import 'alert';
 @import 'header';
 @import 'frontpage';
 @import 'post';

src/layouts/index.js

@@ -7,25 +7,30 @@ import { favicon } from '../assets/img';
 import '../assets/scss/style.scss';
 
 const Layout = ({ children, location }) => (
-  <div className="wrapper">
-    <Helmet
-      link={[
-        {
-          name: 'alternate',
-          type: 'application/rss+xml',
-          title: 'rss',
-          href: '/rss.xml',
-        },
-        {
-          rel: 'icon',
-          type: 'image/png',
-          href: favicon,
-        },
-      ]}
-    />
-    <Header location={location} />
-    <div>{children()}</div>
-    <Footer />
+  <div>
+    <div className="alert">
+      NOT AVAILABLE before: <b>4th of November &apos;19</b>.
+    </div>
+    <div className="wrapper">
+      <Helmet
+        link={[
+          {
+            name: 'alternate',
+            type: 'application/rss+xml',
+            title: 'rss',
+            href: '/rss.xml',
+          },
+          {
+            rel: 'icon',
+            type: 'image/png',
+            href: favicon,
+          },
+        ]}
+      />
+      <Header location={location} />
+      <div>{children()}</div>
+      <Footer />
+    </div>
   </div>
 );
 

src/pages/index.js

@@ -17,7 +17,16 @@ const IndexPage = ({ data }) => (
         <h1 className="title">
           <span className="title-passive">I am</span> Lasse
         </h1>
-        <h2 className="sub">Fullstack developer in Berlin seeking interesting projects</h2>
+        <h2 className="sub">
+          Experienced Fullstack developer seeking challenging projects{' '}
+          <small>
+            (
+            <span role="img" aria-label="Location pin">
+              📍
+            </span>{' '}
+            Berlin)
+          </small>
+        </h2>
         <ul className="links">
           <li>
             <img alt="" src={phone} />
@@ -55,9 +64,11 @@ const IndexPage = ({ data }) => (
           maintainable). I welcome challenges and the possibility to get to know new technologies and people.
         </p>
         <p>
-          I speak <img alt="" src={denmark} className="flag" /> Danish, <img alt="" src={germany} className="flag" /> German
-          and <img alt="" src={usa} className="flag" /> English.
+          I speak <img alt="Danish flag" src={denmark} className="flag" /> Danish,{' '}
+          <img alt="German flag" src={germany} className="flag" /> German and{' '}
+          <img alt="English flag" src={usa} className="flag" /> English.
         </p>
+        <p>I prefer to work on site with the clients and team.</p>
       </div>
       <div>
         <h2>Technologies</h2>