Dependency upgrades and content updates

apps/fretonator-web/src/app/common/footer/footer.component.html

@@ -1,6 +1,5 @@
 <footer class="footer">
   <div class="footer__inner">
-
     <div class="footer__leftColumn">
       <h5 class="footer__sectionTitle">
         Fretonator is open source
@@ -10,7 +9,7 @@ <h5 class="footer__sectionTitle">
       </p>
       <ul class="footer__list">
         <li class="footer__listItem">
-            Richard Naylor - ideas, direction and usability testing
+          Richard Naylor - ideas, direction and usability testing
         </li>
         <li class="footer__listItem">
           <a
@@ -29,7 +28,7 @@ <h5 class="footer__sectionTitle">
             rel="nofollow noopener noreferrer"
             target="_blank"
             class="footer__listItemLink"
-          >Jim Drury</a
+            >Jim Drury</a
           >
           - all things Angular
         </li>
@@ -39,7 +38,7 @@ <h5 class="footer__sectionTitle">
             rel="nofollow noopener noreferrer"
             target="_blank"
             class="footer__listItemLink"
-          >Elliot Brooks</a
+            >Elliot Brooks</a
           >
           - audio playback
         </li>
@@ -49,38 +48,51 @@ <h5 class="footer__sectionTitle">
         href="https://github.com/whitep4nth3r/fretonator"
         rel="nofollow noopener noreferrer"
         target="_blank"
-      >View on GitHub</a>
+        >View on GitHub</a
+      >
     </div>
 
     <div class="footer__rightColumn">
       <h6 class="footer__sectionTitle">Who made this?</h6>
       <p class="footer__copy footer__copy--right">
         Hey there, I'm Salma.
       </p>
-      <p class="footer__copy footer__copy--right">I'm a musician and software engineer in Manchester, UK. My goal with
-        the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
-        easy and enjoyable to use.</p>
-      <a [routerLink]="['/', 'contact']"
-         [state]="{scrollToTop: true}"
-         class="footer__copy footer__copy--right footer__copy--link">Submit your feedback</a>
-      <p class="footer__copy footer__copy--right">The Fretonator is free and always will be!</p>
-      <a href="https://www.buymeacoffee.com/whitep4nth3r"
-         rel="nofollow noopener noreferrer"
-         target="_blank"
-         class="footer__smallButton">
-          <span class="footer__support__svg">
-            <app-coffee-svg></app-coffee-svg>
-          </span>
+      <p class="footer__copy footer__copy--right">
+        I'm a musician in Manchester, UK, and I currently work as a Developer
+        Evangelist for Contentful. My goal with the Fretonator is to crowdsource
+        feedback and ideas to create the ultimate guitar learning hub that's
+        simple, easy and enjoyable to use.
+      </p>
+      <a
+        [routerLink]="['/', 'contact']"
+        [state]="{ scrollToTop: true }"
+        class="footer__copy footer__copy--right footer__copy--link"
+        >Submit your feedback</a
+      >
+      <p class="footer__copy footer__copy--right">
+        The Fretonator is free and always will be!
+      </p>
+      <a
+        href="https://www.buymeacoffee.com/whitep4nth3r"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        class="footer__smallButton"
+      >
+        <span class="footer__support__svg">
+          <app-coffee-svg></app-coffee-svg>
+        </span>
         Buy me a coffee
       </a>
 
-      <a href="https://www.twitch.tv/whitep4nth3r"
-         rel="nofollow noopener noreferrer"
-         target="_blank"
-         class="footer__twitchButton">Watch live on Twitch!</a>
+      <a
+        href="https://whitep4nth3r.com"
+        rel="nofollow noopener"
+        target="_blank"
+        class="footer__bigButton footer__bigButton--website"
+        >Visit my website</a
+      >
     </div>
-
   </div>
 
-  <p class="footer__copyright">&copy; {{ date | date: 'yyyy' }} Fretonator</p>
+  <p class="footer__copyright">&copy; {{ date | date: "yyyy" }} Fretonator</p>
 </footer>

apps/fretonator-web/src/app/common/footer/footer.component.scss

@@ -1,7 +1,7 @@
-@import '../../../styles/vars';
-@import '../../../styles/functions';
-@import '../../../styles/mixins';
-@import '../../../styles/typography';
+@import "../../../styles/vars";
+@import "../../../styles/functions";
+@import "../../../styles/mixins";
+@import "../../../styles/typography";
 
 .footer {
   background-color: var(--footer-background);
@@ -147,6 +147,13 @@
   }
 }
 
+.footer__bigButton--website {
+  margin-top: 3rem;
+  @media screen and (min-width: $screen-med) {
+    align-self: flex-end;
+  }
+}
+
 .footer__smallButton {
   @include chip_button_base();
   display: flex;

apps/fretonator-web/src/app/pages/about/about-index/about-index.component.html

@@ -1,30 +1,47 @@
 <main class="about__container">
-  <p class="about__title">Hi there! <span role="img" aria-label="waving emoji">👋🏼</span></p>
-  <h1 class="about__subtitle">Thanks for checking out the Fretonator!</h1>
-  <p class="about__copy">I’m a qualified music teacher that (somehow) ended up working as a lead software engineer (it’s
-    a long story), and I built this for my husband <span role="img" aria-label="red heart emoji">❤️</span>.
+  <p class="about__title">
+    Hi there! <span role="img" aria-label="waving emoji">👋🏼</span>
   </p>
-  <p class="about__copy">He’s a phenomenal guitarist, and over the past few years has worked on learning modes and scale
-    theory for the guitar (with a little help from me). Obviously, the internet is great for this kind of stuff, but
-    what he felt the world wide web was lacking was an interactive and informative tool he could use in his practice
-    sessions that had <span class="italic">everything he needed on one single page</span>.
+  <h1 class="about__subtitle">Thanks for checking out the Fretonator!</h1>
+  <p class="about__copy">
+    I’m a qualified music teacher that (somehow) ended up working as a lead
+    software engineer (it’s a long story) and now I work in Developer Relations.
+    I built this for my husband
+    <span role="img" aria-label="red heart emoji">❤️</span>.
   </p>
-  <p class="about__subtitle">Enter the Fretonator!
+  <p class="about__copy">
+    He’s a phenomenal guitarist, and over the past few years has worked on
+    learning modes and scale theory for the guitar (with a little help from me).
+    Obviously, the internet is great for this kind of stuff, but what he felt
+    the world wide web was lacking was an interactive and informative tool he
+    could use in his practice sessions that had
+    <span class="italic">everything he needed on one single page</span>.
   </p>
-  <p class="about__copy">The Fretonator is your new interactive tool for learning common modes on the guitar,
-    understanding the chord theory behind the modes, and most importantly - <span class="italic">having a jam</span>.
+  <p class="about__subtitle">Enter the Fretonator!</p>
+  <p class="about__copy">
+    The Fretonator is your new interactive tool for learning common modes on the
+    guitar, understanding the chord theory behind the modes, and most
+    importantly - <span class="italic">having a jam</span>.
   </p>
-  <p class="about__copy">The code for the Fretonator is available to <a
-    href="https://github.com/whitep4nth3r/fretonator"
-    rel="nofollow noopener noreferrer"
-    target="_blank" class="link">view on GitHub</a> and I am gratefully welcoming
-    feedback from musicians, pull requests from software engineers, and anything else you are willing to contribute.
+  <p class="about__copy">
+    The code for the Fretonator is available to
+    <a
+      href="https://github.com/whitep4nth3r/fretonator"
+      rel="nofollow noopener noreferrer"
+      target="_blank"
+      class="link"
+      >view on GitHub</a
+    >
+    and I am gratefully welcoming feedback from musicians, pull requests from
+    software engineers, and anything else you are willing to contribute.
   </p>
-  <p class="about__copy">Thank you and happy jamming! <span role="img" aria-label="guitar emoji">🎸</span>
+  <p class="about__copy">
+    Thank you and happy jamming!
+    <span role="img" aria-label="guitar emoji">🎸</span>
   </p>
   <p class="about__signOff">Salma</p>
-  <p class="about__copy">The Fretonator is free and always will be! <span role="img"
-                                                                               aria-label="raised hands emoji">🙌🏼</span>
+  <p class="about__copy">
+    The Fretonator is free and always will be!
+    <span role="img" aria-label="raised hands emoji">🙌🏼</span>
   </p>
 </main>
-