Added icons to home hero keyboard buttons

bbag · Feb 16, 2024 · bd1e063 · bd1e063
1 parent 05f8b09
commit bd1e063
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/src/components/home/HomeHero.astro b/src/components/home/HomeHero.astro
@@ -13,7 +13,41 @@ import DotsBackground from '@/assets/img/dots-background.svg'
                 <h1>Hey, I'm Billy!</h1>
                 <h2>Frontend developer, UX/UI + Product Designer</h2>
             </div>
-            <p>From <KeyboardButton size="sm" data-phone-button="sketch">sketch</KeyboardButton> to <KeyboardButton size="sm" data-phone-button="wireframe">wireframe</KeyboardButton> to <KeyboardButton size="sm" data-phone-button="production">production</KeyboardButton>, I bring web apps, products, and sites to life with code.</p>
+            <p>
+                From
+                <KeyboardButton size="sm" data-phone-button="sketch">
+                    <svg class="line-icon kbd-icon" width="20" height="20" viewBox="0 0 24 24">
+                        <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" />
+                        <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
+                        <path d="M9.7 17l4.6 0" />
+                    </svg>
+                    idea
+                </KeyboardButton>
+                to
+                <KeyboardButton size="sm" data-phone-button="wireframe">
+                    <svg class="line-icon kbd-icon" width="20" height="20" viewBox="0 0 24 24">
+                        <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" />
+                        <path d="M10 10h11" />
+                        <path d="M10 3v18" />
+                        <path d="M9 3l-6 6" />
+                        <path d="M10 7l-7 7" />
+                        <path d="M10 12l-7 7" />
+                        <path d="M10 17l-4 4" />
+                    </svg>
+                    wireframe
+                </KeyboardButton>
+                to
+                <KeyboardButton size="sm" data-phone-button="production">
+                    <svg class="line-icon kbd-icon" width="20" height="20" viewBox="0 0 24 24">
+                        <path d="M7 8l-4 4l4 4" />
+                        <path d="M17 8l4 4l-4 4" />
+                        <path d="M14 4l-4 16" />
+                    </svg>
+                    <!-- <svg class="line-icon kbd-icon" width="20" height="20" viewBox="0 0 24 24">
+                        <path d="M11.5 21h-3.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8" /><path d="M20 21l2 -2l-2 -2" /><path d="M17 17l-2 2l2 2" /><path d="M11 4h2" /><path d="M12 17v.01" />
+                    </svg> -->
+                    production
+                </KeyboardButton>, I bring web apps, products, and sites to life with code.</p>
             <Terminal />
         </div>
         <div class="col-right">
@@ -119,4 +153,10 @@ h1 {
 p {
     font-size: 1.625rem;
 }
+
+.line-icon.kbd-icon {
+    height: 1.25rem;
+    margin-right: 0.375rem;
+    width: 1.25rem;
+}
 </style>
diff --git a/src/components/home/phone-ui/PhoneUi.astro b/src/components/home/phone-ui/PhoneUi.astro
@@ -1,5 +1,5 @@
 ---
-import PhoneScreen from "./PhoneScreen.vue"
+import PhoneScreen from './PhoneScreen.vue'
 ---
 
 <div class="phone-wrapper">