added new projects

catherineisonline · Feb 27, 2022 · 2c45115 · 2c45115
1 parent 15425f5
commit 2c45115
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/src/App.vue b/src/App.vue
@@ -56,7 +56,7 @@
       <ul class="solutions">
         <li
           class="solution"
-          v-for="solution in solutions"
+          v-for="solution in solutions.slice().reverse()"
           v-bind:key="solution.id"
         >
           <!-- Project Preview -->
@@ -296,6 +296,51 @@ export default {
           repoLink:
             "https://github.com/catherineisonline/QR-code-component-frontendmentor",
         },
+        {
+          id: 12,
+          projectName: "Testimonials grid section",
+          projectDescribtion:
+            "This challenge will be perfect practice for anyone wanting to test their CSS Grid skills. Grid is such a powerful addition to CSS, so it's worth getting to grips with it!",
+          projectStack: ["HTML", "CSS"],
+          projectPreview: require("@/assets/images/testimonials-grid-section.jpg"),
+          liveLink:
+            "https://catherineisonline.github.io/testimonials-grid-section-frontendmentor/",
+
+          projectLink:
+            "https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7",
+          repoLink:
+            "https://github.com/catherineisonline/testimonials-grid-section-frontendmentor",
+        },
+        {
+          id: 13,
+          projectName: "IP Address Tracker",
+          projectDescribtion:
+            "In this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.",
+          projectStack: ["HTML", "CSS", "JS", "API"],
+          projectPreview: require("@/assets/images/IP-address-tracker-challenge.jpg"),
+          liveLink:
+            "https://catherineisonline.github.io/ip-address-tracker-frontendmentor/",
+
+          projectLink:
+            "https://www.frontendmentor.io/challenges/ip-address-tracker-I8-0yYAH0",
+          repoLink:
+            "https://github.com/catherineisonline/ip-address-tracker-frontendmentor",
+        },
+        {
+          id: 14,
+          projectName: "URL shortening API landing page",
+          projectDescribtion:
+            "Integrate with the shrtcode URL shortening API and play with browser storage in this landing page challenge.",
+          projectStack: ["HTML", "CSS", "JS", "API"],
+          projectPreview: require("@/assets/images/URL-shortening-API-landing-page.jpg"),
+          liveLink:
+            "https://catherineisonline.github.io/url-shortening-api-frontendmentor/",
+
+          projectLink:
+            "https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G",
+          repoLink:
+            "https://github.com/catherineisonline/url-shortening-api-frontendmentor",
+        },
       ],
     };
   },

diff --git a/src/assets/images/IP-address-tracker-challenge.jpg b/src/assets/images/IP-address-tracker-challenge.jpg
diff --git a/src/assets/images/URL-shortening-API-landing-page.jpg b/src/assets/images/URL-shortening-API-landing-page.jpg
diff --git a/src/assets/images/testimonials-grid-section.jpg b/src/assets/images/testimonials-grid-section.jpg
diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -27,6 +27,7 @@
   --html-text-color: rgb(106, 190, 205);
   --css-text-color: rgb(62, 84, 163);
   --js-text-color: rgb(207, 99, 144);
+  --api-text-color: rgb(133, 194, 10);
   --project-describtion: rgb(115, 115, 115);
   --hover-background: rgba(255, 255, 255, 0.15);
   --wavy-underline: rgba(247, 133, 133, 0.658) 1.5px;
@@ -202,6 +203,9 @@ h1,
 .project-stack.JS {
   color: var(--js-text-color);
 }
+.project-stack.API {
+  color: var(--api-text-color);
+}
 
 .project-stacks {
   display: inline-flex;