Removing profile section from index page and adding shaders social li…

…nk to navbar

src/data/dev.yml

@@ -1,38 +1,31 @@
 name: Hugo Roque
 position: Gameplay Programmer
 introduction:
-  - I'm a game developer transitioning from web to game development.
+  - I'm a gameplay programmer transitioning from web to game development.
   - I've divided my attention between the two areas in the past few years, but I want to focus solely on games as soon as possible.
   - During those years, I've developed eleven commercial games, eight of which I self-published on Steam.
   - Before that, I had been in the web industry for eight years.
 links:
   - name: Steam
     url: 'https://store.steampowered.com/developer/sensengames'
     iconClasses: fa-brands fa-steam
-    navbar: true
 
   - name: Github
     url: 'https://github.com/hugolnx/'
     iconClasses: fa-brands fa-github
-    navbar: true
 
   - name: LinkedIn
     url: 'https://www.linkedin.com/in/hugolnx/'
     iconClasses: fa-brands fa-linkedin
-    navbar: true
 
   - name: Shaders
     url: 'https://www.shadertoy.com/user/hugolnx'
     iconClasses: fa-solid fa-pen-nib
-
-  - name: Resume
-    url: 'https://docs.google.com/document/d/1td3nobiQGHL1K4ZMKC1l2xtNmiY6XOO5Zgw2LnlF0gY/edit'
-    iconClasses: fa-solid fa-file-lines
+    isLowPriority: true
 
   - name: Email
     url: 'mailto:[email protected]'
     iconClasses: fa-solid fa-envelope
-    navbar: true
 
 background:
   - Developed 11 commercial games

src/data/site.yml

@@ -26,10 +26,10 @@ pages:
     hidden: true
 
 seeNext:
-  - action: See Games
+  - action: See my games
     description: Check out the games I've published
     url: *gamesUrl
-  - action: Read my Resume
+  - action: Read my resume
     description: Read more about my professional history
     url: *resumeUrl
     isExternal: true

src/pages/_layout/MainNavbar.vue

@@ -13,6 +13,9 @@
             :href="social.url"
             :icon-classes="social.iconClasses"
             :text="social.name"
+            :class="{
+              'is-low-priority': social.isLowPriority,
+            }"
           />
         </div>
       </div>
@@ -82,6 +85,12 @@ nav {
     justify-content: center;
     align-items: end;
     gap: 1rem;
+
+    @include until(500px) {
+      .is-low-priority {
+        display: none;
+      }
+    }
   }
 
   @include touch {

src/pages/_layout/navbarDataProvider.js

@@ -1,11 +1,12 @@
 import devData from '../../data/dev.yml';
 import siteData from '../../data/site.yml';
 
-const { name, position } = devData;
-const socials = (() => {
-    const { links: allLinks } = devData;
-    return allLinks.filter((link) => link.navbar);
-})();
+const {
+    name,
+    position,
+    links: socials,
+} = devData;
+
 const navLinks = (() => {
     const { pages } = siteData;
     return pages

src/pages/index/+Page.vue

@@ -5,37 +5,6 @@
     </h1>
 
     <div class="overview-page-sections">
-      <section class="overview-subsection content-container profile-section">
-        <h2 class="title page-section-subtitle profile-title">
-          Profile
-        </h2>
-        <div class="profile">
-          <figure class="image is-128x128">
-            <img
-              class="is-rounded"
-              width="128"
-              height="128"
-              src="../../img/me-128-compressed.jpg"
-            >
-          </figure>
-          <p class="title dev-title">
-            {{ dev.name }}
-          </p>
-          <p class="subtitle dev-position">
-            {{ dev.position }}
-          </p>
-        </div>
-        <nav class="social-media">
-          <SocialIconLink
-            v-for="social in dev.links"
-            :key="social.name"
-            :href="social.url"
-            :icon-classes="social.iconClasses"
-            :text="social.name"
-          />
-        </nav>
-      </section>
-
       <section class="overview-subsection content-container introduction-section">
         <h2 class="title page-section-subtitle introduction-title">
           Hello and welcome
@@ -159,7 +128,6 @@
 </template>
 
 <script setup>
-import SocialIconLink from '../../components/SocialIconLink.vue';
 import BulletList from '../../components/BulletList.vue';
 import BulletListItem from '../../components/BulletListItem.vue';
 import TagList from '../../components/TagList.vue';
@@ -176,25 +144,6 @@ const bulletListIconClasses = 'fa-regular fa-circle-check has-text-success';
 
 // Introduction Styling
 .overview-page-section {
-  .social-media {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    gap: 1rem;
-  }
-
-  .profile-section {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 1rem;
-
-    .profile {
-      display: flex;
-      flex-flow: column nowrap;
-      align-items: center;
-    }
-  }
-
   .introduction-section {
     display: flex;
     flex-flow: column nowrap;
@@ -229,33 +178,6 @@ const bulletListIconClasses = 'fa-regular fa-circle-check has-text-success';
     }
   }
 
-  @include from(450px) {
-    .social-media {
-      margin-top: 0.5rem;
-      font-size: $size-5;
-      gap: 2rem;
-
-      .icon-text {
-        line-height: $size-5;
-      }
-
-      .icon-raw-text {
-        font-size: $size-6-l3;
-        margin-top: 0.65rem;
-      }
-    }
-
-    .profile-section {
-      .dev-title.title {
-        font-size: $size-3;
-      }
-
-      .dev-position.subtitle {
-        font-size: $size-4;
-      }
-    }
-  }
-
   .tags-section {
     .tag-list {
       justify-content: center;
@@ -448,10 +370,4 @@ const bulletListIconClasses = 'fa-regular fa-circle-check has-text-success';
 .overview-page-section {
   @include box-hover-on-children();
 }
-
-.overview-page-section {
-  .title.page-section-subtitle.profile-title {
-    @include semantic-hide;
-  }
-}
 </style>