From 02cb7b6fe373e71ff02dc0064c1ff74c1c921145 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Tue, 8 Feb 2022 09:40:28 +0000
Subject: [PATCH] Fixes #1

Moved Other "Project Types" into the data file and changed the template to use that data. Shortens index.njk considerably.
---
 src/_data/webprojects.json | 325 +++++++++++++++++++++++--------------
 src/css/style.css          |   1 +
 src/index.njk              | 157 ++++--------------
 3 files changed, 239 insertions(+), 244 deletions(-)

diff --git a/src/_data/webprojects.json b/src/_data/webprojects.json
index c19b2bb..682b75f 100644
--- a/src/_data/webprojects.json
+++ b/src/_data/webprojects.json
@@ -1,121 +1,208 @@
 {
-    "frontendMentor": {
-        "serviceName": "Frontend Mentor",
-        "svgSource": "/svgs/frontendmentor.svg",
-        "svgAltText": "Frontend Mentor Logo",
-        "description": "Collection of challenges I completed for Frontend Mentor",
-        "difficulty": [
-            {
-                "title": "Newbie",
-                "challenges": [
-                    {
-                        "title": "Order Summary Card Component",
-                        "url": "/FrontendMentor/newbie/order-summary-component/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-order-summary-component.png",
-                        "screenshotAltText": "Order Summary Component Challenge from FrontendMentor"
-                    },
-                    {
-                        "title": "Profile Card Component",
-                        "url": "/FrontendMentor/newbie/profile-card-component/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg",
-                        "screenshotAltText": "Profile Card Component Challenge from FrontendMentor"
-                    },
-                    {
-                        "title": "Stats Preview Card Component",
-                        "url": "/FrontendMentor/newbie/stats-preview-card-component/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg",
-                        "screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor"
-                    },
-                    {
-                        "title": "Article Preview Component",
-                        "url": "/FrontendMentor/newbie/article-preview-component/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg",
-                        "screenshotAltText": "Article Preview Component Challenge from FrontendMentor"
-                    },
-                    {
-                        "title": "Four Card Feature Section",
-                        "url": "/FrontendMentor/newbie/four-card-feature-section/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg",
-                        "screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor"
-                    },
-                    {
-                        "title": "Single Price Grid Component",
-                        "url": "/FrontendMentor/newbie/single-price-grid-component-master/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg",
-                        "screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor"
-                    },
-                    {
-                        "title": "Ping Coming-Soon",
-                        "url": "/FrontendMentor/newbie/ping-coming-soon-page-master/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3",
-                            "js"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg",
-                        "screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor"
-                    },
-                    {
-                        "title": "The Huddle Landing Page",
-                        "url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/",
-                        "description": "",
-                        "techUsed": [
-                            "html5",
-                            "css3",
-                            "js"
-                        ],
-                        "screenshotURL": "/screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png",
-                        "screenshotAltText": "The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section."
-                    }
-                ]
-            },
-            {
-                "title": "Junior",
-                "challenges": []
-            },
-            {
-                "title": "Intermediate",
-                "challenges": []
-            },
-            {
-                "title": "Advanced",
-                "challenges": []
-            },
-            {
-                "title": "Guru",
-                "challenges": []
-            }
-        ]
-    }
+    "services": [
+        {
+            "name": "Frontend Mentor",
+            "svgSource": "/svgs/frontendmentor.svg",
+            "svgAltText": "Frontend Mentor Logo",
+            "description": "Collection of challenges I completed for Frontend Mentor",
+            "cssClass": "",
+            "difficulty": [
+                {
+                    "title": "Newbie",
+                    "cssClass": "frontEndMentorChallenges",
+                    "challenges": [
+                        {
+                            "title": "Order Summary Card Component",
+                            "url": "/FrontendMentor/newbie/order-summary-component/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-order-summary-component.png",
+                            "screenshotAltText": "Order Summary Component Challenge from FrontendMentor"
+                        },
+                        {
+                            "title": "Profile Card Component",
+                            "url": "/FrontendMentor/newbie/profile-card-component/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg",
+                            "screenshotAltText": "Profile Card Component Challenge from FrontendMentor"
+                        },
+                        {
+                            "title": "Stats Preview Card Component",
+                            "url": "/FrontendMentor/newbie/stats-preview-card-component/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg",
+                            "screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor"
+                        },
+                        {
+                            "title": "Article Preview Component",
+                            "url": "/FrontendMentor/newbie/article-preview-component/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg",
+                            "screenshotAltText": "Article Preview Component Challenge from FrontendMentor"
+                        },
+                        {
+                            "title": "Four Card Feature Section",
+                            "url": "/FrontendMentor/newbie/four-card-feature-section/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg",
+                            "screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor"
+                        },
+                        {
+                            "title": "Single Price Grid Component",
+                            "url": "/FrontendMentor/newbie/single-price-grid-component-master/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg",
+                            "screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor"
+                        },
+                        {
+                            "title": "Ping Coming-Soon",
+                            "url": "/FrontendMentor/newbie/ping-coming-soon-page-master/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3",
+                                "js"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg",
+                            "screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor"
+                        },
+                        {
+                            "title": "The Huddle Landing Page",
+                            "url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3",
+                                "js"
+                            ],
+                            "screenshotURL": "/screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png",
+                            "screenshotAltText": "The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section."
+                        }
+                    ]
+                },
+                {
+                    "title": "Junior",
+                    "cssClass": "frontEndMentorChallenges",
+                    "challenges": []
+                },
+                {
+                    "title": "Intermediate",
+                    "cssClass": "frontEndMentorChallenges",
+                    "challenges": []
+                },
+                {
+                    "title": "Advanced",
+                    "cssClass": "frontEndMentorChallenges",
+                    "challenges": []
+                },
+                {
+                    "title": "Guru",
+                    "cssClass": "frontEndMentorChallenges",
+                    "challenges": []
+                }
+            ]
+        },
+        {
+            "name": "Freecodecamp",
+            "svgSource": "/svgs/freecodecamp.svg",
+            "svgAltText": "Freecodecamp Logo",
+            "description": "Collection of challenges I completed while doing Freecodecamp",
+            "cssClass": "",
+            "difficulty": [
+                {
+                    "title": "Responsive Web Design Projects",
+                    "description": "Note: As of 11 Oct 2020, these require a partial rework to look good on mobile. 1-3 where written much earlier in my learning, so while they fufill all the requirements, they don't look great on mobile.",
+                    "cssClass": "responsiveProjects",
+                    "challenges": [
+                        {
+                            "title": "Project 1 - Tribute Page",
+                            "url": "/freeCodeCamp/responsive-web-design-projects/Project1-TributePage/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fcc-web-Project1-TributePage.jpeg",
+                            "screenshotAltText": "Project 1 - Tribute Page"
+                        },
+                        {
+                            "title": "Project 2 - Build A Survey Form",
+                            "url": "/freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg",
+                            "screenshotAltText": "Project 2 - Build A Survey Form"
+                        },
+                        {
+                            "title": "Project 3 - Product Landing Page",
+                            "url": "/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/",
+                            "description": "",
+                            "techUsed": [
+                                "html5",
+                                "css3"
+                            ],
+                            "screenshotURL": "/screenshots/fcc-web-Project3-ProductLandingPage.jpeg",
+                            "screenshotAltText": "Project 3 - Product Landing Page"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "The Complete 2022 Web Development Bootcamp",
+            "svgSource": "/svgs/udemy.svg",
+            "svgAltText": "Udemy Logo",
+            "description": "Coming Soon™",
+            "cssClass": "",
+            "difficulty": [
+                {
+                    "title": "",
+                    "description": "",
+                    "cssClass": "",
+                    "challenges": []
+                }
+            ]
+        },
+        {
+            "name": "JavaScript Projects",
+            "svgSource": "/svgs/javascript.svg",
+            "svgAltText": "JavaScript",
+            "description": "Various JavaScript projects I've completed",
+            "cssClass": "",
+            "difficulty": [
+                {
+                    "title": "",
+                    "description": "",
+                    "cssClass": "",
+                    "challenges": []
+                }
+            ]
+        }
+    ]
 }
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index fb0176d..dfcb3eb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -87,6 +87,7 @@ body {
 .responsiveProjects > h3 {
     font-weight: 600;
     font-size: 1.3rem;
+    margin-bottom: 0.5rem;
 }
 
 /* .freecodeCampProjects {} */
diff --git a/src/index.njk b/src/index.njk
index 1ace4dc..759ee5a 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -22,137 +22,44 @@ cssReset: true
     <p>Robert McGovern</p>
 </div>
 
-<div class="projectsDiv">
-    <div class="alignedHeader">
-        <h2 class="projectsSection__title">{{webprojects.frontendMentor.serviceName}}</h2>
-        <img src="{{webprojects.frontendMentor.svgSource}}" alt="{{webprojects.frontendMentor.svgAltText}}"/>
-    </div>
-    <p>{{webprojects.frontendMentor.description}}</p>
-
-    {% for difficultyLevel in webprojects.frontendMentor.difficulty %}
-        {% if difficultyLevel.challenges | length %}
-            <div class="frontEndMentorChallenges">
-                <h3>{{difficultyLevel.title}} Challenges</h3>
-
-                <div class="projects-grid">
-
-                    {% for challenge in difficultyLevel.challenges %}
-
-                        {% set projectContent = challenge %}
-                        {% include "components/project.njk" %}
-                    {% endfor %}
-                </div>
-            </div>
-
-        {% endif %}
-    {% endfor %}
-</div>
-
-<div class="projectsDiv">
-    <div class="alignedHeader">
-        <h2 class="projectsSection__title">Freecodecamp</h2>
-        <img src="/svgs/freecodecamp.svg" alt="Freecodecamp"/>
-    </div>
-    <div class="responsiveProjects">
-        <h3>Responsive Web Design Projects</h3>
-        <p>
-            Note: As of 11 Oct 2020, these require a partial rework
-            to look good on mobile. 1-3 where written much earlier
-            in my learning, so while they fufill all the
-            requirements, they don't look great on mobile.
-        </p>
-        <div class="projects-grid">
-            <div class="project-card stacked">
-                <a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">
-                    <img class="card__img" src="/screenshots/fcc-web-Project1-TributePage.jpeg"
-                        alt="Project 1 - Tribute Page"/>
-                </a>
-                <div class="card__content">
-                    <h3 class="card__title">
-                        Project 1 - Tribute Page
-                    </h3>
-                    <!-- <p class="card__description">
-                        Lorem ipsum dolor sit amet consectetur
-                        adipisicing elit.
-                    </p> -->
-                    <ul class="card__techUsed">
-                        <li>
-                            <img src="/svgs/html5.svg" alt="HTML5"/>
-                        </li>
-                        <li>
-                            <img src="/svgs/css3.svg" alt="CSS3"/>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="project-card stacked">
-                <a href="/freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">
-                    <img class="card__img" src="/screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg"
-                        alt="Project 2 - Build A Survey Form"/>
-                </a>
-                <div class="card__content">
-                    <h3 class="card__title">
-                        Project 2 - Build A Survey Form
-                    </h3>
-                    <!-- <p class="card__description">
-                        Lorem ipsum dolor sit amet consectetur
-                        adipisicing elit.
-                    </p> -->
-                    <ul class="card__techUsed">
-                        <li>
-                            <img src="/svgs/html5.svg" alt="HTML5"/>
-                        </li>
-                        <li>
-                            <img src="/svgs/css3.svg" alt="CSS3"/>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="project-card stacked">
-                <a href="/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">
-                    <img class="card__img" src="/screenshots/fcc-web-Project3-ProductLandingPage.jpeg"
-                        alt="Project 3 - Product Landing Page"/>
-                </a>
-                <div class="card__content">
-                    <h3 class="card__title">
-                        Project 3 - Product Landing Page
-                    </h3>
-                    <!-- <p class="card__description">
-                        Lorem ipsum dolor sit amet consectetur
-                        adipisicing elit.
-                    </p> -->
-                    <ul class="card__techUsed">
-                        <li>
-                            <img src="/svgs/html5.svg" alt="HTML5"/>
-                        </li>
-                        <li>
-                            <img src="/svgs/css3.svg" alt="CSS3"/>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+{% for service in webprojects.services %}
+    <div class="projectsDiv {{service.cssClass}}">
+        <div class="alignedHeader">
+            <h2 class="projectsSection__title">{{service.name}}</h2>
+            {% if service.svgSource%}
+                <img src="{{service.svgSource}}" alt="{{service.svgAltText}}"/>
+            {% endif %}
         </div>
+        {% if service.description%}
+            <p>{{service.description}}</p>
+        {% endif %}
+
+        {% for difficultyLevel in service.difficulty %}
+            {% if difficultyLevel.challenges | length %}
+                <div class="{{difficultyLevel.cssClass}}">
+                    {% if difficultyLevel.title%}
+                        <h3>{{difficultyLevel.title}} Challenges</h3>
+                    {% endif %}
+                    {% if difficultyLevel.description%}
+                        <p>{{difficultyLevel.description}}</p>
+                    {% endif %}
+                    <div class="projects-grid">
+                        {% for challenge in difficultyLevel.challenges %}
+                            {% set projectContent = challenge %}
+                            {% include "components/project.njk" %}
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+        {% endfor %}
     </div>
-</div>
+{% endfor %}
 
 <div class="projectsDiv">
-
     <div class="alignedHeader">
-        <h2 class="projectsSection__title">
-            The Complete 2022 Web Development Bootcamp
-        </h2>
-        <img src="/svgs/udemy.svg" alt="The Complete 2022 Web Development Bootcamp Udemy Course"/>
+        <h2 class="projectsSection__title">Playground</h2>
+        <img style="width: 10%;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora"/>
     </div>
-    <p>coming soon</p>
-</div>
-
-<div class="projectsDiv">
-    <h2 class="projectsSection__title">Vanilla JS Projects</h2>
-    <p>coming soon</p>
-</div>
-
-<div class="projectsDiv">
-    <h2 class="projectsSection__title">Playground</h2>
     <p>
         Intended for just little snippets of code that look useful
     </p>