upload project-8-9-10, and fix style HomePage description - Footer author

Author: nvanha

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# temp direcoty
+/tmp

src/assets/data/projects.js

@@ -12,6 +12,9 @@ const pj6_image =
   require("./../images/projects/pj6_scroll-animation.png").default;
 const pj7_image =
   require("./../images/projects/pj7_split-landing-page.png").default;
+const pj8_image = require("./../images/projects/pj8_form-wave.png").default;
+const pj9_image = require("./../images/projects/pj9_sound-board.png").default;
+const pj10_image = require("./../images/projects/pj10_dad-jokes.png").default;
 
 const projects = [
   {
@@ -56,6 +59,24 @@ const projects = [
     image: pj7_image,
     slug: "https://codepen.io/nvanha/full/PojeVGK",
   },
+  {
+    id: 8,
+    name: "Form Input Wave",
+    image: pj8_image,
+    slug: "https://codepen.io/nvanha/full/VwWBaoP",
+  },
+  {
+    id: 9,
+    name: "Sound Board",
+    image: pj9_image,
+    slug: "https://codepen.io/nvanha/full/VwWBjrr",
+  },
+  {
+    id: 10,
+    name: "Dad Jokes",
+    image: pj10_image,
+    slug: "https://codepen.io/nvanha/full/RwgBRBJ",
+  },
 ];
 
 export default projects;

src/assets/images/projects/pj10_dad-jokes.png

@@ -45,6 +45,10 @@
         @include responsive_max(767px) {
           font-size: 3rem;
         }
+
+        @include responsive_max(575px) {
+          font-size: 2.5rem;
+        }
       }
 
       h1 {
@@ -61,6 +65,11 @@
         @include responsive_max(767px) {
           font-size: 4.5rem;
         }
+
+        @include responsive_max(575px) {
+          font-size: 3.8rem;
+          margin-top: 1rem;
+        }
       }
     }
   }

src/assets/images/projects/pj8_form-wave.png

@@ -105,6 +105,10 @@
       @include responsive_max(767px) {
         width: 150px;
       }
+
+      @include responsive_max(575px) {
+        width: 100px;
+      }
     }
 
     &-desc {
@@ -115,9 +119,18 @@
         padding-left: 3rem;
       }
 
+      @include responsive_max(575px) {
+        padding-left: 2rem;
+      }
+
       h3 {
         text-transform: none;
 
+        @include responsive_max(575px) {
+          font-size: 3.2rem !important;
+          margin-bottom: 1rem !important;
+        }
+
         span {
           color: var(--color-yellow-pri);
         }