FIX: Image not available for project list.

Project list

.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: |

.gitignore

@@ -0,0 +1,5 @@
+_site
+.bundle
+.jekyll-cache
+vendor
+.vscode

404.html

@@ -0,0 +1,16 @@
+---
+title: 404
+description: Oops! The page you wanted does not exist.
+layout: default
+---
+
+<link rel="stylesheet" href="/styles/404.css">
+
+<section id="notfound" class="back">
+  <div id="text-outer">
+    <i>Looks like your lost!</i>
+    <h1 id="text-404" class="shadow">404</h1>
+  </div>
+  <hr class="lighter">
+  <button type="button" class="nav-link white button" onclick="history.back(-1)">Go Back.</button>
+</section>

Gemfile

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

Gemfile.lock

@@ -0,0 +1,72 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    google-protobuf (3.21.12)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      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)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.0.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.30.0)
+    safe_yaml (1.0.5)
+    sass-embedded (1.57.1-arm64-darwin)
+      google-protobuf (~> 3.21)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.4.1)
+    webrick (1.7.0)
+
+PLATFORMS
+  arm64-darwin-21
+
+DEPENDENCIES
+  jekyll (~> 4.3)
+  jekyll-datapage-generator
+
+BUNDLED WITH
+   2.4.2

_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

_data/home.yml

@@ -0,0 +1,16 @@
+welcome:
+  Hey! 👋 I'm Max Hutz.
+
+status:
+  Software developer in New York.
+
+about:
+  I'm a passionate computer science student skilled in building responsive,
+  full-stack applications. I love learning from colleagues and teaching future
+  developers. I thrive where teamwork and creativity are key.
+
+email:
+  maximhutz@gmail.com
+
+featured:
+  [ malung, freshmanual, pollbuddy, rpi-crisis ]

_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

_data/work.yml

@@ -0,0 +1,113 @@
+malung:
+  id: malung
+  title: Malung
+  subtitle: COVID-19 Classifier
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  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
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - 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.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+
+#*----------------------------------------------------------------------------*#
+
+freshmanual:
+  id: freshmanual
+  title: FreshManual
+  subtitle: Mobile App
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  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
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - 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.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+
+#*----------------------------------------------------------------------------*#
+
+pollbuddy:
+  id: pollbuddy
+  title: Poll Buddy
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  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
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - 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.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+
+#*----------------------------------------------------------------------------*#
+
+rpi-crisis:
+  id: rpi-crisis
+  title: CRISIS
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  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
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - 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.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+
+#*----------------------------------------------------------------------------*#

_includes/footer.html

@@ -0,0 +1,13 @@
+<link rel="stylesheet" href="/styles/footer.css">
+
+<footer class="dark back">
+  <h2>&copy; 2022</h2>
+  <div class="flex"></div>
+  <a href="https://github.com/MajorDroolz" class="png-icon" target="_blank">
+    <img src="/res/icons/github.png" alt="GitHub" width="30" height="30">
+  </a>
+  <a href="https://www.linkedin.com/in/maximhutz/" class="png-icon" target="_blank">
+    <img src="/res/icons/linkedin.png" alt="LinkedIn" width="30" height="30">
+  </a>
+  <a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
+</footer>

_includes/header.html

@@ -0,0 +1,30 @@
+<link rel="stylesheet" href="/styles/header.css">
+
+<header class="light back shadow">
+  <a href="/" class="nav-link dark">MAX HUTZ</a>
+  <div class="flex"></div>
+  <a href="/experiences" class="nav-link dark icon nav3" data-i="work">Experience</a>
+  <a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
+  <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
+  <a href="/experiences" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
+  <a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume"></a>
+  <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" aria-label="Contact"></a>
+  <button class="nav-link dark icon nav1" data-i="menu" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
+</header>
+
+<dialog id="menu">
+  <div class="light width-pad shadow">
+    <div id="menu-inner">
+      <div id="menu-top">
+        <a href="/home" class="nav-link dark">MAX HUTZ</a>
+        <div class="flex"></div>
+        <form method="dialog">
+          <button class="nav-link dark icon" data-i="close" aria-label="Close"></button>
+        </form>
+      </div>
+      <a href="/experiences" class="nav-link dark icon" data-i="work">Experience</a>
+      <a href="/resume" class="nav-link dark icon" data-i="clinical_notes">Resume</a>
+      <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
+    </div>
+  </div>
+</dialog>

_includes/style.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/styles/{{ include.name }}.css">

_layouts/default.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {% 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">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
+    
+    <link rel="stylesheet" href="/styles/global.css">
+    <link rel="stylesheet" href="/styles/default.css">
+
+    <title>{{ page.title }} ─ Max Hutz</title>
+  </head>
+  <body>
+    {% include header.html %}
+
+    {{ content }}
+
+    <div class="flex dark back npad"></div>
+
+    {% include footer.html %}
+  </body>
+</html>

_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>

experiences.html

@@ -0,0 +1,36 @@
+---
+title: Experiences
+description: A list of past and current work and projects from Maxim Voldman Hutz.
+layout: default
+---
+
+{% assign work = site.data.work %}
+
+<section id="projects" class="dark back">
+  <h2>My experiences.</h2>
+  <div id="project-list">
+    {% for item in work %}
+      {% assign id = item[0] %}
+      {% assign data = item[1] %}
+
+      <a class="{{ data.color }} project-item shadow" href="/experience/{{ id }}">
+        {% 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 %}
+  </div>
+</section>

home/index.html

@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <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="This is the home page of Maxim Voldman Hutz's personal website.">
-
-    <link rel="icon" type="image/x-icon" href="/res/favicon.ico">
-
-    <link rel="preconnect" href="https://fonts.googleapis.com"> 
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
-    
-    <link rel="stylesheet" href="/styles.css">
-    <link rel="stylesheet" href="index.css">
-    <title>Max Hutz</title>
-  </head>
-  <body>
-    <div id="header-outer" class="light width-pad shadow">
-      <header>
-        <a href="#" class="nav-link dark">MAX HUTZ</a>
-        <div class="flex"></div>
-        <a href="/experience" class="nav-link dark icon nav3" data-i="work">Experience</a>
-        <a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
-        <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
-        <a href="/experience" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
-        <a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume"></a>
-        <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" aria-label="Contact"></a>
-        <button class="nav-link dark icon nav1" data-i="menu" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
-      </header>
-    </div>
-
-    <div class="light width-pad">
-      <section id="about">
-        <div class="flex"></div>
-        <div class="flex"></div>
-        <div>
-          <h1>Hey! 👋 <span class="pre">I'm Max Hutz.</span></h1>
-          <i>Software engineer in New York.</i>
-        </div>
-        <p id="about-me">
-          I’m a passionate computer science student skilled in building
-          responsive, full-stack applications. I love learning from colleagues
-          and teaching future developers. I thrive where teamwork and creativity
-          are key.
-        </p>
-        <hr class="darker">
-        <nav>
-          <div id="inner-nav">
-            <a href="mailto:maximhutz@gmail.com" class="nav-link blue button flex">maximhutz@gmail.com</a>
-            <a href="/resume" class="nav-link red button r-icon flex" data-i="arrow_right" target="_blank">View Resume</a>
-          </div>
-          <div class="space"></div>
-        </nav>
-        <div class="flex"></div>
-      </section>
-    </div>
-
-    <div class="dark width-pad">
-      <section id="projects">
-        <h2>Worked on:</h2>
-        <div id="project-list">
-          <a class="yellow project-item shadow" href="/experience/malung">
-            <div class="space"></div>
-            <div class="nav-link project-link r-icon" data-i="arrow_right">Malung: COVID-19 Classifier</div>
-          </a>
-          <a class="blue project-item shadow" href="/experience/freshmanual">
-            <div class="space"></div>
-            <div class="nav-link project-link r-icon" data-i="arrow_right">Freshmanual: Mobile App</div>
-          </a>
-          <a class="green project-item shadow" href="/experience/pollbuddy">
-            <div class="space"></div>
-            <div class="nav-link project-link r-icon" data-i="arrow_right">Poll Buddy</div>
-          </a>
-          <a class="red project-item shadow" href="/experience/rpi-crisis">
-            <div class="space"></div>
-            <div class="nav-link project-link r-icon" data-i="arrow_right">CRISIS</div>
-          </a>
-        </div>
-        <hr class="lighter">
-        <a href="/experience" id="experience-button" class="nav-link white button">View all experiences.</a>
-      </section>
-    </div>
-
-    <div id="footer-pad" class="dark width-pad">
-      <footer>
-        <h2>&copy; 2022</h2>
-        <div class="flex"></div>
-        <a href="https://github.com/MajorDroolz" class="png-icon" target="_blank">
-          <img src="/res/icons/github.png" alt="GitHub" width="30" height="30">
-        </a>
-        <a href="https://www.linkedin.com/in/maximhutz/" class="png-icon" target="_blank">
-          <img src="/res/icons/linkedin.png" alt="LinkedIn" width="30" height="30">
-        </a>
-        <a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
-      </footer>
-    </div>
-
-    <dialog id="menu">
-      <div class="light width-pad shadow">
-        <div id="menu-inner">
-          <div id="menu-top">
-            <a href="/home" class="nav-link dark">MAX HUTZ</a>
-            <div class="flex"></div>
-            <form method="dialog">
-              <button class="nav-link dark icon" data-i="close" aria-label="Close"></button>
-            </form>
-          </div>
-          <a href="/experience" class="nav-link dark icon" data-i="work">Experience</a>
-          <a href="/resume" class="nav-link dark icon" data-i="clinical_notes">Resume</a>
-          <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
-        </div>
-      </div>
-    </dialog>
-  </body>
-</html>

index.html

@@ -1,7 +1,55 @@
-<!DOCTYPE html>
+---
-<html>
+title: Home
-	<head>
+description: This is the home page of Maxim Voldman Hutz's personal website.
-		<meta http-equiv="Refresh" content="0; url=resume">
+layout: default
-		<link rel="stylesheet" href="/styles.css">
+---
-	</head>
+
-</html>
+{% assign home = site.data.home %}
+{% assign work = site.data.work %}
+
+<section id="about" class="light back">
+  <div class="flex"></div>
+  <div class="flex"></div>
+  <div>
+    <h1>{{ home.welcome }}</h1>
+    <i>{{ home.status }}</i>
+  </div>
+  <p id="about-me">{{ home.about }}</p>
+  <hr class="darker">
+  <nav>
+    <div id="inner-nav">
+      <a href="mailto:{{ home.email }}" class="nav-link blue button flex">{{ home.email }}</a>
+      <a href="/resume" class="nav-link red button r-icon flex" data-i="arrow_right" target="_blank">View Resume</a>
+    </div>
+    <div class="space"></div>
+  </nav>
+  <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 }}">
+        {% 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 %}
+  </div>
+  <hr class="lighter">
+  <a href="/experiences" id="experience-button" class="nav-link white button">View all experiences.</a>
+</section>

resume.html

@@ -16,8 +16,8 @@
     ">
 
     <!-- Resume styling. -->
-    <link rel="preload stylesheet" as="style" href="/styles.css">
+    <link rel="preload stylesheet" as="style" href="/styles/global.css">
-    <link rel="preload stylesheet" as="style" href="index.css">
+    <link rel="preload stylesheet" as="style" href="/styles/resume.css">
 
     <!-- Site's Icon -->
     <link rel="icon" type="image/png" href="/res/favicon.ico">

styles/404.css

@@ -0,0 +1,30 @@
+#notfound {
+  --color: var(--dark) linear-gradient(#0000, #0003);
+  flex: 99999999999999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  flex-direction: column;
+  gap: 20px;
+}
+
+#notfound > * {
+  max-width: 300px;
+}
+
+#text-outer > i {
+  font-size: 30px;
+}
+
+#text-outer {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 25px;
+}
+
+#text-404 {
+  font-size: 160px;
+  line-height: 1;
+}

styles/default.css

@@ -1,5 +1,22 @@
+html {
+  scroll-behavior: smooth;
+  background-image: linear-gradient(#0003 0% 50%, #0000 50% 100%),
+                    linear-gradient(var(--dark) 0% 50%, var(--light) 50% 100%);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: min(100vw, 1024px);
+  box-sizing: border-box;
+  margin: auto;
+  padding: 0 20px;
+}
+
+/*----------------------------------------------------------------------------*/
+
 * {
-  overflow: hidden;
   text-decoration: none;
 }
 
@@ -7,20 +24,6 @@ button {
   background-color: transparent;
 }
 
-body {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: flex-start;
-  width: 100vw;
-  overflow-y: scroll;
-}
-
-html {
-  overflow-y: scroll;
-  scroll-behavior: smooth;
-}
-
 .pre {
   all: unset;
   white-space: pre;
@@ -41,6 +44,7 @@ html {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .icon::before {
@@ -70,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;
 }
@@ -96,6 +109,7 @@ hr {
   color: var(--color);
   position: relative;
   padding: 10px 30px;
+  font-size: 20px;
 }
 
 .button::before {
@@ -123,26 +137,6 @@ hr {
 
 /*----------------------------------------------------------------------------*/
 
-#header-outer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-}
-
-header {
-  margin: auto;
-  max-width: 1024px;
-  display: flex;
-  gap: 40px;
-  font-size: 25px;
-  font-family: "Open Sans";
-  font-weight: bolder;
-  color: var(--dark);
-  align-items: center;
-  box-sizing: border-box;
-}
-
 #about {
   position: relative;
   margin: auto;
@@ -151,9 +145,8 @@ header {
   justify-content: center;
   align-items: flex-start;
   max-width: 1024px;
-  min-height: 90vh;
+  min-height: 85vh;
   color: var(--dark);
-  padding-top: 30px;
   box-sizing: border-box;
   gap: 30px;
 }
@@ -178,7 +171,7 @@ nav {
 /*----------------------------------------------------------------------------*/
 
 #projects {
-  margin: 30px auto;
+  padding: 30px 0;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -220,19 +213,6 @@ nav {
   align-self: center;
 }
 
-#footer-pad {
-  background: var(--dark) linear-gradient(#0002, #0002);
-}
-
-footer {
-  display: flex;
-  align-items: center;
-  color: white;
-  max-width: 1024px;
-  margin: auto;
-  gap: 10px;
-}
-
 /*----------------------------------------------------------------------------*/
 
 #menu {
@@ -281,4 +261,26 @@ footer {
   .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%;
 }

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%;
+}

styles/footer.css

@@ -0,0 +1,12 @@
+footer {
+  display: flex;
+  align-items: center;
+  color: white;
+  max-width: 1024px;
+  margin: auto;
+  gap: 10px;
+}
+
+footer::before {
+  filter: brightness(0.8);
+}

styles/global.css

@@ -18,6 +18,8 @@
 
   --grad: linear-gradient(45deg, #F008, #00F8);
   --shadow: 0px 10px 50px 0 #0008;
+
+  --width: 1024px;
 }
 
 .light { --color: var(--light) }
@@ -28,11 +30,38 @@
 .blue { --color: var(--blue) }
 .white { --color: white }
 
-.flex-space, .flex { flex-grow: 1 }
+.flex-space, .flex, br { flex-grow: 1 }
+.flex.dark { background-color: var(--dark) }
 .space { flex: 1000 }
+.npad { padding: 0 !important }
 
 /*----------------------------------------------------------------------------*/
 
 html {
-  background: var(--dark);
+  background-color: var(--dark);
-}
+}
+
+/*----------------------------------------------------------------------------*/
+
+.back {
+  position: relative;
+  padding: 10px 0;
+  width: min(100vw, 1024px, 100%);
+  box-sizing: border-box;
+}
+
+.back::before {
+  background: var(--color);
+  width: 100vw;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  content: "";
+  z-index: -1;
+}
+
+.dark-back::before {
+  filter: brightness(0.8);
+}

styles/header.css

@@ -0,0 +1,13 @@
+header {
+  position: sticky !important;
+  top: 0;
+  z-index: 10000;
+
+  display: flex;
+  gap: 40px;
+  font-size: 25px;
+  font-family: "Open Sans";
+  font-weight: bolder;
+  color: var(--dark);
+  align-items: center;
+}

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 %}