making project card

_data/projects-cards-data.yml

@@ -0,0 +1,17 @@
+- image: /_pages/projects/roboticArm/RoboticArm.jpg
+  title: Full-Stack Robotic Arm Design; Software, Mechanical, and Electronics Integration
+  tags:
+    - MECH
+    - CS
+    - ELEC
+    - AI
+  excerpt: Short project description 1
+  url: /roboticArm/
+
+- image: /path/to/project2-image.jpg
+  title: Project 2
+  tags:
+    - Tech Tag 3
+    - Tech Tag 4
+  excerpt: Short project description 2
+  url: /projects/project2.html

_includes/project/project-card.html

@@ -0,0 +1,17 @@
+<div class="project-card">
+    <div style=" display: flex; justify-content: space-between;">
+        <div class="project-image-container" style="max-width: 30%; overflow: hidden; margin-right: 20px;">
+            <img src="{{ project.image }}" alt="{{ project.title }}" class="project-image"
+                style="max-width: 100%; height: auto;">
+        </div>
+        <div class="project-details" style="width: 70%;">
+            <h3 class="project-title">{{ project.title }}</h3>
+            <ul class="tech-tags">
+                {% for tag in project.tags %}
+                <li>{{ tag }}</li>
+                {% endfor %}
+            </ul>
+            <p class="excerpt">{{ project.excerpt }}</p>
+        </div>
+    </div>
+</div>

_layouts/project-details.html

@@ -0,0 +1,3 @@
+<a href="{{ project.url }}" class="project-link">
+    <!-- project card content here -->
+</a>

_pages/projects/mainProjects.md

@@ -1,10 +1,16 @@
 ---
 layout: splash
 title: "Projects"
-permalink: /Projects/
+permalink: /projects/
 header:
   overlay_color: "#000"
   overlay_filter: "0.5"
   overlay_image: /assets/images/projects/projectsHeader.jpg
 excerpt: Discover my diverse skillset in computer science, AI, robotics, mechanics, and electronics.
----
+---
+
+<div class="project-catalog">
+    {% for project in site.data.projects-cards-data %}
+        {% include project/project-card.html %}
+    {% endfor %}
+</div>

_pages/projects/roboticArm/roboticArm.md

@@ -0,0 +1,5 @@
+---
+layout: splash
+title: "Robtic Arm"
+permalink: /roboticArm/
+---

index.md

@@ -11,7 +11,7 @@ feature_row01:
   - image_path: /assets/images/projects/projectsHeader.jpg
     title: "Projects"
     excerpt: "checkoout more projects here"
-    url: /_pages/projects/mainProjects.md
+    url: /projects/
     btn_label: "Read More"
     btn_class: "btn--primary"
   - image_path: /assets/images/skillset/skillsetHeader.jpeg
@@ -32,7 +32,7 @@ feature_row01:
     <img src="/assets/images/mainPage/Portrait.jpg" alt="Profile Picture" width="400" height="400" style="float: left; margin-right: 20px;">
   </div>
   <div style="width: 70%;">
-  <h2>About me</h2>
+    <h2>About me</h2>
     <p style="text-align: left;">
       Hello, I am Garmisch, I consider myself an inventor and problem solver. I love solving real-world problems by appropriately applying technology. On my quest to be better equipped in the tech field, I have chosen to major in Integrative Systems and Design, with an extended major in Artificial Intelligence and a minor in Robotics at Hong Kong University of Science and Technology.