Project pages now auto-generated with jekyll data.

Gemfile

@@ -1,2 +1,3 @@
 source "https://rubygems.org"
 gem "jekyll", "~> 4.3"
+gem "jekyll-datapage-generator"

Gemfile.lock

@@ -31,6 +31,7 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
+    jekyll-datapage-generator (1.4.0)
     jekyll-sass-converter (3.0.0)
       sass-embedded (~> 1.54)
     jekyll-watch (2.2.1)
@@ -65,6 +66,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll (~> 4.3)
+  jekyll-datapage-generator
 
 BUNDLED WITH
    2.4.2

_config.yml

@@ -0,0 +1,11 @@
+plugins:
+  - jekyll-datapage-generator
+
+page_gen:
+- data: work
+  template: experience
+  dir: experience
+  index_files: false
+  name: id
+  title: title
+  page_data_prefix: data

_data/techs.yml

@@ -0,0 +1,47 @@
+html:
+  name: HTML
+  fore: white
+  back: orangered
+  link: https://html.spec.whatwg.org/multipage/
+
+css:
+  name: CSS
+  fore: white
+  back: royalblue
+  link: https://www.w3.org/Style/CSS/Overview.en.html
+
+js:
+  name: JavaScript
+  fore: darkslategray
+  back: gold
+  link: https://en.wikipedia.org/wiki/JavaScript
+
+php:
+  name: PHP
+  fore: black
+  back: lightsteelblue
+  link: https://www.php.net
+
+docker:
+  name: Docker
+  fore: dodgerblue
+  back: white
+  link: https://www.docker.com
+
+azure:
+  name: Azure
+  fore: whitesmoke
+  back: steelblue
+  link: https://azure.microsoft.com/en-us/
+
+mariadb:
+  name: MariaDB
+  fore: black
+  back: peru
+  link: https://mariadb.org
+
+react:
+  name: React
+  fore: cyan
+  back: black
+  link: https://reactjs.org

_data/work.yml

@@ -1,12 +1,11 @@
 malung:
-  title:
+  id: malung
-    Example
+  title: Example
-
+  subtitle: Just A Test
-  subtitle:
+  stack: [ html, css, js, php, docker, mariadb, azure ]
-    Just A Test
+  image: /res/avatar.svg
-  
+  link: /
-  stack:
+  color: yellow
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
 
   description:
     Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -25,26 +24,16 @@ malung:
     - It has survived not only five centuries, but also the leap into electronic
       typesetting, remaining essentially unchanged.
 
-  image:
-    /res/avatar.svg
-  
-  link:
-    /
-
-  color:
-    yellow
-
 #*----------------------------------------------------------------------------*#
 
 freshmanual:
-  title:
+  id: freshmanual
-    Example
+  title: Example
-
+  subtitle: Just A Test
-  subtitle:
+  stack: [ html, css, js, php, docker, mariadb, azure ]
-    Just A Test
+  image: /res/avatar.svg
-  
+  link: /
-  stack:
+  color: blue
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
 
   description:
     Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -63,26 +52,16 @@ freshmanual:
     - It has survived not only five centuries, but also the leap into electronic
       typesetting, remaining essentially unchanged.
 
-  image:
-    /res/avatar.svg
-  
-  link:
-    /
-  
-  color:
-    blue
-
 #*----------------------------------------------------------------------------*#
 
 pollbuddy:
-  title:
+  id: pollbuddy
-    Example
+  title: Example
-
+  subtitle: Just A Test
-  subtitle:
+  stack: [ html, css, js, php, docker, mariadb, azure ]
-    Just A Test
+  image: /res/avatar.svg
-  
+  link: /
-  stack:
+  color: green
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
 
   description:
     Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -101,26 +80,16 @@ pollbuddy:
     - It has survived not only five centuries, but also the leap into electronic
       typesetting, remaining essentially unchanged.
 
-  image:
-    /res/avatar.svg
-  
-  link:
-    /
-  
-  color:
-    green
-
 #*----------------------------------------------------------------------------*#
 
 rpi-crisis:
-  title:
+  id: rpi-crisis
-    Example
+  title: Example
-
+  subtitle: Just A Test
-  subtitle:
+  stack: [ html, css, js, php, docker, mariadb, azure ]
-    Just A Test
+  image: /res/avatar.svg
-  
+  link: /
-  stack:
+  color: red
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
 
   description:
     Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -139,13 +108,4 @@ rpi-crisis:
     - It has survived not only five centuries, but also the leap into electronic
       typesetting, remaining essentially unchanged.
 
-  image:
-    /res/avatar.svg
-  
-  link:
-    /
-  
-  color:
-    red
-
 #*----------------------------------------------------------------------------*#

_layouts/default.html

@@ -25,7 +25,7 @@
 
     {{ content }}
 
-    <div class="flex dark back"></div>
+    <div class="flex dark back npad"></div>
 
     {% include footer.html %}
   </body>

_layouts/experience.html

@@ -0,0 +1,45 @@
+---
+title: Example
+layout: default
+---
+
+{% assign malung = site.data.work[page.data.id] %}
+{% assign techs = site.data.techs %}
+
+<link rel="stylesheet" href="/styles/experience.css">
+<link rel="stylesheet" href="/styles/tech.css">
+
+<section id="experience" class="dark back">
+  <section id="banner" class="{{malung.color}} back">
+    <div>
+      <h1>{{malung.title}}</h1>
+      <i>{{malung.subtitle}}</i>
+    </div>
+    <button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
+  </section>
+  <div id="content">
+    <div id="description">
+      <p>
+        {{malung.description}}
+      </p>
+      <hr class="lighter">
+      <ul>
+        {% for outcome in malung.outcomes %}
+          <li>{{outcome}}</li>
+        {% endfor %}
+      </ul>
+      <a href="/404" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View Example</a>
+    </div>
+    <div id="image-side">
+      <div id="image" class="shadow">
+          <h1>Image Not Available</h1>
+      </div>
+      <div id="stack">
+        {% for tech in malung.stack %}
+          {% assign data = techs[tech] %}
+          <a class="chip {{tech}} shadow" href="{{data.link}}" target="_blank">{{data.name}}</a>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>

experience/malung.html

@@ -1,46 +0,0 @@
----
-title: Example
-description: A description of Maxim Voldman Hutz's work on Example.
-layout: default
----
-
-<link rel="stylesheet" href="/styles/experience.css">
-
-<section id="experience" class="dark back">
-  <section id="banner" class="yellow back">
-    <div>
-      <h1>Example</h1>
-      <i>Just A Test</i>
-    </div>
-    <button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
-  </section>
-  <div id="content">
-    <div id="description">
-      <p>
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-        Lorem Ipsum has been the industry's standard dummy text ever since the
-        1500s, when an unknown printer took a galley of type and scrambled it to
-        make a type specimen book.
-      </p>
-      <hr class="lighter">
-      <ul>
-        <li>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-        </li>
-        <li>
-          Lorem Ipsum has been the industry's standard dummy text ever since the
-          1500s, when an unknown printer took a galley of type and scrambled it to
-          make a type specimen book.
-        </li>
-        <li>
-          It has survived not only five centuries, but also the leap into electronic
-          typesetting, remaining essentially unchanged.
-        </li>
-      </ul>
-      <a href="/404" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View Example</a>
-    </div>
-    <div id="image" class="shadow">
-
-    </div>
-  </div>
-</section>

styles/404.css

@@ -1,6 +1,6 @@
 #notfound {
   --color: var(--dark) linear-gradient(#0000, #0003);
-  flex: 1;
+  flex: 99999999999999;
   display: flex;
   justify-content: center;
   align-items: center;

styles/default.css

@@ -171,7 +171,7 @@ nav {
 /*----------------------------------------------------------------------------*/
 
 #projects {
-  padding: 30px auto;
+  padding: 30px 0;
   position: relative;
   display: flex;
   flex-direction: column;

styles/experience.css

@@ -13,6 +13,12 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  text-align: justify;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  -o-hyphens: auto;
+  hyphens: auto;
 }
 
 #content {
@@ -20,14 +26,14 @@
   flex-wrap: wrap-reverse;
   align-items: flex-end;
   gap: 30px;
+  padding-bottom: 30px;
 }
 
 #image {
-  flex: 1;
   background-color: #ccc;
   border-radius: 10px;
   height: 300px;
-  min-width: min(500px, 100%);
+  width: 100%;
 }
 
 #description {
@@ -38,3 +44,27 @@
   align-items: flex-start;
   min-width: min(300px, 100%);
 }
+
+#image-side {
+  flex: 1;
+  gap: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: min(500px, 100%);
+}
+
+#stack {
+  display: flex;
+  gap: 20px;
+  flex-flow: row wrap;
+}
+
+#stack .chip {
+  flex: 1;
+}
+
+#stack::after {
+  content: "";
+  flex: 1000000;
+}

styles/global.css

@@ -31,8 +31,9 @@
 .white { --color: white }
 
 .flex-space, .flex, br { flex-grow: 1 }
-.flex.dark { background-color: var(--dark); }
+.flex.dark { background-color: var(--dark) }
 .space { flex: 1000 }
+.npad { padding: 0 !important }
 
 /*----------------------------------------------------------------------------*/
 

styles/tech.css

@@ -0,0 +1,24 @@
+---
+---
+
+.chip {
+  font-size: 15px;
+  font-family: "Open Sans";
+  font-weight: 900;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 20px;
+  border-radius: 10px;
+  text-decoration: none;
+}
+
+{% for tech in site.data.techs %}
+  {% assign id = tech[0] %}
+  {% assign data = tech[1] %}
+
+  .chip.{{id}} {
+    background-color: {{data.back}};
+    color: {{data.fore}};
+  }
+{% endfor %}