Update devenv packages

- Use more generic metadata key names for portfolio

.editorconfig

@@ -0,0 +1,25 @@
+# EditorConfig is awesome: https://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = false
+trim_trailing_whitespace = true
+
+# JSON Files
+[*.{json}]
+indent_size = 2
+
+# Markdown Files
+[*.{md,mdx}]
+trim_trailing_whitespace = false
+
+# Web Files
+[*.{html,js,css}]
+indent_size = 2

.eleventy.js

@@ -0,0 +1,64 @@
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy("./src/style.css");
+  eleventyConfig.addPassthroughCopy("./src/assets");
+  eleventyConfig.addPassthroughCopy("./src/scripts");
+
+  eleventyConfig.addFilter(
+    "findAssociation",
+    function (entries, associatedEntry) {
+      return entries.filter(function (entry) {
+        return entry.data.associatedEntry == associatedEntry;
+      });
+    },
+  );
+
+  eleventyConfig.addCollection("professionalExperience", (collection) => {
+    return collection
+      .getFilteredByGlob("./src/portfolio/professionalExperience/*.md")
+      .sort((a, b) =>
+        Number(a.data.displayOrder) < Number(b.data.displayOrder) ? 1 : -1,
+      );
+  });
+
+  eleventyConfig.addCollection("education", (collection) => {
+    return collection
+      .getFilteredByGlob("./src/portfolio/education/*.md")
+      .sort((a, b) =>
+        Number(a.data.displayOrder) < Number(b.data.displayOrder) ? 1 : -1,
+      );
+  });
+
+  eleventyConfig.addCollection("highlights", (collection) => {
+    return collection
+      .getFilteredByGlob("./src/portfolio/highlights/*.md")
+      .sort((a, b) =>
+        Number(a.data.displayOrder) > Number(b.data.displayOrder) ? 1 : -1,
+      );
+  });
+
+  eleventyConfig.addCollection("software", (collection) => {
+    return collection
+      .getFilteredByGlob("./src/personal/software/*.md")
+      .sort((a, b) =>
+        Number(a.data.displayOrder) > Number(b.data.displayOrder) ? 1 : -1,
+      );
+  });
+
+  eleventyConfig.addCollection("hardware", (collection) => {
+    return collection
+      .getFilteredByGlob("./src/personal/hardware/*.md")
+      .sort((a, b) =>
+        Number(a.data.displayOrder) > Number(b.data.displayOrder) ? 1 : -1,
+      );
+  });
+
+  return {
+    markdownTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+    dir: {
+      input: "src",
+      output: "dist",
+    },
+  };
+};

.envrc

@@ -0,0 +1,3 @@
+source_url "https://raw.githubusercontent.com/cachix/devenv/82c0147677e510b247d8b9165c54f73d32dfd899/direnvrc" "sha256-7u4iDd1nZpxL4tCzmPG0dQgC5V+/44Ba+tHkPob1v2k="
+
+use devenv

.gitignore

@@ -0,0 +1,15 @@
+# eleventy output
+dist
+
+# Devenv
+.devenv*
+devenv.local.nix
+
+# direnv
+.direnv
+
+# pre-commit
+.pre-commit-config.yaml
+
+# NodeJS
+node_modules/

devenv.lock

@@ -0,0 +1,103 @@
+{
+  "nodes": {
+    "devenv": {
+      "locked": {
+        "dir": "src/modules",
+        "lastModified": 1739444039,
+        "owner": "cachix",
+        "repo": "devenv",
+        "rev": "1235cd13f47df6ad19c8a183c6eabc1facb7c399",
+        "type": "github"
+      },
+      "original": {
+        "dir": "src/modules",
+        "owner": "cachix",
+        "repo": "devenv",
+        "type": "github"
+      }
+    },
+    "flake-compat": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1733328505,
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "rev": "ff81ac966bb2cae68946d5ed5fc4994f96d0ffec",
+        "type": "github"
+      },
+      "original": {
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "type": "github"
+      }
+    },
+    "git-hooks": {
+      "inputs": {
+        "flake-compat": "flake-compat",
+        "gitignore": "gitignore",
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1737465171,
+        "owner": "cachix",
+        "repo": "git-hooks.nix",
+        "rev": "9364dc02281ce2d37a1f55b6e51f7c0f65a75f17",
+        "type": "github"
+      },
+      "original": {
+        "owner": "cachix",
+        "repo": "git-hooks.nix",
+        "type": "github"
+      }
+    },
+    "gitignore": {
+      "inputs": {
+        "nixpkgs": [
+          "git-hooks",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1709087332,
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1733477122,
+        "owner": "cachix",
+        "repo": "devenv-nixpkgs",
+        "rev": "7bd9e84d0452f6d2e63b6e6da29fe73fac951857",
+        "type": "github"
+      },
+      "original": {
+        "owner": "cachix",
+        "ref": "rolling",
+        "repo": "devenv-nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "devenv": "devenv",
+        "git-hooks": "git-hooks",
+        "nixpkgs": "nixpkgs",
+        "pre-commit-hooks": [
+          "git-hooks"
+        ]
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

devenv.nix

@@ -0,0 +1,20 @@
+{ pkgs, lib, config, inputs, ... }:
+
+{
+  # https://devenv.sh/packages/
+  packages = [
+      pkgs.git
+      pkgs.yaml-language-server
+      pkgs.typescript-language-server
+      pkgs.nodePackages.prettier
+  ];
+
+  # https://devenv.sh/languages/
+  # languages.rust.enable = true;
+  languages.javascript = {
+      enable = true;
+      npm.enable = true;
+      npm.install.enable = true;
+  };
+  languages.nix.enable = true;
+}

devenv.yaml

@@ -0,0 +1,15 @@
+# yaml-language-server: $schema=https://devenv.sh/devenv.schema.json
+inputs:
+  nixpkgs:
+    url: github:cachix/devenv-nixpkgs/rolling
+
+# If you're using non-OSS software, you can set allowUnfree to true.
+# allowUnfree: true
+
+# If you're willing to use a package that's vulnerable
+# permittedInsecurePackages:
+#  - "openssl-1.1.1w"
+
+# If you have more than one devenv you can merge them
+#imports:
+# - ./backend

index.html

@@ -1,7 +0,0 @@
-<!--Dummy File to Redirect to index.html in Web Pages Folder-->
-<head>
-	<meta
-		http-equiv="refresh"
-		content="0; url=./src/index.html"
-	/>
-</head>

justfile

@@ -0,0 +1,22 @@
+set shell := ["bash", "-c"]
+
+PORT := "1280"
+
+# List just commands by default
+default:
+    @just --list
+
+# Update development environment
+update:
+    devenv update && \
+    npm update
+
+# Run development server
+dev:
+    npx @11ty/eleventy \
+        --serve \
+        --port={{ PORT }};
+
+# Build static site files
+build-site:
+    npx @11ty/eleventy

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@11ty/eleventy": "latest"
+  }
+}

src/_data/contact.json

@@ -0,0 +1,28 @@
+{
+  "items": [
+    {
+      "label": "Email",
+      "icon": "/assets/about/email.png",
+      "link": "mailto:balajsra@umich.edu",
+      "displayText": "balajsra@umich.edu"
+    },
+    {
+      "label": "LinkedIn",
+      "icon": "/assets/about/linkedin.png",
+      "link": "https://www.linkedin.com/in/sravan-balaji",
+      "displayText": "sravan-balaji"
+    },
+    {
+      "label": "GitHub",
+      "icon": "/assets/about/github.png",
+      "link": "https://github.com/balajsra",
+      "displayText": "balajsra"
+    },
+    {
+      "label": "YouTube",
+      "icon": "/assets/about/youtube.png",
+      "link": "https://www.youtube.com/channel/UC-xFJ4IKdogbpoQdQf2mgaA",
+      "displayText": "Sravan Balaji"
+    }
+  ]
+}

src/_data/navigation.json

@@ -0,0 +1,37 @@
+{
+    "items": [
+        {
+            "text": "About",
+            "url": "/about/",
+            "sections": [
+                "Bio",
+                "Contact Me"
+            ]
+        },
+        {
+            "text": "Portfolio",
+            "url": "/portfolio/",
+            "sections": [
+                "Resume",
+                "Professional Experience",
+                "Education",
+                "Research"
+            ]
+        },
+        {
+            "text": "Personal",
+            "url": "/personal/",
+            "sections": []
+        },
+        {
+            "text": "Blog",
+            "url": "/blog/",
+            "sections": []
+        },
+        {
+            "text": "Documentation",
+            "url": "/documentation/",
+            "sections": []
+        }
+    ]
+}

src/_data/site.json

@@ -0,0 +1,7 @@
+{
+  "author": "Sravan Balaji",
+  "url": "https://sravanbalaji.com",
+  "copyrightYear": 2019,
+  "licenseFile": "https://github.com/balajsra/sravanbalaji.com/blob/master/LICENSE",
+  "licenseName": "MIT License"
+}

src/_includes/layouts/about.html

@@ -0,0 +1,38 @@
+<!doctype html>
+{% extends "layouts/base.html" %}
+{% from "macros.html" import sectionHeading %}
+{% block content %}
+<div class="container-fluid px-md-6">
+  {{ sectionHeading("Bio") }}
+
+  <div class="row align-items-center">
+    <div class="col-md-3">
+      <img
+        class="img-fluid mx-auto d-block"
+        src="{{ profilePicture }}"
+      />
+    </div>
+    <div class="col-md-9">
+      {{ content | safe }}
+    </div>
+  </div>
+
+  {{ sectionHeading("Contact Me") }}
+
+  <div class="row align-items-center">
+    {% for item in contact.items %}
+    <div class="col-md-{{ 12//contact.items.length }} text-center">
+      <a href="{{ item.link }}" target="_blank">
+        <img
+          class="img-fluid mx-auto d-block"
+          width=50%
+          alt="{{ item.label }}"
+          src="{{ item.icon }}"
+        />
+      </a>
+      <p><br /><b>{{ item.label }}:</b> {{ item.displayText }}</p>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+{% endblock %}

src/_includes/layouts/base.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en" color-mode="light">
+  <head>
+    {% include "partials/site-head.html" %}
+    {% include "partials/navigation.html" %}
+  </head>
+
+  <body>
+    <main tabindex="-1" id="main-content">{% block content %}{% endblock %}</main>
+  </body>
+
+  <footer>
+    {% include "partials/footer.html" %}
+  </footer>
+</html>

src/_includes/layouts/home.html

@@ -0,0 +1,14 @@
+<!doctype html>
+{% extends "layouts/base.html" %}
+{% from "macros.html" import sectionHeading %}
+{% block content %}
+<div class="container-fluid px-md-6">
+  {{ sectionHeading("Welcome") }}
+
+  <div class="row align-items-center">
+    <div class="col-md-12">
+      {{ content | safe }}
+    </div>
+  </div>
+</div>
+{% endblock %}

src/_includes/layouts/personal.html

@@ -0,0 +1,8 @@
+<!doctype html>
+{% extends "layouts/base.html" %}
+{% block content %}
+<div class="container-fluid px-md-6">
+  {% include "partials/software.html" %}
+  {% include "partials/hardware.html" %}
+</div>
+{% endblock %}

src/_includes/layouts/portfolio.html

@@ -0,0 +1,10 @@
+<!doctype html>
+{% extends "layouts/base.html" %}
+{% block content %}
+<div class="container-fluid px-md-6">
+  {% include "partials/resume.html" %}
+  {% include "partials/professionalExperience.html" %}
+  {% include "partials/education.html" %}
+  <!-- {% include "partials/research.html" %} -->
+</div>
+{% endblock %}

src/_includes/macros.html

@@ -0,0 +1,79 @@
+<!doctype html>
+{% macro sectionHeading(name) %}
+<div class="row align-items-center">
+  <div class="col-md-12">
+    <h1>
+      <a name="{{ name | slugify }}">{{ name }}</a>
+    </h1>
+  </div>
+</div>
+{% endmacro %}
+
+{% macro portfolioWithHighlights(portfolio, highlights) %}
+{% for entry in portfolio %}
+<div class="row">
+  <div class="col-md-6">
+    <div class="row">
+      <div class="col-md-4">
+        <a href="{{ entry.data.url }}" target="_blank">
+          <img
+            class="img-fluid mx-auto d-block"
+            width="100%"
+            src="{{ entry.data.logo }}"
+          />
+        </a>
+      </div>
+      <div class="col-md-8">
+        <h2><b>{{ entry.data.association }}</b></h2>
+        <h3>{{ entry.data.entryTitle }}</h3>
+        <h4>{{ entry.data.location }}</h4>
+        <h5><i>{{ entry.data.startDate }} - {{ entry.data.endDate }}</i></h5>
+        {{ entry.content | safe }}
+      </div>
+    </div>
+  </div>
+  {% set associatedHighlights = (highlights | findAssociation(entry.data.id)) %}
+  {% if associatedHighlights.length > 0 %}
+  <div class="col-md-6">
+    <div class="accordion accordion-flush" id="{{ entry.data.id }}">
+      {% for highlight in associatedHighlights %}
+      {% set highlightSlug = (entry.data.id + '-' + highlight.data.name | slugify) %}
+      <div class="accordion-item">
+        <div class="accordion-header"">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ highlightSlug }}">
+            <b>{{ highlight.data.name }}</b>
+          </button>
+        </div>
+        <div id="{{ highlightSlug }}" class="accordion-collapse collapse" data-bs-parent="#{{ entry.data.id }}">
+          <div class="accordion-body">
+            {{ highlight.content | safe }}
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endfor %}
+{% endmacro %}
+
+{% macro personalItems(personal) %}
+{% for entry in personal %}
+<div class="row">
+  <div class="col-md-2">
+    <a href="{{ entry.data.url }}" target="_blank">
+    <img
+      class="img-fluid mx-auto d-block"
+      width="50%"
+      src="{{ entry.data.logo }}"
+    />
+    </a>
+  </div>
+  <div class="col-md-10">
+    <h2><b>{{ entry.data.category }}: <a href="{{ entry.data.url }}" target="_blank">{{ entry.data.name }}</a></b></h2>
+    {{ entry.content | safe }}
+  </div>
+</div>
+{% endfor %}
+{% endmacro %}

src/_includes/partials/education.html

@@ -0,0 +1,6 @@
+<!doctype html>
+{% from "macros.html" import sectionHeading %}
+{{ sectionHeading("Education") }}
+
+{% from "macros.html" import portfolioWithHighlights %}
+{{ portfolioWithHighlights(collections.education, collections.highlights) }}

src/_includes/partials/footer.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<div class="container-fluid px-md-6">
+  <div class="row align-items-center">
+    <div class="col-md-12">
+      <small>
+        Copyright &copy; {{ site.copyrightYear }} {{ site.author }} under
+        <a
+          rel="license"
+          href="{{ site.licenseFile }}"
+          target="_blank"
+        >{{ site.licenseName }}</a>
+      </small>
+    </div>
+  </div>
+</div>

src/_includes/partials/hardware.html

@@ -0,0 +1,6 @@
+<!doctype html>
+{% from "macros.html" import sectionHeading %}
+{{ sectionHeading("Hardware") }}
+
+{% from "macros.html" import personalItems %}
+{{ personalItems(collections.hardware) }}

src/_includes/partials/navigation.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<header role="banner" class="site-head">
+  <nav class="navbar my-nav navbar-expand-md fixed-top">
+    <div class="container-fluid">
+      <!-- Brand -->
+      <a class="navbar-brand" href="/">
+        <img src="/assets/branding/logo.png" alt="Icon" width="30px" height="30px"
+          class="d-inline-block align-top" />
+        <img src="/assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center" />
+      </a>
+
+      <!-- Toggler/collapsible Button -->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <!-- Navbar links -->
+      <div class="collapse navbar-collapse" id="navbarToggler">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            {% for item in navigation.items %}
+            {% if item.sections.length > 0 %}
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" id="{{ item.text | slugify }}" role="button" data-bs-toggle="dropdown" href="{{ item.url }}"><b>{{ item.text }}</b></a>
+              <ul class="dropdown-menu">
+                {% for section in item.sections %}
+                <li><a class="dropdown-item" href="{{ item.url }}#{{ section | slugify }}">{{ section }}</a></li>
+                {% endfor %}
+              </ul>
+            </li>
+            {% else %}
+            <li class="nav-item">
+              <a class="nav-link" href="{{ item.url }}"><b>{{ item.text }}</b></a>
+            </li>
+            {% endif %}
+            {% endfor %}
+        </ul>
+      </div>
+
+      <!-- Dark Mode Toggle -->
+      <!-- Reference: https://github.com/coliff/dark-mode-switch -->
+      <div class="form-check form-switch">
+        <input type="checkbox" class="form-check-input" id="darkSwitch" />
+        <label class="form-check-label" for="darkSwitch" id="darkSwitchLabel">Dark Mode</label>
+      </div>
+      <script src="/scripts/dark-mode-switch.min.js"></script>
+    </div>
+  </nav>
+</header>

src/_includes/partials/professionalExperience.html

@@ -0,0 +1,6 @@
+<!doctype html>
+{% from "macros.html" import sectionHeading %}
+{{ sectionHeading("Professional Experience") }}
+
+{% from "macros.html" import portfolioWithHighlights %}
+{{ portfolioWithHighlights(collections.professionalExperience, collections.highlights) }}

src/_includes/partials/research.html

@@ -0,0 +1,3 @@
+<!doctype html>
+{% from "macros.html" import sectionHeading %}
+{{ sectionHeading("Research") }}

src/_includes/partials/resume.html

@@ -0,0 +1,16 @@
+<!doctype html>
+{% from "macros.html" import sectionHeading %}
+{{ sectionHeading("Resume") }}
+
+<div class="row align-items-center">
+  <div class="col-md-12">
+    <p>
+      The latest version of my resume is hosted on
+      <a
+        href="https://github.com/balajsra/resume/blob/master/sravan_balaji_resume.pdf"
+        target="_blank"
+        >GitHub</a
+      >.
+    </p>
+  </div>
+</div>

src/_includes/partials/site-head.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<!--Required meta tags-->
+<meta charset="utf-8" />
+<meta name="author" content="{{ site.author }}" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<!-- Bootstrap -->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+    crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
+    integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
+    crossorigin="anonymous"></script>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<!-- jQuery -->
+<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
+    integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
+
+<!-- highlight.js -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script>hljs.highlightAll();</script>
+
+<!-- Stylesheet -->
+<link rel="stylesheet" type="text/css" href="/style.css" />
+
+<!-- Favicon -->
+<link rel="icon" href="/assets/branding/favicon.ico" type="image/x-icon" />
+
+<!-- Title -->
+<title>{{ title }}</title>

src/_includes/partials/software.html

@@ -0,0 +1,6 @@
+<!doctype html>
+{% from "macros.html" import sectionHeading %}
+{{ sectionHeading("Software") }}
+
+{% from "macros.html" import personalItems %}
+{{ personalItems(collections.software) }}

src/about.html

@@ -1,169 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" color-mode="light">
-  <head>
-    <script
-      language="javascript"
-      type="text/javascript"
-      src="common/header.txt"
-    ></script>
-    <title>About</title>
-  </head>
-
-  <script
-    language="javascript"
-    type="text/javascript"
-    src="common/navbar.txt"
-  ></script>
-
-  <body>
-    <div class="container-fluid px-md-6">
-      <!---------------------------------
-                BIO
-            ----------------------------------->
-      <div id="bio">
-        <div class="row align-items-center">
-          <div class="col-md-12">
-            <h1><a name="bio">Bio</a></h1>
-          </div>
-        </div>
-        <div class="row align-items-center">
-          <div class="col-md-3">
-            <img
-              class="img-fluid mx-auto d-block"
-              src="./assets/about/profile_picture.jpg"
-            />
-          </div>
-          <div class="col-md-9">
-            <p>
-              Sravan Balaji completed his undergraduate and graduate degrees at
-              the
-              <a href="https://umich.edu" target="_blank"
-                >University of Michigan, Ann Arbor</a
-              >. He earned dual B.S.E.'s in
-              <a href="https://me.engin.umich.edu/" target="_blank"
-                >Mechanical Engineering</a
-              >
-              and
-              <a href="https://cse.engin.umich.edu/" target="_blank"
-                >Computer Science</a
-              >
-              in December 2020 and an M.S. in
-              <a href="https://robotics.umich.edu/" target="_blank">Robotics</a>
-              in December 2021.
-            </p>
-
-            <p>
-              Sravan worked as a Graduate Navigation Intern at
-              <a href="https://www.mitre.org/" target="_blank">MITRE</a>
-              during summer 2021. You can learn more about this and his other
-              work experiences in the
-              <a href="./portfolio.html#professional_experience"
-                >professional experience</a
-              >
-              section of the
-              <a href="./portfolio.html">portfolio</a> page. He is currently
-              working at
-              <a href="https://www.mitre.org/" target="_blank">MITRE</a>
-              as an Associate Autonomous Systems Engineer in McLean, VA.
-            </p>
-
-            <p>
-              Sravan's professional and academic interests are in controls,
-              motion planning, robotic perception & manipulation, autonomous &
-              connected vehicles, software development, and GNU/Linux among
-              other things. His personal interests include video games,
-              podcasts, music, cooking, football, soccer, formula 1, and
-              productivity software.
-            </p>
-          </div>
-        </div>
-        <div class="row align-items-center">
-          <div class="col-md-12">
-            <h1><a name="contact_me">Contact Me</a></h1>
-          </div>
-        </div>
-        <div class="row align-items-center">
-          <div class="col-md-12">
-            <p>
-              Feel free to reach out to me via email if you have any questions
-              about my website, college education, professional experience, or
-              anything else. If you have suggestions for the website or would
-              like to see the source files, check out my
-              <a
-                href="https://github.com/balajsra/sravanbalaji.com"
-                target="_blank"
-              >
-                GitHub repository</a
-              >. If you would like to connect with me on LinkedIn, use the link
-              below. I will do my best to respond to any communication in a
-              timely manner. Finally, check out my YouTube channel if you are
-              interested in some of the projects I have worked on.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!---------------------------------
-                CONTACT ME
-            ----------------------------------->
-      <div id="contact_me">
-        <div class="row align-items-center">
-          <div class="col-md-3 text-center">
-            <a href="mailto:balajsra@umich.edu" target="_blank">
-              <img
-                class="img-fluid mx-auto d-block"
-                alt="Email"
-                src="./assets/about/email.png"
-              />
-            </a>
-            <p><br /><b>Email:</b> balajsra@umich.edu</p>
-          </div>
-          <div class="col-md-3 text-center">
-            <a
-              href="https://www.linkedin.com/in/sravan-balaji/"
-              target="_blank"
-            >
-              <img
-                class="img-fluid mx-auto d-block"
-                alt="LinkedIn"
-                src="./assets/about/linkedin.png"
-              />
-            </a>
-            <p><br /><b>LinkedIn:</b> sravan-balaji</p>
-          </div>
-          <div class="col-md-3 text-center">
-            <a href="https://github.com/balajsra" target="_blank">
-              <img
-                class="img-fluid mx-auto d-block"
-                alt="GitHub"
-                src="./assets/about/github.png"
-              />
-            </a>
-            <p><br /><b>GitHub:</b> balajsra</p>
-          </div>
-          <div class="col-md-3 text-center">
-            <a
-              href="https://www.youtube.com/channel/UC-xFJ4IKdogbpoQdQf2mgaA"
-              target="_blank"
-            >
-              <img
-                class="img-fluid mx-auto d-block"
-                alt="YouTube"
-                src="./assets/about/youtube.png"
-              />
-            </a>
-            <p><br /><b>YouTube:</b> Sravan Balaji</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-
-  <footer>
-    <script
-      language="javascript"
-      type="text/javascript"
-      src="common/footer.txt"
-    ></script>
-  </footer>
-</html>

src/about.md

@@ -0,0 +1,11 @@
+---
+title: About
+layout: "layouts/about.html"
+profilePicture: "/assets/about/profile_picture.jpg"
+---
+
+Sravan Balaji completed his undergraduate and graduate degrees at the [University of Michigan, Ann Arbor](https://umich.edu). He earned dual B.S.E.'s in [Mechanical Engineering](https://me.engin.umich.edu) and [Computer Science](https://cse.engin.umich.edu) in December 2020 and an M.S. in [Robotics](https://robotics.umich.edu) in December 2021.
+
+Sravan worked as a Graduate Navigation Intern at [MITRE](https://www.mitre.org) during summer 2021. You can learn more about this and his other work experiences in the [professional experience](/portfolio#professional_experience) section of the [portfolio](/portfolio) page. He later returned to [MITRE](https://www.mitre.org) full-time to work as an Autonomous Systems Engineer in McLean, VA. He currently works at [Metron](https://metsci.com) as a Software Engineer in Reston, VA.
+
+Sravan's professional and academic interests are in controls, motion planning, robotic perception & manipulation, autonomous & connected vehicles, software development, and GNU/Linux among other things. His personal interests include video games, podcasts, music, cooking, football, soccer, formula 1, and productivity software.

src/assets/software/logo-signal.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
-  <path fill="#3a76f0" d="M0,0v1024h1024V0H0z"/>
-  <path fill="#ffffff" d="M427.5,170.3l7.9,32A319.6,319.6,0,0,0,347,238.9l-16.9-28.3A347.6,347.6,0,0,1,427.5,170.3Zm169,0-7.9,32A319.6,319.6,0,0,1,677,238.9l17.1-28.3A350.1,350.1,0,0,0,596.5,170.3ZM210.6,330a349.5,349.5,0,0,0-40.3,97.5l32,7.9A319.6,319.6,0,0,1,238.9,347ZM193,512a318.5,318.5,0,0,1,3.6-47.8l-32.6-5a352,352,0,0,0,0,105.5l32.6-4.9A319.5,319.5,0,0,1,193,512ZM693.9,813.3,677,785.1a317.8,317.8,0,0,1-88.3,36.6l7.9,32A350.3,350.3,0,0,0,693.9,813.3ZM831,512a319.5,319.5,0,0,1-3.6,47.8l32.6,4.9a352,352,0,0,0,0-105.5l-32.6,5A318.5,318.5,0,0,1,831,512Zm22.7,84.4-32-7.9A319,319,0,0,1,785.1,677l28.3,17A348.9,348.9,0,0,0,853.7,596.4Zm-293.9,231a319.1,319.1,0,0,1-95.6,0L459.3,860a351.3,351.3,0,0,0,105.4,0Zm209-126.2a318.1,318.1,0,0,1-67.6,67.5l19.6,26.6A355.1,355.1,0,0,0,795.4,721Zm-67.6-446a318.6,318.6,0,0,1,67.6,67.6L795.4,303A354.6,354.6,0,0,0,721,228.6Zm-446,67.6a318.6,318.6,0,0,1,67.6-67.6L303,228.6A354.6,354.6,0,0,0,228.6,303ZM813.4,330l-28.3,17a317.8,317.8,0,0,1,36.6,88.3l32-7.9A348.9,348.9,0,0,0,813.4,330ZM464.2,196.6a319.1,319.1,0,0,1,95.6,0l4.9-32.6a351.3,351.3,0,0,0-105.4,0ZM272.1,804.1,204,819.9l15.9-68.1-32.1-7.5-15.9,68.1a33,33,0,0,0,24.6,39.7,34.5,34.5,0,0,0,15,0l68.1-15.7Zm-77.5-89.2,32.2,7.4,11-47.2a316.2,316.2,0,0,1-35.5-86.6l-32,7.9a353.3,353.3,0,0,0,32.4,83.7Zm154,71.4-47.2,11,7.5,32.2,34.7-8.1a349,349,0,0,0,83.7,32.4l7.9-32a316.7,316.7,0,0,1-86.3-35.7ZM512,226c-158,.1-285.9,128.2-285.9,286.1a286.7,286.7,0,0,0,43.9,152L242.5,781.5,359.8,754c133.7,84.1,310.3,44,394.4-89.6S798.3,354.2,664.7,270A286.7,286.7,0,0,0,512,226s"/>
-</svg>

src/common/footer.html

@@ -1,15 +0,0 @@
-<div class="container-fluid px-md-6">
-	<div class="row align-items-center">
-		<div class="col-md-12">
-			<small>
-				Copyright &copy; 2019 Sravan Balaji under
-				<a
-					rel="license"
-					href="https://docs.google.com/gview?url=https://github.com/balajsra/sravanbalaji.com/raw/master/LICENSE"
-					target="_blank"
-					>MIT License</a
-				>
-			</small>
-		</div>
-	</div>
-</div>

src/common/footer.txt

@@ -1 +0,0 @@
-document.write('<div class="container-fluid px-md-6"> <div class="row align-items-center"> <div class="col-md-12"> <small> Copyright &copy; 2019 Sravan Balaji under <a rel="license" href="https://docs.google.com/gview?url=https://github.com/balajsra/sravanbalaji.com/raw/master/LICENSE" target="_blank" >MIT License</a > </small> </div> </div> </div> ')

src/common/header.html

@@ -1,43 +0,0 @@
-<!--Required meta tags-->
-<meta charset="utf-8" />
-<meta name="author" content="Sravan Balaji" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-
-<!-- Bootstrap -->
-<link
-	rel="stylesheet"
-	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
-	crossorigin="anonymous"
-/>
-<script
-	src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-	crossorigin="anonymous"
-></script>
-<script
-	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
-	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
-	crossorigin="anonymous"
-></script>
-<script
-	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
-	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
-	crossorigin="anonymous"
-></script>
-
-<!-- highlight.js -->
-<link
-	rel="stylesheet"
-	href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/default.min.css"
-/>
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/highlight.min.js"></script>
-<script>
-	hljs.initHighlightingOnLoad();
-</script>
-
-<!-- Stylesheet -->
-<link rel="stylesheet" type="text/css" href="style/styles.css" />
-
-<!-- Favicon -->
-<link rel="icon" href="././assets/branding/favicon.ico" type="image/x-icon" />

src/common/header.txt

@@ -1 +0,0 @@
-document.write('<!--Required meta tags--> <meta charset="utf-8" /> <meta name="author" content="Sravan Balaji" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> <!-- highlight.js --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/default.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/highlight.min.js"></script> <script> hljs.initHighlightingOnLoad(); </script> <!-- Stylesheet --> <link rel="stylesheet" type="text/css" href="style/styles.css" /> <!-- Favicon --> <link rel="icon" href="././assets/branding/favicon.ico" type="image/x-icon" /> ')

src/common/navbar.html

@@ -1,174 +0,0 @@
-<nav class="navbar my-nav navbar-expand-md fixed-top">
-	<!-- Brand -->
-	<a class="navbar-brand" href="./index.html">
-		<img
-			src="./assets/branding/logo.png"
-			alt="Icon"
-			width="30px"
-			height="30px"
-			class="d-inline-block align-top"
-		/>
-		<img
-			src="./assets/branding/name.png"
-			alt="Name"
-			height="30px"
-			class="d-inline-block align-center"
-		/>
-	</a>
-
-	<!-- Toggler/collapsible Button -->
-	<button
-		class="navbar-toggler"
-		type="button"
-		data-toggle="collapse"
-		data-target="#collapsibleNavbar"
-	>
-		<span class="navbar-toggler-icon"></span>
-	</button>
-
-	<!-- Navbar links -->
-	<div class="collapse navbar-collapse" id="collapsibleNavbar">
-		<ul class="navbar-nav">
-			<!-- About -->
-			<li class="nav-item dropdown">
-				<a
-					class="nav-link dropdown-toggle"
-					href="./about.html"
-					id="navbardrop"
-					data-toggle="dropdown"
-				>
-					About
-				</a>
-				<div class="dropdown-menu">
-					<a class="dropdown-item" href="./about.html#bio"> Bio </a>
-					<a class="dropdown-item" href="./about.html#contact_me">
-						Contact Me
-					</a>
-				</div>
-			</li>
-
-			<!-- Portfolio -->
-			<li class="nav-item dropdown">
-				<a
-					class="nav-link dropdown-toggle"
-					href="./portfolio.html"
-					id="navbardrop"
-					data-toggle="dropdown"
-				>
-					Portfolio
-				</a>
-				<div class="dropdown-menu">
-					<a class="dropdown-item" href="./portfolio.html#resume">
-						Resume
-					</a>
-					<a class="dropdown-item" href="./portfolio.html#education">
-						Education
-					</a>
-					<a
-						class="dropdown-item"
-						href="./portfolio.html#professional_experience"
-					>
-						Professional Experience
-					</a>
-					<!-- <a class="dropdown-item" href="./portfolio.html#research">
-                        Research
-                    </a>
-                    <a class="dropdown-item" href="./portfolio.html#projects">
-                        Projects
-                    </a> -->
-				</div>
-			</li>
-
-			<!-- Personal -->
-			<li class="nav-item dropdown">
-				<a
-					class="nav-link dropdown-toggle"
-					href="./personal.html"
-					id="navbardrop"
-					data-toggle="dropdown"
-				>
-					Personal
-				</a>
-				<div class="dropdown-menu">
-					<a class="dropdown-item" href="./personal.html#software">
-						Software
-					</a>
-					<a class="dropdown-item" href="./personal.html#hardware">
-						Hardware
-					</a>
-					<a class="dropdown-item" href="./personal.html#video_games">
-						Video Games
-					</a>
-					<a class="dropdown-item" href="./personal.html#podcasts">
-						Podcasts
-					</a>
-					<a class="dropdown-item" href="./personal.html#music">
-						Music
-					</a>
-				</div>
-			</li>
-
-			<!-- Blog -->
-			<li class="nav-item">
-				<a class="nav-link" href="./blog.html"> Blog </a>
-			</li>
-
-			<!-- Documentation -->
-			<li class="nav-item dropdown">
-				<a
-					class="nav-link dropdown-toggle"
-					href="./documentation.html"
-					id="navbardrop"
-					data-toggle="dropdown"
-				>
-					Documentation
-				</a>
-				<div class="dropdown-menu">
-					<a
-						class="dropdown-item"
-						href="./documentation.html#introduction"
-					>
-						Introduction
-					</a>
-					<a
-						class="dropdown-item"
-						href="./documentation.html#website_hosting"
-					>
-						Website Hosting
-					</a>
-					<a
-						class="dropdown-item"
-						href="./documentation.html#web_design"
-					>
-						Web Design
-					</a>
-					<a
-						class="dropdown-item"
-						href="./documentation.html#aesthetics"
-					>
-						Aesthetics
-					</a>
-					<a
-						class="dropdown-item"
-						href="./documentation.html#inspiration"
-					>
-						Inspiration
-					</a>
-				</div>
-			</li>
-		</ul>
-	</div>
-
-	<!-- Dark Mode Toggle -->
-	<!-- Reference: https://github.com/coliff/dark-mode-switch -->
-	<div class="custom-control custom-switch">
-		<input type="checkbox" class="custom-control-input" id="darkSwitch" />
-		<label
-			class="custom-control-label"
-			for="darkSwitch"
-			id="darkSwitchLabel"
-			>Dark Mode</label
-		>
-	</div>
-	<script src="./scripts/dark-mode-switch.min.js"></script>
-</nav>

src/common/navbar.txt

@@ -1 +0,0 @@
-document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="./index.html"> <img src="./assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top" /> <img src="./assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center" /> </a> <!-- Toggler/collapsible Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./about.html" id="navbardrop" data-toggle="dropdown" > About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./about.html#bio"> Bio </a> <a class="dropdown-item" href="./about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./portfolio.html" id="navbardrop" data-toggle="dropdown" > Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="./portfolio.html#education"> Education </a> <a class="dropdown-item" href="./portfolio.html#professional_experience" > Professional Experience </a> <!-- <a class="dropdown-item" href="./portfolio.html#research"> Research </a> <a class="dropdown-item" href="./portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./personal.html" id="navbardrop" data-toggle="dropdown" > Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./personal.html#software"> Software </a> <a class="dropdown-item" href="./personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="./personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="./personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="./personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="./blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./documentation.html" id="navbardrop" data-toggle="dropdown" > Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./documentation.html#introduction" > Introduction </a> <a class="dropdown-item" href="./documentation.html#website_hosting" > Website Hosting </a> <a class="dropdown-item" href="./documentation.html#web_design" > Web Design </a> <a class="dropdown-item" href="./documentation.html#aesthetics" > Aesthetics </a> <a class="dropdown-item" href="./documentation.html#inspiration" > Inspiration </a> </div> </li> </ul> </div> <!-- Dark Mode Toggle --> <!-- Reference: https://github.com/coliff/dark-mode-switch --> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="darkSwitch" /> <label class="custom-control-label" for="darkSwitch" id="darkSwitchLabel" >Dark Mode</label > </div> <script src="./scripts/dark-mode-switch.min.js"></script> </nav> ')

src/index.html

@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" color-mode="light">
-  <head>
-    <script
-      language="javascript"
-      type="text/javascript"
-      src="common/header.txt"
-    ></script>
-    <title>Sravan Balaji</title>
-  </head>
-
-  <script
-    language="javascript"
-    type="text/javascript"
-    src="common/navbar.txt"
-  ></script>
-
-  <body>
-    <div class="container-fluid px-md-6">
-      <div class="row align-items-center">
-        <div class="col-md-12">
-          <h1>Welcome!</h1>
-          <p>
-            Welcome to my personal website! This started out as a side project
-            to learn about web development and UI design, but it has since
-            expanded into a professional portfolio and blog (sort of). If you
-            are a fan of dark mode, try out the toggle button in the upper right
-            corner!
-
-            <br /><br />
-
-            On this website, you can find information about my
-            <a href="./portfolio.html#education">educational</a> and
-            <a href="./portfolio.html#professional_experience"
-              >professional career</a
-            >
-            as well as some of my
-            <a href="./personal.html">personal interests</a>. If you are looking
-            to create your own website and are curious about how I created and
-            hosted this one, please see the
-            <a href="./documentation.html">documentation</a>
-            page.
-
-            <br /><br />
-
-            This website is a constant work in progress and updates will be made
-            as I find time. You can follow development and make suggestions on
-            <a
-              href="https://github.com/balajsra/sravanbalaji.com"
-              target="_blank"
-              >GitHub</a
-            >.
-          </p>
-        </div>
-      </div>
-    </div>
-  </body>
-
-  <footer>
-    <script
-      language="javascript"
-      type="text/javascript"
-      src="common/footer.txt"
-    ></script>
-  </footer>
-</html>

src/index.md

@@ -0,0 +1,10 @@
+---
+title: Sravan Balaji
+layout: "layouts/home.html"
+---
+
+Welcome to my personal website! This started out as a side project to learn about web development and UI design, but it has since expanded into a professional portfolio and blog (sort of). If you are a fan of dark mode, try out the toggle button in the upper right corner!
+
+On this website, you can find information about my [educational](./portfolio.html#education) and [professional career](./portfolio.html#professional_experience) as well as some of my [personal interests](./personal.html). If you are looking to create your own website and are curious about how I created and hosted this one, please see the [documentation](./documentation.html) page.
+
+This website is a constant work in progress and updates will be made as I find time. You can follow development and make suggestions on [GitHub](https://github.com/balajsra/sravanbalaji.com).

src/personal.md

@@ -0,0 +1,508 @@
+---
+title: Personal
+layout: "layouts/personal.html"
+---
+        <div class="row align-items-center">
+          <div class="col-md-3">
+            <img
+              class="img-fluid mx-auto d-block"
+              src="./assets/hardware/galaxy-z-fold-4.png"
+            />
+          </div>
+          <div class="col-md-9">
+            <h2>Phone: Samsung Galaxy Z Fold 4</h2>
+            <p>
+              I was originally really hesitant about getting a folding phone
+              given some of the quality control issues with the early
+              generations of the Galaxy Z Fold, but the 4th is really where
+              Samsung refined their design to the point that I think it is ready
+              for the mainstream. I upgraded to this from a Galaxy S10+, which I
+              absolutely loved. However, this device is a step above even the
+              top of the line slab style phones. The versatility of having an
+              almost full size phone when folded, and an amazing tablet when
+              unfolded is unmatched by the competition (at least in the U.S.
+              market). Multi tasking and content consumption on the big screen
+              is absolutely amazing. No longer do I need to pull out a big and
+              clunky tablet (like the Microsoft Surface Go I had before) to
+              watch a movie. Now, I just pull out my phone and unfold it into a
+              screen that is plenty big enough to watch whatever I want.
+              Sometimes, I even watch a live sports match while multi-tasking
+              with stats on a second app. This kind of functionality will
+              definitely cost you, but given that it can replace two devices,
+              can fit in your pocket, and supports the S-pen, I can absolutely
+              recommend this device for anyone looking to upgrade to a folding
+              phone.
+            </p>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-md-3">
+            <img
+              class="img-fluid mx-auto d-block"
+              src="./assets/hardware/galaxy-watch5-pro.png"
+            />
+          </div>
+          <div class="col-md-9">
+            <h2>Watch: Samsung Galaxy Watch 5 Pro</h2>
+            <p>
+              With the Samsung Galaxy Watch 5 Pro (and some older devices),
+              Samsung partnered with Google to build a new version of Wear OS.
+              Now, you get the amazing user experience from Samsung's old Tizen
+              OS with all the app support of Google's Wear OS. The Watch 5 Pro
+              drops the mechanical bezel that I loved on my old Galaxy Watch,
+              but the capacitive bezel is perfectly fine. Battery live is
+              decent, but nothing special in my experience. I can usually get a
+              little more than a full day's worth of battery even with the
+              always on display activated. It charges pretty quickly though, so
+              I've never had an issue as long as I charge it for a bit every
+              morning before leaving for the day. If you're an Android phone
+              user, I can absolutely recommend this device. Especially if you
+              have a samsung phone.
+            </p>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-md-3">
+            <img
+              class="img-fluid mx-auto d-block"
+              src="./assets/hardware/galaxy_buds2pro.png"
+            />
+          </div>
+          <div class="col-md-9">
+            <h2>Wireless Earbuds: Samsung Galaxy Buds 2 Pro</h2>
+            <p>
+              Upgraded to the Galaxy Buds 2 Pro along with the Galaxy Watch 5
+              Pro when I bought the Z Fold 4 as a part of a bundle. I was
+              running into battery issues with my old Galaxy Buds, so these have
+              been a welcome improvement. Audio quality is good enough for my
+              needs, but nothing special considering the physical limitations of
+              in-ear bud style audio products. Haven't had any issue with
+              battery life as I generally don't use them long enough to burn
+              through the entire battery. Even if you do, you can pop them back
+              into the case which will charge them. Haven't done any significant
+              testing with mic quality, but haven't had issues taking calls on
+              them. I love that they come with noise cancelling and audio
+              passthrough, so you can hear your surroundings when walking around
+              outside and block out the noise when working.
+            </p>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-md-3">
+            <img
+              class="img-fluid mx-auto d-block"
+              src="./assets/hardware/wh-1000xm4.png"
+            />
+          </div>
+          <div class="col-md-9">
+            <h2>Wireless Headphones: Sony WH-1000XM4</h2>
+            <p>
+              I previously purchased the WH-1000XM2's, but decided to upgrade
+              after seeing the XM4's on sale. The XM4's are an improvement in
+              every way and well worth the price. Sound quality is amazing,
+              noise cancelling is excellent, and it has audio passthrough in
+              case you need to hear your environment. If you need wireless
+              bluetooth headphones, this is it. My favorite feature is
+              definitely the ability to connect to two devices (e.g. laptop and
+              phone) at once. This means I can answer a call on my phone while
+              listening to music on my laptop without having to completely
+              disconnect and reconnect. If you want to use the better sounding
+              LDAC codec, you will only be able to connect to one device at a
+              time. This is a worth while tradeoff in my opinion considering how
+              much better everything sounds. I also really like the battery
+              life. Sony reports 30 hours of charge. If you will be away from an
+              outlet for an extended period of time and plan on using your
+              headphones a lot, these are great.
+            </p>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-md-3">
+            <a
+              href="https://www.keychron.com/products/keychron-q1-pro-qmk-via-wireless-custom-mechanical-keyboard"
+              target="_blank"
+            >
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/hardware/keychron_q1_pro.avif"
+              />
+            </a>
+          </div>
+          <div class="col-md-9">
+            <h2>Mechanical Keyboard: Keychron Q1 Pro</h2>
+            <p>
+              I've always been interested in custom mechanical keyboards, but
+              never enough to really dive into the hobby. This changed recently
+              and I decided to look into buying a pre-built base board with
+              solid build quality, an option to connect wirelessly, media
+              controls (e.g., volume knob), hot swappable switches, and keymapping software that works
+              on Linux. After some searching, I came across the Keychron Q1 Pro,
+              which is the wireless version of the much loved Keychron Q1. I
+              haven't really tried any mechanical switches before, so I went
+              with
+              <a
+                href="https://www.keychron.com/products/gateron-cap-switch-set?variant=40119285284953"
+                target="_blank"
+                >Gateron Browns</a
+              >
+              which have a tactile bump, but aren't too loud. These are quiet
+              enough to be used in an office setting or during a call while
+              still being satisfying to type on. The switches definitely aren't
+              as clicky as my old Razer Huntsman Elite, which I see as a plus.
+              It takes a little bit of getting used to, but I absolutely love
+              them now. For the keycaps, I went with
+              <a
+                href="https://www.keychron.com/products/cherry-profile-double-shot-pbt-full-set-keycaps-player"
+                target="_blank"
+                >Cherry Profile Double-Shot PBT Full Set Keycaps - Player</a
+              >
+              from Keychron. These look absolutely amazing (in my opinion), but
+              I'm sure I'll look into other sets when they come back in stock in
+              the future. I also love that this is a 75% keyboard. It has just
+              enough keys for some special functions I use on my computer and
+              gives me a bunch of desk space back.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!---------------------------------
+				VIDEO GAMES
+			----------------------------------->
+      <div id="video_games">
+        <div class="row align-items-center">
+          <div class="col-md-12">
+            <h1><a name="video_games">Video Games</a></h1>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-md-12">
+            <h2>Favorite Games</h2>
+            <p>
+              These are a couple of my all-time favorite video games (of the
+              ones I have played), organized by platform. I haven't necessarily
+              completed all of them, but these are the ones that I enjoyed the
+              most or found the most memorable. Some cross-platform games that I
+              previously played on other systems, like Xbox 360, have since been
+              re-purchased on PC. I have listed these cross-platform games under
+              PC (even if played elsewhere) since this is currently my primary
+              gaming platform.
+            </p>
+            <p>
+              From the platforms listed below, you may be wondering about some
+              notable omissions like The Legend of Zelda: Breath of the Wild,
+              Bloodborne, God of War, Fallout: New Vegas, Portal 2, etc. While I
+              do own these and have played them, I never really got past the
+              first few hours for one reason or another. I do intend to return
+              to these (at least the ones available on PC) when I find time and
+              will update this list accordingly.
+            </p>
+            <p>
+              I have started using
+              <a href="https://www.grouvee.com" target="_blank">Grouvee</a> to
+              track my video game collection as it has a nice interface, is
+              free, has metadata for tons of games (across multiple platforms),
+              and has great social features. You can check out
+              <a href="https://www.grouvee.com/user/sr98vn/" target="_blank"
+                >my profile on Grouvee</a
+              >
+              to see a (somewhat) full list of games I have played, am currently
+              playing, or am interested in playing.
+            </p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-4">
+            <img
+              class="img-fluid mx-auto d-block"
+              src="./assets/video_games/logo-nintendo-switch.png"
+            />
+            <br />
+            <ul>
+              <li>Animal Crossing: New Horizons</li>
+              <li>Fire Emblem: Three Houses</li>
+              <li>Mario Kart 8 Deluxe</li>
+              <li>Super Smash Bros. Ultimate</li>
+            </ul>
+          </div>
+          <div class="col-md-4">
+            <img
+              class="img-fluid mx-auto d-block"
+              src="./assets/video_games/logo-ps4.jpg"
+            />
+            <br />
+            <ul>
+              <li>Marvel's Spider-Man</li>
+            </ul>
+          </div>
+          <div class="col-md-4">
+            <img
+              class="img-fluid mx-auto d-block"
+              src="./assets/video_games/logo-pc.jpeg"
+            />
+            <br />
+            <ul>
+              <li>Assassin's Creed II</li>
+              <li>Batman: Arkham City</li>
+              <li>Borderlands 2</li>
+              <li>Dark Souls - 1 (Remastered) & 3</li>
+              <li>Dishonored - 1 & 2</li>
+              <li>Dragon Age: Inquisition</li>
+              <li>Dragon Quest XI: Echoes of an Elusive Age</li>
+              <li>Fallout 4</li>
+              <li>Far Cry 3</li>
+              <li>Grand Theft Auto V</li>
+              <li>Just Cause 2</li>
+              <li>Mass Effect Legendary Edition</li>
+              <li>Middle-Earth - Shadow of Mordor & Shadow of War</li>
+              <li>Minecraft</li>
+              <li>Red Dead Redemption - 1 & 2</li>
+              <li>Star Wars: Jedi Fallen Order</li>
+              <li>The Elder Scrolls V: Skyrim</li>
+              <li>The Sims 3</li>
+              <li>The Witcher III: Wild Hunt</li>
+              <li>Titanfall 2</li>
+              <li>Watch Dogs 2</li>
+              <li>Yakuza: Like a Dragon</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!---------------------------------
+				PODCASTS
+			----------------------------------->
+      <div id="podcasts">
+        <div class="row align-items-center">
+          <div class="col-md-12">
+            <h1><a name="podcasts">Podcasts</a></h1>
+          </div>
+        </div>
+
+        <!-- Hardcore History -->
+        <div class="row align-items-center">
+          <div class="col-md-2">
+            <a href="https://pca.st/hardcorehist" target="_blank">
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/podcasts/hardcore-history.jpg"
+              />
+            </a>
+          </div>
+          <div class="col-md-10">
+            <h2>
+              <a href="https://pca.st/hardcorehist" target="_blank"
+                >Dan Carlin's Hardcore History</a
+              >
+            </h2>
+            <p>
+              This is long-form historical discussion and analysis. If you are
+              interested in diving deep into historical events from the
+              perspective of someone who knows how to tell a story, this is the
+              podcast for you. Episodes are generally 4 to 5 hours long and
+              aren't released very often as they require an enormous amount of
+              research.
+            </p>
+          </div>
+        </div>
+
+        <!-- Decoder -->
+        <div class="row align-items-center">
+          <div class="col-md-2">
+            <a href="https://pca.st/decoder" target="_blank">
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/podcasts/decoder.jpg"
+              />
+            </a>
+          </div>
+          <div class="col-md-10">
+            <h2>
+              <a href="https://pca.st/decoder" target="_blank"
+                >Decoder with Nilay Patel</a
+              >
+            </h2>
+            <p>
+              This is a podcast about big ideas and other problems. Verge
+              editor-in-chief Nilay Patel talks to a diverse cast of innovators
+              and policy makers on the frontiers of business and technology to
+              reveal how they're navigating an ever-changing landscape, what
+              keeps them up at night, and what it all means for our shared
+              future. This is one of my favorite interview style podcasts
+              because Nilay does a great job of asking tough questions of his
+              interviewees and explaining complex things in an easy to
+              understand way.
+            </p>
+          </div>
+        </div>
+
+        <!-- Football Weekly -->
+        <div class="row align-items-center">
+          <div class="col-md-2">
+            <a href="https://pca.st/footballweekly" target="_blank">
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/podcasts/football-weekly.jpg"
+              />
+            </a>
+          </div>
+          <div class="col-md-10">
+            <h2>
+              <a href="https://pca.st/footballweekly" target="_blank"
+                >Football Weekly</a
+              >
+            </h2>
+            <p>
+              I love the light-hearted and sometimes comedic news & review of
+              European football matches. The rotating cast of football
+              journalists and long-time hosts are thoroughly enjoyable to listen
+              to every week. Definitely recommend this podcast for any football
+              (soccer) fans.
+            </p>
+          </div>
+        </div>
+
+        <!-- Missed Apex F1 -->
+        <div class="row align-items-center">
+          <div class="col-md-2">
+            <a href="https://pca.st/cz12" target="_blank">
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/podcasts/missed-apex.jpg"
+              />
+            </a>
+          </div>
+          <div class="col-md-10">
+            <h2>
+              <a href="https://pca.st/cz12" target="_blank"
+                >Missed Apex F1 Podcast</a
+              >
+            </h2>
+            <p>
+              The
+              <a href="https://www.netflix.com" target="_blank">Netflix</a>
+              documentary series
+              <a href="https://www.netflix.com/title/80204890" target="_blank"
+                >Formula 1: Drive to Survive</a
+              >
+              really piqued my interest in motorsport. As I started to follow
+              the 2021 F1 season more intently (especially the dramatic and
+              controversial finale in Abu Dhabi), I found the Missed Apex F1
+              podcast. The hosts are very entertaining and provide detailed
+              analysis and opinions of each race and the season as a whole. If
+              you are interested in following F1, I definitely recommend
+              checking this podcast out.
+            </p>
+          </div>
+        </div>
+
+        <!-- Throughline -->
+        <div class="row align-items-center">
+          <div class="col-md-2">
+            <a href="https://pca.st/lmm1" target="_blank">
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/podcasts/throughline.jpg"
+              />
+            </a>
+          </div>
+          <div class="col-md-10">
+            <h2>
+              <a href="https://pca.st/lmm1" target="_blank">Throughline</a>
+            </h2>
+            <p>
+              The premise of Throughline is exploring how we can look at the
+              past to understand the present. The hosts are awesome and always
+              find very interesting stories in the past relating to current
+              events that help put things in perspective.
+            </p>
+          </div>
+        </div>
+
+        <!-- Vergecast -->
+        <div class="row align-items-center">
+          <div class="col-md-2">
+            <a href="https://pca.st/vergecast" target="_blank">
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/podcasts/vergecast.jpg"
+              />
+            </a>
+          </div>
+          <div class="col-md-10">
+            <h2>
+              <a href="https://pca.st/vergecast" target="_blank"
+                >The Vergecast</a
+              >
+            </h2>
+            <p>
+              The Vergecast is perhaps my favorite podcast of any genre. The
+              hosts discuss the week's tech news and other nerdy topics as well
+              as interviews with tech leaders. Cannot recommend this enough.
+            </p>
+          </div>
+        </div>
+
+        <!-- WWDTM -->
+        <div class="row align-items-center">
+          <div class="col-md-2">
+            <a href="https://pca.st/nprwaitwait" target="_blank">
+              <img
+                class="img-fluid mx-auto d-block"
+                src="./assets/podcasts/wait-wait.jpg"
+              />
+            </a>
+          </div>
+          <div class="col-md-10">
+            <h2>
+              <a href="https://pca.st/nprwaitwait" target="_blank"
+                >Wait Wait... Don't Tell Me!</a
+              >
+            </h2>
+            <p>
+              This is my favorite news/comedy podcast. I love hearing about the
+              week's wacky stories and the rotating panel of comedians' opinions
+              on world events.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!---------------------------------
+				MUSIC
+			----------------------------------->
+      <div class="music">
+        <div class="row align-items-center">
+          <div class="col-md-12">
+            <h1><a name="music">Music</a></h1>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-md-12">
+            <h2>Spotify Playlist</h2>
+            <p>These are my current (approximately 100) favorite songs.</p>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-md-12">
+            <iframe
+              src="https://open.spotify.com/embed/playlist/28Qjnry0Pw8D6Z6n5pzxSv"
+              width="100%"
+              height="580"
+              allowtransparency="true"
+              allow="encrypted-media"
+            ></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+
+  <footer>
+    <script
+      language="javascript"
+      type="text/javascript"
+      src="common/footer.txt"
+    ></script>
+  </footer>
+</html>

src/personal/hardware/oryx-pro-7.md

@@ -0,0 +1,13 @@
+---
+displayOrder: 1
+url: "https://system76.com/laptops"
+logo: "/assets/hardware/oryx-pro-7.png"
+category: "Laptop"
+name: "System76 Oryx Pro 7"
+---
+
+Around 2020, I was looking for a Linux laptop that I could use for development, general productivity, and gaming over the next couple of years. While I loved my old desktop and ultrabook laptop, I really wanted one device that could fill both roles. After doing some research, I landed on [System76](https://system76.com). They are a U.S. based company that specializes in selling Linux laptops, desktops, and servers. They also make their own Linux distribution in [Pop!_OS](https://pop.system76.com).
+
+Of their available laptops, the Oryx Pro lineup seemed to be the best balance of portability, power, and hybrid graphics. The last point is especially important to me because I wanted to be able to extend battery life by turning off the discrete GPU when I didn't need it. I have seen many reports of poor customer service on [r/System76](https://www.reddit.com/r/System76) as of late, but take this with a grain of salt as the people who tend to be the most vocal about their experiences tend to be those with highly negative experiences.
+
+Since my original purchase back in 2020, my needs have changed. I don't necessarily need or want a singular device to fill every role moving forward. The [Steam Deck](https://store.steampowered.com/steamdeck) and other gaming handhelds have proven that you can still get great gaming experiences on the go. When I eventually decide to upgrade, I'll probably get a less powerful laptop like those offered by [Framework](https://frame.work/) for on-the-go use and build a powerful desktop for home use.

src/personal/software/beeper.md

@@ -0,0 +1,11 @@
+---
+displayOrder: 3
+url: "https://www.beeper.com"
+logo: "/assets/software/logo-beeper.png"
+category: "Instant Messaging"
+name: "Beeper"
+---
+
+If you hate having to switch between messaging services to chat with people, you'll love [Beeper](https://www.beeper.com). It is a universal messaging app that acts as a bridge to your existing services like WhatsApp, Discord, SMS, etc. It works across mobile and desktop and offers a clean unified interface for all your chats.
+
+Checkout their [GitHub](https://github.com/beeper) if you're curious about some of the technical details of how this works. tl;dr it's built on top of the [Matrix protocol](https://matrix.org/). You can even [self-host bridges](https://github.com/beeper/bridge-manager) if you're interested.

src/personal/software/bitwarden.md

@@ -0,0 +1,11 @@
+---
+displayOrder: 7
+url: "https://bitwarden.com/"
+logo: "/assets/software/logo-bitwarden.png"
+category: "Password Manager"
+name: "Bitwarden"
+---
+
+The most important feature of password managers is security. Bitwarden is open source, which means the source code, features, and infrastructure security are vetted and improved by a global community of cybersecurity experts. Additionally, all information stored in Bitwarden is end-to-end encrypted, so you can trust it with sensitive data like banking passwords, social security numbers, etc. I especially love that it offers its core features free for personal use, is available on all major platforms (including Linux), and can sync across devices. If you aren't using a password manager and don't want to pay a monthly or yearly subscription, I highly suggest that you give this a look.
+
+I liked it so much that I opted for the [premium plan](https://bitwarden.com/pricing/) which offers an integrated 2-factor authenticator. For only $10 a year, I'm happy to support the project and get a couple extra features.

src/personal/software/emacs.md

@@ -0,0 +1,11 @@
+---
+displayOrder: 1
+url: "https://github.com/doomemacs/doomemacs"
+logo: "/assets/software/logo-emacs.png"
+category: "IDE / Text Editor"
+name: "Doom Emacs"
+---
+
+I originally tried Emacs because I had heard it is highly configurable and has amazing features like [Org Mode](https://orgmode.org) and [Magit](https://magit.vc). My initial impression was that it was extremely difficult to use due to its unintuitive design and high reliance on keybindings. After watching some videos by [System Crafters](https://www.youtube.com/c/SystemCrafters), I slowly picked up on these keybindings and how to go about configuring Emacs to my liking. I especially liked the [Emacs from Scratch](https://www.youtube.com/playlist?list=PLEoMzSkcN8oPH1au7H6B7bBJ4ZO7BXjSZ) series which helped me build up my [personal configuration](https://github.com/balajsra/emacs). After using this configuration for a couple months, I came to realize that there are just too many missing features and issues that I kept having to find resolutions for.
+
+This is why I decided to switch to [Doom Emacs](https://github.com/hlissner/doom-emacs), which is a distribution of Emacs that comes pre-configured with stability, performance, and vim keybindings in mind. The [DoomCasts](https://www.youtube.com/playlist?list=PLhXZp00uXBk4np17N39WvB80zgxlZfVwj) series by [Zaiste Programming](https://www.youtube.com/c/ZaisteProgramming) provides a good introduction to Doom Emacs in video form. My experience with Doom so far has been great. It works a lot more like what I expected my personal Emacs configuration to be, but is much easier to use and configure. Startup time is significantly faster, editing files is faster, vim-like keybindings are already setup, and it is functional out of the box. You can checkout my Doom Emacs configuration on [GitHub](https://github.com/balajsra/doom-emacs-config). I have been using [Chemacs 2](https://github.com/plexus/chemacs2) to easily switch between my personal and Doom configurations so I can compare and make improvements.

src/personal/software/gentoo.md

@@ -0,0 +1,17 @@
+---
+displayOrder: 3
+url: "https://www.gentoo.org"
+logo: "/assets/software/logo-gentoo.png"
+category: "Operating System"
+name: "Gentoo Linux"
+---
+
+I started my Linux journey with Ubuntu, which I was using for my college CS classes. I eventually got tired of Windows and migrated my personal computers to PopOS! for the better hardware compatibility and better GNOME-esque experience by default.
+
+As with almost everyone who goes down the Linux rabbit hole, I eventually found my way to Arch and stuck with it for a few years until I tried Gentoo (based on a recommendation from someone I met at a [NoVaLUG](https://novalug.org) meeting).
+
+With Gentoo, you get near complete control over your system (e.g., you can use init systems other than systemd if you so desire), a stable package update schedule (with the option to go "unstable" if desired), rolling release, and an amazing package manager (portage).
+
+USE flags are probably its key selling point. You can enable/disable certain features in almost every package since you compile packages yourself (at least the ones that are open source). There are options to download binaries as well if you're limited on compute resources and/or time. It doesn't have the same community as the AUR in terms of package availability, but you can always write your own ebuilds for packages that don't exist in the main repo or community maintained ones like GURU.
+
+I maintain a [personal overlay](https://github.com/balajsra/sravan-overlay) with ebuilds for packages I use.

src/personal/software/obsidian.md

@@ -0,0 +1,17 @@
+---
+displayOrder: 2
+url: "https://obsidian.md/"
+logo: "/assets/software/logo-obsidian.png"
+category: "Personal Knowledge Management"
+name: "Obsidian"
+---
+
+[Notion](https://www.notion.com) was my previous favorite, but I started looking for alternatives due to the lack of an offline mode. The always online model has let me down a few times and I also didn't like the idea of handing over all of my data to a 3rd party company. Security and privacy are extremely important for personal notes.
+
+When looking for alternatives, I was intrigued by the idea of having all my notes in plain-text. [Org mode for GNU Emacs](https://orgmode.org/) is an amazing solution, but it lacks the cross-platform support that I need. If you primarily write and use your notes on desktop, I definitely recommend Org mode.
+
+The other obvious place to look was markdown based editors like [Logseq](https://logseq.com/) and [Obsidian](https://obsidian.md). I preferred Logseq for a time because it is completely open-source, unlike Obsidian. However, it structures all its notes as an outline rather than plain markdown that you can format however you choose. This lack of flexibility in the fundamental design finally led me to switch to Obsidian.
+
+While not open-source, Obsidian is free for personal use. It has an amazing set of community plugins that extend the base functionality to include features like [task management](https://publish.obsidian.md/tasks/Introduction) that I use extensively. If having complete ownership over your notes is important to you, definitely give this a shot.
+
+Obsidian does offer a paid [sync service](https://obsidian.md/sync) if you want to synchronize your notes across any device. However, since the notes are just plain-text, you can just as easily use [Git](https://github.com/Vinzent03/obsidian-git) or [Syncthing](https://syncthing.net) to do it yourself.

src/personal/software/pocket-casts.md

@@ -0,0 +1,13 @@
+---
+displayOrder: 4
+url: "https://pocketcasts.com"
+logo: "/assets/software/logo-pocket-casts.png"
+category: "Podcasts"
+name: "Pocket Casts"
+---
+
+Pocket Casts is by far my favorite app for listening to podcasts. It has all the features you could ask for like automatically downloading new episodes and adding them to your queue, boosting the volume of dialogue, cutting out silence, and more! They support mobile apps, wearables, and a web player.
+
+Unfortunately, they made the regrettable decision to switch from a one-time purchase to a subscription model. After backlash from the community, Pocket Casts partially reversed course by giving [lifetime Pocket Casts Plus access](https://support.pocketcasts.com/knowledge-base/lifetime-access-to-pocket-casts-plus/) to users who had previously purchased the web app (myself included). At the price of $9 prior to September 2019, this was an absolute steal.
+
+While the base functionality in the mobile app is free, the new [subscription plans](https://pocketcasts.com/plans/#plans) which include access to the desktop and wearable apps (as well as some other nice features) come in at $40 or $80 per year. I can't necessarily recommend these subscription plans unless you listen to podcasts across multiple devices often enough to justify it.

src/personal/software/spotify.md

@@ -0,0 +1,13 @@
+---
+displayOrder: 5
+url: "https://spotify.com"
+logo: "/assets/software/logo-spotify.png"
+category: "Music & Audiobooks"
+name: "Spotify"
+---
+
+This is my preferred music app. I love having access to streaming music on all devices I use and integration with many smart home devices. Overall an excellent product and very reasonable prices, especially with the [student pricing plan](https://www.spotify.com/us/student).
+
+In 2024, they increased the subscription price to $12 per month, but added 15 hours of audiobook listening time per month. I have been using this to make my way through the excellent [Witcher Audiobook series narrated by Peter Kenny](https://open.spotify.com/show/6vTRzKkZWCbPVQoMaUiDsz?si=8eca930e86854be3).
+
+If you are interested in theming or adding more features to the spotify desktop app, check out [spicetify](https://spicetify.app).

src/personal/software/vivaldi.md

@@ -0,0 +1,9 @@
+---
+displayOrder: 6
+url: "https://vivaldi.com/"
+logo: "/assets/software/logo-vivaldi.png"
+category: "Web Browser"
+name: "Vivaldi"
+---
+
+After trying [Google Chrome](https://www.google.com/chrome), [Microsoft Edge](https://www.microsoft.com/en-us/edge), and [Brave](https://brave.com), I finally decided to go with [Vivaldi](https://vivaldi.com). It should be familiar to those coming from Chrome since it is also based on [Chromium](https://www.chromium.org). The main reason I like it is for its customizability. There are so many features available to the user like tab stacking and tiling that I find extremely helpful. If you are a browser power user such as myself, I think you will find it really hard to switch to another browser's tab management system. Vivaldi's is by far the best I have used. Additionally, most if not all Chrome extensions can be used with Vivaldi and it has built-in ad blocking and tracking prevention. Definitely recommend that you give it a try.

src/portfolio.md

@@ -0,0 +1,4 @@
+---
+title: Portfolio
+layout: "layouts/portfolio.html"
+---

src/portfolio/education/umich-1.md

@@ -0,0 +1,14 @@
+---
+displayOrder: 1
+id: "umich-1"
+url: "https://cse.engin.umich.edu"
+logo: "/assets/education/logo-computer-science.jpg"
+association: "University of Michigan"
+entryTitle: "B.S.E. in Computer Science"
+location: "Ann Arbor, MI"
+startDate: "September 2016"
+endDate: "December 2020"
+---
+
+**GPA:** 3.776  
+**Focus:** Intelligent Systems

src/portfolio/education/umich-2.md

@@ -0,0 +1,14 @@
+---
+displayOrder: 2
+id: "umich-2"
+url: "https://me.engin.umich.edu"
+logo: "/assets/education/logo-mechanical-engineering.jpg"
+association: "University of Michigan"
+entryTitle: "B.S.E. in Mechanical Engineering"
+location: "Ann Arbor, MI"
+startDate: "September 2016"
+endDate: "December 2020"
+---
+
+**GPA:** 3.776  
+**Focus:** Controls

src/portfolio/education/umich-3.md

@@ -0,0 +1,14 @@
+---
+displayOrder: 3
+id: "umich-3"
+url: "https://robotics.umich.edu"
+logo: "/assets/education/logo-robotics.png"
+association: "University of Michigan"
+entryTitle: "M.S. in Robotics"
+location: "Ann Arbor, MI"
+startDate: "January 2021"
+endDate: "December 2021"
+---
+
+**GPA:** 3.982  
+**Focus:** Acting

src/portfolio/highlights/hughes-1-project-1.md

@@ -0,0 +1,23 @@
+---
+associatedEntry: "hughes-1"
+name: "Mobile Terminal Configuration Tool"
+displayOrder: 1
+---
+
+**Problem**
+
+Hughes sells mobile satellite terminals that provide internet and phone service to customers. Some customers who purchased terminals in bulk (~1000) required non-default settings. The configuration process of manually changing settings on each terminal was tedious and error-prone.
+
+**Task**
+
+My job was to develop a Windows 7 / 10 program that would automate the terminal configuration process.
+
+**Result**
+
+I designed and developed a GUI program in C# that detects which terminal model is connected and uses the available interface (<abbr title="REpresentational State Transfer">REST</abbr> <abbr title="Application Programming Interface">API</abbr> or <abbr title="File Transfer Protocol">FTP</abbr>) to copy the configuration of the *master* terminal. This can then be used to automatically configure subsequent terminals.
+
+**Customer Feedback**
+
+> "Btw the tool you sent us is helping a lot. Thank you so much."
+>
+> &mdash; <cite>Hughes Customer</cite>

src/portfolio/highlights/hughes-1-project-2.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "hughes-1"
+name: "Location Based Services"
+displayOrder: 2
+---
+
+**Problem**
+
+Hughes mobile terminals allow customers to have internet and phone access in remote areas via a satellite connection. Some customers may find value in a GPS feature built into the terminal. In this situation, the terminal would send GPS coordinates to a server at regular intervals of time, distance, and/or velocity as configured by the end-user.
+
+**Task**
+
+My task was to investigate a way to minimize the data packet size of GPS coordinates and to update the terminal's software to send these data packets to a server configured by the end-user.
+
+**Result**
+
+This project was assigned to me after the completion of my previous project, which was intended to last the entire internship. I was able to determine that <abbr title="MQ Telemetry Transport for Sensor Networks">[MQTT-SN](https://www.oasis-open.org/committees/document.php?document_id=66091&wg_abbrev=mqtt)</abbr> was a good option as it simply sends a data packet to a server without checking for acknowledgement and the packet header is sufficiently small. I successfully implemented the packet structure and delivery to the server on the terminal software written in C. However, I was unable to get the server to recognize that it received the packet in my remaining time at Hughes. Using [Wireshark](https://www.wireshark.org), I confirmed the reception of the packet, but none of the open-source <abbr title="MQ Telemetry Transport for Sensor Networks">[MQTT-SN](https://www.oasis-open.org/committees/document.php?document_id=66091&wg_abbrev=mqtt)</abbr> brokers I used worked.

src/portfolio/highlights/mitre-1-project-1.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "mitre-1"
+name: "PNT Defense & Threat Library"
+displayOrder: 1
+---
+
+**Problem**
+
+The <abbr title="Positioning, Navigation, and Timing">PNT</abbr> Defense & Threat Library is a framework implemented in [Python](https://www.python.org) for mapping out and visualizing the space of <abbr title="Positioning, Navigation, and Timing">PNT</abbr> threats & defenses. The user specifies defenses (and which threats they mitigate) and threats as well as the relationships between entries.
+
+**Task**
+
+We wanted a way to identify implicit mitigation links without the user having to specify every single relationship.
+
+**Result**
+
+Implemented a function to parse the library, look through the directed acyclic graph structure, and identify which threats are mitigated by a subset of selected threats.

src/portfolio/highlights/mitre-1-project-2.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "mitre-1"
+name: "PNT Assurance"
+displayOrder: 2
+---
+
+**Problem**
+
+To aid in <abbr title="Positioning, Navigation, and Timing">PNT</abbr> Assurance work, we wanted to mathematically model the <abbr title="Position, Velocity, and Time">PVT</abbr> output by <abbr title="Positioning, Navigation, and Timing">PNT</abbr> user equipment under different classes of threats with different parameters.
+
+**Task**
+
+My task was to help the team improve the [Julia](https://julialang.org) script that performs the monte carlo simulation.
+
+**Result**
+
+I revamped and formalized the team's software development process to improve visibility and organization. Rather than working on separate remote repositories, everyone works on the same remote, but uses separate branches. This makes it easier for everyone on the team to see changes and make comments in merge requests before changes make their way into the main branch. I also pushed for the use of issue tracking so discussions around new features and bugs can all be collected in one place. We can also make references to specific commits / branches / changes rather than having disjointed conversations with changing line numbers. Finally, I created a wiki documenting how to use git and some best practices.

src/portfolio/highlights/mitre-1-project-3.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "mitre-1"
+name: "AI Learning Track"
+displayOrder: 3
+---
+
+**Problem**
+
+The AI Learning Track was the first of two intern events I participated in. This was an 8 hour hackathon (spread over 3 days) with a team of 5.
+
+**Task**
+
+The goal is to classify URLs as malicious or benign using URL strings and information on the age of the domain and when the site was last updated.
+
+**Result**
+
+Our team went through the steps of feature engineering, training, validation, and testing. We generated new features like the length of the URL string, number of non-alphanumeric symbols in the URL, etc. that we read were good indicators of malicious URLs. We ran our training dataset through several models: Logistic Regression (LOGIT), Linear Support Vector Machine, Random Forest, eXtreme Gradient Boosting Trees (XGBoost), and a Simple Feed Forward Neural Network (FFNN). We found that the FFNN performed best and we were able to achieve an F1 score of 0.94 on the testing dataset.

src/portfolio/highlights/mitre-1-project-4.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "mitre-1"
+name: "AWS DeepRacer"
+displayOrder: 4
+---
+
+**Problem**
+
+<abbr title="Amazon Web Services">AWS</abbr> DeepRacer was the second of two intern events I participated in. This involved the use of cloud computing resources (provided by Amazon Web Services) to train and simulate a Reinforcement Learning model for an autonomous vehicle.
+
+**Task**
+
+The goal was to train a model that would allow the autonomous vehicle to drive around a simulated track as quickly as possible. You would receive time penalties for driving off track. The vehicles have a camera for sensing the environment and can drive at speeds of 0.5 - 1.75 m/s.
+
+**Result**
+
+The model I trained finished 3rd in the first two events (same track as training) and finished 2nd in the final event (a more difficult, unseen track). This may indicate that my model was more generalizable and less overfit to the track that I trained on.

src/portfolio/highlights/rivian-1-project-1.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-1"
+name: "Requirements Management and System Diagrams"
+displayOrder: 1
+---
+
+**Problem**
+
+Rivian needed an organized way of tracking interfaces between components and managing requirements.
+
+**Task**
+
+My job was to create system architecture models to help distribute and track requirements from the vehicle level to component level. Additionally, these requirements needed to be managed and distributed via DOORS Next Generation.
+
+**Result**
+
+I was able to speak with managers of various vehicle subsystems to understand cross-system signal interfaces. These conversations were translated to system architecture models so teams could understand what signals they are consuming and outputting. To aid in cross-team communication, I created custom report templates in DOORS Next Generation.

src/portfolio/highlights/rivian-1-project-2.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-1"
+name: "Simulation Data Analysis Tool"
+displayOrder: 2
+---
+
+**Problem**
+
+Rivian had collected simulation test data and needed to see the effect of changing vehicle parameters on performance metrics, without re-running expensive tests.
+
+**Task**
+
+My job was to develop a tool that could translate the collected data into a simple user interface to analyze how to optimize vehicle performance.
+
+**Result**
+
+I designed and developed a GUI program in Java that provided the user with sliders for the input vehicle parameters. The tool would then interpolate the performance metrics from the collected points using a neural network determined multi-variate function. The GUI tool then outputs plots showing the effect of changing each input on the projected performance output.

src/portfolio/highlights/rivian-2-project-1.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-2"
+name: "Bill of Materials Analysis"
+displayOrder: 1
+---
+
+**Problem**
+
+Rivian had an existing process for analyzing bill of materials data that needed to be further developed and maintained.
+
+**Task**
+
+My job was to communicate with project management to determine and implement improvements to mass and cost analysis.
+
+**Result**
+
+I improved the existing Excel Macro to check for inconsistencies between parent and child items so mass and cost was not double counted. Additionally, improved the user interface by adding macro buttons to allow for quick filtering of pivot tables and highlight potential discrepancies.

src/portfolio/highlights/rivian-2-project-2.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-2"
+name: "Internal Website"
+displayOrder: 2
+---
+
+**Problem**
+
+Requirements management in [JAMA](https://www.jamasoftware.com) was very much a manual process to check for inconsistent relationships between the different types of requirements.
+
+**Task**
+
+I proposed an automated system that would enforce relationships set by the systems engineering team and highlight issues that required manual intervention.
+
+**Result**
+
+I designed and implemented an internal-use website that collected and displayed data from business systems like [JAMA](https://www.jamasoftware.com). This made use of [JAMA](https://www.jamasoftware.com)'s <abbr title="REpresentational State Transfer">REST</abbr> <abbr title="Application Programming Interface">API</abbr> to automatically pull requirements metadata and enforce the determined relational rules. Additionally integrated Bill of Materials analysis macro into website so users would receive the processed spreadsheet via email. Front-end design was written in HTML and back-end scripts were written in [Python](https://www.python.org) using the [Django Web Framework](https://www.djangoproject.com).

src/portfolio/highlights/rivian-2-project-3.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-2"
+name: "IT Service Desk"
+displayOrder: 3
+---
+
+**Problem**
+
+Rivian's previous IT service desk in [KACE Systems Management](https://www.quest.com/products/kace-systems-management-appliance) had issues tracking the status of tickets resulting in an <abbr title="Service-level agreement">SLA</abbr> met percentage of ~75%.
+
+**Task**
+
+My job was to migrate the IT service desk to [Jira](https://www.atlassian.com/software/jira) and improve the ticket tracking process.
+
+**Result**
+
+I created custom automation rules to assign tickets based on request type and location. Created queues and reports to track response time, workload, request types, and other metrics. These efforts resulted in an <abbr title="Service-level agreement">SLA</abbr> met percentage of ~95%.

src/portfolio/highlights/rivian-3-project-1.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-3"
+name: "Model-In-Loop Test Case Generation"
+displayOrder: 1
+---
+
+**Problem**
+
+Existing software components needed to be tested to ensure that requirements were being met.
+
+**Task**
+
+My job was to translate software component requirements into Model-in-Loop unit tests in Simulink.
+
+**Result**
+
+Created Model-in-Loop test cases for ~50 requirements using [Simulink Test](https://www.mathworks.com/products/simulink-test.html). I was able to identify and resolve 7 issues at the model level to prevent them from reaching in-vehicle testing. To improve testing, I created a script to automatically run all test cases and generate a report for easy identification of issues. Also created documentation in [Confluence](https://www.atlassian.com/software/confluence) to streamline future test case generation.

src/portfolio/highlights/rivian-3-project-2.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-3"
+name: "Simulink Software Integration"
+displayOrder: 2
+---
+
+**Problem**
+
+Co-worker had developed a new algorithm that needed to be integrated into the Simulink environment for controls software.
+
+**Task**
+
+My job was to communicate with my co-worker to implement the algorithm using the existing signals, processing them, and resolving issues related to [Simulink Coder](https://www.mathworks.com/products/simulink-coder.html) C/C++ code generation.
+
+**Result**
+
+I was able to identify and suggest modifications to the algorithm to work within the limitations of [Simulink Coder](https://www.mathworks.com/products/simulink-coder.html). Learned about embedded systems, computing limitations, and how to increase software efficiency to prevent processing time delay.

src/portfolio/highlights/rivian-3-project-3.md

@@ -0,0 +1,17 @@
+---
+associatedEntry: "rivian-3"
+name: "Testing Data Processing"
+displayOrder: 3
+---
+
+**Problem**
+
+Vehicle testing data needed to be processed to evaluate performance against requirements and determine controls parameters to tune.
+
+**Task**
+
+My job was to modify existing data processing scripts to work with new test data.
+
+**Result**
+
+I was able to map the signals from new test data logs to work with the existing scripts and manually calculate intermediate signals that were not recorded. This allowed me to generate plots that could easily be compared to previous test runs. From these plots, I identified potential issues that could be investigated by the controls team.

src/portfolio/highlights/umich-1-courses.md

@@ -0,0 +1,11 @@
+---
+associatedEntry: "umich-1"
+name: "Notable Courses"
+displayOrder: 1
+---
+
+- **EECS 442** - Computer Vision
+- **EECS 445** - Introduction to Machine Learning
+- **EECS 467** - Autonomous Robotics
+- **EECS 492** - Introduction to Artificial Intelligence
+- **EECS 493** - User Interface Development

src/portfolio/highlights/umich-2-courses.md

@@ -0,0 +1,9 @@
+---
+associatedEntry: "umich-2"
+name: "Notable Courses"
+displayOrder: 1
+---
+
+- **MECHENG 450** - Design and Manufacturing III
+- **MECHENG 461** - Automatic Control
+- **MECHENG 495** - Laboratory II

src/portfolio/highlights/umich-3-courses.md

@@ -0,0 +1,13 @@
+---
+associatedEntry: "umich-3"
+name: "Notable Courses"
+displayOrder: 1
+---
+
+- **AEROSP 584** - Navigation & Guidance of Aerospace Vehicles
+- **MECHENG 561** - Design of Digital Control Systems
+- **ROB 501** - Math for Robotics
+- **ROB 511** - Robot Operating Systems
+- **ROB 530** - Mobile Robotics: Methods & Algorithms
+- **ROB 535** - Self Driving Cars: Perception and Control
+- **ROB 550** - Robotic Systems Laboratory

src/portfolio/professionalExperience/hughes-1.md

@@ -0,0 +1,27 @@
+---
+displayOrder: 3
+id: "hughes-1"
+url: "https://www.hughes.com"
+logo: "/assets/professional_experience/logo-hughes.jpg"
+association: "Hughes Network Systems"
+entryTitle: "Software Development Intern"
+location: "San Diego, CA"
+startDate: "May 20, 2019"
+endDate: "August 23, 2019"
+---
+
+**Hard Skills**
+
+- Embedded Programming in C
+- C# and .NET Framework
+  - GUI Design
+  - <abbr title="REpresentational State Transfer">REST</abbr> Requests & <abbr title="File Transfer Protocol">FTP</abbr>
+- Network Communication
+  - <abbr title="Transmission Control Protocol">TCP</abbr> and <abbr title="User Datagram Protocol">UDP</abbr>
+  - <abbr title="MQ Telemetry Transport for Sensor Networks">[MQTT-SN](https://www.oasis-open.org/committees/document.php?document_id=66091&wg_abbrev=mqtt)</abbr>
+
+**Soft Skills**
+
+- Public Presentation
+- Design Documentation
+- Professional Communication

src/portfolio/professionalExperience/metron-1.md

@@ -0,0 +1,11 @@
+---
+displayOrder: 8
+id: "metron-1"
+url: "https://www.metsci.com"
+logo: "/assets/professional_experience/logo-metron.jpeg"
+association: "Metron"
+entryTitle: "Software Engineer I"
+location: "Reston, VA"
+startDate: "April 3, 2023"
+endDate: "November 1, 2024"
+---

src/portfolio/professionalExperience/metron-2.md

@@ -0,0 +1,11 @@
+---
+displayOrder: 8
+id: "metron-1"
+url: "https://www.metsci.com"
+logo: "/assets/professional_experience/logo-metron.jpeg"
+association: "Metron"
+entryTitle: "Software Engineer II"
+location: "Reston, VA"
+startDate: "November 1, 2024"
+endDate: "Present"
+---

src/portfolio/professionalExperience/mitre-1.md

@@ -0,0 +1,26 @@
+---
+displayOrder: 5
+id: "mitre-1"
+url: "https://www.mitre.org"
+logo: "/assets/professional_experience/logo-mitre.jpeg"
+association: "MITRE"
+entryTitle: "Graduate Navigation Intern"
+location: "Remote"
+startDate: "May 10, 2021"
+endDate: "August 20, 2021"
+---
+
+**Hard Skills**
+
+- [Julia](https://julialang.org)
+- [Python](https://www.python.org")
+- Satellite Navigation
+- Signal Processing
+- Machine Learning
+- Reinforcement Learning
+
+**Soft Skills**
+
+- Public Presentation
+- Design Documentation
+- Professional Communication

src/portfolio/professionalExperience/mitre-2.md

@@ -0,0 +1,11 @@
+---
+displayOrder: 6
+id: "mitre-2"
+url: "https://www.mitre.org"
+logo: "/assets/professional_experience/logo-mitre.jpeg"
+association: "MITRE"
+entryTitle: "Associate Autonomous Systems Engineer"
+location: "McLean, VA"
+startDate: "January 31, 2022"
+endDate: "September 12, 2022"
+---

src/portfolio/professionalExperience/mitre-3.md

@@ -0,0 +1,11 @@
+---
+displayOrder: 7
+id: "mitre-3"
+url: "https://www.mitre.org"
+logo: "/assets/professional_experience/logo-mitre.jpeg"
+association: "MITRE"
+entryTitle: "Intermediate Autonomous Systems Engineer"
+location: "McLean, VA"
+startDate: "September 12, 2022"
+endDate: "March 31, 2023"
+---

src/portfolio/professionalExperience/rivian-1.md

@@ -0,0 +1,23 @@
+---
+displayOrder: 1
+id: "rivian-1"
+url: "https://rivian.com"
+logo: "/assets/professional_experience/logo-rivian.png"
+association: "Rivian"
+entryTitle: "Vehicle Integration Intern"
+location: "Livonia, MI"
+startDate: "May 30, 2017"
+endDate: "August 25, 2017"
+---
+
+**Hard Skills**
+
+- Java
+- Data Analysis
+- Systems Engineering / Requirements Management
+- IBM Rational DOORS
+
+**Soft Skills**
+
+- Design Documentation
+- Professional Communication

src/portfolio/professionalExperience/rivian-2.md

@@ -0,0 +1,25 @@
+---
+displayOrder: 2
+id: "rivian-2"
+url: "https://rivian.com"
+logo: "/assets/professional_experience/logo-rivian.png"
+association: "Rivian"
+entryTitle: "Business Technology Intern"
+location: "Plymouth, MI"
+startDate: "May 7, 2018"
+endDate: "December 7, 2018"
+---
+
+**Hard Skills**
+
+- [Python](https://www.python.org") and [Django Web Framework](https://www.djangoproject.com)
+- <abbr title="REpresentational State Transfer">REST</abbr> <abbr title="Application Programming Interface">API</abbr>
+- Excel <abbr title="Visual Basic for Applications">VBA</abbr>
+- Bill of Materials Analysis
+- Atlassian Products - [Jira](https://www.atlassian.com/software/jira), [Confluence](https://www.atlassian.com/software/confluence), [Bitbucket](https://bitbucket.org/product)
+
+**Soft Skills**
+
+- Stakeholder Interviews
+- Design Documentation
+- Professional Communication

src/portfolio/professionalExperience/rivian-3.md

@@ -0,0 +1,23 @@
+---
+displayOrder: 4
+id: "rivian-3"
+url: "https://rivian.com"
+logo: "/assets/professional_experience/logo-rivian.png"
+association: "Rivian"
+entryTitle: "ADAS Controls Intern"
+location: "Remote"
+startDate: "June 1, 2020"
+endDate: "August 21, 2020"
+---
+
+**Hard Skills**
+
+- [MATLAB](https://www.mathworks.com/products/matlab.html)
+- [Simulink](https://www.mathworks.com/products/simulink.html)
+- Atlassian Products - [Jira](https://www.atlassian.com/software/jira), [Confluence](https://www.atlassian.com/software/confluence), [Bitbucket](https://bitbucket.org/product)
+
+**Soft Skills**
+
+- Public Presentation
+- Design Documentation
+- Professional Communication

src/scripts/dark-mode-switch.min.js

@@ -5,37 +5,37 @@ const darkSwitchLabel = document.getElementById("darkSwitchLabel");
 const documentElement = document.documentElement;
 
 function initTheme() {
-	const e =
-		null !== localStorage.getItem("darkSwitch") &&
-		"dark" === localStorage.getItem("darkSwitch");
+  const e =
+    null !== localStorage.getItem("darkSwitch") &&
+    "dark" === localStorage.getItem("darkSwitch");
 
-	darkSwitch.checked = e;
+  darkSwitch.checked = e;
 
-	if (e) {
-		documentElement.setAttribute("color-mode", "dark");
-		darkSwitchLabel.innerHTML = "Dark Mode";
-	} else {
-		documentElement.setAttribute("color-mode", "light");
-		darkSwitchLabel.innerHTML = "Light Mode";
-	}
+  if (e) {
+    documentElement.setAttribute("color-mode", "dark");
+    darkSwitchLabel.innerHTML = "Dark Mode";
+  } else {
+    documentElement.setAttribute("color-mode", "light");
+    darkSwitchLabel.innerHTML = "Light Mode";
+  }
 }
 
 function resetTheme() {
-	if (darkSwitch.checked) {
-		documentElement.setAttribute("color-mode", "dark");
-		localStorage.setItem("darkSwitch", "dark");
-		darkSwitchLabel.innerHTML = "Dark Mode";
-	} else {
-		documentElement.setAttribute("color-mode", "light");
-		localStorage.removeItem("darkSwitch");
-		darkSwitchLabel.innerHTML = "Light Mode";
-	}
+  if (darkSwitch.checked) {
+    documentElement.setAttribute("color-mode", "dark");
+    localStorage.setItem("darkSwitch", "dark");
+    darkSwitchLabel.innerHTML = "Dark Mode";
+  } else {
+    documentElement.setAttribute("color-mode", "light");
+    localStorage.removeItem("darkSwitch");
+    darkSwitchLabel.innerHTML = "Light Mode";
+  }
 }
 
 $(document).ready(() => {
-	darkSwitch &&
-		(initTheme(),
-		darkSwitch.addEventListener("change", () => {
-			resetTheme();
-		}));
-});
+  darkSwitch &&
+    (initTheme(),
+    darkSwitch.addEventListener("change", () => {
+      resetTheme();
+    }));
+});

src/style.css

@@ -0,0 +1,193 @@
+/****************
+ * Color Themes *
+ ****************/
+/* Light Mode */
+:root[color-mode="light"] {
+  --primary-color: #ffcb05;
+  --secondary-color: #00274c;
+  --tertiary-color: #007bff;
+  --quaternary-color: #ffffff;
+  --quinary-color: #e83e8c;
+  --background-color: #e8eef2;
+  --font-color: #000000;
+}
+
+/* Dark Mode */
+:root[color-mode="dark"] {
+  --primary-color: #bd93f9;
+  --secondary-color: #44475a;
+  --tertiary-color: #8be9fd;
+  --quaternary-color: #6272a4;
+  --quinary-color: #ff79c6;
+  --background-color: #282a36;
+  --font-color: #f8f8f2;
+}
+
+/***********
+ * General *
+ ***********/
+body {
+  background-color: var(--background-color);
+  padding-top: 65px;
+  font-family: Arial, Verdana, Tahoma, sans-serif;
+}
+
+label {
+  color: var(--primary-color);
+}
+
+a {
+  color: var(--tertiary-color);
+}
+
+code {
+  color: var(--quinary-color);
+}
+
+hr {
+  border-color: var(--font-color);
+  opacity: 0.1;
+}
+
+/****************
+ * Main Content *
+ ****************/
+.my-nav {
+  background: var(--secondary-color);
+  font-size: 18px;
+}
+
+.my-nav .nav-link {
+  color: var(--primary-color);
+}
+
+.my-nav .nav-link.show {
+  color: var(--tertiary-color);
+}
+
+.my-nav .nav-link:hover {
+  color: var(--tertiary-color);
+}
+
+.my-nav .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 39, 76, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+.my-nav .navbar-toggler {
+  background: var(--primary-color);
+}
+
+.container-fluid {
+  color: var(--font-color);
+  font-size: 18px;
+}
+
+.container-fluid h1 {
+  padding: 10px 10px;
+  background: var(--secondary-color);
+  color: var(--primary-color);
+}
+
+.row {
+  /* border: 1px solid red; */
+  margin-bottom: 10px;
+}
+
+/* Add an invisible target before
+   anchor links so navbar doesn't
+   block content */
+:target::before {
+  content: "";
+  display: block;
+  margin-top: -80px;
+  height: 80px;
+  width: 1px;
+}
+
+/* Side Padding */
+@media (min-width: 768px) {
+  .px-md-6 {
+    padding-left: 12.5% !important;
+    padding-right: 12.5% !important;
+  }
+}
+
+#bio img {
+  max-height: 500px;
+}
+
+#contact_me img {
+  max-height: 100px;
+}
+
+#software img {
+  max-height: 200px;
+}
+
+#hardware img {
+  max-height: 400px;
+}
+
+#video_games img {
+  max-height: 250px;
+}
+
+#podcasts img {
+  max-height: 200px;
+}
+
+#resume iframe {
+  width: 100%;
+  height: 750px;
+}
+
+#education img {
+  max-height: 225px;
+}
+
+#professional_experience img {
+  max-height: 225px;
+}
+
+#research img {
+  max-height: 400px;
+}
+
+#projects img {
+  max-height: 400px;
+}
+
+.blog-cover img {
+  max-height: 500px;
+  margin: auto;
+  display: block;
+}
+
+.accordion {
+  background-color: var(--background-color);
+  --bs-accordion-border-color: var(--background-color);
+  --bs-accordion-active-color: var(--primary-color);
+}
+
+.accordion-button {
+  background-color: var(--secondary-color);
+  color: var(--primary-color)
+}
+
+.accordion-button:not(.collapsed) {
+  background-color: var(--primary-color);
+  color: var(--secondary-color)
+}
+
+.accordion-body {
+  background-color: var(--quaternary-color);
+  color: var(--font-color)
+}
+
+.dropdown-menu {
+  background-color: var(--quaternary-color);
+}
+
+.dropdown-item {
+  color: var(--font-color);
+}

src/style/styles.css

@@ -1,180 +0,0 @@
-/****************
- * Color Themes *
- ****************/
-/* Light Mode */
-:root[color-mode="light"] {
-	--primary-color: #ffcb05;
-	--secondary-color: #00274c;
-	--tertiary-color: #007bff;
-	--quaternary-color: #ffffff;
-	--quinary-color: #e83e8c;
-	--background-color: #e8eef2;
-	--font-color: #000000;
-}
-
-/* Dark Mode */
-:root[color-mode="dark"] {
-	--primary-color: #bd93f9;
-	--secondary-color: #44475a;
-	--tertiary-color: #8be9fd;
-	--quaternary-color: #6272a4;
-	--quinary-color: #ff79c6;
-	--background-color: #282a36;
-	--font-color: #f8f8f2;
-}
-
-/***********
- * General *
- ***********/
-body {
-	background-color: var(--background-color);
-	padding-top: 65px;
-	font-family: Arial, Verdana, Tahoma, sans-serif;
-}
-
-label {
-	color: var(--primary-color);
-}
-
-a {
-	color: var(--tertiary-color);
-}
-
-code {
-	color: var(--quinary-color);
-}
-
-hr {
-	border-color: var(--font-color);
-	opacity: 0.1;
-}
-
-/****************
- * Main Content *
- ****************/
-.my-nav {
-	background: var(--secondary-color);
-	font-size: 18px;
-}
-
-.my-nav .nav-link {
-	color: var(--primary-color);
-}
-
-.my-nav .nav-link:hover {
-	color: var(--tertiary-color);
-}
-
-.my-nav .navbar-toggler-icon {
-	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 39, 76, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
-}
-
-.my-nav .navbar-toggler {
-	background: var(--primary-color);
-}
-
-.container-fluid {
-	color: var(--font-color);
-	font-size: 18px;
-}
-
-.container-fluid h1 {
-	padding: 10px 10px;
-	background: var(--secondary-color);
-	color: var(--primary-color);
-}
-
-.row {
-	/* border: 1px solid red; */
-	margin-bottom: 10px;
-}
-
-/* Add an invisible target before
-   anchor links so navbar doesn't
-   block content */
-:target::before {
-	content: "";
-	display: block;
-	margin-top: -80px;
-	height: 80px;
-	width: 1px;
-}
-
-/* Side Padding */
-@media (min-width: 768px) {
-	.px-md-6 {
-		padding-left: 12.5% !important;
-		padding-right: 12.5% !important;
-	}
-}
-
-#bio img {
-	max-height: 500px;
-}
-
-#contact_me img {
-	max-height: 100px;
-}
-
-#software img {
-	max-height: 200px;
-}
-
-#hardware img {
-	max-height: 400px;
-}
-
-#video_games img {
-	max-height: 250px;
-}
-
-#podcasts img {
-	max-height: 200px;
-}
-
-#resume iframe {
-	width: 100%;
-	height: 750px;
-}
-
-#education img {
-	max-height: 225px;
-}
-
-#professional_experience img {
-	max-height: 225px;
-}
-
-#research img {
-	max-height: 400px;
-}
-
-#projects img {
-	max-height: 400px;
-}
-
-.blog-cover img {
-	max-height: 500px;
-	margin: auto;
-	display: block;
-}
-
-.card {
-	background-color: var(--background-color);
-}
-
-.card-header {
-	background-color: var(--secondary-color);
-}
-
-.card-body {
-	background-color: var(--quaternary-color);
-}
-
-.dropdown-menu {
-	background-color: var(--quaternary-color);
-}
-
-.dropdown-item {
-	color: var(--font-color);
-}