Preparing changes for deployment.

Project list

.github/workflows/prepare.yml

@@ -19,22 +19,21 @@ jobs:
           node-version: '16'
 
       - name: Install dependencies.
-        run: npm i -g terser csso-cli html-minifier
+        run: npm i -g terser csso-cli
 
       - name: "Copying changes over to build."
         run: git checkout -b build
 
       - name: Minify files.
         run: |
-          for i in `find . -name "*.js" -type f`; do terser $i --compress -o $i; done
+          find . -name "*.js" -type f -exec terser {} -c -o {} \;
-          for i in `find . -name "*.css" -type f`; do csso $i -o $i; done
+          find . -name "*.css" -type f -exec csso {} -o {} \;
-          for i in `find . -name "*.html" -type f`; do html-minifier --remove-comments --collapse-whitespace $i -o $i; done
       
       - name: "Commiting changes."
         run: |
-          git config user.email "noreply@github.com"
+          git config user.name github-actions
-          git config user.name "github-actions"
+          git config user.email noreply@github.com
           git commit -am "Preparing changes for deployment."
   
       - name: "Pushing changes."
-        run: git push -f --set-upstream origin build
+        run: git push -uf origin build

.gitignore

@@ -0,0 +1,8 @@
+_site
+.bundle
+.jekyll-cache
+vendor
+.vscode
+.DS_Store
+Gemfile
+Gemfile.lock

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>

README.md

@@ -1,3 +1,7 @@
-# The Personal Website of Maxim Voldman Hutz
+# 🖼️ Max Hutz's Digital Portfolio
-This website serves as an exhibit of who I am, what I've done, what I'm doing,
+### Hey!
-and what I plan to do.
+I'm Max Hutz, and this is my personal website.
+
+It details who I am, what I've done, and were I'm headed in the field of software engineering. (And it looks cool too!)
+
+Check it out now at [www.maximhutz.me](https://www.maximhutz.me)!

_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,79 @@
+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: 'linear-gradient(-45deg, #2892DF, #3CCBF4)'
+  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
+
+swift:
+  name: Swift
+  fore: white
+  back: 'linear-gradient(-45deg, #FF3527, #FBAB3F)'
+  link: https://www.swift.org
+
+objective-c:
+  name: Objective-C
+  fore: '#000000'
+  back: '#EEEEEE'
+  link: https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html
+
+firebase:
+  name: Firebase
+  fore: '#F57C00'
+  back: '#EEF3F5'
+  link: https://firebase.google.com
+
+python:
+  name: Python
+  fore: '#FFD94B'
+  back: '#346C94'
+  link: https://www.python.org
+
+bs:
+  name: Beautiful Soup
+  fore: '#97DACB'
+  back: '#1C4E63'
+  link: https://www.crummy.com/software/BeautifulSoup/bs4/doc/

_data/work.yml

@@ -0,0 +1,116 @@
+malung:
+  id: malung
+  title: Malung
+  subtitle: COVID-19 Classifier
+  stack: [ html, css, js, php, docker, mariadb, azure ]
+  color: malung
+  image: /res/projects/malung.webp
+
+  ready: true
+
+  description:
+    Led a team of 3 to create Malung, an <b>online COVID-19 classifier</b>. With
+    Malung, you can detect COVID-19 in lung scans using machine learning, and
+    <b>manage patient data on the cloud</b>. <br><br> Doubled as the <b>backend
+    / DevOps lead</b> during development, managing the site and its database.
+
+  
+  outcomes:
+    - Hosted site through Microsoft Azure.
+
+    - Managed database with MariaDB; Containerized on Docker instance for local
+      development.
+
+    - Built account system with PHP, which interfaced with frontend through
+      backend API.
+
+    - Collaboratively designed site’s UI with Figma, focusing on responsive
+      design.
+
+#*----------------------------------------------------------------------------*#
+
+freshmanual:
+  id: freshmanual
+  title: FreshManual
+  subtitle: Mobile App
+  stack: [ react, js, firebase, swift, objective-c ]
+  link: https://apps.apple.com/us/app/freshmanuals/id1627091250
+  color: freshmanual
+  image: /res/projects/freshmanual.webp
+
+  ready: false
+
+  description:
+    Lead developer during the initial development of the FreshManuals app.
+    Worked with <b>team of 5</b> at Tightrope Interactive to design, build, and
+    test the <b>mobile product manual aggregator</b>.<br><br>FreshManuals is
+    currently available for download on the <b>iPhone app store</b>.
+
+  outcomes:
+    - User interface built using React/React-Native, for multiplatform
+      integration.
+
+    - Used Firestore/Firebase to store and access user account data.
+
+    - Integrated paid yahoo search results into mobile search results.
+
+    - Used Fetch API to request user manual data from website API endpoints.
+
+#*----------------------------------------------------------------------------*#
+
+pollbuddy:
+  id: pollbuddy
+  title: Poll Buddy
+  stack: [ react, js, docker ]
+  link: https://pollbuddy.app
+  color: pollbuddy
+  image: /res/projects/pollbuddy.webp
+
+  ready: false
+
+  description:
+    React developer for Poll Buddy, an <b>online questionnaire service</b> used by
+    hundreds of students and teachers on the Rensselaer Polytechnic Institute
+    campus. Worked on <b>cleaning source code</b>, transitioning from legacy
+    technology, and <b>improving the site’s user experience</b>.
+
+  outcomes:
+    - Cut 30% of the front-end codebase by switching to the modern, functional
+      style.
+
+    - Wrote and refined dozens of front-end tests using Jest for React
+      components.
+
+    - Ran discount usability study on Poll Buddy’s UI, to isolate and correct
+      flaws that novel users encountered.
+
+#*----------------------------------------------------------------------------*#
+
+rpi-crisis:
+  id: rpi-crisis
+  title: CRISIS
+  stack: [ python, bs ]
+  link: https://rpicrisis.org
+  color: rpi-crisis
+  image: /res/projects/rpi-crisis.webp
+
+  ready: false
+
+  description:
+    <b>Backend developer</b> for Correcting Rensselaer’s Insufferable Student
+    Information System (CRISIS), a web-app to help students organize and <b>manage
+    their curriculum</b> at Rensselaer Polytechnic Institute (RPI). Worked to
+    <b>expand data collection</b> system, and decipher information from RPI’s
+    legacy SIS.
+
+  outcomes:
+    - Wrote web-scrapers using Beautiful Soup to pull data from QuACS, another
+      well-known course scheduler, jump-starting the site’s backend.
+
+    - Wrote web-scrapers to extract course templates from RPI’s numerous
+      major-specific websites.
+
+    - Used Lark to parse course requirements from RPI’s convoluted course
+      catalog.
+
+#*----------------------------------------------------------------------------*#

_includes/default.html

@@ -0,0 +1,33 @@
+<!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="{{ include.description }}">
+    <meta name="cache-control" content="max-age=31536000">
+
+    <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"> 
+
+    <link rel="preload stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200&display=swap">
+    <link rel="preload stylesheet" as="font" 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="preload stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
+    
+    <link rel="preload stylesheet" as="style" href="/styles/global.css">
+    <link rel="preload stylesheet" as="style" href="/styles/default.css">
+
+    <title>{{ include.title }} ─ Max Hutz</title>
+  </head>
+  <body>
+    {% include header.html %}
+
+    {{ include.content }}
+
+    <div class="flex dark back npad"></div>
+
+    {% include footer.html %}
+  </body>
+</html>

_includes/footer.html

@@ -0,0 +1,13 @@
+<link rel="preload stylesheet" as="style" 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.webp" 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.webp" 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" target="_blank">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" target="_blank"></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" target="_blank">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 @@
+{% include default.html title=page.title content=content description=page.description %}

_layouts/experience.html

@@ -0,0 +1,54 @@
+{% capture description %}
+  A description of work done by Maxim Voldman Hutz for {{page.title}}.
+{% endcapture %}
+
+{% capture inner %}
+  {% assign malung = site.data.work[page.project_id] %}
+  {% assign techs = site.data.techs %}
+
+  <link rel="preload stylesheet" href="/styles/experience.css">
+  <link rel="preload 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 id="close-icon" 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" target="_blank">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>
+{% endcapture %}
+
+{% include default.html content=inner description=description title=page.title %}

experience/freshmanual.html

@@ -0,0 +1,5 @@
+---
+layout: experience
+project_id: freshmanual
+title: FreshManual
+---

experience/malung.html

@@ -0,0 +1,5 @@
+---
+layout: experience
+project_id: malung
+title: Malung
+---

experience/pollbuddy.html

@@ -0,0 +1,5 @@
+---
+layout: experience
+project_id: pollbuddy
+title: Poll Buddy
+---

experience/rpi-crisis.html

@@ -0,0 +1,5 @@
+---
+layout: experience
+project_id: rpi-crisis
+title: CRISIS
+---

experiences.html

@@ -0,0 +1,36 @@
+---
+title: Experiences
+description: A list of work and projects done by 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.css

@@ -1,318 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200');
-@import url('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');
-@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap');
-
-/*----------------------------------------------------------------------------*/
-
-* {
-  padding: 0;
-  border: 0;
-  margin: 0;
-  outline: 0;
-
-  --light: #FEFADC;
-  --dark: #504B43;
-  --red: #F8333C;
-  --yellow: #FCAB10;
-  --green: #8FD694;
-  --blue: #2B9EB3;
-
-  --timing: cubic-bezier(0.2, 1, 0, 1);
-  --start-timing: cubic-bezier(0,.5,0,.9);
-}
-
-.light { --color: var(--light) }
-.dark { --color: var(--dark) }
-.red { --color: var(--red) }
-.yellow { --color: var(--yellow) }
-.green { --color: var(--green) }
-.blue { --color: var(--blue) }
-
-.flex-space { flex: 1 }
-
-.pos-center {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-/*----------------------------------------------------------------------------*/
-
-@media (min-aspect-ratio: 6 / 5) {
-  .nav2, .nav3 {
-    display: none !important;
-  }
-}
-
-@media (min-aspect-ratio: 3 / 4) and (max-aspect-ratio: 6 / 5) {
-  .nav1, .nav3 {
-    display: none !important;
-  }
-}
-
-@media (max-aspect-ratio: 3 / 4) {
-  .nav1, .nav2 {
-    display: none !important;
-  }
-}
-
-/*----------------------------------------------------------------------------*/
-
-html {
-  background: var(--dark);
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  overflow-y: scroll;
-}
-
-nav {
-  position: fixed;
-  z-index: 1000;
-  filter: drop-shadow(0px 0px 100px #000);
-}
-
-#title-page > * {
-  opacity: calc(1 - 1.25 * var(--scroll, 0));
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-#title-page {
-  position: fixed;
-  width: 100vw;
-  background-color: var(--light);
-  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
-  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
-  height: calc(90vh - 77.5vh * var(--scroll, 0));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-#title-bottom {
-  position: absolute;
-  top: 65%;
-}
-
-#avatar {
-  position: fixed;
-  top: 50vh;
-  translate: 0 calc(-70% - 35% * var(--scroll, 0));
-  filter: grayscale(1) opacity(0.3);
-  z-index: -1;
-  width: max(90vmin, 60vh);
-  height: max(90vmin, 60vh);
-  image-rendering: crisp-edges;
-  image-rendering: -webkit-optimize-contrast;
-}
-
-#title-name::before {
-  content: "Hi! I'm";
-  position: absolute;
-  font-family: "Source Serif Pro", serif;
-  font-style: italic;
-  font-size: calc(min(6vh, 8vw));
-  line-height: calc(min(5vh, 7vw));
-  top: 0;
-  left: 0;
-  translate: 1vmin -100%;
-  color: var(--dark);
-}
-
-.fade-text::before {
-  content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t);
-  font-size: calc(min(12vh, 16vw));
-  line-height: calc(min(11vh, 14vw));
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  white-space: pre;
-  color: black;
-}
-
-#title-name {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  translate: -50% 0;
-  font-size: calc(min(12vh, 16vw));
-  line-height: calc(min(11vh, 14vw));
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  color: transparent;
-  -webkit-background-clip: text;
-  background-clip: text;
-  background-image: linear-gradient(45deg, #F008, #00F8);
-  transform: translateZ(0);
-}
-
-.fade1 { opacity: 05%; translate: 0 0; }
-
-.fade2 { opacity: 10%; translate: -5% 0; }
-
-.fade3 { opacity: 20%; translate: 5% 0; }
-
-.fade4 { opacity: 25%; translate: -10% 0; }
-
-.fade5 { opacity: 30%; translate: 10% 0; }
-
-.navbar {
-  padding: 2vmin 3vmin;
-  width: 100vw;
-  position: absolute;
-  display: flex;
-  box-sizing: border-box;
-  align-items: flex-start;
-  z-index: 100;
-}
-
-nav a:nth-child(1) { animation: nav-enter 2s 000ms var(--timing) backwards; }
-nav a:nth-child(2) { animation: nav-enter 2s 100ms var(--timing) backwards; }
-nav a:nth-child(3) { animation: nav-enter 2s 200ms var(--timing) backwards; }
-nav a:nth-child(4) { animation: nav-enter 2s 300ms var(--timing) backwards; }
-nav a:nth-child(5) { animation: nav-enter 2s 400ms var(--timing) backwards; }
-nav a:nth-child(6) { animation: nav-enter 2s 500ms var(--timing) backwards; }
-nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; }
-
-@keyframes nav-enter {
-  from {
-    opacity: 0;
-    transform: translateX(-7%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-.button {
-  position: relative;
-  font-style: normal;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 4vh;
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  padding: 1vh 3vh;
-  color: var(--color, var(--dark));
-  background: transparent;
-  text-decoration: none;
-  transition: transform var(--timing) 1s, filter var(--timing) 1s;
-}
-
-.button.icon {
-  font-size: 2.5vh;
-}
-
-.button:active {
-  transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s;
-  transform: scale(0.9);
-}
-
-.button.icon::before {
-  content: attr(data-i);
-  font-family: "Material Symbols Outlined";
-  font-size: 4vh;
-}
-
-.button::after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-color: var(--color, var(--dark));
-  filter: opacity(0);
-  transform: scale(0.9);
-  z-index: -1;
-  border-radius: 1vh;
-  transition: transform var(--timing) 1s, filter var(--timing) 1s;
-}
-
-.button:hover::after {
-  filter: opacity(0.25);
-  transform: scale(1);
-}
-
-@media (hover: none) {
-  .button:hover::after {
-    filter: opacity(0);
-    transform: scale(0.9);
-  }
-}
-
-.button:active::after {
-  filter: opacity(0.5);
-}
-
-/*----------------------------------------------------------------------------*/
-
-article {
-  margin-bottom: 200vh;
-  background-color: var(--color, transparent);
-}
-
-#about-section {
-  height: 60vmin;
-}
-
-#title-section {
-  height: 90vmin;
-  z-index: 1000;
-}
-
-/*----------------------------------------------------------------------------*/
-
-#menu-modal::backdrop {
-  background-color: #0008;
-  animation: 0.5s ease menu-back-enter;
-}
-
-#menu-modal {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  max-height: 100vh;
-  max-width: 100vw;
-  background: transparent;
-}
-
-#menu-inner {
-  padding: 2vmin 3vmin;
-  position: fixed;
-  height: 100vh;
-  width: 75vw;
-  display: flex;
-  box-sizing: border-box;
-  align-items: flex-start;
-  flex-direction: column;
-  -webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
-  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
-  background-color: var(--light);
-}
-
-#menu-modal[open] {
-  animation: 0.5s ease menu-enter;
-}
-
-@keyframes menu-enter {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0%);
-  }
-}
-
-@keyframes menu-back-enter {
-  from {
-    filter: opacity(0);
-  }
-
-  to {
-    filter: opacity(1);
-  }
-}

home/index.html

@@ -1,61 +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">
-    <link rel="icon" type="image/x-icon" href="/res/favicon.ico">
-    <link rel="stylesheet" href="index.css">
-    <script src="index.js"></script>
-    <title>Max's Place</title>
-  </head>
-  <body>
-   <nav>
-      <header class="navbar nav1">
-        <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
-        <div class="flex-space"></div>
-        <a href="/about" class="red icon button" data-i="accessibility_new">About</a>
-        <a href="/projects" class="yellow icon button" data-i="design_services">Projects</a>
-        <a href="/resume" class="green icon button" data-i="draft">Resume</a>
-        <a href="/contact" class="blue icon button" data-i="push_pin">Contact</a>
-      </header>
-      <header class="navbar nav2">
-        <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
-        <div class="flex-space"></div>
-        <a href="/about" class="red icon button" data-i="accessibility_new"></a>
-        <a href="/projects" class="yellow icon button" data-i="design_services"></a>
-        <a href="/resume" class="green icon button" data-i="draft"></a>
-        <a href="/contact" class="blue icon button" data-i="push_pin"></a>
-      </header>
-      <header class="navbar nav3">
-        <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
-        <div class="flex-space"></div>
-        <button class="icon button" data-i="menu" onclick="openMenu()"></button>
-      </header>
-      <div id="title-page">
-        <img src="/res/avatar.svg" alt="Avatar" id="avatar">
-        <div id="title-bottom">
-          <div id="title-name">MAX HUTZ</div>
-          <div class="fade-text fade1" data-t="MAX HUTZ"></div>
-          <div class="fade-text fade2" data-t="MAX HUTZ"></div>
-          <div class="fade-text fade3" data-t="MAX HUTZ"></div>
-          <div class="fade-text fade4" data-t="MAX HUTZ"></div>
-          <div class="fade-text fade5" data-t="MAX HUTZ"></div>
-        </div>
-      </div>
-    </nav>
-    <article id="title-section"></article>
-
-    <dialog id="menu-modal">
-      <div id="menu-inner">
-        <a href="#" class="button" data-i="home" onclick="closeMenu()">Max's&nbsp;Place</a>
-        <div class="flex-space"></div>
-        <a href="/about" class="red icon button" data-i="accessibility_new" onclick="closeMenu()">About</a>
-        <a href="/projects" class="yellow icon button" data-i="design_services" onclick="closeMenu()">Projects</a>
-        <a href="/resume" class="green icon button" data-i="draft" onclick="closeMenu()">Resume</a>
-        <a href="/contact" class="blue icon button" data-i="push_pin" onclick="closeMenu()">Contact</a>
-        <div class="flex-space"></div>
-      </div>
-    </dialog>
-  </body>
-</html>

home/index.js

@@ -1,52 +0,0 @@
-let menuOpen = true;
-
-function calcScroll() {
-  const scroll = window.scrollY;
-  const vh = window.innerHeight / 100;
-  const title = document.getElementById("title-page");
-  if (title == null) return;
-  
-  title.style.setProperty("--scroll", Math.min(1, scroll / (77.5 * vh)));
-}
-
-function openMenu() {
-  const menu = document.getElementById("menu-modal");
-  if (menu == null) return;
-  requestAnimationFrame(() => menuOpen = false);
-  menu.showModal();
-}
-
-function closeMenu() {
-  const menu = document.getElementById("menu-modal");
-  if (menu == null) return;
-  requestAnimationFrame(() => menuOpen = true);
-  menu.close();
-}
-
-function main() {
-  document.body.addEventListener('wheel', preventScroll, { passive: false });
-  document.body.addEventListener('touchmove', preventScroll, { passive: false });
-  window.addEventListener("scroll", () => requestAnimationFrame(calcScroll));
-
-  const menu = document.getElementById("menu-modal");
-
-  if (menu) {
-    menu.addEventListener("click", clickMenuModal);
-    menu.addEventListener("touchstart", clickMenuModal);
-  }
-}
-
-function clickMenuModal(e) {
-  const menu = document.getElementById("menu-modal");
-  if (menu == null || e.target != menu) return;
-  closeMenu();
-}
-
-function preventScroll(e) {
-  if (menuOpen) return;
-  e.preventDefault();
-  e.stopPropagation();
-  return false;
-}
-
-window.onload = main;

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=home"/>
+layout: default
-	</head>
+---
-	<body bgcolor="black"></body>
+
-</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

@@ -3,7 +3,7 @@
   <head>
     <title>Resume of Maxim Voldman Hutz</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="This page holds a preview of the resume of Maxim Voldman Hutz.">
+    <meta name="description" content="A preview of the resume of Maxim Voldman Hutz.">
 
     <!-- Header metadata. -->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -16,7 +16,8 @@
     ">
 
     <!-- Resume styling. -->
-    <link rel="preload stylesheet" as="style" href="index.css">
+    <link rel="preload stylesheet" as="style" href="/styles/global.css">
+    <link rel="preload stylesheet" as="style" href="/styles/resume.css">
 
     <!-- Site's Icon -->
     <link rel="icon" type="image/png" href="/res/favicon.ico">

resume/index.css

@@ -1,384 +0,0 @@
-/*---- Base ------------------------------------------------------------------*/
-
-:root {
-  font-family: sans-serif;
-  --timing: cubic-bezier(.2,1,0,1);
-  --enter: 2s var(--timing) 0.2s both;
-  
-  --blue: #3F75A2;
-  --darkblue: #2E5476;
-  --grey: #575757;
-
-  --link-r: #D13800;
-  --link-g: #006B00;
-  --link-b: #006EDB;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-html {
-  font-size: 1vw;
-  background: black;
-  animation: var(--enter) scene-enter;
-}
-
-@media print {
-  html {
-    font-size: 0.7rem;
-  }
-}
-
-main {
-  display: contents;
-}
-
-/*---- Generic Styles --------------------------------------------------------*/
-
-h1 {
-  font-size: 3em;
-}
-
-h2 {
-  font-size: 2em;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.15em;
-}
-
-h5 {
-  font-size: 0.75em;
-}
-
-ul {
-  padding-inline-start: 2em;
-  margin: 0.5em 0;
-  list-style-type: '—  ';
-}
-
-/*---- Navbar ----------------------------------------------------------------*/
-
-.navbar {
-  position: fixed;
-  height: 18em;
-  width: 100%;
-  left: 0;
-  z-index: -1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-nav.navbar {
-  top: 0;
-}
-
-.resume-header {
-  position: absolute;
-  color: white;
-  filter: opacity(0.5);
-  font: 800 8em Poppins;
-  animation: var(--enter) title-enter;
-  will-change: transform, filter;
-  user-select: none;
-}
-
-footer.navbar {
-  bottom: 0;
-}
-
-.resume-footer {
-  font: bold 8em monospace;
-  animation: var(--enter) footer-enter;
-  will-change: transform, filter;
-  user-select: none;
-  display: flex;
-  justify-content: space-between;
-  width: 3em;
-}
-
-.footer-icon {
-  text-decoration: none;
-  opacity: 0.5;
-  color: white;
-  font-size: 0.2em;
-  font-family: Verdana;
-  font-weight: 600;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  transition: transform 0.3s, opacity 0.3s;
-}
-
-.footer-img {
-  display: inline-block;
-  font-size: 4em !important;
-  user-select: none;
-  filter: brightness(0) invert(1);
-  width: 1em;
-  height: 1.2em;
-  transform: scale(1);
-}
-
-.footer-icon:hover {
-  transform: scale(1.1);
-  opacity: 1;
-}
-
-/*---- Page ------------------------------------------------------------------*/
-
-article {
-  background: whitesmoke;
-  border: 2px solid gainsboro;
-  padding: 3em;
-  margin: 18em 16em;
-  border-radius: 1em;
-  animation: page-enter var(--enter);
-  will-change: transform, filter;
-  box-shadow: 0 2.5em 5em 0 #0004,
-              inset 1.5em 1.5em 5em 2.5em white;
-}
-
-body::before {
-  background: lightsteelblue linear-gradient(45deg, #F008, #00F8);
-  width: 100vw;
-  height: 100vh;
-  content: "";
-  display: inline-block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -2;
-}
-
-/*---- Header ----------------------------------------------------------------*/
-
-.contact-details {
-  display: flex;
-  justify-content: space-between;
-  font-style: normal;
-  font-weight: bold;
-  margin-top: 1em;
-}
-
-.contact-detail {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.email {
-  color: var(--link-b);
-}
-
-.phone {
-  color: var(--link-r);
-}
-
-.location {
-  color: var(--link-g);
-}
-
-/*---- Sectioning ------------------------------------------------------------*/
-
-.topic-title {
-  padding-bottom: 3px;
-  border-bottom: 2px solid cornflowerblue;
-  display: block;
-}
-
-.topic {
-  margin-top: 2em;
-  page-break-inside: avoid;
-}
-
-.topic-icon {
-  width: 1em;
-  height: 1em;
-  display: inline-block;
-}
-
-/*---- Experience Title ------------------------------------------------------*/
-
-.experience {
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-}
-
-.title {
-  font-weight: bold;
-  font-family: Verdana;
-  color: var(--blue);
-}
-
-.title > i {
-  font-weight: normal;
-}
-
-.date {
-  font-style: italic;
-}
-
-.place {
-  font-weight: normal;
-  display: block;
-  color: var(--grey);
-  text-transform: uppercase;
-}
-
-/*---- Skill List ------------------------------------------------------------*/
-
-.skill-list {
-  list-style: none;
-  padding-inline-start: 0;
-}
-
-.skill-list > li {
-  border: 1px solid gainsboro;
-  display: inline-flex;
-  padding: 0.5em 1em;
-  border-radius: 0.5em;
-  color: var(--blue);
-  background: whitesmoke;
-  font-family: monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  align-items: center;
-  font-weight: bold;
-  user-select: none;
-  margin: 0.5em;
-  box-shadow: 0 0.25em 0.25em 0 #0004,
-              inset 0.15em 0.15em 0.5em 0.25em white;
-  transform: scale(1);
-  transition: transform var(--timing) 1s;
-}
-
-.skill-list > li img {
-  height: 1.5em;
-}
-
-.skill-list > li:hover {
-  transform: scale(1.1);
-}
-
-/*---- Classes List ----------------------------------------------------------*/
-
-.classes-list {
-  list-style: none;
-  padding-inline-start: 0;
-}
-
-.classes-list > li::before {
-  content: '—  ';
-}
-
-.classes-list > li {
-  width: calc(50% - 3ch);
-  display: inline-block;
-}
-
-/*---- Miscellaneous ---------------------------------------------------------*/
-
-.hflex {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.icon {
-  margin-right: 0.5em;
-  width: 1em;
-  height: 1em;
-  user-select: none;
-  display: inline-block;
-}
-
-.freshmanuals {
-  color: var(--darkblue);
-}
-
-/*---- Animations ------------------------------------------------------------*/
-
-@keyframes page-enter {
-  from {
-    transform: scale(0.9) translateY(10%);
-  }
-
-  to {
-    transform: scale(1) translateY(0%);
-  }
-}
-
-@keyframes title-enter {
-  0% {
-    transform: scale(2) translateY(-50%);
-  }
-
-  100% {
-    transform: scale(1) translateY(0%);
-  }
-}
-
-@keyframes footer-enter {
-  0% {
-    transform: scale(2) translateY(50%);
-  }
-
-  100% {
-    transform: scale(1) translateY(0%);
-  }
-}
-
-@keyframes scene-enter {
-  from {
-    filter: brightness(0);
-  }
-  
-  to {
-    filter: brightness(1);
-  }
-}
-
-/*---- Print Styles ----------------------------------------------------------*/
-
-@media print {
-  article {
-    margin: 0;
-    border-radius: 0;
-    border: 0;
-    padding: 0;
-    background: white;
-    box-shadow: none;
-  }
-
-  main {
-    overflow: auto;
-    height: auto;
-    background: white;
-    box-shadow: none;
-  }
-
-  html, body {
-    overflow: auto;
-    background: white;
-    height: auto;
-  }
-
-  .skill-list > li {
-    box-shadow: none;
-    background-color: white;
-  }
-
-  article * {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-}

styles/404.css

@@ -0,0 +1 @@
+#notfound{--color:var(--dark) linear-gradient(#0000, #0003);flex:99999999999999;display:flex;justify-content:center;align-items:center;color:#fff;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

@@ -0,0 +1 @@
+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{flex-direction:column;min-height:100vh;width:min(100vw,1024px);box-sizing:border-box;margin:auto;padding:0 20px;line-height:1.2}*{text-decoration:none}button{background-color:transparent}.pre{all:unset;white-space:pre}.nav-link{color:var(--color);text-decoration:none;font-weight:900;font-family:"Open Sans"}.shadow{filter:drop-shadow(0 4px 0#0004)}.button,.icon,.r-icon{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.icon::before,.r-icon::after{font-family:"Material Symbols Outlined";content:attr(data-i);width:1em}.icon::before{font-size:36px;margin-right:5px}.r-icon::after{margin-left:5px}h1,h2{font-size:40px;font-weight:900}h2{font-size:30px}i,p,section{font-size:20px;font-family:"Source Serif Pro"}h1,h2,p,section{font-family:"Open Sans"}p,section{font-weight:100}ul{list-style-type:"-   ";padding-left:2ch}li{padding-bottom:20px}.lighter{background:#fff4}.darker{background:#0004}hr{height:1px;width:100%}.button{color:var(--color);position:relative;padding:10px 30px;font-size:20px}.button::before{position:absolute;width:100%;height:100%;top:0;left:0;background:var(--color);opacity:25%;content:"";border-radius:10px}.width-pad{width:100vw;background-color:var(--color);padding:10px 20px;box-sizing:border-box}.png-icon{filter:brightness(0) invert(1)}#about,body,nav{display:flex}#about{position:relative;margin:auto;flex-direction:column;justify-content:center;align-items:flex-start;max-width:1024px;min-height:85vh;color:var(--dark);box-sizing:border-box;gap:30px}#about>*{max-width:600px}nav{flex-wrap:wrap;width:100%}#inner-nav{display:inline-flex;flex-grow:1;gap:20px;flex-wrap:wrap}#projects{padding:30px 0;position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:1024px;min-height:100vh;color:#fff;box-sizing:border-box;gap:30px}#project-list,.project-item{overflow:visible;display:flex}#project-list{flex-wrap:wrap;width:100%;gap:20px}.project-item{min-width:min(max(40%,400px),100%);flex:1;height:300px;background-color:var(--color);border-radius:10px;flex-direction:column}.project-link{color:#fff;background-color:#0005;padding:10px;border-radius:0 0 10px 10px}#experience-button{align-self:center}#menu{top:0;left:0;max-width:none;max-height:none;position:fixed;background-color:var(--light);color:var(--dark);width:100vw;font-size:25px;overflow:visible}#menu-top{display:flex;align-items:center;transform:translateY(-1.5px)}#menu-inner{max-width:1024px;display:flex;flex-direction:column;gap:30px;margin:auto auto 50px}@media (max-width:464px){.nav2,.nav3{display:none}}@media (max-width:813px) and (min-width:465px){.nav1,.nav3{display:none}}@media (min-width:814px){.nav1,.nav2{display:none}}.project-image-outer,.project-noimage{justify-content:center;align-items:center}.project-noimage{color:#0002;font-size:40px;font-family:"Open Sans";font-weight:900;display:flex;flex:1000;text-align:center;box-sizing:border-box;padding:10px}.project-image-outer{position:relative}.project-image{position:absolute;max-height:100%;max-width:100%;top:50%;left:50%;transform:translate(-50%,-50%)}

styles/experience.css

@@ -0,0 +1 @@
+#banner{margin-top:10px;padding:20px 0;display:flex;justify-content:space-between;align-items:center;line-height:1}#experience{color:#fff;gap:30px;display:flex;flex-direction:column;align-items:flex-start}#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;padding:10px;hyphens:manual;box-sizing:border-box}#description,#image-side{flex:1;gap:30px;display:flex;flex-direction:column;align-items:flex-start;min-width:min(300px,100%)}#image-side{gap:20px;min-width:min(500px,100%)}#stack{display:flex;gap:10px;flex-flow:row wrap}#stack .chip{flex-grow:1}#stack::after{content:"";flex:1000000}#image-inner{max-width:100%;max-height:100%}#close-icon{font-size:36px;line-height:1}

styles/footer.css

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

styles/global.css

@@ -0,0 +1 @@
+*{padding:0;border:0;margin:0;outline:0}:root{--light:#FEFADC;--dark:#504B43;--red:#EC1B24;--yellow:#E19200;--green:#4CB753;--blue:#2B9EB3;--timing:cubic-bezier(0.2, 1, 0, 1);--start-timing:cubic-bezier(0,.5,0,.9);--grad:linear-gradient(45deg, #F008, #00F8);--shadow:0px 10px 50px 0 #0008;--width:1024px}.light{--color:var(--light)}.dark{--color:var(--dark)}.red{--color:var(--red)}.yellow{--color:var(--yellow)}.green{--color:var(--green)}.blue{--color:var(--blue)}.white{--color:white}.malung{--color:#F76F8E}.freshmanual{--color:#3b91db}.pollbuddy{--color:#7f6491}.rpi-crisis{--color:#a06ce4}.flex,.flex-space,br{flex-grow:1}.flex.dark,html{background-color:var(--dark)}.space{flex:1000}.npad{padding:0!important}.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(.8)}

styles/header.css

@@ -0,0 +1 @@
+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/resume.css

@@ -0,0 +1 @@
+@keyframes page-enter{0%{transform:scale(.9) translateY(10%)}to{transform:scale(1) translateY(0)}}@keyframes title-enter{0%{transform:scale(2) translateY(-50%)}to{transform:scale(1) translateY(0)}}@keyframes footer-enter{0%{transform:scale(2) translateY(50%)}to{transform:scale(1) translateY(0)}}@keyframes scene-enter{0%{filter:brightness(0)}to{filter:brightness(1)}}:root{font-family:sans-serif;--timing:cubic-bezier(.2,1,0,1);--enter:2s var(--timing) 0.2s both;--blue:#3F75A2;--darkblue:#2E5476;--grey:#575757;--link-r:#D13800;--link-g:#006B00;--link-b:#006EDB}*{margin:0;padding:0;border:0}html{font-size:1vw;animation:var(--enter) scene-enter}@media print{html{font-size:.7rem}}main{display:contents}h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1.15em}h5{font-size:.75em}ul{padding-inline-start:2em;margin:.5em 0;list-style-type:"—  "}.navbar{position:fixed;height:18em;width:100%;left:0;z-index:-1;display:flex;justify-content:center;align-items:center}nav.navbar{top:0}.resume-header{position:absolute;color:#fff;filter:opacity(.5);font:800 8em Poppins;animation:var(--enter) title-enter;user-select:none}footer.navbar{bottom:0}.resume-footer,.resume-header,article{will-change:transform,filter}.resume-footer{font:700 8em monospace;animation:var(--enter) footer-enter;user-select:none;display:flex;justify-content:space-between;width:3em}.footer-icon{text-decoration:none;opacity:.5;color:#fff;font-size:.2em;font-family:Verdana;font-weight:600;display:inline-flex;flex-direction:column;align-items:center;transition:transform .3s,opacity .3s}.footer-img{display:inline-block;font-size:4em!important;user-select:none;filter:brightness(0) invert(1);width:1em;height:1.2em;transform:scale(1)}.footer-icon:hover{opacity:1}article{background:#f5f5f5;border:2px solid #dcdcdc;padding:3em;margin:18em 16em;border-radius:1em;animation:page-enter var(--enter);box-shadow:0 2.5em 5em 0#0004,inset 1.5em 1.5em 5em 2.5em #fff}body::before{background:lightsteelblue var(--grad);width:100vw;height:100vh;content:"";display:inline-block;position:fixed;top:0;left:0;z-index:-2}.contact-details{display:flex;justify-content:space-between;font-style:normal;font-weight:700;margin-top:1em}.contact-detail{display:flex;align-items:center;white-space:nowrap}.email{color:var(--link-b)}.phone{color:var(--link-r)}.location{color:var(--link-g)}.topic-title{padding-bottom:3px;border-bottom:2px solid #6495ed;display:block}.topic{margin-top:2em;page-break-inside:avoid}.topic-icon{width:1em;height:1em;display:inline-block}.experience{margin-top:2em;margin-bottom:.5em}.skill-list>li,.title{font-weight:700;font-family:Verdana;color:var(--blue)}.title>i{font-weight:400}.date{font-style:italic}.place{font-weight:400;display:block;color:var(--grey);text-transform:uppercase}.classes-list,.skill-list{list-style:none;padding-inline-start:0}.skill-list>li{border:1px solid #dcdcdc;display:inline-flex;padding:.5em 1em;border-radius:.5em;background:#f5f5f5;font-family:monospace;white-space:nowrap;overflow:hidden;align-items:center;user-select:none;margin:.5em;box-shadow:0 .25em .25em 0#0004,inset .15em .15em .5em .25em #fff;transform:scale(1);transition:transform var(--timing) 1s}.skill-list>li img{height:1.5em}.footer-icon:hover,.skill-list>li:hover{transform:scale(1.1)}.classes-list>li::before{content:"—  "}.classes-list>li{width:calc(50% - 3ch);display:inline-block}.hflex{display:flex;justify-content:space-between;align-items:center}.icon{margin-right:.5em;width:1em;height:1em;user-select:none;display:inline-block}.freshmanuals{color:var(--darkblue)}@media print{article{margin:0;border-radius:0;border:0;padding:0;background:#fff}article,main{box-shadow:none}body,html,main{overflow:auto;background:#fff;height:auto}.skill-list>li{box-shadow:none;background-color:#fff}article *{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

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: {{data.back}};
+    color: {{data.fore}};
+  }
+{% endfor %}