removes noindex, nofollow meta

jmwii1981 · Dec 13, 2024 · 16cd469 · 16cd469
1 parent 38f45a5
commit 16cd469
Show file tree

Hide file tree

Showing 15 changed files with 137 additions and 145 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,34 +1,13 @@
 <header class="header">
-    <div class="half-oval">
-    </div>
     <a class="a img logo-container large" href="{{ site.baseurl }}/" aria-label="Jan Michael Wallace II personal brand logo">
-        <!-- Outer glow on outer frame -->
-        <div class="logo large animated-glow"></div>
-        <!-- Inner glow on outer frame -->
-        <div class="logo large animated-border"></div>
-        <!-- SVG logo outer frame and interior columns -->
         <svg class="logo large" role="img" aria-labelledby="logo-title" width="158" height="159" viewBox="0 0 158 159" fill="none" xmlns="http://www.w3.org/2000/svg">
             <title id="logo-title">Jan Michael dot I O</title>
-            <!-- Outer frame -->
-            <rect width="158" height="158.552" rx="16" fill="#121316" />
-            <!-- Interior columns with hoverable glow effect -->
-            <path class="anim-col-1" d="M33 92L33 125" stroke="#fefefe" stroke-width="20.57" stroke-linecap="round" />
-            <path class="anim-col-2" d="M64 33L64 125" stroke="#fefefe" stroke-width="20.57" stroke-linecap="round" />
-            <path class="anim-col-3" d="M95 33L95 125" stroke="#fefefe" stroke-width="20.57" stroke-linecap="round" />
-            <path class="anim-col-4" d="M126 33L126 125" stroke="#fefefe" stroke-width="20.57" stroke-linecap="round" />
+            <!-- Interior columns -->
+            <path class="anim-col-1" d="M33 92L33 125" stroke="#0a2540" stroke-width="20.57" stroke-linecap="round" />
+            <path class="anim-col-2" d="M64 33L64 125" stroke="#0a2540" stroke-width="20.57" stroke-linecap="round" />
+            <path class="anim-col-3" d="M95 33L95 125" stroke="#0a2540" stroke-width="20.57" stroke-linecap="round" />
+            <path class="anim-col-4" d="M126 33L126 125" stroke="#0a2540" stroke-width="20.57" stroke-linecap="round" />
         </svg> 
     </a>
-    <div class="meta">
-        <h1 class="h1">Jan Michael Wallace&nbsp;II</h1>
-        <h2 class="h2">Pioneering Inclusive, <span style="white-space: nowrap;">Future-Forward</span> Technology</h2>
-        <div class="contact-info">
-            <!-- <meta name="robots" content="noindex, nofollow"> -->
-            <p class="p">
-                United States
-                <span class="decorative-bullet">•</span>
-                <a class="a" href="mailto:hello&#64;janmichael&#46;io">Email&nbsp;me</a>&nbsp;<span class="decorative-bullet">•</span>&nbsp;<a class="a" href="tel:+1&#x28;502&#x29;&#x20;7974993">Call&nbsp;me</a>
-            </p>
-        </div>
-    </div>
     {% include nav.html %}
 </header>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -2,27 +2,22 @@
     <button class="nav-button left"></button>
     <ul class="nav {% if page.url == '/' %}active-work{% endif %}{% if page.url == '/experience/' %}active-experience{% endif %}{% if page.url == '/endorsements/' %}active-endorsements{% endif %}{% if page.url == '/perspectives/' %}active-perspectives{% endif %}{% if page.url == '/about/' %}active-about{% endif %}">
         <li id="work-tab" class="tab-container">
-            <svg aria-hidden="true" class="padlock" width="11" height="11" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M192.329 138.8V208.371H230.5V122.149C230.5 110.473 220.629 100.593 208.964 100.593H198.196V68.2596C198.196 30.9863 167.239 0 130 0C92.3125 0 61.8036 30.9863 61.8036 68.2596V100.593H51.0357C38.9219 100.593 29.5 110.473 29.5 122.149V208.371H67.6714V138.8H192.329ZM162.304 100.593H97.6964V68.2596C97.6964 66.2607 97.8834 64.2969 98.2415 62.3863C101.02 47.5559 114.102 35.9261 130 35.9261C145.501 35.9261 158.889 47.5559 161.743 62.3863C162.111 64.2969 162.304 66.2607 162.304 68.2596V100.593Z" fill="#425466"/>
-                <path d="M67.6714 208.371H29.5V238.444C29.5 250.569 38.9219 260 51.0357 260H208.964C220.629 260 230.5 250.569 230.5 238.444V208.371H192.329V221.793H67.6714V208.371Z" fill="#425466"/>
-                <path d="M156.738 178.78C156.738 192.847 145.345 204.251 131.291 204.251C117.236 204.251 105.843 192.847 105.843 178.78C105.843 164.713 117.236 153.309 131.291 153.309C145.345 153.309 156.738 164.713 156.738 178.78Z" fill="#425466"/>
-            </svg>
-            <a id="work" class="a tab {% if page.url == '/' %}active{% endif %}" href="{{ site.baseurl }}/">Work</a>
+            <a id="work" class="a tab {% if page.url == '/' %}active{% endif %}" href="{{ site.url }}{{ site.baseurl }}/">Work</a>
         </li>
         <li id="experience-tab" class="tab-container">
-            <a id="experience" class="a tab {% if page.url == '/experience/' %}active{% endif %}" href="{{ site.baseurl }}/experience/">Experience</a>
+            <a id="experience" class="a tab {% if page.url == '/experience/' %}active{% endif %}" href="{{ site.url }}{{ site.baseurl }}/experience/">Experience</a>
         </li>
         <li id="perspectives-tab" class="tab-container">
-            <svg aria-hidden="true" class="sparkle" width="11" height="11" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M164.717 52.7096C163.197 51.6959 162.183 50.6823 162.183 48.655C162.183 47.1345 163.197 46.1209 164.717 45.1072L195.127 32.4366L207.29 2.53411C208.304 1.01365 209.318 0 210.838 0C212.865 0 213.879 1.01365 214.893 2.53411L227.563 32.4366L257.466 45.1072C258.986 46.1209 260 47.1345 260 48.655C260 50.6823 258.986 51.6959 257.466 52.7096L227.563 64.8733L214.893 95.2827C213.879 96.8031 212.865 97.8168 211.345 97.8168C209.318 97.8168 208.304 96.8031 207.29 95.2827L195.127 64.8733L164.717 52.7096ZM257.466 207.29C258.986 208.304 260 209.318 260 210.838C260 212.865 258.986 213.879 257.466 214.893L227.563 227.057L214.893 257.466C213.879 258.986 212.865 260 211.345 260C209.318 260 208.304 258.986 207.29 257.466L195.127 227.057L164.717 214.893C163.197 213.879 162.183 212.865 162.183 211.345C162.183 209.318 163.197 208.304 164.717 207.29L195.127 194.62L207.29 164.717C208.304 163.197 209.318 162.183 210.838 162.183C212.865 162.183 213.879 163.197 214.893 164.717L227.563 194.62L257.466 207.29ZM195.127 129.747C195.127 132.788 193.099 135.828 190.565 136.842L133.294 165.731L104.912 223.002C103.392 225.536 100.858 227.057 97.8168 227.057C94.269 227.057 91.7349 225.536 90.2144 223.002L61.8324 165.731L4.5614 136.842C2.02729 135.828 0 132.788 0 129.747C0 126.706 2.02729 123.665 4.5614 122.651L61.8324 93.7622L90.2144 36.9981C93.2554 31.423 101.871 31.423 104.912 36.9981L133.294 93.7622L190.565 122.651C193.099 123.665 194.62 126.706 195.127 129.747Z">
-            </svg>
-            <a id="perspectives" class="a tab {% if page.url == '/perspectives/' %}active{% endif %}" href="{{ site.baseurl }}/perspectives/">Perspectives</a>
+            <a id="perspectives" class="a tab {% if page.url == '/perspectives/' %}active{% endif %}" href="{{ site.url }}{{ site.baseurl }}/perspectives/">Perspectives</a>
         </li>
         <li id="endorsements-tab" class="tab-container">
-            <a id="endorsements" class="a tab {% if page.url == '/endorsements/' %}active{% endif %}" href="{{ site.baseurl }}/endorsements/">Endorsements</a>
+            <a id="endorsements" class="a tab {% if page.url == '/endorsements/' %}active{% endif %}" href="{{ site.url }}{{ site.baseurl }}/endorsements/">Endorsements</a>
         </li>
         <li id="about-tab" class="tab-container">
-            <a id="about" class="a tab {% if page.url == '/about/' %}active{% endif %}" href="{{ site.baseurl }}/about/">About</a>
+            <a id="about" class="a tab {% if page.url == '/about/' %}active{% endif %}" href="{{ site.url }}{{ site.baseurl }}/about/">About</a>
+        </li>
+        <li id="contact-tab" class="tab-container">
+            <a id="contact" class="a tab {% if page.url == '/contact/' %}active{% endif %}" href="{{ site.url }}{{ site.baseurl }}/contact/">Contact me</a>
         </li>
     </ul>
     <button class="nav-button right"></button>

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -22,7 +22,6 @@
         {% if page.url == '/about/' %} – About{% endif %}
     </title>
     <meta name="description" content="The portfolio of Jan Michael Wallace II. An inclusive, future-forward product design leader and technologist.">
-    <meta name="robots" content="index, follow">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="{{ site.url }}{{ site.baseurl }}/sitemap.xml">
     <link rel="author" href="{{ site.url }}{{ site.baseurl }}/about/">
     <link rel="canonical" href="{{ site.url }}{{ site.baseurl }}{{ page.url }}">

diff --git a/_sass/content_blocks/_work.scss b/_sass/content_blocks/_work.scss
@@ -1,11 +1,3 @@
-//***********************************************************//
-//**                 PAGE DESIGN ELEMENTS                  **//
-//***********************************************************//
-.work-teaser {
-    display: flex;
-    width: 100%;
-}
-
 //***********************************************************//
 //**              PAGE LAYOUT AND TYPOGRAPHY               **//
 //***********************************************************//
@@ -17,32 +9,42 @@
 	justify-content: flex-start;
 }
 
+// section - grandparent
 .work-item {
 	align-items: center;
-    background-color: var(--light-gray);
-    border-radius: 16px;
-    box-shadow: 0 0 6px -1px var(--dark-gray);
+    background-color: var(--stripe-bg);
+    border-radius: 0rem;
+    box-shadow: 
+        0px 0px 0px 0px rgba(246, 249, 252, 0),
+        0px 0px 0px 0px rgba(246, 249, 252, 0),
+
+        // larger darkened shadow
+        0px 0px 0px 0px rgba(0, 0, 0, 0),
+        0px 0px 0px 0px rgba(0, 0, 0, 0),
+
+        // spread highlight
+        0px 0px 0px 0px rgba(0, 0, 0, 0),
+        0px 0px 0px 0px rgba(0, 0, 0, 0);
     display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 	margin: 0 auto;
     max-width: 408px;
     overflow: hidden;
+    position: relative;
+    transform: scale(1);
 	width: 100%;
-    transition: all 0.3s ease-in-out;
+    transition: 
+        border-radius 0.1s cubic-bezier(0.25, 1.5, 0.5, -0.5),
+        transform 0.1s cubic-bezier(0.25, 1.5, 0.5, -0.5),
+        box-shadow 0.25s cubic-bezier(0.25, 1.5, 0.5, -0.5);
+    z-index: 1;
 
     @media only screen and (min-width: 769px) {
         max-width: none;
         width: calc(50% - 1.5rem);
     }
 
-    @media only screen and (hover: hover) {
-        &:hover {
-            box-shadow: 0 -1px 12px -6px var(--dark-gray);
-            transform: scale(1.05);
-        }
-    }
-
     &:nth-of-type(1) {
         margin-top: 2rem;
     }
@@ -56,9 +58,68 @@
     }
 }
 
+// link - parent
 .item-wrapper {
-    box-shadow: 1px 0 0 1px var(--dark-gray);
     display: flex;
     overflow: hidden;
     width: 100%;
+}
+
+// image - child
+.work-teaser {
+    display: flex;
+    opacity: 1;
+    transition: 
+        opacity 0.25s cubic-bezier(0.25, 0.75, 0.5, -0.5);
+    width: 100%;
+}
+
+// h2 - child
+.project-name {
+    align-items: center;
+    color: white;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transition: 
+        opacity 0.25s cubic-bezier(0.25, 0.75, 0.5, -0.5);
+    width: 100%;
+    z-index: 3;
+}
+
+
+// HOVER STATE
+
+@media only screen and (hover: hover) {
+    .work-item:hover {
+        border-radius: 0.5rem;
+        transform: scale(1.01);
+        box-shadow: // h v b s c
+
+            // immediate highlight border
+            -1px -1px 3px 0px rgba(246, 249, 252, 1),
+            0px 0px 3px 0px rgba(246, 249, 252, 1),
+
+            // dark spread
+            14px 14px 14px 3px rgba(0, 0, 0, 0.05),
+
+            // top-left immediate highlight border offset (background)
+            -14px -14px 14px 0px rgba(255, 255, 255, 1);
+
+            .work-teaser {
+                opacity: 0;
+            }
+            .project-name {
+                opacity: 1;
+            }
+        }
 }
diff --git a/_sass/global/_global.scss b/_sass/global/_global.scss
@@ -15,6 +15,7 @@
     --light-gray: #FBFBFD;
     --white: #FEFEFE;
     --black: #0a2540;
+    --stripe-bg: #F6F9FC;
 }  
 // selection color(s)
 .svg::selection,
@@ -127,7 +128,7 @@
     // background:
     //     linear-gradient(to top, rgba(242, 247, 251, 0.5) 400px, rgba(254, 254, 254, 0.25) 100%),
     //     linear-gradient(to right, rgba(254, 254, 254, 0.25) 15%, rgba(143, 83, 239, 0.02) 100%, rgba(231, 245, 247, 0.25) 100%);
-    background-color: #F6F9FC; // stripe background color
+    background-color: var(--stripe-bg);
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -161,52 +162,6 @@
     width: 100%;
 }
 //***********************************************************//
-//**                       HALF OVAL                       **//
-//***********************************************************//
-.half-oval {
-    content: "";
-    background-color: var(--white); 
-    border-bottom-left-radius: 50%;
-    border-bottom-right-radius: 50%;
-    border-color: #EAF2F5;
-    border-style: solid;
-    border-width: 0;
-    border-bottom-width: 1px;
-    height: 12rem;
-    overflow: hidden;
-    position: absolute;
-        top: 0rem;
-        left: 50%;
-    transform: translateX(-50%);
-    width: 92.25rem;
-    z-index: 0;
-
-    @media only screen and (min-width: 1184px) {
-            left: -12.5%;
-            right: -12.5%;
-        transform: translateX(0);
-        width: 125%;
-    }
-
-    &::before {
-        background-image:
-            linear-gradient(to right, #EAF2F5 0.0625rem, transparent 0.0625rem),
-            linear-gradient(to bottom, #EAF2F5 0.0625rem, transparent 0.0625rem);
-        background-position: center 0.21875rem; /* Ensures centering */
-        background-size: 0.3125rem 0.3125rem; /* Adjust as necessary */
-        content: '';
-        position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: calc(50% - 0.03125rem);
-        pointer-events: none;
-        transform: translateX(-50%);
-        width: 100%;
-        z-index: 1;
-    }
-}
-//***********************************************************//
 //**                         LOGO                          **//
 //***********************************************************//
 // GLOBAL LOGO (LARGE)
@@ -217,10 +172,10 @@
 
     // Header logo container
     &.large {
-        height: 9.75rem;
+        height: 3.75rem;
         margin: 0;
         padding: 0;
-        width: 9.75rem;
+        width: 3.75rem;
 
         // Header logo animated borders
         .animated-border {

diff --git a/_sass/includes/_header.scss b/_sass/includes/_header.scss
@@ -4,8 +4,9 @@
 .header {
     align-items: center;
     display: flex;
-    flex-direction: column;
-    padding: 4rem 4px 0;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 2rem 2rem 2rem 1rem;
     position: relative;
     width: 100%;
 }

diff --git a/_sass/includes/_nav.scss b/_sass/includes/_nav.scss
@@ -10,8 +10,8 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    margin: 3rem auto 0;
-    padding: 0 2rem;
+    margin: 0;
+    padding: 0;
     position: relative; // for underline & arrows
     width: 100%;
 
@@ -62,9 +62,6 @@
 
 .nav {
     align-items: center;
-    border-color: var(--dark-gray);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
     display: flex;
     height: 4rem;
     list-style: none;
@@ -107,35 +104,24 @@
 .tab-container {
     list-style: none;
     margin: 0;
-    padding: .5rem 2rem;
+    padding: .5rem 1rem;
     position: relative;
-
     flex-shrink: 0;
     min-width: max-content;
     white-space: nowrap;
+
+    &:first-child {
+        padding-left: 0;
+    }
+    &:last-child {
+        padding-right: 0;
+    }
 }
 
 .tab {
     font-weight: 500;
 }
 
- // TAB DECORATIONS
- .padlock {
-    pointer-events: none;
-    position: absolute;
-        top: 0.67rem;
-        left: 1.1rem;
- }
-
- .sparkle {
-    pointer-events: none;
-    position: absolute;
-        top: 0.25rem;
-        right: 1.4rem;
-    path {
-        fill:007798;
-    }
- }
 
  // CURRENTLY ACTIVE TAB
  .tab.active {

diff --git a/about.markdown b/about.markdown
@@ -3,7 +3,7 @@ layout: page
 title: About
 permalink: /about/
 ---
-<main class="main {% if page.url == '/about/' %}about{% endif %}">
+<main class="main about">
     <section class="bio">
         <figure class="bio-pic-wrapper">
             <img class="bio-pic" src="{{ site.baseurl }}/images/headshots/janmichael-bio-pic.webp" alt="Headshot of Jan Michael Wallace II">