Project 3: Portfolio: Displaying projects in the portfolio (+132, -1)

            
                
            
            index dd0dc35..0488446 100644
--- a/curriculum/section12/lectures/08_display_projects_in_homepage/start/portfolio/__init__.py
+++ b/curriculum/section12/lectures/08_display_projects_in_homepage/end/portfolio/__init__.py
@@ -1,11 +1,35 @@
 from flask import Flask, render_template
 
 app = Flask(__name__)
+projects = [
+    {
+        "name": "Habit tracking app with Python and MongoDB",
+        "thumb": "img/habit-tracking.png",
+        "hero": "img/habit-tracking-hero.png",
+        "categories": ["python", "web"],
+        "slug": "habit-tracking",
+        "prod": "https://udemy.com",
+    },
+    {
+        "name": "Personal finance tracking app with React",
+        "thumb": "img/personal-finance.png",
+        "hero": "img/personal-finance.png",
+        "categories": ["react", "javascript"],
+        "slug": "personal-finance",
+    },
+    {
+        "name": "REST API Documentation with Postman and Swagger",
+        "thumb": "img/rest-api-docs.png",
+        "hero": "img/rest-api-docs.png",
+        "categories": ["writing"],
+        "slug": "api-docs",
+    },
+]
 
 
 @app.route("/")
 def home():
-    return render_template("home.html")
+    return render_template("home.html", projects=projects)
 
 
 @app.route("/about")
        

            
                
            
            index a9cf8e9..eca1d2f 100644
--- a/curriculum/section12/lectures/08_display_projects_in_homepage/start/portfolio/static/css/styles.css
+++ b/curriculum/section12/lectures/08_display_projects_in_homepage/end/portfolio/static/css/styles.css
@@ -78,3 +78,82 @@ body {
 .contact__link:hover {
   color: #4cafda;
 }
+
+.projects {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-column-gap: 1.25rem;
+  justify-content: center;
+  justify-items: center;
+  max-width: 21.875rem;
+  margin: 0 auto;
+}
+
+@media (min-width: 48.75em) {
+  .projects {
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 45rem;
+  }
+}
+
+@media (min-width: 70em) {
+  .projects {
+    grid-template-columns: repeat(3, 1fr);
+    max-width: 68rem;
+  }
+}
+
+.project-card {
+  padding: 0.75rem 0;
+}
+
+.project-card__image {
+  max-width: 100%;
+  margin-bottom: 1rem;
+  transition: transform 0.2s ease-in-out;
+}
+
+.project-card__meta {
+  padding: 0 1.25rem;
+}
+
+.project-card__name {
+  margin: 0;
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+  color: #1c2023;
+}
+
+.project-card:hover .project-card__image {
+  transform: translateY(-0.5rem);
+}
+
+.project-card:hover .project-card__name {
+  text-decoration: underline;
+}
+
+.categories {
+  display: flex;
+  padding: 0;
+  margin: 0 0 0.75rem;
+  color: #3d84a3;
+  list-style: none;
+  line-height: 1.45;
+  text-transform: uppercase;
+  font-size: 1.1rem;
+  letter-spacing: 0.075rem;
+}
+
+/* Adds an ::after pseudo-element to each category tag, except the last one.
+   This psuedo-element contains a pipe character (|), which acts as a seperator
+   between the tags. */
+
+.categories__tag:not(:last-of-type)::after {
+  content: "|";
+  margin: 0 0.25rem;
+}
+
+/* Utility class to remove link styles */
+.u-bare-link {
+  text-decoration: none;
+}
        

            
                
            
            index e69de29..618d226 100644
--- a/curriculum/section12/lectures/08_display_projects_in_homepage/start/portfolio/templates/home.html
+++ b/curriculum/section12/lectures/08_display_projects_in_homepage/end/portfolio/templates/home.html
@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+{% block content %}
+    <main class="main main--home">
+        <section class="projects">
+            {% for project in projects %}
+                <a class="u-bare-link" href="#">
+                    <article class="project-card">
+                        <img
+                            class="project-card__image"
+                            src="{{ url_for('static', filename=project['thumb']) }}"
+                            alt="{{ project['name'] }} hero image"
+                        />
+
+                        <header class="project-card__meta">
+                            <ul class="categories">
+                                {% for category in project["categories"] %}
+                                    <li class="categories__tag">{{ category}}</li>
+                                {% endfor %}
+                            </ul>
+
+                            <h2 class="project-card__name">{{ project['name'] }}<h2/>
+                        </header>
+                    </article>
+                </a>
+            {% endfor %}
+        </section>
+    </main>
+{% endblock %}