FIX: Only ready work in documented. Images added, view ubtton optional.

_config.yml

@@ -8,4 +8,5 @@ page_gen:
   index_files: false
   name: id
   title: title
-  page_data_prefix: data
+  page_data_prefix: data
+  filter: ready

_data/techs.yml

@@ -1,47 +1,47 @@
 html:
   name: HTML
-  fore: white
+  fore: '#FFFFFF'
-  back: orangered
+  back: '#E44D26'
   link: https://html.spec.whatwg.org/multipage/
 
 css:
   name: CSS
-  fore: white
+  fore: '#FFFFFF'
-  back: royalblue
+  back: '#2965F1'
   link: https://www.w3.org/Style/CSS/Overview.en.html
 
 js:
   name: JavaScript
-  fore: darkslategray
+  fore: '#323330'
-  back: gold
+  back: '#F0DB4F'
   link: https://en.wikipedia.org/wiki/JavaScript
 
 php:
   name: PHP
-  fore: black
+  fore: '#242434'
-  back: lightsteelblue
+  back: '#8B93BB'
   link: https://www.php.net
 
 docker:
   name: Docker
-  fore: dodgerblue
+  fore: '#2494EC'
-  back: white
+  back: '#FFFFFF'
   link: https://www.docker.com
 
 azure:
   name: Azure
-  fore: whitesmoke
+  fore: '#EEEEEE'
-  back: steelblue
+  back: '#0962B0'
   link: https://azure.microsoft.com/en-us/
 
 mariadb:
   name: MariaDB
-  fore: black
+  fore: '#1C335C'
-  back: peru
+  back: '#C4745C'
   link: https://mariadb.org
 
 react:
   name: React
-  fore: cyan
+  fore: '#04D8F8'
-  back: black
+  back: '#242323'
   link: https://reactjs.org

_data/work.yml

@@ -1,12 +1,14 @@
 malung:
   id: malung
-  title: Example
+  title: Malung
-  subtitle: Just A Test
+  subtitle: COVID-19 Classifier
   stack: [ html, css, js, php, docker, mariadb, azure ]
   image: /res/avatar.svg
-  link: /
+  link: /404
   color: yellow
 
+  ready: true
+
   description:
     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
@@ -28,13 +30,15 @@ malung:
 
 freshmanual:
   id: freshmanual
-  title: Example
+  title: FreshManual
-  subtitle: Just A Test
+  subtitle: Mobile App
   stack: [ html, css, js, php, docker, mariadb, azure ]
   image: /res/avatar.svg
-  link: /
+  link: /404
   color: blue
 
+  ready: false
+
   description:
     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
@@ -56,13 +60,14 @@ freshmanual:
 
 pollbuddy:
   id: pollbuddy
-  title: Example
+  title: Poll Buddy
-  subtitle: Just A Test
   stack: [ html, css, js, php, docker, mariadb, azure ]
   image: /res/avatar.svg
-  link: /
+  link: /404
   color: green
 
+  ready: false
+
   description:
     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
@@ -84,13 +89,14 @@ pollbuddy:
 
 rpi-crisis:
   id: rpi-crisis
-  title: Example
+  title: CRISIS
-  subtitle: Just A Test
   stack: [ html, css, js, php, docker, mariadb, azure ]
   image: /res/avatar.svg
-  link: /
+  link: /404
   color: red
 
+  ready: false
+
   description:
     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

_layouts/experience.html

@@ -28,11 +28,17 @@ layout: default
           <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>
+      {% if malung.link %}
+        <a href="{{malung.link}}" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View {{malung.title}}</a>
+      {% endif %}
     </div>
     <div id="image-side">
       <div id="image" class="shadow">
-          <h1>Image Not Available</h1>
+        {% if malung.image %}
+          <img id="image-inner" src="{{malung.image}}" alt="Image of {{malung.title}}">
+        {% else %}
+          <h1 aria-hidden>Image Not Available</h1>
+        {% endif %}
       </div>
       <div id="stack">
         {% for tech in malung.stack %}

experiences.html

@@ -15,7 +15,14 @@ layout: default
 
       <a class="{{ data.color }} project-item shadow" href="/experience/{{ id }}">
         <div class="space"></div>
-        <div class="nav-link project-link r-icon" data-i="arrow_right">{{ data.title }}: {{ data.subtitle }}
+        <div class="nav-link project-link r-icon" data-i="arrow_right">
+          {{ data.title }}
+          <!-- Add the subtitle, if it exists. -->
+          {% if data.subtitle %}
+            <span>:</span>
+            &nbsp;
+            <p>{{ data.subtitle }}</p>
+          {% endif %}
         </div>
       </a>
     {% endfor %}

index.html

@@ -32,7 +32,14 @@ layout: default
     {% for project in home.featured %}
       <a class="{{ work[project].color }} project-item shadow" href="/experience/{{ project }}">
         <div class="space"></div>
-        <div class="nav-link project-link r-icon" data-i="arrow_right">{{ work[project].title }}: {{ work[project].subtitle }}
+        <div class="nav-link project-link r-icon" data-i="arrow_right">
+          {{ work[project].title }}
+          <!-- Add the subtitle, if it exists. -->
+          {% if work[project].subtitle %}
+            <span>:</span>
+            &nbsp;
+            <p>{{ work[project].subtitle }}</p>
+          {% endif %}
         </div>
       </a>
     {% endfor %}

styles/experience.css

@@ -34,6 +34,11 @@
   border-radius: 10px;
   height: 300px;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+  position: relative;
 }
 
 #description {
@@ -67,4 +72,9 @@
 #stack::after {
   content: "";
   flex: 1000000;
+}
+
+#image-inner {
+  max-width: 100%;
+  max-height: 100%;
 }