FIX: added data folders.

This reverts commit 03c19781e9.

.github/workflows/prepare.yml

@@ -26,15 +26,15 @@ jobs:
 
       - name: Minify files.
         run: |
-          for i in `find . -name "*.js" -type f`; do terser $i --compress -o $i; done
-          for i in `find . -name "*.css" -type f`; do csso $i -o $i; done
-          for i in `find . -name "*.html" -type f`; do html-minifier --remove-comments --collapse-whitespace $i -o $i; done
+          find . -name "*.js" -type f -exec terser {} -c -o {} \;
+          find . -name "*.css" -type f -exec csso {} -o {} \;
+          find . -name "*.html" -type f -exec html-minifier --remove-comments --collapse-whitespace {} -o {} \;
       
       - 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,5 @@
+_site
+.bundle
+.jekyll-cache
+vendor
+.vscode

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,2 @@
+source "https://rubygems.org"
+gem "jekyll", "~> 4.3"

Gemfile.lock

@@ -0,0 +1,70 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    google-protobuf (3.21.12)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.0.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.30.0)
+    safe_yaml (1.0.5)
+    sass-embedded (1.57.1-arm64-darwin)
+      google-protobuf (~> 3.21)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.4.1)
+    webrick (1.7.0)
+
+PLATFORMS
+  arm64-darwin-21
+
+DEPENDENCIES
+  jekyll (~> 4.3)
+
+BUNDLED WITH
+   2.4.2

_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/work.yml

@@ -0,0 +1,151 @@
+malung:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    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 typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      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
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+
+  color:
+    yellow
+
+#*----------------------------------------------------------------------------*#
+
+freshmanual:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    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 typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      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
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+  
+  color:
+    blue
+
+#*----------------------------------------------------------------------------*#
+
+pollbuddy:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    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 typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      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
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+  
+  color:
+    green
+
+#*----------------------------------------------------------------------------*#
+
+rpi-crisis:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    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 typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      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
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+  
+  color:
+    red
+
+#*----------------------------------------------------------------------------*#

_includes/footer.html

@@ -0,0 +1,13 @@
+<link rel="stylesheet" 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">
+  </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">
+  </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">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="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">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,30 @@
+<!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="{{ page.description }}">
+
+    <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 }}
+
+    {% include footer.html %}
+  </body>
+</html>

experiences.html

@@ -0,0 +1,23 @@
+---
+title: Experiences
+description: A list of past and current work and projects from 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 }}">
+        <div class="space"></div>
+        <div class="nav-link project-link r-icon" data-i="arrow_right">{{ data.title }}: {{ data.subtitle }}
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+</section>

index.html

@@ -1,7 +1,44 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta http-equiv="Refresh" content="0; url=resume"/>
-	</head>
-	<body bgcolor="black"></body>
-</html>
+---
+title: Home
+description: This is the home page of Maxim Voldman Hutz's personal website.
+layout: default
+---
+
+{% 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 }}">
+        <div class="space"></div>
+        <div class="nav-link project-link r-icon" data-i="arrow_right">{{ work[project].title }}: {{ work[project].subtitle }}
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+  <hr class="lighter">
+  <a href="/experiences" id="experience-button" class="nav-link white button">View all experiences.</a>
+</section>

res/avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 554 554"><style><![CDATA[.B{filter:url(#C)}.C{fill:#a05abc}.D{fill:#af7ac5}.E{filter:url(#B)}.F{filter:url(#A)}.G{color-interpolation-filters:sRGB}]]></style><defs><filter id="A" x="0" y="0" width="1" height="1" class="G"><feColorMatrix type="hueRotate" values="12"/><feColorMatrix type="saturate" values="1" result="B"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix values="2.125 -3.3125 -3.3125 0 4.36709 -3.3125 2.125 -3.3125 0 4.36709 -3.3125 -3.3125 2.125 0 4.36709 0 0 0 1 0 " in="B"/></filter><filter id="B" x="0" y="0" width="1" height="1" class="G"><feColorMatrix type="hueRotate" values="354"/><feColorMatrix type="saturate" values="1" result="B"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix values="2.125 -3.3125 -3.3125 0 4.36709 -3.3125 2.125 -3.3125 0 4.36709 -3.3125 -3.3125 2.125 0 4.36709 0 0 0 1 0 " in="B"/></filter><filter id="C" x="0" y="0" width="1" height="1" class="G"><feColorMatrix values="2.125 -3.3125 -3.3125 0 4.36709 -3.3125 2.125 -3.3125 0 4.36709 -3.3125 -3.3125 2.125 0 4.36709 0 0 0 1 0 "/></filter><filter id="D" x="0" y="0" width="1" height="1" class="G"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 1 "/><feColorMatrix type="hueRotate" values="161" result="A"/><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/><feBlend in2="A" mode="darken"/><feBlend mode="screen"/><feComposite in2="SourceGraphic" operator="in" result="E"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix type="hueRotate" values="336" in="E"/><feColorMatrix type="saturate" values="1" result="E"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix values="1 -0.8 -0.8 0 1 -0.8 1 -0.8 0 1 -0.8 -0.8 1 0 1 0 0 0 1 0 " in="E"/></filter></defs><g transform="matrix(1.17978 -.082498 .082498 1.17978 -117.279225 -70.898248)" filter="url(#D)"><g class="C"><path d="M329.034 118.009l48.34 70.702-61.966-46.857z" class="B"/><path d="M287.916 216.201l27.192-72.75-2.276 71.404z" class="E"/></g><path d="M341.354 214.234l-53.428 3.133-26.379 45.662z" class="D F"/><path d="M295.643 243.441l-35.168 21.855-9.411 47.981z" class="B C"/><path d="M257.003 274.362l-26.791 32.588 17.846 17.14z" class="B D"/><path d="M229.677 307.956l18.461 18.173-16.318 27.687z" class="B C"/><path d="M232.267 355.613l35.236 20.197-19.043-47.921z" class="D E"/><path d="M233.991 357.815l33.596 19.228 1.623 26.319z" class="B C"/><g class="D"><path d="M268.53 376.38l4.011 83.623 13.242-56.91z" class="F"/><path d="M314.563 199.77l1.868-55.303 15.014 11.036z" class="B"/><path d="M195.95 325.764l6.859-22.709-42.863-13.857z" class="F"/></g><g class="C"><path d="M168.675 300.078L158.5 289.492l-16.355 5.766z" class="B"/><path d="M219.788 374.415l-10.226-20.452-60.977 27.648z" class="E"/></g><path d="M136.464 404.336l11.995-21.618 22.777-2.178z" class="B D"/><path d="M319.018 356.614l-5.302-18.558 62.492 3.409z" class="C F"/><path d="M353.62 349.078l44.176 15.112-20.704-21.546z" class="D E"/><path d="M315.23 392.595l-.379-15.528 41.914 18.34z" class="B C"/><path d="M336.679 395.549l24 20.149-4.045-18.953z" class="B D"/><path d="M350.453 239.583l69.688-28.69 2.841-67.605z" class="C E"/><path d="M424.193 143.574l-2.85 67.696 23.512 41.191z" class="B D"/><path d="M436.075 198.454l33.682 50.976-21.262 16.005z" class="C F"/><path d="M470.223 250.67l-21.145 15.949 6.05 66.934z" class="D E"/><path d="M471.151 251.309l12.241 57.584-29.163 34.087z" class="B C"/><path d="M484.206 309.292l-30.912 36.737 11.631 52.247z" class="B D"/><path d="M452.335 348.661l11.644 50.374-32.734 52.025z" class="C E"/><path d="M443.691 384.322l-13.529 66.991-25.378-10.889z" class="D F"/><path d="M429.773 452.231l-25.312-10.646-44.634 34.427z" class="B C"/><path d="M429.155 454.085l-70.263 23.635 21.306 9.892z" class="B D"/><path d="M356.916 478.092l22.523 10.322-89.083 9.32z" class="C F"/></g></svg>

resume.html

@@ -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: 1;
+  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,254 @@
+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;
+}
+
+/*----------------------------------------------------------------------------*/
+
+* {
+  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;
+}
+
+.icon::before {
+  font-family: 'Material Symbols Outlined';
+  content: attr(data-i);
+  font-size: 36px;
+  margin-right: 5px;
+}
+
+.r-icon::after {
+  font-family: 'Material Symbols Outlined';
+  content: attr(data-i);
+  margin-left: 5px;
+}
+
+h1 {
+  font-size: 40px;
+  font-family: "Open Sans";
+  font-weight: 900;
+}
+
+h2 {
+  font-size: 30px;
+  font-family: "Open Sans";
+  font-weight: 900;
+}
+
+i {
+  font-size: 20px;
+  font-size: "Source Serif Pro";
+}
+
+p {
+  font-size: 20px;
+  font-family: "Open Sans";
+  font-weight: 100;
+}
+
+.lighter {
+  background: #fff4;
+}
+
+.darker {
+  background: #0004;
+}
+
+hr {
+  height: 1px;
+  width: 100%;
+}
+
+.button {
+  color: var(--color);
+  position: relative;
+  padding: 10px 30px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.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 auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 1024px;
+  min-height: 100vh;
+  color: white;
+  box-sizing: border-box;
+  gap: 30px;
+}
+
+#project-list {
+  overflow: visible;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 20px;
+}
+
+.project-item {
+  min-width: max(40%, 300px);
+  flex: 1;
+  height: 300px;
+  background-color: var(--color);
+  border-radius: 10px;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+
+.project-link {
+  color: white;
+  background-color: #0005;
+  padding: 10px;
+  border-radius: 0 0 10px 10px;
+}
+
+#experience-button {
+  align-self: center;
+}
+
+/*----------------------------------------------------------------------------*/
+
+#menu {
+  top: 0;
+  left: 0;
+  max-width: none;
+  max-height: none;
+  position: fixed;
+  background-color: var(--light);
+  color: var(--dark);
+  width: 100vw;
+  font-size: 25px;
+  overflow: visible;
+}
+
+#menu-top {
+  display: flex;
+  align-items: center;
+  transform: translateY(-1.5px);
+}
+
+#menu-inner {
+  max-width: 1024px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin: auto;
+  margin-bottom: 50px;
+}
+
+/*----------------------------------------------------------------------------*/
+
+@media (max-width: 464px) {
+  .nav2, .nav3 {
+    display: none;
+  }
+}
+
+@media (max-width: 813px) and (min-width: 465px) {
+  .nav1, .nav3 {
+    display: none;
+  }
+}
+
+@media (min-width: 814px) {
+  .nav1, .nav2 {
+    display: none;
+  }
+}

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,67 @@
+* {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  outline: 0;
+}
+
+:root {
+  --light: #FEFADC;
+  --dark: #504B43;
+  --red: #EC1B24;
+  --yellow: #E19200;
+  --green: #4CB753;
+  --blue: #2B9EB3;
+
+  --timing: cubic-bezier(0.2, 1, 0, 1);
+  --start-timing: cubic-bezier(0,.5,0,.9);
+
+  --grad: linear-gradient(45deg, #F008, #00F8);
+  --shadow: 0px 10px 50px 0 #0008;
+
+  --width: 1024px;
+}
+
+.light { --color: var(--light) }
+.dark { --color: var(--dark) }
+.red { --color: var(--red) }
+.yellow { --color: var(--yellow) }
+.green { --color: var(--green) }
+.blue { --color: var(--blue) }
+.white { --color: white }
+
+.flex-space, .flex, br { flex-grow: 1 }
+.space { flex: 1000 }
+
+/*----------------------------------------------------------------------------*/
+
+html {
+  background-color: var(--dark);
+}
+
+/*----------------------------------------------------------------------------*/
+
+.back {
+  position: relative;
+  padding: 10px 20px;
+  width: min(100vw, 1024px);
+  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: "";