feat: Add local hero image

svg-beauty · Dec 27, 2020 · b3b795e · b3b795e
1 parent 124efa2
commit b3b795e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/public/hero.jpeg b/public/hero.jpeg
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -4,23 +4,21 @@
       <div class="col-12">
         <h1>Home</h1>
 
-        <!-- It would look better on page load to use height=250 except that on mobile the image gets squashed. The image needs to actually get a smaller heigh when the width is made to be smaller and CSS can't help here it seems. -->
+        <!-- It would look better on page load to use height=250, except that on mobile the image gets squashed. The image needs to actually get a smaller height when the width is made to be smaller and CSS can't help here it seems. -->
         <div class="hero">
-          <a href="https://unsplash.com/photos/FHTxbpRWEsE">
-            <img
-              alt="Logo"
-              src="https://source.unsplash.com/FHTxbpRWEsE/1300x250"
-              width="100%"
-              height="auto"
-            />
-          </a>
+          <img
+            alt="Logo"
+            :src="`${baseUrl}hero.jpeg`"
+            width="100%"
+            height="auto"
+          />
           <br />
 
           <small class="note">
             <span>
               Photo by
               <a
-                href="https://unsplash.com/@technobulka?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"
+                href="https://unsplash.com/@luarte_raw?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"
                 >Kevin Luarte</a
               >
               on
@@ -91,6 +89,7 @@ export default Vue.extend({
     return {
       repoBadge: repo.gh(),
       description: DESCRIPTION,
+      baseUrl: process.env.BASE_URL,
     };
   },
 });