make SEO changes

L23de · Jan 21, 2022 · c590a45 · c590a45
1 parent 6594d95
commit c590a45
Show file tree

Hide file tree

Showing 39 changed files with 47 additions and 1,454 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.log
 
 .*
 !.gitignore
diff --git a/index.html b/index.html
@@ -2,9 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Lester Huang</title>
+    <meta name="description" content="&U+1F44B I'm Lester Huang. A lifelong learner &U+1F4D6 with a desire for adventure &️U+1F5FA">
+    <meta name="keywords" content="student,recent,grad,cs,computer,science,fintech,finance,technology,blockchain,lehigh,brooklyn,software,engineer,swe,lester,huang,millennium">
+    <link rel="icon" href="/logo.ico" />
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

diff --git a/public/images/interests/bouldering.png b/public/images/interests/bouldering.png
diff --git a/public/images/interests/bouldering.webp b/public/images/interests/bouldering.webp
diff --git a/public/images/interests/frisbee.png b/public/images/interests/frisbee.png
diff --git a/public/images/interests/frisbee.webp b/public/images/interests/frisbee.webp
diff --git a/public/images/interests/photography.png b/public/images/interests/photography.png
diff --git a/public/images/interests/photography.webp b/public/images/interests/photography.webp
diff --git a/public/images/interests/puzzles.png b/public/images/interests/puzzles.png
diff --git a/public/images/interests/puzzles.webp b/public/images/interests/puzzles.webp
diff --git a/public/images/work/jhu.png b/public/images/work/jhu.png
diff --git a/public/images/work/jhu.webp b/public/images/work/jhu.webp
diff --git a/public/images/work/lehigh.png b/public/images/work/lehigh.png
diff --git a/public/images/work/lehigh.webp b/public/images/work/lehigh.webp
diff --git a/public/images/work/mm.png b/public/images/work/mm.png
diff --git a/public/images/work/mm.webp b/public/images/work/mm.webp
diff --git a/public/images/work/optum.png b/public/images/work/optum.png
diff --git a/public/images/work/optum.webp b/public/images/work/optum.webp
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo.webp b/public/logo.webp
diff --git a/src/components/InterestInfo.vue b/src/components/InterestInfo.vue
@@ -1,19 +1,25 @@
 <template>
     <div :id="name" class="interest-content">
-        <img :alt="name.charAt(0).toUpperCase()+name.slice(1)+' Picture'" class="interest-pic" :src="img">
         <h3 class="interest-title">{{name}}</h3>
         <div class="interest-desc">
             <p v-for="paragraph in desc">{{paragraph}}</p>
         </div>
+        <img :alt="name.charAt(0).toUpperCase()+name.slice(1)+' Picture'" class="interest-pic" :src="'/images/interests/'+shorthand+'.webp'" loading="lazy">
     </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 const props = defineProps({
     name: { type: String, required: true },
     desc: { type: Array, required: true },
-    img: { type: String, required: true },
-})
+    shorthand: { 
+        type: String, 
+        required: false,
+        default: (props: any) => props.shorthand ? props.shorthand : props.name.toLowerCase()
+    },
+});
 </script>
 
 <style lang="scss">

diff --git a/src/components/WorkExperience.vue b/src/components/WorkExperience.vue
@@ -1,8 +1,8 @@
 <template>
     <div :id="company" class="work-content">
-        <a :href="website" target="_blank"><img :src="logo_src" class="banner-img" :alt="company.charAt(0).toUpperCase()+company.slice(1)+'\'s Banner'"/></a>
+        <a :href="website" target="_blank"><img :src="'/images/work/'+shorthand+'.webp'" class="banner-img" :alt="company.charAt(0).toUpperCase()+company.slice(1)+'\'s Banner'" loading="lazy"/></a>
         <div :id="company+'-pos-'+index" v-for="(position, index) in positions" class="pos-info">
-            <h3 class="pos-title">{{position['title']}}</h3>
+            <h3 class="pos-title" itemprop="jobTitle">{{position['title']}}</h3>
             <p class="pos-date">{{position['dates']}}</p>
             <div class="pos-skills">
                 <q-chip v-for="skill in position['skills']" :label="skill" :ripple="false" outline rounded/>
@@ -25,9 +25,9 @@ interface posConfig {
 }
 
 const props = defineProps({
+    shorthand: { type: String, required: true },
     company: { type: String, required: true },
     website: { type: String, required: true },
-    logo_src: { type: String, required: true },
     positions: { type: Object as PropType<Array<posConfig>>, required: true }
 })
 </script>
@@ -42,14 +42,6 @@ const props = defineProps({
     background-color: white;
     margin: 3px;
     margin-bottom: 1rem;
-    transition: 0.5s ease;
-    filter: grayscale(100%);
-    opacity: 0.7;
-
-    &:hover {
-        filter: grayscale(0%);
-        opacity: 1;
-    }
 }
 
 // Left most child gets aligned properly

diff --git a/src/content/interests/biking.json b/src/content/interests/biking.json
@@ -3,6 +3,5 @@
     "desc": [
         "Biking has always been my go-to thing to do. While I currently don't have a bike, I try to get on something on wheels, like a skateboard or inline skates.",
         "It's just cool to be on something that augments your physical ability and being able to simply go fast is just a feeling that doesn't get old."
-    ],
-    "img": "/images/interests/biking.png"
+    ]
 }
diff --git a/src/content/interests/bouldering.json b/src/content/interests/bouldering.json
@@ -1,5 +1,4 @@
 {
     "name": "Bouldering",
-    "desc": ["This is something I only really got into recently. Bouldering is unique, it combines your typical strength training with puzzle solving. At a bouldering gym, you will frequently see people staring at a route and motioning with their hands on how to get up.","Bouldering is the literal essence of \"getting back up after you fall\", it is very humbling while still being extremely rewarding when you finally send a route."],
-    "img": "/images/interests/bouldering.png"
+    "desc": ["This is something I only really got into recently. Bouldering is unique, it combines your typical strength training with puzzle solving. At a bouldering gym, you will frequently see people staring at a route and motioning with their hands on how to get up.","Bouldering is the literal essence of \"getting back up after you fall\", it is very humbling while still being extremely rewarding when you finally send a route."]
 }
diff --git a/src/content/interests/frisbee.json b/src/content/interests/frisbee.json
@@ -1,6 +1,6 @@
 {
+    "shorthand": "frisbee",
     "name": "Ultimate Frisbee",
     "desc": ["I first found out about Ultimate Frisbee freshmen year in college. I wanted to find some way to keep myself active without too much commitment. After a couple of practices, I was able to make new friends and learn more about this cool sport.",
-        "While I'm not the greatest Ultimate player, I love the companionship and spirit that frisbee provides."],
-    "img": "/images/interests/frisbee.png"
+        "While I'm not the greatest Ultimate player, I love the companionship and spirit that frisbee provides."]
 }
diff --git a/src/content/interests/photography.json b/src/content/interests/photography.json
@@ -1,6 +1,5 @@
 {
     "name": "Photography",
     "desc": ["Cameras provide a way to share what you see, usually with your own artistic flair. Now, with virtually all consumer-grade technology coming with a camera, getting into photography is so much easier.",
-    "I love experimenting with new styles and perspectives, although I typically photograph inanimate objects or views."],
-    "img": "/images/interests/photography.png"
+    "I love experimenting with new styles and perspectives, although I typically photograph inanimate objects or views."]
 }
diff --git a/src/content/interests/puzzles.json b/src/content/interests/puzzles.json
@@ -2,6 +2,5 @@
     "name": "Puzzles",
     "desc": ["The first time I saw a Rubik's cube, I didn't pay too much attention to it. I thought it would be really easy, it was just a cube that could be rotated on each side, right? It would be a while until I actually paid much thought to it and started to learn how to solve it.",
     "Over the course of half a year, I was able to PR with a 20 second solve. For the speedcubers out there, I only used the Beginner's Method with OLL and 2 PLL algorithms (That means there was a lot of room to improve).",
-    "But ever since, I've learnt to not just take things at face value and have loved wrangling my head around difficult puzzles"],
-    "img": "/images/interests/puzzles.png"
+    "But ever since, I've learnt to not just take things at face value and have loved wrangling my head around difficult puzzles"]
 }
diff --git a/src/content/work/jhu.json b/src/content/work/jhu.json
@@ -1,7 +1,7 @@
 {
+    "shorthand": "jhu",
     "company": "JHU Engineering Innovation",
     "website": "https://ei.jhu.edu/",
-    "logo_src": "/images/work/jhu.png",
     "positions": [
         {
             "title": "Summer Program Participant",

diff --git a/src/content/work/lehigh.json b/src/content/work/lehigh.json
@@ -1,7 +1,7 @@
 {
+    "shorthand": "lehigh",
     "company": "Lehigh University",
     "website": "https://www1.lehigh.edu/",
-    "logo_src": "/images/work/lehigh.png",
     "positions": [
         {
             "title": "Junior Systems Administrator",

diff --git a/src/content/work/mm.json b/src/content/work/mm.json
@@ -1,7 +1,7 @@
 {
+    "shorthand": "mm",
     "company": "Millennium Management",
     "website": "https://www.mlp.com/",
-    "logo_src": "/images/work/mm.png",
     "positions": [
         {
             "title": "Incoming Quality Assurance Analyst Intern",

diff --git a/src/content/work/optum.json b/src/content/work/optum.json
@@ -1,7 +1,7 @@
 {
+    "shorthand": "optum",
     "company": "Optum",
     "website": "https://www.optum.com/",
-    "logo_src": "/images/work/optum.png",
     "positions": [
         {
             "title": "Software Engineer Intern",

diff --git a/src/css/index.scss b/src/css/index.scss
@@ -61,6 +61,14 @@ p {
 
 img {
     outline: 2px solid black;
+    filter: grayscale(100%);
+    opacity: 0.7;
+    transition: 0.5s ease;
+
+    &:hover {
+        filter: grayscale(0%);
+        opacity: 1;
+    }
 }
 
 .heading {

diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import { Quasar } from 'quasar';
-import quasarIconSet from 'quasar/icon-set/ionicons-v4';
+import quasarIconSet from 'quasar/icon-set/fontawesome-v5'
 import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
 import 'quasar/src/css/index.sass';
 

diff --git a/src/views/404Page.vue b/src/views/404Page.vue
@@ -1,12 +1,9 @@
 <template>
     <div class="content-wrap simple-page">
         <div class="p-intro">
-            <span class="emoji">😕</span>
+            <span class="emoji">&#x1F914;</span>
             <h2>Uh oh, looks like you got lost</h2>
             <h3>Let's get you back <a href="/">home</a>!</h3>
         </div>
     </div>
-</template>
-
-<script setup lang="ts">
-</script>
+</template>
diff --git a/src/views/AboutMe.vue b/src/views/AboutMe.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="content-wrap">
-        <h2 class="heading handshake">About Me <span class="emoji">🤝</span></h2>
-        <div id="about-me">
+        <h2 class="heading handshake">About Me <span class="emoji">&#x1F91D;</span></h2>
+        <div id="about-me" itemscope itemtype="https://schema.org/Person">
             <div id="about-me-content">
-                <img src="/logo.png" alt="Picture of Lester"/>
+                <img src="/logo.webp" alt="Picture of Lester" itemprop="image"/>
                 <p>Hi, I'm glad you stopped by!</p>
                 <p>Let me introduce myself. My name is Lester and I am currently a rising senior at Lehigh University pursuing a B.S. in Computer Science, along with a Data Science Minor. I've always been interested in computing technologies, how they work, and their applications. However, I really only started delving into the nitty-gritty details in 11th grade. Stop by my <router-link to="/work">SWE Journey</router-link> to learn more!</p>
                 <p>In terms of my personal life, I'm constantly looking for ways to seek discomfort, ways to push myself out of my comfort zone and expand my worldview. As a kid, I was always very picky and scared to try new things, so to recoup those lost experiences and never lose out on another one, I strive to say <a href="https://yestheory.com/" target="_blank">"Yes"</a> to everything! Still interested? Learn more about my other <router-link to="/interests">interests</router-link>.</p>
@@ -12,32 +12,15 @@
     </div>
 </template>
 
-<script lang="ts">
-</script>
-
 <style scoped lang="scss">
 #about-me {
     width: 100%;
 
-    .filtered:hover {
-        filter: grayscale(0%);
-    }
-
     img {
         width: min(100%, 300px);
         height: auto;
-        filter: grayscale(100%);
-        opacity: 0.7;
         border-radius: 50%;
         margin: 0px 20px 15px 20px;
-        background: $primary;
-        z-index: -1;
-        transition: 0.5s ease;
-
-        &:hover {
-            filter: grayscale(0%);
-            opacity: 1;
-        }
 
         @media (max-width: $breakpoint-sm) {
             display: block;

diff --git a/src/views/InterestsPage.vue b/src/views/InterestsPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="content-wrap">
-        <h2 class="heading">Other Hobbies <span class="emoji">🚴</span></h2>
+        <h2 class="heading">Other Hobbies <span class="emoji">&#x1F4F7;</span></h2>
         <div id="interests-body">
             <q-carousel
                 v-model="slide"

diff --git a/src/views/SplashPage.vue b/src/views/SplashPage.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="content-wrap simple-page">
-        <div class="p-intro">
+        <div class="p-intro" itemscope itemtype="https://schema.org/Person">
             <!-- CSS Emoji Wave: https://jarv.is/notes/css-waving-hand-emoji/ -->
-            <div class="wave emoji">👋</div>
-            <h1>I'm Lester Huang</h1>
-            <h3>A lifelong learner 📖 with a desire for adventure 🗺️</h3>
+            <div class="wave emoji">&#x1F44B;</div>
+            <h1 itemprop="name">I'm Lester Huang</h1>
+            <h3>A lifelong learner &#x1F4D6; with a desire for adventure &#x1F30F;</h3>
         </div>
         <div class="contact last-element">
             <q-btn round icon="fab fa-linkedin-in" type="a" href="https://www.linkedin.com/in/lesterhuang/" target="_blank" size="1.1rem" unelevated />
@@ -15,10 +15,6 @@
     </div>
 </template>
 
-<script setup lang="ts">
-// import { QBtn } from 'quasar'
-</script>
-
 <style scoped lang="scss">
 .wave {
     animation: wave-animation 2.5s infinite;

diff --git a/src/views/WorkPage.vue b/src/views/WorkPage.vue
@@ -1,12 +1,12 @@
 <template>
     <div id="work" class="content-wrap">
         <div id="work-header">
-            <h2 class="heading">My SWE Journey <span class="emoji">👨‍💻</span></h2>
+            <h2 class="heading">My SWE Journey <span class="emoji">&#x1F468;&#x200D;&#x1F4BB;</span></h2>
             <div></div>
             <q-btn id="pdf-resume" outline no-caps icon="fas fa-file-pdf" label="Grab My Resume" size="lg" to="/resume.pdf" target="_blank" padding="sm"/>
         </div>
 
-        <div id="work-body">
+        <div id="work-body" itemscope itemtype="https://schema.org/Person">
             <q-carousel
                 v-model="slide"
                 swipeable
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ node_modules @@
     dist
     dist-ssr
     *.local
+    *.log
     .*
     !.gitignore