Merge pull request 'Add Terraform Provisioning.' (#1) from feat/terraform into main

Reviewed-on: https://code.maximhutz.com/Web/Portfolio/pulls/1

.github/workflows/prepare.yml

@@ -1,39 +0,0 @@
-name: Prepare changes for deployment.
-
-on:
-  push:
-    branches:
-      - 'main'
-
-jobs:
-  prepare:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          token: ${{ secrets.SECRET }}
-  
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '16'
-
-      - name: Install dependencies.
-        run: npm i -g terser csso-cli html-minifier
-
-      - name: "Copying changes over to build."
-        run: git checkout -b build
-
-      - name: Minify files.
-        run: |
-          find . -name "*.js" -type f -exec terser {} -c -o {} \;
-          find . -name "*.css" -type f -exec csso {} -o {} \;
-      
-      - name: "Commiting changes."
-        run: |
-          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 -uf origin build

.gitignore

@@ -3,3 +3,49 @@ _site
 .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.
+
+*.tfvars
+*.tfbackend

Gemfile

@@ -1,3 +1,33 @@
 source "https://rubygems.org"
-gem "jekyll", "~> 4.3"
+# Hello! This is where you manage which Jekyll version is used to run.
-gem "jekyll-datapage-generator"
+# 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

@@ -1,21 +1,49 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.1)
+    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 6.0)
+      public_suffix (>= 2.0.2, < 7.0)
+    bigdecimal (3.1.9)
     colorator (1.1.0)
-    concurrent-ruby (1.1.10)
+    concurrent-ruby (1.3.4)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.5)
+    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 (3.21.12)
+    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.12.0)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    jekyll (4.3.1)
+    jekyll (4.3.4)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -31,42 +59,111 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
-    jekyll-datapage-generator (1.4.0)
+    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.4.0)
+    kramdown (2.5.1)
-      rexml
+      rexml (>= 3.3.9)
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
+    liquid (4.0.4)
-    listen (3.7.1)
+    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 (5.0.1)
+    public_suffix (6.0.1)
+    rake (13.2.1)
     rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
+    rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.2.5)
+    rexml (3.4.0)
-    rouge (3.30.0)
+    rouge (4.5.1)
     safe_yaml (1.0.5)
-    sass-embedded (1.57.1-arm64-darwin)
+    sass-embedded (1.83.1)
-      google-protobuf (~> 3.21)
+      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.4.1)
+    unicode-display_width (2.6.0)
-    webrick (1.7.0)
+    webrick (1.9.1)
 
 PLATFORMS
-  arm64-darwin-21
+  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
-  jekyll (~> 4.3)
+  http_parser.rb (~> 0.6.0)
-  jekyll-datapage-generator
+  jekyll (~> 4.3.4)
+  jekyll-feed (~> 0.12)
+  minima (~> 2.5)
+  tzinfo (>= 1, < 3)
+  tzinfo-data
+  wdm (~> 0.1)
 
 BUNDLED WITH
-   2.4.2
+   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,16 @@
+version: 3
+
+env: { TF: terraform -chdir=terraform }
+silent: true
+
+tasks:
+  tf/init: $TF init -backend-config=s3.tfbackend
+  tf/plan: $TF plan
+  tf/destroy: $TF destroy
+  tf/format: $TF fmt -recursive
+  tf/apply: 
+    - $TF apply
+    - $TF output -json > terraform.secrets
+
+  action: act -W .gitea/workflows --container-architecture linux/amd64
+  dev: bundle exec jekyll serve

_config.yml

@@ -1,12 +1,5 @@
-plugins:
+exclude:
-  - jekyll-datapage-generator
+  - "*.yml"
-
+  - "*.md"
-page_gen:
+  - "LICENSE"
-- data: work
+  - "terraform/*"
-  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
+
+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.
 
-    - It has survived not only five centuries, but also the leap into electronic
+    - Built account system with PHP, which interfaced with frontend through
-      typesetting, remaining essentially unchanged.
+      backend API.
+
+    - 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.
+    - User interface built using React/React-Native, for multiplatform
+      integration.
 
-    - Lorem Ipsum has been the industry's standard dummy text ever since the
+    - Used Firestore/Firebase to store and access user account data.
-      1500s, when an unknown printer took a galley of type and scrambled it to
-      make a type specimen book.
 
-    - It has survived not only five centuries, but also the leap into electronic
+    - Integrated paid yahoo search results into mobile search results.
-      typesetting, remaining essentially unchanged.
+
+    - 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.
+    - Cut 30% of the front-end codebase by switching to the modern, functional
+      style.
 
-    - Lorem Ipsum has been the industry's standard dummy text ever since the
+    - Wrote and refined dozens of front-end tests using Jest for React
-      1500s, when an unknown printer took a galley of type and scrambled it to
+      components.
-      make a type specimen book.
 
-    - It has survived not only five centuries, but also the leap into electronic
+    - Ran discount usability study on Poll Buddy’s UI, to isolate and correct
-      typesetting, remaining essentially unchanged.
+      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.
+    - Wrote web-scrapers using Beautiful Soup to pull data from QuACS, another
+      well-known course scheduler, jump-starting the site’s backend.
 
-    - Lorem Ipsum has been the industry's standard dummy text ever since the
+    - Wrote web-scrapers to extract course templates from RPI’s numerous
-      1500s, when an unknown printer took a galley of type and scrambled it to
+      major-specific websites.
-      make a type specimen book.
 
-    - It has survived not only five centuries, but also the leap into electronic
+    - Used Lark to parse course requirements from RPI’s convoluted course
-      typesetting, remaining essentially unchanged.
+      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,22 +1,21 @@
----
+{% 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">
       <div>
         <h1>{{malung.title}}</h1>
         <i>{{malung.subtitle}}</i>
       </div>
-    <button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
+      <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">
@@ -30,7 +29,7 @@ layout: default
           {% endfor %}
         </ul>
         {% if malung.link %}
-        <a href="{{malung.link}}" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View {{malung.title}}</a>
+          <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">
@@ -49,4 +48,7 @@ layout: default
         </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
 ---
 

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/default.css

@@ -12,6 +12,7 @@ body {
   box-sizing: border-box;
   margin: auto;
   padding: 0 20px;
+  line-height: 1.2;
 }
 
 /*----------------------------------------------------------------------------*/
@@ -51,12 +52,14 @@ button {
   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;
 }
 
@@ -192,7 +195,7 @@ nav {
 }
 
 .project-item {
-  min-width: max(40%, 300px);
+  min-width: min(max(40%, 400px), 100%);
   flex: 1;
   height: 300px;
   background-color: var(--color);
@@ -272,6 +275,9 @@ nav {
   flex: 1000;
   justify-content: center;
   align-items: center;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 10px;
 }
 
 .project-image-outer {
@@ -283,4 +289,8 @@ nav {
 .project-image {
   position: absolute;
   max-height: 100%;
+  max-width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }

styles/experience.css

@@ -13,12 +13,6 @@
   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 {
@@ -40,6 +34,9 @@
   color: #aaa;
   position: relative;
   text-align: center;
+  padding: 10px;
+  hyphens: manual;
+  box-sizing: border-box;
 }
 
 #description {
@@ -53,7 +50,7 @@
 
 #image-side {
   flex: 1;
-  gap: 30px;
+  gap: 20px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -62,7 +59,7 @@
 
 #stack {
   display: flex;
-  gap: 20px;
+  gap: 10px;
   flex-flow: row wrap;
 }
 
@@ -79,3 +76,8 @@
   max-width: 100%;
   max-height: 100%;
 }
+
+#close-icon {
+  font-size: 36px;
+  line-height: 1;
+}

styles/global.css

@@ -29,6 +29,10 @@
 .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) }

styles/tech.scss

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

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."
+}