feat: init tf

Project list

.gitea/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,48 @@
+_site
+.bundle
+.jekyll-cache
+vendor
+.vscode
+.DS_Store
+secrets
+secret.tfvars
+
+# ---> Terraform
+# Local .terraform directories
+.terraform
+
+# .tfstate files
+*.tfstate
+*.tfstate.*
+
+# Crash log files
+crash.log
+crash.*.log
+
+# Exclude all .tfvars files, which are likely to contain sensitive data, such as
+# password, private keys, and other secrets. These should not be part of version 
+# control as they are data points which are potentially sensitive and subject 
+# to change depending on the environment.
+*.tfvars
+*.tfvars.json
+
+# Ignore override files as they are usually used to override resources locally and so
+# are not checked in
+override.tf
+override.tf.json
+*_override.tf
+*_override.tf.json
+
+# Include override files you do wish to add to version control using negated pattern
+# !example_override.tf
+
+# Include tfplan files to ignore the plan output of command: terraform plan -out=tfplan
+# example: *tfplan*
+
+# Ignore CLI configuration files
+*.terraformrc
+terraform.rc
+
+# ---------------------------------------------------------------------------- #
+
+# Custom ignores.

404.html

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

Gemfile

@@ -0,0 +1,33 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 4.3.4"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

Gemfile.lock

@@ -0,0 +1,169 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    bigdecimal (3.1.9)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.4)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.1)
+    ffi (1.17.1-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm-linux-gnu)
+    ffi (1.17.1-arm-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86-linux-gnu)
+    ffi (1.17.1-x86-linux-musl)
+    ffi (1.17.1-x86_64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
+    forwardable-extended (2.6.0)
+    google-protobuf (4.29.3)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-aarch64-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-arm64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-x86-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-x86_64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-x86_64-linux)
+      bigdecimal
+      rake (>= 13)
+    http_parser.rb (0.8.0)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.4)
+      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-feed (0.17.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    minima (2.5.2)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (6.0.1)
+    rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.4.0)
+    rouge (4.5.1)
+    safe_yaml (1.0.5)
+    sass-embedded (1.83.1)
+      google-protobuf (~> 4.29)
+      rake (>= 13)
+    sass-embedded (1.83.1-aarch64-linux-android)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-aarch64-linux-gnu)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-aarch64-linux-musl)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-aarch64-mingw-ucrt)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-arm-linux-androideabi)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-arm-linux-gnueabihf)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-arm-linux-musleabihf)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-arm64-darwin)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-riscv64-linux-android)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-riscv64-linux-gnu)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-riscv64-linux-musl)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-x86_64-cygwin)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-x86_64-darwin)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-x86_64-linux-android)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-x86_64-linux-gnu)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.1-x86_64-linux-musl)
+      google-protobuf (~> 4.29)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.6.0)
+    webrick (1.9.1)
+
+PLATFORMS
+  aarch64-linux
+  aarch64-linux-android
+  aarch64-linux-gnu
+  aarch64-linux-musl
+  aarch64-mingw-ucrt
+  arm-linux-androideabi
+  arm-linux-gnu
+  arm-linux-gnueabihf
+  arm-linux-musl
+  arm-linux-musleabihf
+  arm64-darwin
+  riscv64-linux-android
+  riscv64-linux-gnu
+  riscv64-linux-musl
+  ruby
+  x86-linux
+  x86-linux-gnu
+  x86-linux-musl
+  x86_64-cygwin
+  x86_64-darwin
+  x86_64-linux
+  x86_64-linux-android
+  x86_64-linux-gnu
+  x86_64-linux-musl
+
+DEPENDENCIES
+  http_parser.rb (~> 0.6.0)
+  jekyll (~> 4.3.4)
+  jekyll-feed (~> 0.12)
+  minima (~> 2.5)
+  tzinfo (>= 1, < 3)
+  tzinfo-data
+  wdm (~> 0.1)
+
+BUNDLED WITH
+   2.6.2

README.md

@@ -1,3 +1,9 @@
-# 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,
+
-and what I plan to do.
+Hey!
+
+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)!

Taskfile.yml

@@ -0,0 +1,15 @@
+version: 3
+
+env: { TF: terraform -chdir=terraform }
+silent: true
+
+tasks:
+  tf/init: $TF init -backend-config=../secrets/backend.json
+  tf/plan: $TF plan
+  tf/destroy: $TF destroy
+  tf/format: $TF fmt -recursive
+  tf/apply: 
+    - $TF apply
+    - $TF output -json > secrets/terraform.json
+
+  action: act -W .gitea/workflows --container-architecture linux/amd64

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

styles/404.css

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

styles/default.css

@@ -0,0 +1,296 @@
+html {
+  scroll-behavior: smooth;
+  background-image: linear-gradient(#0003 0% 50%, #0000 50% 100%),
+                    linear-gradient(var(--dark) 0% 50%, var(--light) 50% 100%);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: min(100vw, 1024px);
+  box-sizing: border-box;
+  margin: auto;
+  padding: 0 20px;
+  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);
+}
+
+.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;
+  width: 1em;
+  margin-right: 5px;
+}
+
+.r-icon::after {
+  font-family: 'Material Symbols Outlined';
+  content: attr(data-i);
+  width: 1em;
+  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: min(max(40%, 400px), 100%);
+  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;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.project-image-outer {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+}
+
+.project-image {
+  position: absolute;
+  max-height: 100%;
+  max-width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

styles/experience.css

@@ -0,0 +1,83 @@
+#banner {
+  margin-top: 10px;
+  padding: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+}
+
+#experience {
+  color: white;
+  gap: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+#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 {
+  flex: 1;
+  gap: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: min(300px, 100%);
+}
+
+#image-side {
+  flex: 1;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  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,12 @@
+footer {
+  display: flex;
+  align-items: center;
+  color: white;
+  max-width: 1024px;
+  margin: auto;
+  gap: 10px;
+}
+
+footer::before {
+  filter: brightness(0.8);
+}

styles/global.css

@@ -0,0 +1,71 @@
+* {
+  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-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

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

styles/resume.css

@@ -22,7 +22,6 @@
 
 html {
   font-size: 1vw;
-  background: black;
   animation: var(--enter) scene-enter;
 }
 
@@ -148,7 +147,7 @@ article {
 }
 
 body::before {
-  background: lightsteelblue linear-gradient(45deg, #F008, #00F8);
+  background: lightsteelblue var(--grad);
   width: 100vw;
   height: 100vh;
   content: "";

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

terraform/.terraform.lock.hcl

@@ -0,0 +1,24 @@
+# This file is maintained automatically by "terraform init".
+# Manual edits may be lost in future updates.
+
+provider "registry.terraform.io/hashicorp/aws" {
+  version = "5.83.0"
+  hashes = [
+    "h1:uh/57vwauk96J9HjqvjmWV9sLXbX0YXbYnqUBWooiwQ=",
+    "zh:03a1d4cb151efd9279a3348ecb5e26fe99eb5d217b254e544c7f768a03020d0e",
+    "zh:07637e75abd0809454d9b51b4499059e6fd3eb58d4723c99bc71d21595a9b897",
+    "zh:415868ead3d9b9527418c68468972dd0c9614e69240133d8b1d77641259eb396",
+    "zh:52f343f08881fc88fcbd731cdf480c02edd6eb335934107bbcfb0d97c2a575df",
+    "zh:60d19aed16142fce6fd95087d9de8d8f59681db98588f9384112045ce533f3ce",
+    "zh:62775ba5933b41d00df59fe7ae02027d328ccedc06ff5363ff8d2f48633c4012",
+    "zh:95c7a13b5ef625a672f0ac94d1a20858f60bf09a6517b180f031b707f37d862d",
+    "zh:9adf0d9f349e692b9f51375713c316d28d217f72d2b86deb49e48c3834a41539",
+    "zh:9b12af85486a96aedd8d7984b0ff811a4b42e3d88dad1a3fb4c0b580d04fa425",
+    "zh:b605deb6d3eff97218b6b16b153038ac8e7bd0b8506ae469f2368281dca46cab",
+    "zh:b8542b3672bca0c6ed522b8f65d92ef5720786301abc7d7dae07f07296398b4c",
+    "zh:d975790f409234f9791633adba3ffcfbb2526bc04aed1f379fc8f90370366907",
+    "zh:e621bd43f3a46f122ec450828d590ee2f34c0be5603120876ddfc218861b1802",
+    "zh:e87e2989e99aa21bbfdb603e1325afe11af126684c64821eca8d014f8b762ca5",
+    "zh:f7f6f149d6e1e9d4b979b23b248df14bfe3c497052ec41a6dd40d19bcd9cde9a",
+  ]
+}

terraform/main.tf

@@ -0,0 +1,59 @@
+# Create the S3 bucket.
+
+resource "aws_s3_bucket" "portfolio_bucket" {
+  bucket = var.bucket_name
+
+  tags = {
+    Name        = "Portfolio Bucket"
+    Environment = "Production"
+  }
+}
+
+resource "aws_s3_bucket_public_access_block" "portfolio_bucket_access" {
+  bucket = aws_s3_bucket.portfolio_bucket.id
+
+  block_public_acls   = false
+  block_public_policy = false
+}
+
+resource "aws_s3_bucket_versioning" "portfolio_bucket_access_versioning" {
+  bucket = aws_s3_bucket.portfolio_bucket.id
+
+  versioning_configuration {
+    status = "Disabled"
+  }
+}
+
+#------------------------------------------------------------------------------#
+
+# Give a user access.
+
+data "aws_iam_policy_document" "portfolio_bucket_policy_doc" {
+  statement {
+    effect  = "Allow"
+    actions = ["s3:*", "s3-object-lambda:*"]
+    resources = [
+      "${aws_s3_bucket.portfolio_bucket.arn}/*",
+      "${aws_s3_bucket.portfolio_bucket.arn}"
+    ]
+  }
+}
+
+resource "aws_iam_policy" "portfolio_bucket_policy" {
+  name        = "${var.role_name}Policy"
+  description = "The policy that manages the Portfolio Bucket."
+  policy      = data.aws_iam_policy_document.portfolio_bucket_policy_doc.json
+}
+
+resource "aws_iam_user" "portfolio_bucket_user" {
+  name = "${var.role_name}User"
+}
+
+resource "aws_iam_user_policy_attachment" "portfolio_bucket_attachment" {
+  user       = aws_iam_user.portfolio_bucket_user.name
+  policy_arn = aws_iam_policy.portfolio_bucket_policy.arn
+}
+
+resource "aws_iam_access_key" "portfolio_bucket_key" {
+  user = aws_iam_user.portfolio_bucket_user.name
+}

terraform/outputs.tf

@@ -0,0 +1,16 @@
+output "access_region" {
+  value = aws_s3_bucket.portfolio_bucket.region
+  description = "This is the region of the bucket."
+}
+
+output "access_id" {
+  value = aws_iam_access_key.portfolio_bucket_key.id
+  description = "This is the access ID to modify the bucket."
+  sensitive = true
+}
+
+output "access_secret" {
+  value = aws_iam_access_key.portfolio_bucket_key.secret
+  description = "This is the access secret to modify the bucket."
+  sensitive = true
+}

terraform/variables.tf

@@ -0,0 +1,9 @@
+variable "bucket_name" {
+  type = string
+  description = "The name of the bucket to create."
+}
+
+variable "role_name" {
+  type = string
+  description = "The base name for the role to modify the bucket."
+}