diff --git a/README.md b/README.md
index 8e6795d4..5bbf0fed 100644
--- a/README.md
+++ b/README.md
@@ -20,13 +20,47 @@ npm run serve
npm run build
```
-### Lints and fixes files
+## Project List
-```
-npm run lint
-```
+### REST Countries API with color theme switcher
-## Project List
+Live | Repo | Try Out
+
+### Fylo dark theme landing page
+
+Live | Repo | Try Out
+
+### Sunnyside agency landing page
+
+Live | Repo | Try Out
+
+### Pricing component with toggle
+
+Live | Repo | Try Out
+
+### Intro component with sign-up form
+
+Live | Repo | Try Out
+
+### Advice generator app
+
+Live | Repo | Try Out
+
+### Base Apparel coming soon page
+
+Live | Repo | Try Out
+
+### FAQ Accordion Card
+
+Live | Repo | Try Out
+
+### Ping coming soon page
+
+Live | Repo | Try Out
+
+### Article preview component
+
+Live | Repo | Try Out
### URL shortening API landing page
diff --git a/src/App.vue b/src/App.vue
index c0b69efb..25dc9a77 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -340,6 +340,156 @@ export default {
repoLink:
"https://github.com/catherineisonline/url-shortening-api-frontendmentor",
},
+ {
+ id: 15,
+ projectName: "Article preview component",
+ projectDescribtion:
+ "Practice your layout skills with this article preview component. There's lots of fun to be had playing around with animations for the sharing icons as well.",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/article-preview-component.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/article-preview-component-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/article-preview-component-USFNBjIaV",
+ repoLink:
+ "https://github.com/catherineisonline/article-preview-component-frontendmentor",
+ },
+ {
+ id: 16,
+ projectName: "Ping coming soon page",
+ projectDescribtion:
+ "This challenge is great for beginners and offers a chance to practice basic client-side form validation.",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/ping-coming-soon.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/ping-coming-soon-page-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/ping-coming-soon-page-iKops4Jwj",
+ repoLink:
+ "https://github.com/catherineisonline/ping-coming-soon-page-frontendmentor",
+ },
+ {
+ id: 17,
+ projectName: "FAQ Accordion Card",
+ projectDescribtion:
+ "In this challenge, you'll be building out an FAQ accordion. This is an extremely common front-end pattern, so it's a great opportunity to get some practice in!",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/FAQ-accordion-card.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/faq-accordion-card-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/faq-accordion-card-tFrPJh5hD",
+ repoLink:
+ "https://github.com/catherineisonline/faq-accordion-card-frontendmentor",
+ },
+ {
+ id: 18,
+ projectName: "Base Apparel coming soon page",
+ projectDescribtion:
+ "This layout looks simple enough, but there are some interesting details to it that will test your CSS skills. You'll also get to practice basic form validation.",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/Base-Apparel-coming-soon-page.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/base-apparel-coming-soon-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/base-apparel-coming-soon-page-KdvKyw8NE",
+ repoLink:
+ "https://github.com/catherineisonline/base-apparel-coming-soon-frontendmentor",
+ },
+ {
+ id: 19,
+ projectName: "Advice generator app",
+ projectDescribtion:
+ "The perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.",
+ projectStack: ["HTML", "CSS", "JS", "API"],
+ projectPreview: require("@/assets/images/advice-generator-app.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/advice-generator-app-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/advice-generator-app-wYjTeAeAf",
+ repoLink:
+ "https://github.com/catherineisonline/advice-generator-app-frontendmentor",
+ },
+ {
+ id: 20,
+ projectName: "Intro component with sign-up form",
+ projectDescribtion:
+ "Practice building out a sign-up form complete with client-side validation using JavaScript.",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/Intro-component-with-sign-up-form.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/intro-component-with-sign-up-form-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/intro-component-with-signup-form-BfhVbWQEM",
+ repoLink:
+ "https://github.com/catherineisonline/intro-component-with-sign-up-form-frontendmentor",
+ },
+ {
+ id: 21,
+ projectName: "Pricing component with toggle",
+ projectDescribtion:
+ "This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/pricing-component-with-toggle.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/pricing-component-with-toggle-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/pricing-component-with-toggle-IUaYc_2FA",
+ repoLink:
+ "https://github.com/catherineisonline/pricing-component-with-toggle-frontendmentor",
+ },
+ {
+ id: 22,
+ projectName: "Sunnyside agency landing page",
+ projectDescribtion:
+ "This challenge will be a perfect test of your layout and responsive skills. There's a tiny bit of JS for the mobile menu, but the focus is HTML & CSS.",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/sunnyside-agency-landing-page.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/sunnyside-agency-landing-page-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/sunnyside-agency-landing-page-QfXrSGu5A",
+ repoLink:
+ "https://github.com/catherineisonline/sunnyside-agency-landing-page-frontendmentor",
+ },
+ {
+ id: 23,
+ projectName: "Fylo dark theme landing page",
+ projectDescribtion:
+ "This design has some nice layout challenges in it. A perfect training ground to practice your Flexbox and/or Grid skills.",
+ projectStack: ["HTML", "CSS", "JS"],
+ projectPreview: require("@/assets/images/fylo-dark-theme-landing-page.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/fylo-dark-theme-landing-page-frontendmentor/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/fylo-dark-theme-landing-page-97wbDcVX8",
+ repoLink:
+ "https://github.com/catherineisonline/fylo-dark-theme-landing-page-frontendmentor",
+ },
+ {
+ id: 24,
+ projectName: "REST Countries API with color theme switcher",
+ projectDescribtion:
+ "If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.",
+ projectStack: ["HTML", "CSS", "JS", "API"],
+ projectPreview: require("@/assets/images/rest-countries-api-with-color-theme-switcher.jpg"),
+ liveLink:
+ "https://catherineisonline.github.io/rest-countries/",
+
+ projectLink:
+ "https://www.frontendmentor.io/solutions/rest-countries-api-with-color-theme-switcher-SySqXmn49",
+ repoLink:
+ "https://github.com/catherineisonline/rest-countries",
+ },
],
};
},
diff --git a/src/assets/images/Base-Apparel-coming-soon-page.jpg b/src/assets/images/Base-Apparel-coming-soon-page.jpg
new file mode 100644
index 00000000..977bd404
Binary files /dev/null and b/src/assets/images/Base-Apparel-coming-soon-page.jpg differ
diff --git a/src/assets/images/FAQ-accordion-card.jpg b/src/assets/images/FAQ-accordion-card.jpg
new file mode 100644
index 00000000..60b5f179
Binary files /dev/null and b/src/assets/images/FAQ-accordion-card.jpg differ
diff --git a/src/assets/images/Intro-component-with-sign-up-form.jpg b/src/assets/images/Intro-component-with-sign-up-form.jpg
new file mode 100644
index 00000000..5cae297a
Binary files /dev/null and b/src/assets/images/Intro-component-with-sign-up-form.jpg differ
diff --git a/src/assets/images/advice-generator-app.jpg b/src/assets/images/advice-generator-app.jpg
new file mode 100644
index 00000000..52022346
Binary files /dev/null and b/src/assets/images/advice-generator-app.jpg differ
diff --git a/src/assets/images/article-preview-component.jpg b/src/assets/images/article-preview-component.jpg
new file mode 100644
index 00000000..37c18c77
Binary files /dev/null and b/src/assets/images/article-preview-component.jpg differ
diff --git a/src/assets/images/fylo-dark-theme-landing-page.jpg b/src/assets/images/fylo-dark-theme-landing-page.jpg
new file mode 100644
index 00000000..1d792af3
Binary files /dev/null and b/src/assets/images/fylo-dark-theme-landing-page.jpg differ
diff --git a/src/assets/images/ping-coming-soon.jpg b/src/assets/images/ping-coming-soon.jpg
new file mode 100644
index 00000000..a44be2a1
Binary files /dev/null and b/src/assets/images/ping-coming-soon.jpg differ
diff --git a/src/assets/images/pricing-component-with-toggle.jpg b/src/assets/images/pricing-component-with-toggle.jpg
new file mode 100644
index 00000000..5bd25c5d
Binary files /dev/null and b/src/assets/images/pricing-component-with-toggle.jpg differ
diff --git a/src/assets/images/rest-countries-api-with-color-theme-switcher.jpg b/src/assets/images/rest-countries-api-with-color-theme-switcher.jpg
new file mode 100644
index 00000000..06fa23a3
Binary files /dev/null and b/src/assets/images/rest-countries-api-with-color-theme-switcher.jpg differ
diff --git a/src/assets/images/sunnyside-agency-landing-page.jpg b/src/assets/images/sunnyside-agency-landing-page.jpg
new file mode 100644
index 00000000..0ca33c4f
Binary files /dev/null and b/src/assets/images/sunnyside-agency-landing-page.jpg differ
diff --git a/src/components/Header.vue b/src/components/Header.vue
deleted file mode 100644
index 90663afa..00000000
--- a/src/components/Header.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-