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

@@ -4,5 +4,48 @@ _site
 vendor
 .vscode
 .DS_Store
-Gemfile
-Gemfile.lock
+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

@@ -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,5 +1,7 @@
 # 🖼️ Max Hutz's Digital Portfolio
-### Hey!
+
+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!)

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

@@ -0,0 +1,5 @@
+exclude:
+  - "*.yml"
+  - "*.md"
+  - "LICENSE"
+  - "terraform/*"

styles/404.css

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

styles/default.css

@@ -1 +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{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%)}
+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

@@ -1 +1,83 @@
-#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}
+#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

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

styles/global.css

@@ -1 +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,.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 }
+.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

@@ -1 +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}
+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

@@ -1 +1,383 @@
-@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}}
+/*---- Base ------------------------------------------------------------------*/
+
+:root {
+  font-family: sans-serif;
+  --timing: cubic-bezier(.2,1,0,1);
+  --enter: 2s var(--timing) 0.2s both;
+  
+  --blue: #3F75A2;
+  --darkblue: #2E5476;
+  --grey: #575757;
+
+  --link-r: #D13800;
+  --link-g: #006B00;
+  --link-b: #006EDB;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+html {
+  font-size: 1vw;
+  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;
+  }
+}

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