feat: add username to hero

moromis · Feb 14, 2024 · 0e744e6 · 0e744e6
1 parent 67820a7
commit 0e744e6
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 4 deletions.
diff --git a/content/_index.md b/content/_index.md
@@ -1,5 +1,6 @@
 ---
-title: Hi! My name is Kevin Ulrich
+title: Hi! My name is
+realName: Kevin Ulrich
 subtitle: I'm a software engineer with 4 years of industry experience.
 seo_title: Moromis
 

diff --git a/themes/hugo-liftoff/assets/scss/abstracts/_variables.scss b/themes/hugo-liftoff/assets/scss/abstracts/_variables.scss
@@ -2,8 +2,11 @@
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
 
+:root {
+  --color-primary: #4285F4;
+}
+
 :root, [data-theme="default"] {
-  --color-primary: rgb(18, 120, 175);
   --color-inline-code: hsl(0, 81%, 35%);
 
   /* color contrasts */
@@ -33,7 +36,6 @@
 }
 
 [data-theme="dark"] {
-  --color-primary: rgb(86, 184, 237);
   --color-inline-code: hsl(0, 81%, 70%);
 
   /* color contrasts */

diff --git a/themes/hugo-liftoff/assets/scss/pages/_home.scss b/themes/hugo-liftoff/assets/scss/pages/_home.scss
@@ -26,7 +26,48 @@
   .hero-title {
     font-weight: 900;
     margin-top: 0;
+    margin-bottom: 0;
     @include font-size('xl');
+    display: inline;      
+  }
+
+  .names {
+    display: inline-flex;
+    flex-direction: column;
+
+    & .real-name{
+      border-radius: 8px;
+      margin-top: 0;
+    }
+
+    & .username {
+      color: var(--color-primary);
+      width: fit-content;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  @keyframes strike{
+    0%   { width : 0; }
+    100% { width: 100%; }
+  }
+  .strike {
+    position: relative;
+  }
+  .strike::after {
+    content: ' ';
+    position: absolute;
+    top: calc(50% - 4px);
+    left: 0;
+    width: 100%;
+    height: 8px;
+    background-color: var(--color-primary);
+    animation-name: strike;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards; 
   }
 
   .hero-subtitle {

diff --git a/themes/hugo-liftoff/layouts/index.html b/themes/hugo-liftoff/layouts/index.html
@@ -2,7 +2,11 @@
 <div class="container">
   <section class="section hero">
     <div class="hero-info">
-      <h1 class="hero-title">{{ .Title }}</h1>
+      <h1 class="hero-title">{{ .Title }} </h1>
+      <div class="names">
+        <h1 class="username strike">{{ .Site.Title }}</h1>
+        <h1 class="real-name">{{ .Params.realName }}</h1>
+      </div>
       {{ with .Params.subtitle }}
         <p class="hero-subtitle">{{. | markdownify}}</p>
       {{ end }}