Updated Program Areas page so projects are dynamically rendered (#3593)

* Testing logic of if statement

Hide project data to show only mini cards and information.

* Create loop for program-area in md files

* Remove comment for self

_projects/guides-team.md

@@ -36,7 +36,7 @@ location:
   - Remote
 partner:
 tools: 
-program area:
+program-area:
   - Civic Tech Infrastructure
 status: Active
 # If the card should not be included on the site, change visible to "false"

pages/program-areas.html

@@ -18,7 +18,7 @@ <h1 class="title1">Program Areas</h1>
 <section class="content-section content--program-areas">
     {% assign sorted_program_areas = site.data.internal.program-areas | sort %}
     {% for program_areas in sorted_program_areas %}
-    {% if program_areas[1].size > 0 %}
+    {% if program_areas[1].size > 0 %} 
     <div class="page-card card-primary page-card-lg page-card-container">
         <div class="page-card-image-container">
             <img class="page-card-image" src="{{ program_areas[1].image }}" alt="{{ program_areas[1].image_alt }}" />
@@ -39,11 +39,15 @@ <h2 class="title4">{{program_areas[1].name}}</h2>
                 {% endif %}<br>
             </p>
             <ul class="project-card-mini-list-alignment">
-                {% for project in program_areas[1].projects%}
-                <li class="project-card-mini inline-list" id="{{project.id}}">
+                {% for project in site.projects %}
+                {% for project_program in project.program-area %}
+                {% if program_areas[1].program-area == project_program %}
+                <li class="project-card-mini inline-list" id="{{project.identification}}">
                     <img class="project-card-mini-image" src="{{project.image}}" alt="{{project.image_alt}}" />
-                    <a class="project-card-mini-title" href="{{project.link}}">{{project.name}}</a>
+                    <a class="project-card-mini-title" href="{{project.links[0].url}}">{{project.title}}</a>
                 </li>
+                {% endif %}
+                {% endfor %}
                 {% endfor %}
                 <!--Spacer li are used to center the project card mini on mobile-->
                 <li class="project-card-mini-spacer"></li>