Preparing changes for deployment.

.github/workflows/prepare.yml

@@ -19,7 +19,7 @@ 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

.gitignore

@@ -2,4 +2,7 @@ _site
 .bundle
 .jekyll-cache
 vendor
-.vscode
+.vscode
+.DS_Store
+Gemfile
+Gemfile.lock

Gemfile

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

Gemfile.lock

@@ -1,72 +0,0 @@
-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

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)!

_config.yml

@@ -1,12 +0,0 @@
-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/techs.yml

@@ -31,7 +31,7 @@ docker:
 azure:
   name: Azure
   fore: '#EEEEEE'
-  back: '#0962B0'
+  back: 'linear-gradient(-45deg, #2892DF, #3CCBF4)'
   link: https://azure.microsoft.com/en-us/
 
 mariadb:
@@ -40,8 +40,40 @@ mariadb:
   back: '#C4745C'
   link: https://mariadb.org
 
+#*----------------------------------------------------------------------------*#
+
 react:
   name: React
   fore: '#04D8F8'
   back: '#242323'
-  link: https://reactjs.org
+  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

@@ -3,27 +3,29 @@ malung:
   title: Malung
   subtitle: COVID-19 Classifier
   stack: [ html, css, js, php, docker, mariadb, azure ]
-  link: /404
+  color: malung
-  color: yellow
+  image: /res/projects/malung.webp
 
   ready: true
 
   description:
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Led a team of 3 to create Malung, an <b>online COVID-19 classifier</b>. With
-    Lorem Ipsum has been the industry's standard dummy text ever since the
+    Malung, you can detect COVID-19 in lung scans using machine learning, and
-    1500s, when an unknown printer took a galley of type and scrambled it to
+    <b>manage patient data on the cloud</b>. <br><br> Doubled as the <b>backend
-    make a type specimen book. It has survived not only five centuries, but also
+    / DevOps lead</b> during development, managing the site and its database.
-    the leap into electronic typesetting, remaining essentially unchanged.
+
   
   outcomes:
-    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    - Hosted site through Microsoft Azure.
 
-    - Lorem Ipsum has been the industry's standard dummy text ever since the
+    - Managed database with MariaDB; Containerized on Docker instance for local
-      1500s, when an unknown printer took a galley of type and scrambled it to
+      development.
-      make a type specimen book.
+
-      
+    - Built account system with PHP, which interfaced with frontend through
-    - It has survived not only five centuries, but also the leap into electronic
+      backend API.
-      typesetting, remaining essentially unchanged.
+
+    - Collaboratively designed site’s UI with Figma, focusing on responsive
+      design.
 
 #*----------------------------------------------------------------------------*#
 
@@ -31,83 +33,84 @@ freshmanual:
   id: freshmanual
   title: FreshManual
   subtitle: Mobile App
-  stack: [ html, css, js, php, docker, mariadb, azure ]
+  stack: [ react, js, firebase, swift, objective-c ]
-  link: /404
+  link: https://apps.apple.com/us/app/freshmanuals/id1627091250
-  color: blue
+  color: freshmanual
+  image: /res/projects/freshmanual.webp
 
   ready: false
 
   description:
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lead developer during the initial development of the FreshManuals app.
-    Lorem Ipsum has been the industry's standard dummy text ever since the
+    Worked with <b>team of 5</b> at Tightrope Interactive to design, build, and
-    1500s, when an unknown printer took a galley of type and scrambled it to
+    test the <b>mobile product manual aggregator</b>.<br><br>FreshManuals is
-    make a type specimen book. It has survived not only five centuries, but also
+    currently available for download on the <b>iPhone app store</b>.
-    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
+  outcomes:
-      1500s, when an unknown printer took a galley of type and scrambled it to
+    - User interface built using React/React-Native, for multiplatform
-      make a type specimen book.
+      integration.
-      
+
-    - It has survived not only five centuries, but also the leap into electronic
+    - Used Firestore/Firebase to store and access user account data.
-      typesetting, remaining essentially unchanged.
+
+    - 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: [ html, css, js, php, docker, mariadb, azure ]
+  stack: [ react, js, docker ]
-  link: /404
+  link: https://pollbuddy.app
-  color: green
+  color: pollbuddy
+  image: /res/projects/pollbuddy.webp
 
   ready: false
 
   description:
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    React developer for Poll Buddy, an <b>online questionnaire service</b> used by
-    Lorem Ipsum has been the industry's standard dummy text ever since the
+    hundreds of students and teachers on the Rensselaer Polytechnic Institute
-    1500s, when an unknown printer took a galley of type and scrambled it to
+    campus. Worked on <b>cleaning source code</b>, transitioning from legacy
-    make a type specimen book. It has survived not only five centuries, but also
+    technology, and <b>improving the site’s user experience</b>.
-    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
+  outcomes:
-      1500s, when an unknown printer took a galley of type and scrambled it to
+    - Cut 30% of the front-end codebase by switching to the modern, functional
-      make a type specimen book.
+      style.
-      
+
-    - It has survived not only five centuries, but also the leap into electronic
+    - Wrote and refined dozens of front-end tests using Jest for React
-      typesetting, remaining essentially unchanged.
+      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: [ html, css, js, php, docker, mariadb, azure ]
+  stack: [ python, bs ]
-  link: /404
+  link: https://rpicrisis.org
-  color: red
+  color: rpi-crisis
+  image: /res/projects/rpi-crisis.webp
 
   ready: false
 
   description:
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    <b>Backend developer</b> for Correcting Rensselaer’s Insufferable Student
-    Lorem Ipsum has been the industry's standard dummy text ever since the
+    Information System (CRISIS), a web-app to help students organize and <b>manage
-    1500s, when an unknown printer took a galley of type and scrambled it to
+    their curriculum</b> at Rensselaer Polytechnic Institute (RPI). Worked to
-    make a type specimen book. It has survived not only five centuries, but also
+    <b>expand data collection</b> system, and decipher information from RPI’s
-    the leap into electronic typesetting, remaining essentially unchanged.
+    legacy SIS.
-  
-  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
+  outcomes:
-      1500s, when an unknown printer took a galley of type and scrambled it to
+    - Wrote web-scrapers using Beautiful Soup to pull data from QuACS, another
-      make a type specimen book.
+      well-known course scheduler, jump-starting the site’s backend.
-      
+
-    - It has survived not only five centuries, but also the leap into electronic
+    - Wrote web-scrapers to extract course templates from RPI’s numerous
-      typesetting, remaining essentially unchanged.
+      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

@@ -1,13 +1,13 @@
-<link rel="stylesheet" href="/styles/footer.css">
+<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.png" alt="GitHub" width="30" height="30">
+    <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.png" alt="LinkedIn" width="30" height="30">
+    <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

@@ -4,10 +4,10 @@
   <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="/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"></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>
@@ -23,7 +23,7 @@
         </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="/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>

_layouts/default.html

@@ -1,36 +1 @@
-<!DOCTYPE html>
+{% include default.html title=page.title content=content description=page.description %}
-<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

@@ -1,52 +1,54 @@
----
+{% capture description %}
-title: Example
+  A description of work done by Maxim Voldman Hutz for {{page.title}}.
-desc_type: project
+{% endcapture %}
-layout: default
----
 
-{% assign malung = site.data.work[page.data.id] %}
+{% capture inner %}
-{% assign techs = site.data.techs %}
+  {% assign malung = site.data.work[page.project_id] %}
+  {% assign techs = site.data.techs %}
 
-<link rel="stylesheet" href="/styles/experience.css">
+  <link rel="preload stylesheet" href="/styles/experience.css">
-<link rel="stylesheet" href="/styles/tech.css">
+  <link rel="preload stylesheet" href="/styles/tech.css">
 
-<section id="experience" class="dark back">
+  <section id="experience" class="dark back">
-  <section id="banner" class="{{malung.color}} back">
+    <section id="banner" class="{{malung.color}} back">
-    <div>
+      <div>
-      <h1>{{malung.title}}</h1>
+        <h1>{{malung.title}}</h1>
-      <i>{{malung.subtitle}}</i>
+        <i>{{malung.subtitle}}</i>
-    </div>
+      </div>
-    <button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
+      <button id="close-icon" class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
-  </section>
+    </section>
-  <div id="content">
+    <div id="content">
-    <div id="description">
+      <div id="description">
-      <p>
+        <p>
-        {{malung.description}}
+          {{malung.description}}
-      </p>
+        </p>
-      <hr class="lighter">
+        <hr class="lighter">
-      <ul>
+        <ul>
-        {% for outcome in malung.outcomes %}
+          {% for outcome in malung.outcomes %}
-          <li>{{outcome}}</li>
+            <li>{{outcome}}</li>
-        {% endfor %}
+          {% endfor %}
-      </ul>
+        </ul>
-      {% if malung.link %}
+        {% 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>
+          <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">
+      <div id="image-side">
-        {% for tech in malung.stack %}
+        <div id="image" class="shadow">
-          {% assign data = techs[tech] %}
+          {% if malung.image %}
-          <a class="chip {{tech}} shadow" href="{{data.link}}" target="_blank">{{data.name}}</a>
+            <img id="image-inner" src="{{malung.image}}" alt="Image of {{malung.title}}">
-        {% endfor %}
+          {% 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>
-  </div>
+  </section>
-</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

@@ -1,6 +1,6 @@
 ---
 title: Experiences
-description: A list of past and current work and projects from Maxim Voldman Hutz.
+description: A list of work and projects done by Maxim Voldman Hutz.
 layout: default
 ---
 

index.html

@@ -43,7 +43,7 @@ layout: default
           <!-- Add the subtitle, if it exists. -->
           {% if work[project].subtitle %}
             <span>:</span>
-            &nbsp;
+            &nbsp; 
             <p>{{ work[project].subtitle }}</p>
           {% endif %}
         </div>

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

styles/404.css

@@ -1,30 +1 @@
-#notfound {
+#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}
-  --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,286 +1 @@
-html {
+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%)}
-  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;
-}
-
-/*----------------------------------------------------------------------------*/
-
-* {
-  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);
-}
-
-.icon, .r-icon, .button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.icon::before {
-  font-family: 'Material Symbols Outlined';
-  content: attr(data-i);
-  font-size: 36px;
-  margin-right: 5px;
-}
-
-.r-icon::after {
-  font-family: 'Material Symbols Outlined';
-  content: attr(data-i);
-  margin-left: 5px;
-}
-
-h1 {
-  font-size: 40px;
-  font-family: "Open Sans";
-  font-weight: 900;
-}
-
-h2 {
-  font-size: 30px;
-  font-family: "Open Sans";
-  font-weight: 900;
-}
-
-i {
-  font-size: 20px;
-  font-family: "Source Serif Pro";
-}
-
-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;
-}
-
-.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 {
-  position: relative;
-  margin: auto;
-  display: flex;
-  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 {
-  display: flex;
-  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: white;
-  box-sizing: border-box;
-  gap: 30px;
-}
-
-#project-list {
-  overflow: visible;
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: 20px;
-}
-
-.project-item {
-  min-width: max(40%, 300px);
-  flex: 1;
-  height: 300px;
-  background-color: var(--color);
-  border-radius: 10px;
-  overflow: visible;
-  display: flex;
-  flex-direction: column;
-}
-
-.project-link {
-  color: white;
-  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;
-  margin-bottom: 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-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

@@ -1,81 +1 @@
-#banner {
+#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}
-  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

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

styles/global.css

@@ -1,67 +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)}
-  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 }
-
-.flex-space, .flex, br { flex-grow: 1 }
-.flex.dark { background-color: var(--dark) }
-.space { flex: 1000 }
-.npad { padding: 0 !important }
-
-/*----------------------------------------------------------------------------*/
-
-html {
-  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

@@ -1,13 +1 @@
-header {
+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}
-  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

@@ -1,383 +1 @@
-/*---- Base ------------------------------------------------------------------*/
+@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}}
-
-: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: 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 var(--grad);
-  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/tech.scss

@@ -18,7 +18,7 @@
   {% assign data = tech[1] %}
 
   .chip.{{id}} {
-    background-color: {{data.back}};
+    background: {{data.back}};
     color: {{data.fore}};
   }
 {% endfor %}