Add descriptions and icons to user portal sections

Author: fallow64

_data/user-portal-sections.yaml

@@ -3,13 +3,31 @@
   links:
   - text: HTC Guides
     url: http://localhost:4000/uw-research-computing/htc/guides.html
+    icon: "bi bi-book"
+    description: |
+      Step-by-step instructions for using HTC resources. Includes guides for
+      getting started, job submission, and using specific software.
   - text: HPC Guides
     url: http://localhost:4000/uw-research-computing/hpc/guides.html
-# - name: Independent Learning with Courses
-#   links:
-#   - text: Intro to HTC
-#     url: https://google.com
-#   - text: Course 2
-#     url: https://google.com
-#   - text: Course 3
-#     url: /user-portal/
+    icon: "bi bi-book"
+    description: |
+      Step-by-step instructions for using HPC resources. Includes guides for
+      getting started, job submission, and using specific software.
+- name: Independent Learning with Courses
+  links:
+  - text: Intro to HTC
+    url: https://google.com
+    icon: "bi bi-book"
+    description: |
+      A self-paced course through Canvas that introduces the basics of
+      high-throughput computing.
+  - text: Course 2
+    url: https://google.com
+    icon: "bi bi-book"
+    description: |
+      Course 2 description
+  - text: Course 3
+    url: /user-portal/
+    icon: "bi bi-book"
+    description: |
+      Course 3 description

_uw-research-computing/user-portal.html

@@ -14,15 +14,21 @@ <h2 class="m-0 text-light">
                             {{ section.name }}
                         </h2>
                     </div>
-                    <div class="row text-center text-dark">
+                    <div class="row text-dark">
                         {% for link in section.links %}
                             {% if section.large %}
-                            <div class="col-6 py-3" style="height: 12em;">
+                            <div class="col-6 py-3">
                             {% else %}
-                            <div class="col-4 py-3" style="height: 8em;">
+                            <div class="col-4 py-3">
                             {% endif %}
-                                <a href="{{ link.url }}" class="btn w-100 h-100 py-4 border rounded-3 d-flex align-items-center justify-content-center">
-                                    {{ link.text }}
+                                <a href="{{ link.url }}" class="btn w-100 h-100 py-4 border rounded-3">
+                                    <i class="{{ link.icon }}"></i>
+                                    <span style="font-size: 1.25rem;">
+                                        {{ link.text }}
+                                    </span>
+                                    <p style="font-size: 0.9rem; margin-top: 0.5rem; text-align: left;">
+                                        {{ link.description }}
+                                    </p>
                                 </a>
                             </div>
                         {% endfor %}