FIX: Image not available for project list.

FIX: Workflow to work with jekyll.
FIX: Description for projects now works.
2023-01-04 23:29:35 -05:00 · 2023-01-04 23:16:48 -05:00 · 2023-01-04 22:47:52 -05:00 · 2023-01-04 22:18:53 -05:00 · 2023-01-04 21:32:02 -05:00 · 2023-01-04 04:26:14 -05:00
15 changed files with 324 additions and 82 deletions
--- a/.github/workflows/prepare.yml
+++ b/.github/workflows/prepare.yml
@@ -28,7 +28,6 @@ jobs:
        run: |
          find . -name "*.js" -type f -exec terser {} -c -o {} \;
          find . -name "*.css" -type f -exec csso {} -o {} \;
-          find . -name "*.html" -type f -exec html-minifier --remove-comments --collapse-whitespace {} -o {} \;
      
      - name: "Commiting changes."
        run: |
--- a/3
+++ b/3
@@ -1,2 +1,3 @@
 source "https://rubygems.org"
-gem "jekyll", "~> 4.3"
+gem "jekyll", "~> 4.3"
+gem "jekyll-datapage-generator"
--- a/Gemfile.lock
+++ b/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
--- a/_config.yml
+++ b/_config.yml
@@ -0,0 +1,12 @@
+plugins:
+  - jekyll-datapage-generator
+
+page_gen:
+- data: work
+  template: experience
+  dir: experience
+  index_files: false
+  name: id
+  title: title
+  page_data_prefix: data
+  filter: ready
--- a/_data/techs.yml
+++ b/_data/techs.yml
@@ -0,0 +1,47 @@
+html:
+  name: HTML
+  fore: '#FFFFFF'
+  back: '#E44D26'
+  link: https://html.spec.whatwg.org/multipage/
+
+css:
+  name: CSS
+  fore: '#FFFFFF'
+  back: '#2965F1'
+  link: https://www.w3.org/Style/CSS/Overview.en.html
+
+js:
+  name: JavaScript
+  fore: '#323330'
+  back: '#F0DB4F'
+  link: https://en.wikipedia.org/wiki/JavaScript
+
+php:
+  name: PHP
+  fore: '#242434'
+  back: '#8B93BB'
+  link: https://www.php.net
+
+docker:
+  name: Docker
+  fore: '#2494EC'
+  back: '#FFFFFF'
+  link: https://www.docker.com
+
+azure:
+  name: Azure
+  fore: '#EEEEEE'
+  back: '#0962B0'
+  link: https://azure.microsoft.com/en-us/
+
+mariadb:
+  name: MariaDB
+  fore: '#1C335C'
+  back: '#C4745C'
+  link: https://mariadb.org
+
+react:
+  name: React
+  fore: '#04D8F8'
+  back: '#242323'
+  link: https://reactjs.org
--- a/_data/work.yml
+++ b/_data/work.yml
@@ -1,12 +1,12 @@
 malung:
-  title:
-    Example
+  id: malung
+  title: Malung
+  subtitle: COVID-19 Classifier
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  link: /404
+  color: yellow

-  subtitle:
-    Just A Test
-  
-  stack:
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+  ready: true

  description:
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -24,27 +24,18 @@ 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:
-    Example
+  id: freshmanual
+  title: FreshManual
+  subtitle: Mobile App
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  link: /404
+  color: blue

-  subtitle:
-    Just A Test
-  
-  stack:
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+  ready: false

  description:
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -62,27 +53,17 @@ 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:
-    Example
+  id: pollbuddy
+  title: Poll Buddy
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  link: /404
+  color: green

-  subtitle:
-    Just A Test
-  
-  stack:
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+  ready: false

  description:
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -100,27 +81,17 @@ 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:
-    Example
+  id: rpi-crisis
+  title: CRISIS
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  link: /404
+  color: red

-  subtitle:
-    Just A Test
-  
-  stack:
-    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+  ready: false

  description:
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
@@ -138,14 +109,5 @@ 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

 #*----------------------------------------------------------------------------*#
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,7 +4,11 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ page.description }}">
+    {% if page.desc_type == "project" %}
+      <meta name="description" content="A description of work done by Maxim Voldman Hutz for {{page.data.title}}.">
+    {% else %}
+      <meta name="description" content="{{ page.description }}">
+    {% endif %}

    <link rel="shortcut icon" type="image/png" href="/res/favicon.png">

@@ -25,6 +29,8 @@

    {{ content }}

+    <div class="flex dark back npad"></div>
+
    {% include footer.html %}
  </body>
 </html>
--- a/_layouts/experience.html
+++ b/_layouts/experience.html
@@ -0,0 +1,52 @@
+---
+title: Example
+desc_type: project
+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>
+      {% 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">
+        {% if malung.image %}
+          <img id="image-inner" src="{{malung.image}}" alt="Image of {{malung.title}}">
+        {% else %}
+          <h1 aria-hidden="true">Image Not Available</h1>
+        {% endif %}
+      </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>
--- a/experiences.html
+++ b/experiences.html
@@ -14,8 +14,21 @@ layout: default
      {% assign data = item[1] %}

      <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 }}
+        {% if data.image %}
+          <div class="space project-image-outer">
+            <img src="{{data.image}}" alt="{{data.title}}" class="project-image">
+          </div>
+        {% else %}
+          <div class="project-noimage" aria-hidden="true">Image Not Available</div>
+        {% endif %}
+        <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 %}
--- a/index.html
+++ b/index.html
@@ -26,15 +26,26 @@ layout: default
  <div class="flex"></div>
 </section>

-<!-- ----------------------------------------------------------------------- -->
-
 <section id="projects" class="dark back">
  <h2>Worked on:</h2>
  <div id="project-list">
    {% 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 }}
+        {% if work[project].image %}
+          <div class="space project-image-outer">
+            <img src="{{work[project].image}}" alt="{{work[project].title}}" class="project-image">
+          </div>
+        {% else %}
+          <div class="project-noimage" aria-hidden="true">Image Not Available</div>
+        {% endif %}
+        <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 %}
--- a/styles/404.css
+++ b/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;
--- a/styles/default.css
+++ b/styles/default.css
@@ -11,6 +11,7 @@ body {
  width: min(100vw, 1024px);
  box-sizing: border-box;
  margin: auto;
+  padding: 0 20px;
 }

 /*----------------------------------------------------------------------------*/
@@ -43,6 +44,7 @@ button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
+  cursor: pointer;
 }

 .icon::before {
@@ -72,15 +74,24 @@ h2 {

 i {
  font-size: 20px;
-  font-size: "Source Serif Pro";
+  font-family: "Source Serif Pro";
 }

-p {
+p, section {
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 100;
 }

+ul {
+  list-style-type: "-   ";
+  padding-left: 2ch;
+}
+
+li {
+  padding-bottom: 20px;
+}
+
 .lighter {
  background: #fff4;
 }
@@ -99,7 +110,6 @@ hr {
  position: relative;
  padding: 10px 30px;
  font-size: 20px;
-  cursor: pointer;
 }

 .button::before {
@@ -161,7 +171,7 @@ nav {
 /*----------------------------------------------------------------------------*/

 #projects {
-  padding: 30px auto;
+  padding: 30px 0;
  position: relative;
  display: flex;
  flex-direction: column;
@@ -251,4 +261,26 @@ nav {
  .nav1, .nav2 {
    display: none;
  }
+}
+
+.project-noimage {
+  color: #0002;
+  font-size: 40px;
+  font-family: "Open Sans";
+  font-weight: 900;
+  display: flex;
+  flex: 1000;
+  justify-content: center;
+  align-items: center;
+}
+
+.project-image-outer {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+}
+
+.project-image {
+  position: absolute;
+  max-height: 100%;
 }
--- a/styles/experience.css
+++ b/styles/experience.css
@@ -0,0 +1,81 @@
+#banner {
+  margin-top: 10px;
+  padding: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+}
+
+#experience {
+  color: white;
+  gap: 30px;
+  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 {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  align-items: flex-end;
+  gap: 30px;
+  padding-bottom: 30px;
+}
+
+#image {
+  background-color: #ccc;
+  border-radius: 10px;
+  height: 300px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+  position: relative;
+  text-align: center;
+}
+
+#description {
+  flex: 1;
+  gap: 30px;
+  display: flex;
+  flex-direction: column;
+  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-grow: 1;
+}
+
+#stack::after {
+  content: "";
+  flex: 1000000;
+}
+
+#image-inner {
+  max-width: 100%;
+  max-height: 100%;
+}
--- a/styles/global.css
+++ b/styles/global.css
@@ -31,7 +31,9 @@
 .white { --color: white }

 .flex-space, .flex, br { flex-grow: 1 }
+.flex.dark { background-color: var(--dark) }
 .space { flex: 1000 }
+.npad { padding: 0 !important }

 /*----------------------------------------------------------------------------*/

@@ -43,8 +45,8 @@ html {

 .back {
  position: relative;
-  padding: 10px 20px;
-  width: min(100vw, 1024px);
+  padding: 10px 0;
+  width: min(100vw, 1024px, 100%);
  box-sizing: border-box;
 }

@@ -63,5 +65,3 @@ html {
 .dark-back::before {
  filter: brightness(0.8);
 }
-
-/*----------------------------------------------------------------------------*/
--- a/styles/tech.scss
+++ b/styles/tech.scss
@@ -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 %}
Author	SHA1	Message	Date
MajorDroolz	810ede3202	FIX: Image not available for project list.	2023-01-04 23:29:35 -05:00
MajorDroolz	a4a4e04ab2	FIX: Workflow to work with jekyll.	2023-01-04 23:16:48 -05:00
MajorDroolz	219a7543de	FIX: Description for projects now works.	2023-01-04 22:47:52 -05:00
MajorDroolz	87a3c3d2b4	FIX: Only ready work in documented. Images added, view ubtton optional.	2023-01-04 22:18:53 -05:00
MajorDroolz	34e75a3748	Project pages now auto-generated with jekyll data.	2023-01-04 21:32:02 -05:00
MajorDroolz	f0b2bc0474	FEAT: Created first demo of project page for malung.	2023-01-04 04:26:14 -05:00
MajorDroolz	28e1dcc5d5	Pull from main.	2023-01-04 03:01:06 -05:00
MajorDroolz	e011480ad1	Merge pull request #17 from MajorDroolz/project-list Project list	2023-01-04 02:36:26 -05:00