Merge pull request #694 from naher94/development

Resources Added + Copy to Clipboard

_config.yml

@@ -13,7 +13,7 @@ description: > # this means to ignore newlines until "baseurl:"
 
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://rehanbutt.com" # the base hostname & protocol for your site
-version: 7.20.1
+version: 7.21.0
 version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava]
 
 # Build settings

_includes/header.html

@@ -54,9 +54,8 @@
 {% include banner.html %}
 
   <nav class="nav-container">
-    <div class="site-nav grid-x grid-y grid-container">
-
-      <div class="menu-container">
+    <div class="site-nav grid-x grid-container">
+      <div class="menu-container grid-x cell align-justify">
         <div class="burger-container">
           <input class="burger-btn" type="checkbox" id="burger-btn"/>
           <label class="burger-icon" for="burger-btn">

_resources/footer.markdown

@@ -0,0 +1,8 @@
+---
+title: 'Footer'
+link: https://www.footer.design
+description: We saw a need for footer-specific inspiration in the web design space and decided to build a site to collect and curate inspiration for our fellow designers.
+tags: [inspiration]
+content-type: reference
+date: 2024-03-09
+---

_resources/guidebook.markdown

@@ -0,0 +1,8 @@
+---
+title: 'Guidebook'
+link: https://guidebookgallery.org
+description: A website dedicated to preserving and showcasing Graphical User Interfaces, as well as various materials related to them.
+tags: [inspiration]
+content-type: reference
+date: 2024-03-09
+---

_resources/landbook.markdown

@@ -0,0 +1,8 @@
+---
+title: 'Landbook'
+link: https://land-book.com
+description: We collect awesome websites to help creatives find inspiration & motivation to do rad stuff.
+tags: [inspiration]
+content-type: reference
+date: 2024-03-09
+---

_resources/onym.markdown

@@ -0,0 +1,8 @@
+---
+title: 'Onym Resources'
+link: https://guide.onym.co
+description: This guide is an on-going open source attempt to organize the best tools and resources for naming things.
+tags: [branding]
+content-type: reference
+date: 2024-03-09
+---

_resources/raci.markdown

@@ -0,0 +1,8 @@
+---
+title: 'Setting Roles & Responsibilities in Product Development: The RACI Template'
+link: https://www.nngroup.com/articles/ux-roles-responsibilities/
+description: Use a flexible responsibility-assignment matrix to clarify roles and responsibilities, anticipate team collaboration points, and maintain productivity in product development.
+tags: [product development, leadership]
+content-type: reading
+date: 2024-03-09
+---

_sass/about.scss

@@ -130,7 +130,9 @@
         cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='50' height='60' viewport='0 0 100 100' style='fill:black;font-size:30px;'><text y='50%'>🪚</text></svg>") 16 0, auto;
       }
       .email{
+        position: relative;
         cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='50' height='60' viewport='0 0 100 100' style='fill:black;font-size:30px;'><text y='50%'>✉️</text></svg>") 16 0, auto;
+        @include link-expand();
       }
     }
     .profile-2{

about.md

@@ -36,7 +36,8 @@ footer-main: true
               <span>work in the animation industry</span>
             </li>
           </ul>
-          <p>Curious what else I'm up to? Shoot me an <a href="mailto:[email protected]" class="email">email.</a></p>
+          <p>Curious what else I'm up to? Shoot me an <span onclick="copyToClipboard('[email protected]',this)" class="email">email.</span>
+          </p>
         </section>
         <div class="cell grid-x small-5 large-12 profile-2 grid-padding-x grid-padding-y">
           <div class="cell large-6">

css/rehan.scss

@@ -320,7 +320,16 @@ iframe { //this should probs be aspect ratio // TODO Gissue #385
   }
   .speaking-socials{
     margin-bottom: 1em;
-    a{
+    .email-container{
+      display: inline;
+      position: relative;
+      cursor: pointer;
+      .copied{
+        font-size: 0.5em;
+        right: 0;
+      }
+    }
+    a, .email-container{
       padding-right: 0.8em;
       font-size: 2em;
       color: inherit;

index.html

@@ -98,10 +98,9 @@ <h2>Speaking</h2>
 
       <p class="section-description section-description-special">Looking for a speaker for your next event? Let's connect!</p>
       <div class="speaking-socials">
-        <a href="mailto:[email protected]">
-          <i class="fas fa-envelope fa-xs" title="Email"></i>
-          <span class="visually-hidden">Opens a new window</span>
-        </a>
+        <div class="email-container" onclick="copyToClipboard('[email protected]',this)">
+          <i class='fas fa-envelope fa-xs' title='Email'></i>
+        </div>
 
         <a target="_blank" rel="noopener" href="https://www.linkedin.com/in/rehan-butt/">
           <i class="fab fa-linkedin-in fa-xs" title="Linkedin"></i>

js/app.js

@@ -228,7 +228,6 @@ getHappyDayString();
 ///////////////////////////////////////////// Start of Copy to Clipboard
 function copyToClipboard(link,clickedItem) {
 	if (navigator && navigator.clipboard && navigator.clipboard.writeText){
-		console.log("clickedItem", clickedItem);
 		var copyBadge = document.createElement("span");
 		copyBadge.classList.add("copied");
 		copyBadge.setAttribute("id", "copy-confirmation");