updated projects list

catherineisonline · Jul 25, 2023 · 31d05e7 · 31d05e7
1 parent 04aca48
commit 31d05e7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -30,8 +30,8 @@
             >
           </li>
           <li>
-            <i class="fab fa-github-square"></i
-            ><a
+            <i class="fab fa-github-square"></i>
+            <a
               :href="headerDetail.gitHubUrl"
               @click="removeMenu"
               target="_blank"
@@ -530,11 +530,11 @@ export default {
         },
         {
           id: 28,
-          projectName: "Fylo landing page with two column layout",
+          projectName: "Crowdfunding product page",
           projectDescribtion:
-            "This project is great if you're starting to get confident with slightly more complex layouts. The second section with the testimonial area will provide a nice challenge.",
-          projectStack: ["HTML", "CSS"],
-          projectPreview: require("@/assets/images/fylo-landing-page-with-two-column-layout.webp"),
+            "This challenge will test both your layout and state management skills. As visitors make pledges, your goal is to keep track of the changes.",
+          projectStack: ["HTML", "CSS", "JS"],
+          projectPreview: require("@/assets/images/crowdfunding-product-page.webp"),
         
           liveLink: "https://catherineisonline.github.io/crowdfunding-product-page-frontendmentor/",
           projectLink:
@@ -580,6 +580,19 @@ export default {
             "https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5",
           repoLink: "https://github.com/catherineisonline/intro-section-with-dropdown-navigation-frontendmentor",
         },
+        {
+          id: 32,
+          projectName: "Fylo landing page with two column layout",
+          projectDescribtion:
+            "This project is great if you're starting to get confident with slightly more complex layouts. The second section with the testimonial area will provide a nice challenge.",
+          projectStack: ["HTML", "CSS"],
+          projectPreview: require("@/assets/images/fylo-landing-page-with-two-column-layout.webp"),
+        
+          liveLink: "https://catherineisonline.github.io/fylo-landing-page-with-two-column-layout-frontendmentor/",
+          projectLink:
+            "https://www.frontendmentor.io/challenges/fylo-landing-page-with-two-column-layout-5ca5ef041e82137ec91a50f5",
+          repoLink: "https://github.com/catherineisonline/fylo-landing-page-with-two-column-layout-frontendmentor",
+        },
       ],
     };
   },

diff --git a/src/assets/_base.sass b/src/assets/_base.sass
@@ -28,6 +28,7 @@ body
     padding: 0
     background-color: $bg-color
     -ms-overflow-style: none
+    overflow-x: hidden
 //for Internet Explorer, Edge */
     scrollbar-width: none
 //for Firefox */

diff --git a/src/assets/styles.sass b/src/assets/styles.sass
@@ -1,5 +1,6 @@
 @use "base"
 //Main
+
 .main
     margin: 0 auto
     width: 100%
@@ -45,11 +46,10 @@ nav
         cursor: pointer
     .main-menu
         display: none
-    .show-menu
-        background-color: base.$white
         display: flex
+        background-color: base.$white
         flex-direction: column
-        position: absolute
+        position: fixed
         width: fit-content
         height: fit-content
         list-style: none
@@ -58,16 +58,21 @@ nav
         font-size: 1rem
         font-family: base.$barlow
         text-transform: uppercase
-        gap: 20px
+        gap: 2rem
         border-radius: 10px
-        padding: 1.5rem
-        li
+        padding: 2rem
+        transform: translateX(150%)
+        z-index: 999
+    .show-menu   
+        transform: translateX(-10%)
+        transition: transform 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22)
+    li
             border-bottom: 1px solid rgba(190, 190, 190, 0.253)
             display: flex
             gap: 10px
             align-items: center
             text-align: center
-        a
+    a
             text-decoration: none
             color: base.$black
             text-transform: capitalize
@@ -232,6 +237,11 @@ nav
     .link-btn
         a:hover::after
             transform: scaleX(0)
+            transition: all ease-in-out 0.3s
+.show-menu
+    a:hover
+            color: red
+            transition: all ease-in-out 0.3s
 .solutions
     img:hover
         cursor: pointer