Created GitHub Project Layout with example (#3072)

![image](https://github.com/user-attachments/assets/ad479ba4-43d1-4829-8dff-5449d39af13b)

![image](https://github.com/user-attachments/assets/f2ac25ef-9789-4c1f-96d6-405ccd5f1252)

---------

Co-authored-by: M. Umar Shahbaz <[email protected]>

Author: MUmarShahbaz

_includes/head.liquid

@@ -121,6 +121,15 @@
   >
 {% endif %}
 
+<!-- GitHub Project Introduction Section -->
+{% if page.project_intro %}
+  <link
+    defer
+    rel="stylesheet"
+    href="{{ '/assets/css/project-intro.css' | relative_url | bust_file_cache }}"
+  >
+{% endif %}
+
 {% if page.images %}
   <!-- Image comparison slider -->
   {% if page.images.compare %}

_includes/project_intro.liquid

@@ -0,0 +1,29 @@
+<div class="Intro">
+  {% if include.img %}
+    <div class="Icon">
+      {% include figure.liquid path=include.img max-height="300px" max-width="300px" width="auto" %}
+    </div>
+  {% endif %}
+
+  <div class="Info">
+    <h1 class="Title">{{ include.title }}</h1>
+    <div class="TechIconsBox">
+      {% for icon in include.icons %}
+        <img
+          {% if icon.site %}
+            {% if icon.site == 'devicons' %}
+              src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{ icon.file }}"
+            {% elsif icon.site == 'skillicons' %}
+              src="https://skillicons.dev/icons?i={{ icon.file }}"
+            {% endif %}
+          {% else %}
+            src="{% if icon.file contains "https://" %}{{ icon.file }}{% else %}{{ icon.file | relative_url }}{% endif %}"
+          {% endif %}
+          width="auto"
+          height="40"
+        >
+      {% endfor %}
+    </div>
+    <p>{{ include.description }}</p>
+  </div>
+</div>

_layouts/page.liquid

@@ -10,8 +10,21 @@ layout: default
 
 <div class="post">
   <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
-    <p class="post-description">{{ page.description }}</p>
+    {% if page.project_intro %}
+      {% include project_intro.liquid img=page.img title=page.title icons=page.icons description=page.description %}
+      <hr>
+      {% if page.repository %}
+        <div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
+          {% for repo in page.repository %}
+            {% include repository/repo.liquid repository=repo %}
+          {% endfor %}
+        </div>
+        <hr>
+      {% endif %}
+    {% else %}
+      <h1 class="post-title">{{ page.title }}</h1>
+      <p class="post-description">{{ page.description }}</p>
+    {% endif %}
   </header>
 
   <article>

_projects/10_project.md

@@ -0,0 +1,51 @@
+---
+layout: page
+title: project 10
+description: A project with an introduction section
+img: assets/img/5.jpg
+importance: 5
+category: work
+project_intro: true
+icons:
+  - file: javascript/javascript-original.svg
+    site: devicons
+  - file: processing
+    site: skillicons
+  - file: https://www.espressif.com/sites/all/themes/espressif/images/logo-guidelines/primary-vertical-logo.png
+repository:
+  - alshedivat/al-folio
+---
+
+# Project Intros
+
+A simple way to efficiently display your github project, or any other project as well!
+
+To add a project intro just set `project_intro` to `true` in the front matter. Also add icons to display the tech-stacks used in the project. Finally add relevant repositories to be displayed right below the intro.
+
+```yml
+---
+project_intro: true
+icons:
+  - file: javascript/javascript-original.svg
+    site: devicons
+  - file: processing
+    site: skillicons
+  - file: https://www.espressif.com/sites/all/themes/espressif/images/logo-guidelines/primary-vertical-logo.png
+  repository:
+    - alshedivat/al-folio
+---
+```
+
+# Icons
+
+Adding more icons is very simple. `icon` is a list, and each item on the list has a `file` and a `site`. The `file` is the icon file which will be displayed, `site` is the directory from where this file will be displayed.
+
+However, using `site` is optional. If the item doesn't contain a value for site, al-folio will automatically detect and decide whether the link is an absolute URL to some icon on a different website, or a relative URL to an image inside the repository.
+
+Right now, the only eligible options for `site` is `devicons` and `skillicons`
+
+# Repository
+
+`repository` is also a list of all the repositories that can be displayed. Each item needs to be written in the following format: `owner/repository`.
+
+After this, al-folio will automatically generate a card with the proper theme. It will also create a link that will redirect viewers to the repository whenever they click the card.

assets/css/project-intro.css

@@ -0,0 +1,67 @@
+.Intro {
+  display: flex;
+  margin: 0 auto;
+}
+
+.Intro .Icon {
+  margin: auto;
+  padding-right: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Intro .Info {
+  width: 100%;
+}
+
+.Intro .Info .Title {
+  display: inline;
+}
+
+.Intro .Info .TechIconsBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  float: right;
+}
+
+.Intro .Info .Description {
+  margin-top: 20px;
+  text-align: left;
+}
+
+@media (max-width: 1000px) {
+  .Intro {
+    display: block;
+  }
+
+  .Intro .Icon {
+    padding-right: 0px;
+    margin: auto auto 20px auto;
+  }
+
+  .Intro .Info .Title {
+    display: block;
+    text-align: center;
+  }
+
+  .Intro .Info .TechIconsBox {
+    float: none;
+    margin: 20px 0;
+  }
+
+  .Intro .Info .Description {
+    margin-top: 50px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 500px) {
+  .Intro .Info .TechIconsBox {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+  }
+}