diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..fd8ef9f
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+printWidth: 120
+semi: true
+singleQuote: false
+trailingComma: all
+bracketSpacing: true
+arrowParens: always
+requirePragma: false
+insertPragma: false
\ No newline at end of file
diff --git a/index.html b/index.html
index 9309586..3b1e7d5 100644
--- a/index.html
+++ b/index.html
@@ -23,35 +23,14 @@
       name="keywords"
       content="Web Developer React, Fullstack Development, Web Developer Portfolio, Elijah Parker, Dunemask, React Developer, QA Software Developer"
     />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/favicons/apple-touch-icon.png?v=jan27deltaburn"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="/favicons/favicon-32x32.png?v=jan27deltaburn"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="/favicons/favicon-16x16.png?v=jan27deltaburn"
-    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=jan27deltaburn" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=jan27deltaburn" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=jan27deltaburn" />
     <link rel="manifest" href="/favicons/site.webmanifest?v=jan27deltaburn" />
-    <link
-      rel="mask-icon"
-      href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn"
-      color="#ffc40d"
-    />
+    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn" color="#ffc40d" />
     <link rel="shortcut icon" href="/favicons/favicon.ico?v=jan27deltaburn" />
     <meta name="msapplication-TileColor" content="#ffc40d" />
-    <meta
-      name="msapplication-config"
-      content="/favicons/browserconfig.xml?v=jan27deltaburn"
-    />
+    <meta name="msapplication-config" content="/favicons/browserconfig.xml?v=jan27deltaburn" />
     <meta name="theme-color" content="#5d5d5d" />
   </head>
   <body>
@@ -146,16 +125,13 @@
     <script>
       function loaderInitScript() {
         function showLoader() {
-          const mediaCover = document.getElementById(
-            "loading-content-media-cover",
-          );
+          const mediaCover = document.getElementById("loading-content-media-cover");
           if (mediaCover === null || mediaCover.style === null) return;
           mediaCover.style.display = "block";
         }
 
         function onDocumentStateChange(e) {
-          if (document.readyState === "interactive")
-            setTimeout(showLoader, 2000);
+          if (document.readyState === "interactive") setTimeout(showLoader, 2000);
         }
         document.addEventListener("readystatechange", onDocumentStateChange);
       }
diff --git a/package-lock.json b/package-lock.json
index 9ac2bc5..8226d69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,8 +14,8 @@
       "devDependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
-        "@mui/icons-material": "^5.16.6",
-        "@mui/material": "^5.16.6",
+        "@mui/icons-material": "^5.16.7",
+        "@mui/material": "^5.16.7",
         "@vitejs/plugin-react": "4.3.1",
         "prettier": "^3.3.3",
         "react": "^18.3.1",
@@ -23,7 +23,8 @@
         "react-icons": "^5.2.1",
         "react-material-ui-carousel": "^3.4.2",
         "react-router-dom": "^6.26.0",
-        "vite": "5.3.5"
+        "vite": "5.4.0",
+        "vite-bundle-analyzer": "^0.10.5"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -902,9 +903,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz",
-      "integrity": "sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==",
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
+      "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -912,9 +913,9 @@
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.6.tgz",
-      "integrity": "sha512-ceNGjoXheH9wbIFa1JHmSc9QVjJUvh18KvHrR4/FkJCSi9HXJ+9ee1kUhCOEFfuxNF8UB6WWVrIUOUgRd70t0A==",
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
+      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9"
@@ -938,14 +939,14 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz",
-      "integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==",
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
+      "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/core-downloads-tracker": "^5.16.6",
-        "@mui/system": "^5.16.6",
+        "@mui/core-downloads-tracker": "^5.16.7",
+        "@mui/system": "^5.16.7",
         "@mui/types": "^7.2.15",
         "@mui/utils": "^5.16.6",
         "@popperjs/core": "^2.11.8",
@@ -1042,9 +1043,9 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.6.tgz",
-      "integrity": "sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==",
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
+      "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
@@ -2447,13 +2448,13 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
-      "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz",
+      "integrity": "sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.39",
+        "postcss": "^8.4.40",
         "rollup": "^4.13.0"
       },
       "bin": {
@@ -2473,6 +2474,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -2490,6 +2492,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -2501,6 +2506,12 @@
         }
       }
     },
+    "node_modules/vite-bundle-analyzer": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/vite-bundle-analyzer/-/vite-bundle-analyzer-0.10.5.tgz",
+      "integrity": "sha512-gxIFQ6ifoQjDXaVWJmXHwI2VEVqyz6FXHKicNpTe4Pr2MAka6NQVRcmgznziRzbl9rhMP0qIc5Be8PxfGXUhgQ==",
+      "dev": true
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 955fdcc..63543cc 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,11 @@
   "author": "Dunemask",
   "type": "module",
   "scripts": {
-    "start": "vite --host",
-    "build:react": "vite build",
-    "lint": "npx prettier -w src/ index.html vite.config.js"
+    "start": "vite preview --host",
+    "start:dev": "vite --host",
+    "start:analyzer": "USE_ANALYZER=true vite build",
+    "build": "vite build",
+    "format": "prettier -w src/ index.html vite.config.js"
   },
   "browserslist": {
     "production": [
@@ -25,8 +27,8 @@
   "devDependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.6",
-    "@mui/material": "^5.16.6",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
     "@vitejs/plugin-react": "4.3.1",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
@@ -34,7 +36,8 @@
     "react-icons": "^5.2.1",
     "react-material-ui-carousel": "^3.4.2",
     "react-router-dom": "^6.26.0",
-    "vite": "5.3.5"
+    "vite": "5.4.0",
+    "vite-bundle-analyzer": "^0.10.5"
   },
   "dependencies": {
     "react-responsive-carousel": "^3.2.23"
diff --git a/public/images/forgejo.svg b/public/images/forgejo.svg
new file mode 100644
index 0000000..9c46d82
--- /dev/null
+++ b/public/images/forgejo.svg
@@ -0,0 +1,40 @@
+<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
+  <metadata
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+  >
+    <rdf:RDF>
+      <cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
+        <dc:title>Forgejo logo</dc:title>
+        <cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
+        <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <style type="text/css">
+    circle {
+      fill: none;
+      stroke: #000;
+      stroke-width: 15;
+    }
+    path {
+      fill: none;
+      stroke: #000;
+      stroke-width: 25;
+    }
+    .orange {
+      stroke:#ff6600;
+    }
+    .red {
+      stroke:#d40000;
+    }
+  </style>
+  <g transform="translate(6,6)">
+    <path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange" />
+    <path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red" />
+    <circle cx="142" cy="20" r="18" class="orange" />
+    <circle cx="142" cy="88" r="18" class="red" />
+    <circle cx="58" cy="180" r="18" class="red" />
+  </g>
+</svg>
diff --git a/public/portfolio/projects/laptop-frame.png b/public/portfolio/projects/laptop-frame.png
new file mode 100644
index 0000000..9b16194
Binary files /dev/null and b/public/portfolio/projects/laptop-frame.png differ
diff --git a/src/Navbar.jsx b/src/Navbar.jsx
index c36dd11..d321568 100644
--- a/src/Navbar.jsx
+++ b/src/Navbar.jsx
@@ -42,12 +42,7 @@ export default function Navbar() {
               <ListItemText sx={{ textAlign: "center" }}>Back</ListItemText>
             </ListItemButton>
             {links.map((l, i) => (
-              <ListItemButton
-                key={i}
-                component={Link}
-                to={l.url}
-                onClick={toggleMiniNavOpen}
-              >
+              <ListItemButton key={i} component={Link} to={l.url} onClick={toggleMiniNavOpen}>
                 <ListItemText
                   sx={{ textAlign: "center" }}
                   primary={l.title.charAt(0).toUpperCase() + l.title.slice(1)}
@@ -68,13 +63,7 @@ export default function Navbar() {
       >
         <Toolbar disableGutters sx={{ display: "flex", padding: "0 10px" }}>
           <a href="/">
-            <IconButton
-              size="large"
-              edge="start"
-              color="inherit"
-              aria-label="menu"
-              sx={{ mr: -0.5 }}
-            >
+            <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: -0.5 }}>
               <img src="/images/logo-micro.png" width="40" height="40" />
             </IconButton>
           </a>
@@ -83,13 +72,7 @@ export default function Navbar() {
           </Typography>
           {miniNav && (
             <Box sx={{ marginLeft: "auto" }}>
-              <IconButton
-                size="large"
-                edge="start"
-                color="inherit"
-                aria-label="menu"
-                onClick={toggleMiniNavOpen}
-              >
+              <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={toggleMiniNavOpen}>
                 <MenuIcon />
               </IconButton>
             </Box>
diff --git a/src/components/ExperienceDisplay.jsx b/src/components/ExperienceDisplay.jsx
index 0b4df1d..e36eb4b 100644
--- a/src/components/ExperienceDisplay.jsx
+++ b/src/components/ExperienceDisplay.jsx
@@ -4,10 +4,7 @@ import "@css/experience-display.css";
 export default function ExperienceDisplay(props) {
   const { title, subtitle, children } = props;
   return (
-    <Box
-      className="experience-display"
-      sx={{ borderLeft: "2px solid #F3AC20", paddingLeft: "20px", mt: "1rem" }}
-    >
+    <Box className="experience-display" sx={{ borderLeft: "2px solid #F3AC20", paddingLeft: "20px", mt: "1rem" }}>
       <Typography variant="h6">{title}</Typography>
       <Typography variant="body2" sx={{ opacity: 0.7 }}>
         {subtitle}
diff --git a/src/components/LogoBackground.jsx b/src/components/LogoBackground.jsx
index ee8efde..9471b6b 100644
--- a/src/components/LogoBackground.jsx
+++ b/src/components/LogoBackground.jsx
@@ -15,10 +15,7 @@ export default function LogoBackground() {
           width: "100%",
         }}
       >
-        <img
-          src="/images/logo-micro.png"
-          style={{ minWidth: "260px", width: "50%", maxWidth: 512 }}
-        />
+        <img src="/images/logo-micro.png" style={{ minWidth: "260px", width: "50%", maxWidth: 512 }} />
       </div>
     </div>
   );
diff --git a/src/css/experience-display.css b/src/css/experience-display.css
index 4b812bc..9f63eda 100644
--- a/src/css/experience-display.css
+++ b/src/css/experience-display.css
@@ -4,6 +4,6 @@
   padding: 6px;
   border: 2px solid #f3ac20;
   border-radius: 50%;
-  margin-left: -28px;
+  margin-left: -28.8px;
   margin-top: -16px;
 }
diff --git a/src/pages/delta/About.jsx b/src/pages/delta/About.jsx
index ab4f0e3..9359cc3 100644
--- a/src/pages/delta/About.jsx
+++ b/src/pages/delta/About.jsx
@@ -4,9 +4,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 
 const dob = new Date(2002, 4, 3);
-const age = Math.abs(
-  new Date(Date.now() - dob.getTime()).getUTCFullYear() - 1970,
-);
+const age = Math.abs(new Date(Date.now() - dob.getTime()).getUTCFullYear() - 1970);
 
 function AboutContact(props) {
   const { title, info } = props;
@@ -80,13 +78,10 @@ export default function About() {
               About
             </Typography>
             <Typography variant="body1">
-              Hello! I'm Elijah Parker, a fullstack software engineer from Utah.
-              I have a passion for developing software that achieves "the
-              impossible". I have experience using a wide variety of
-              technologies including React, Python, Java, and Kubernetes. I'm
-              currently seeking an entry-level part time position or internship
-              with flexible hours to accommodate pursuit of a bachelorette
-              degree.
+              Hello! I'm Elijah Parker, a fullstack software engineer from Utah. I have a passion for developing
+              software that achieves "the impossible". I have experience using a wide variety of technologies including
+              React, Python, Java, and Kubernetes. I'm currently seeking an entry-level part time position or internship
+              with flexible hours to accommodate pursuit of a bachelorette degree.
             </Typography>
             <Box
               className="about-contacts"
@@ -102,10 +97,7 @@ export default function About() {
                 <AboutContact
                   title="Email"
                   info={
-                    <a
-                      href="mailto:elijahglennparker@outlook.com"
-                      style={{ textDecoration: "none", fontSize: "14px" }}
-                    >
+                    <a href="mailto:elijahglennparker@outlook.com" style={{ textDecoration: "none", fontSize: "14px" }}>
                       elijahglennparker@outlook.com
                     </a>
                   }
@@ -114,14 +106,12 @@ export default function About() {
               </Box>
               <Box className="about-contacts-right" sx={{ minWidth: "50%" }}>
                 <AboutContact title="Age" info={age} />
-                <AboutContact title="Freelance" info="Available" />
+                <AboutContact title="Freelance" info="Contact me" />
               </Box>
             </Box>
             <Typography variant="body1" sx={{ mt: "2rem" }}>
-              Additionally, I have worked with a wide range of tools and
-              frameworks including Git, PostgreSQL, MongoDB, Docker, Kubernetes,
-              Garden, JavaFX, MaterialUI, Spring Boot, Express, Gitlab, Gitea
-              CI/CD.
+              Additionally, I have worked with a wide range of tools and frameworks including Git, PostgreSQL, MongoDB,
+              Docker, Kubernetes, Garden, JavaFX, MaterialUI, Spring Boot, Express, Gitlab, Gitea CI/CD.
             </Typography>
           </Box>
         </Box>
diff --git a/src/pages/delta/Contact.jsx b/src/pages/delta/Contact.jsx
index ed37b6e..a967c73 100644
--- a/src/pages/delta/Contact.jsx
+++ b/src/pages/delta/Contact.jsx
@@ -58,23 +58,9 @@ export default function Contact() {
               flexWrap: "wrap",
             }}
           >
-            <ContactStrip
-              icon={LocationOnIcon}
-              title="Location"
-              info="Springville, Utah"
-            />
-            <ContactStrip
-              icon={MailIcon}
-              title="Email"
-              info="elijahglennparker@outlook.com"
-            />
-            {
-              <ContactStrip
-                icon={PhoneIphoneIcon}
-                title="Text/Call"
-                info="+1 (385) 595 8161"
-              />
-            }
+            <ContactStrip icon={LocationOnIcon} title="Location" info="Springville, Utah" />
+            <ContactStrip icon={MailIcon} title="Email" info="elijahglennparker@outlook.com" />
+            {<ContactStrip icon={PhoneIphoneIcon} title="Text/Call" info="+1 (385) 595 8161" />}
           </Box>
           <Box
             className="messaging"
@@ -142,9 +128,7 @@ export default function Contact() {
               sx={{ m: "0 auto", width: "100%", maxWidth: "16em" }}
               component={Link}
               to={`mailto:elijahglennparker@outlook.com?subject=${contactSubject} | ${contactName} | ${contactEmail}&body=${contactBody}`}
-              disabled={
-                !(contactSubject && contactBody && contactName && contactEmail)
-              }
+              disabled={!(contactSubject && contactBody && contactName && contactEmail)}
             >
               Send Message
             </ContactMessageButton>
diff --git a/src/pages/delta/ContactStrip.jsx b/src/pages/delta/ContactStrip.jsx
index cd4c3f0..15f6c93 100644
--- a/src/pages/delta/ContactStrip.jsx
+++ b/src/pages/delta/ContactStrip.jsx
@@ -3,10 +3,7 @@ import Typography from "@mui/material/Typography";
 export default function ContactStrip(props) {
   const { title, info, icon: Icon } = props;
   return (
-    <Box
-      className="static-contact"
-      sx={{ display: "flex", mb: "2rem", width: "100%" }}
-    >
+    <Box className="static-contact" sx={{ display: "flex", mb: "2rem", width: "100%" }}>
       <Box
         className="contact-strip"
         style={{
@@ -18,10 +15,7 @@ export default function ContactStrip(props) {
         }}
       >
         <Box sx={{ textAlign: "left", display: "flex" }}>
-          <Icon
-            className="contact-icon"
-            style={{ transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms" }}
-          />
+          <Icon className="contact-icon" style={{ transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms" }} />
           <Typography variant="h4">{title}</Typography>
         </Box>
         <Box sx={{ width: "100%", mt: ".25rem", display: "inline-flex" }}>
diff --git a/src/pages/delta/Education.jsx b/src/pages/delta/Education.jsx
index ea471ee..51ee963 100644
--- a/src/pages/delta/Education.jsx
+++ b/src/pages/delta/Education.jsx
@@ -15,50 +15,32 @@ export default function Education() {
       }}
       id="education"
     >
-      <Typography
-        variant="h2"
-        sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}
-      >
+      <Typography variant="h2" sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}>
         Education
       </Typography>
       <Box className="education-list">
-        <ExperienceDisplay
-          title="Computer Science Student"
-          subtitle="Jan 2024 - Present"
-        >
+        <ExperienceDisplay title="Computer Science Student" subtitle="Jan 2024 - Present">
           <Typography sx={{ pt: "1rem" }}>
-            Pursuing B.S. in Computer Science: Software Engineering program,
-            completed 11 credits. Anticipated graduation December 2027
+            Pursuing B.S. in Computer Science: Software Engineering program, completed 27 credits. Anticipated
+            graduation December 2027
           </Typography>
         </ExperienceDisplay>
-        <ExperienceDisplay
-          title="Full Stack Web Development"
-          subtitle="Dec 2018 - May 2020 | Bottega devCamp"
-        >
+        <ExperienceDisplay title="Full Stack Web Development" subtitle="Dec 2018 - May 2020 | Bottega devCamp">
           <Typography sx={{ pt: "1rem" }}>
-            Certificate of Competency in advanced Python, database foundations,
-            system analysis, UML, and advanced web development using HTML,
-            JavaScript, React, XML, and JSON
+            Certificate of Competency in advanced Python, database foundations, system analysis, UML, and advanced web
+            development using HTML, JavaScript, React, XML, and JSON
           </Typography>
         </ExperienceDisplay>
-        <ExperienceDisplay
-          title="High School Diploma"
-          subtitle="Aug 2017 - May 2020 |  American Fork Highschool"
-        >
+        <ExperienceDisplay title="High School Diploma" subtitle="Aug 2017 - May 2020 |  American Fork Highschool">
           <Typography sx={{ pt: "1rem" }}>
-            GPA 3.9, CS Department Choice Award, Co-founder and President
-            Computer Science Club, 4 years programming, student tutor, AP
-            courses in Computer Science, Calculus, Mechanics, and Government
+            GPA 3.9, CS Department Choice Award, Co-founder and President Computer Science Club, 4 years programming,
+            student tutor, AP courses in Computer Science, Calculus, Mechanics, and Government
           </Typography>
         </ExperienceDisplay>
-        <ExperienceDisplay
-          title="Cyber Security and Networking"
-          subtitle="Jan 2019 - May 2019 | AFA’s CyberPatriot"
-        >
+        <ExperienceDisplay title="Cyber Security and Networking" subtitle="Jan 2019 - May 2019 | AFA’s CyberPatriot">
           <Typography sx={{ pt: "1rem" }}>
-            2nd Place state networking security challenge, curriculum included
-            Ubuntu security policies and PAM, networking, init systems, advanced
-            command line, processes, and scheduled tasks
+            2nd Place state networking security challenge, curriculum included Ubuntu security policies and PAM,
+            networking, init systems, advanced command line, processes, and scheduled tasks
           </Typography>
         </ExperienceDisplay>
       </Box>
diff --git a/src/pages/delta/Environments.jsx b/src/pages/delta/Environments.jsx
index 8a9bde9..feabdfe 100644
--- a/src/pages/delta/Environments.jsx
+++ b/src/pages/delta/Environments.jsx
@@ -9,17 +9,8 @@ import Typography from "@mui/material/Typography";
 export default function Environments() {
   return (
     <Box style={{ padding: 10 }}>
-      <Accordion
-        style={{ boxShadow: "none" }}
-        defaultExpanded
-        disableGutters
-        square
-      >
-        <AccordionSummary
-          content={{ margin: 0 }}
-          expandIcon={<ExpandMoreIcon />}
-          style={{ margin: 0 }}
-        >
+      <Accordion style={{ boxShadow: "none" }} defaultExpanded disableGutters square>
+        <AccordionSummary content={{ margin: 0 }} expandIcon={<ExpandMoreIcon />} style={{ margin: 0 }}>
           <Typography variant="h3">Environment</Typography>
         </AccordionSummary>
         <AccordionDetails>
@@ -43,10 +34,7 @@ export default function Environments() {
                   }}
                 />
               </div>
-              <p>
-                Section about deployment of applications to a Kubernetes
-                cluster.
-              </p>
+              <p>Section about deployment of applications to a Kubernetes cluster.</p>
             </Box>
           </Box>
           <Box
@@ -70,10 +58,7 @@ export default function Environments() {
                   }}
                 />
               </div>
-              <p>
-                Section about deployment using Garden for development and
-                production
-              </p>
+              <p>Section about deployment using Garden for development and production</p>
             </Box>
           </Box>
         </AccordionDetails>
diff --git a/src/pages/delta/Experience.jsx b/src/pages/delta/Experience.jsx
index ec61a39..89444fc 100644
--- a/src/pages/delta/Experience.jsx
+++ b/src/pages/delta/Experience.jsx
@@ -15,17 +15,36 @@ export default function Experience() {
       }}
       id="experience"
     >
-      <Typography
-        variant="h2"
-        sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}
-      >
+      <Typography variant="h2" sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}>
         Experience
       </Typography>
       <Box className="experience-list">
         <ExperienceDisplay
-          title="Software Engineer Intern"
-          subtitle="Jun - Nov 2021 | Podium, Lehi UT"
+          title="Fullstack Software Engineer"
+          subtitle="Jan 2024 - Present | AppRabbit, Springville UT"
         >
+          <Typography variant="body1" sx={{ fontWeight: 600, pt: "1rem" }}>
+            Technologies used: <span style={{ fontFamily: "inherit", fontSize: "14px" }}>React, NestJS, Flutter</span>
+          </Typography>
+          <ul style={{ paddingLeft: "25px" }}>
+            <li>
+              <Typography>
+                Developed a highly scalable multi-platform mobile app build system and monitoring solution as project
+                lead
+              </Typography>
+            </li>
+            <li>
+              <Typography>Automated creation of Owncast livestreaming servers on Digital Ocean</Typography>
+            </li>
+            <li>
+              <Typography>Implemented strict API policies and authorization systems</Typography>
+            </li>
+            <li>
+              <Typography>Used Stripe to manage user subscriptions and client data</Typography>
+            </li>
+          </ul>
+        </ExperienceDisplay>
+        <ExperienceDisplay title="Software Engineer Intern" subtitle="Jun - Nov 2021 | Podium, Lehi UT">
           <Typography variant="body1" sx={{ fontWeight: 600, pt: "1rem" }}>
             Technologies used:{" "}
             <span
@@ -40,30 +59,18 @@ export default function Experience() {
           <ul style={{ paddingLeft: "25px" }}>
             <li>
               <Typography>
-                Developed automated end to end UI & API tests and automated
-                collection of test coverage
+                Created fullstack application using React and Express to manage QA data as solo developer
               </Typography>
             </li>
             <li>
-              <Typography>
-                Modularized API testing resources as project lead
-              </Typography>
+              <Typography>Modularized API testing resources as project lead</Typography>
+            </li>
+            <li>
+              <Typography>Improved performance of core QA services by 20%</Typography>
             </li>
             <li>
               <Typography>
-                Automated scripting framework to gauge product reliability as
-                project lead
-              </Typography>
-            </li>
-            <li>
-              <Typography>
-                Improved performance of core QA services by 20%
-              </Typography>
-            </li>
-            <li>
-              <Typography>
-                Created fullstack application using React and Express to manage
-                QA data as solo developer
+                Developed automated end to end UI & API tests and automated collection of test coverage
               </Typography>
             </li>
           </ul>
diff --git a/src/pages/delta/Header.jsx b/src/pages/delta/Header.jsx
index c8ad14e..4324230 100644
--- a/src/pages/delta/Header.jsx
+++ b/src/pages/delta/Header.jsx
@@ -9,9 +9,8 @@ export default function Header() {
           React Fullstack Software Engineer
         </Typography>
         <Typography variant="body1">
-          Specializing in DevOps tools and code reliability. If you're a
-          business seeking to improve developer velocity or are looking to hire,
-          contact me{" "}
+          Specializing in DevOps tools and code reliability. If you're a business seeking to improve developer velocity
+          or are looking to hire, contact me{" "}
           <a
             href="/#contact"
             style={{
diff --git a/src/pages/delta/ProjectTile.jsx b/src/pages/delta/ProjectTile.jsx
index 15459dc..9d622aa 100644
--- a/src/pages/delta/ProjectTile.jsx
+++ b/src/pages/delta/ProjectTile.jsx
@@ -23,11 +23,7 @@ function ProjectLanguages(props) {
       }}
     >
       {languages.map((l, i) => (
-        <Chip
-          key={i}
-          label={l}
-          sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }}
-        />
+        <Chip key={i} label={l} sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }} />
       ))}
     </Box>
   );
@@ -61,11 +57,7 @@ export default function ProjectTile({
       }}
     >
       <div style={{ width: "100%" }}>
-        <img
-          src={image}
-          style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }}
-          onClick={imageClick}
-        />
+        <img src={image} style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }} onClick={imageClick} />
       </div>
 
       <Box
diff --git a/src/pages/delta/Projects-Languages.jsx b/src/pages/delta/Projects-Languages.jsx
index 31fa0cf..69f03e8 100644
--- a/src/pages/delta/Projects-Languages.jsx
+++ b/src/pages/delta/Projects-Languages.jsx
@@ -9,17 +9,8 @@ import Box from "@mui/material/Box";
 export default function Projects() {
   return (
     <Box style={{ padding: 10 }}>
-      <Accordion
-        style={{ boxShadow: "none", margin: 0 }}
-        defaultExpanded
-        disableGutters
-        square
-      >
-        <AccordionSummary
-          content={{ margin: 0 }}
-          expandIcon={<ExpandMoreIcon />}
-          style={{ margin: 0 }}
-        >
+      <Accordion style={{ boxShadow: "none", margin: 0 }} defaultExpanded disableGutters square>
+        <AccordionSummary content={{ margin: 0 }} expandIcon={<ExpandMoreIcon />} style={{ margin: 0 }}>
           <h3>Projects</h3>
         </AccordionSummary>
         <AccordionDetails>
diff --git a/src/pages/delta/Projects.jsx b/src/pages/delta/Projects.jsx
index 7fe811c..165fdf8 100644
--- a/src/pages/delta/Projects.jsx
+++ b/src/pages/delta/Projects.jsx
@@ -15,12 +15,7 @@ export default function Projects() {
 
   return (
     <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="portfolio">
-      <PhotoHover
-        image={image}
-        open={open}
-        setOpen={setOpen}
-        alt={"Missing Project Photo"}
-      />
+      <PhotoHover image={image} open={open} setOpen={setOpen} alt={"Missing Project Photo"} />
       <div style={{ display: "flex" }}>
         <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
           Projects
@@ -34,9 +29,8 @@ export default function Projects() {
         openPhoto={openPhoto}
         languages={["React", "Express", "Kubernetes"]}
       >
-        Deploy and monitor MInecraft servers in your kubernetes cluster. Easily
-        scales and provides a stateful experience to make managing multiple
-        servers simple.
+        Deploy and monitor MInecraft servers in your kubernetes cluster. Easily scales and provides a stateful
+        experience to make managing multiple servers simple.
       </ProjectTile>
       <ProjectTile
         image="/portfolio/projects/qualiteer.png"
@@ -46,9 +40,8 @@ export default function Projects() {
         openPhoto={openPhoto}
         languages={["React", "Express", "Kubernetes", "PostgreSQL", "RabbitMQ"]}
       >
-        Manage failing tests and silence unecessary alerts. Check the state of
-        your services worldwide and improve developer confidence with a simple
-        interface.
+        Manage failing tests and silence unecessary alerts. Check the state of your services worldwide and improve
+        developer confidence with a simple interface.
       </ProjectTile>
       <ProjectTile
         image="/portfolio/projects/khufu.png"
@@ -58,8 +51,8 @@ export default function Projects() {
         openPhoto={openPhoto}
         languages={["React", "Express"]}
       >
-        Basic cloud file management built on React class components. Simple
-        interface allows users to upload, delete, and multiple files.
+        Basic cloud file management built on React class components. Simple interface allows users to upload, delete,
+        and multiple files.
       </ProjectTile>
       <ProjectTile
         image="/portfolio/projects/codepen.png"
@@ -70,10 +63,7 @@ export default function Projects() {
         languages={["HTML5", "CSS"]}
       >
         Visual replication of the website{" "}
-        <a
-          href="https://codepen.io"
-          style={{ color: "black", fontFamily: "inherit", fontSize: "inherit" }}
-        >
+        <a href="https://codepen.io" style={{ color: "black", fontFamily: "inherit", fontSize: "inherit" }}>
           codepen.io
         </a>{" "}
         webpage in 2020. Simple demonstration of css and html
@@ -86,8 +76,7 @@ export default function Projects() {
         openPhoto={openPhoto}
         languages={["Java", "JavaFX"]}
       >
-        Simple media player built on javafx. Player supports media seeking,
-        playback controls, and speed distortion.
+        Simple media player built on javafx. Player supports media seeking, playback controls, and speed distortion.
       </ProjectTile>
       <ProjectTile
         image="/portfolio/projects/voxelcraft.png"
@@ -97,9 +86,8 @@ export default function Projects() {
         openPhoto={openPhoto}
         languages={["JavaFX"]}
       >
-        Voxel game built on a simple rendering engine written with JavaFX.
-        Generate your terrain and form your ideal world by exploring and
-        harvesting resources.
+        Voxel game built on a simple rendering engine written with JavaFX. Generate your terrain and form your ideal
+        world by exploring and harvesting resources.
       </ProjectTile>
     </Box>
   );
diff --git a/src/pages/delta/SkillPaper.jsx b/src/pages/delta/SkillPaper.jsx
index e6ae6b0..07ab516 100644
--- a/src/pages/delta/SkillPaper.jsx
+++ b/src/pages/delta/SkillPaper.jsx
@@ -4,14 +4,7 @@ import CardContent from "@mui/material/CardContent";
 import CardMedia from "@mui/material/CardMedia";
 import Typography from "@mui/material/Typography";
 
-export default function SkillPaper({
-  src,
-  bgColor,
-  fgColor,
-  heading,
-  Icon,
-  openPhoto,
-}) {
+export default function SkillPaper({ src, bgColor, fgColor, heading, Icon, openPhoto }) {
   const mediaClick = () => openPhoto(src);
   return (
     <Box>
@@ -21,11 +14,7 @@ export default function SkillPaper({
           backgroundColor: bgColor,
         }}
       >
-        <img
-          src={src}
-          title={`${heading} Pluralsight Score`}
-          onClick={mediaClick}
-        />
+        <img src={src} title={`${heading} Pluralsight Score`} onClick={mediaClick} />
         <CardContent sx={{ color: fgColor, backgroundColor: bgColor }}>
           <Typography variant="h5" component="div">
             <div style={{ display: "inline-flex" }}>
diff --git a/src/pages/delta/Skills.jsx b/src/pages/delta/Skills.jsx
index 8a586dc..f679190 100644
--- a/src/pages/delta/Skills.jsx
+++ b/src/pages/delta/Skills.jsx
@@ -26,27 +26,9 @@ export default function Skills() {
   const testoutCertClick = () => openPhoto("/portfolio/linux-cert.png");
 
   const skills = [
-    <SkillPaper
-      src="/portfolio/iq/python.png"
-      fgColor="white"
-      bgColor="#3f7ed4"
-      heading="Python"
-      Icon={FaPython}
-    />,
-    <SkillPaper
-      src="/portfolio/iq/react.png"
-      fgColor="black"
-      bgColor="#61dafb"
-      heading="React"
-      Icon={FaReact}
-    />,
-    <SkillPaper
-      src="/portfolio/iq/java.png"
-      fgColor="white"
-      bgColor="#ea8c10 "
-      heading="Java"
-      Icon={FaJava}
-    />,
+    <SkillPaper src="/portfolio/iq/python.png" fgColor="white" bgColor="#3f7ed4" heading="Python" Icon={FaPython} />,
+    <SkillPaper src="/portfolio/iq/react.png" fgColor="black" bgColor="#61dafb" heading="React" Icon={FaReact} />,
+    <SkillPaper src="/portfolio/iq/java.png" fgColor="white" bgColor="#ea8c10 " heading="Java" Icon={FaJava} />,
     <SkillPaper
       src="/portfolio/iq/javascript.png"
       fgColor="black"
@@ -54,25 +36,14 @@ export default function Skills() {
       heading="Javascript"
       Icon={SiJavascript}
     />,
-    <SkillPaper
-      src="/portfolio/iq/html.png"
-      fgColor="white"
-      bgColor="#e9562f"
-      heading="HTML 5"
-      Icon={FaHtml5}
-    />,
+    <SkillPaper src="/portfolio/iq/html.png" fgColor="white" bgColor="#e9562f" heading="HTML 5" Icon={FaHtml5} />,
   ];
 
   const openSkill = (skillIndex) => openPhoto(skills[skillIndex].props.src);
 
   return (
     <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="achievements">
-      <PhotoHover
-        image={image}
-        open={open}
-        setOpen={setOpen}
-        alt={"Certificate"}
-      />
+      <PhotoHover image={image} open={open} setOpen={setOpen} alt={"Certificate"} />
       <Box
         style={{
           display: "flex",
@@ -101,8 +72,7 @@ export default function Skills() {
               sx={{
                 maxWidth: 374,
                 margin: "10px auto",
-                boxShadow:
-                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
               }}
             >
               <img
@@ -116,8 +86,7 @@ export default function Skills() {
                   Fullstack Certification
                 </Typography>
                 <Typography variant="body2">
-                  Certificate of profeciency in Python3, React, CSS, and
-                  Javascript
+                  Certificate of profeciency in Python3, React, CSS, and Javascript
                 </Typography>
               </CardContent>
             </Card>
@@ -125,8 +94,7 @@ export default function Skills() {
               sx={{
                 maxWidth: 374,
                 margin: "10px auto",
-                boxShadow:
-                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
                 backgroundColor: "#c3802b",
               }}
             >
@@ -144,9 +112,7 @@ export default function Skills() {
                 <Typography gutterBottom variant="h5" component="div">
                   Linux Administration Certificate
                 </Typography>
-                <Typography variant="body2">
-                  Certificate of profeciency in Linux client administration
-                </Typography>
+                <Typography variant="body2">Certificate of profeciency in Linux client administration</Typography>
               </CardContent>
             </Card>
           </Box>
@@ -167,15 +133,10 @@ export default function Skills() {
               maxWidth: 374,
               display: "block",
               margin: "auto",
-              boxShadow:
-                "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+              boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
             }}
           >
-            <Suspense
-              fallback={
-                <Skeleton variant="rectangular" width="374px" height="100%" />
-              }
-            >
+            <Suspense fallback={<Skeleton variant="rectangular" width="374px" height="100%" />}>
               <Carousel
                 showArrows={true}
                 showStatus={false}
diff --git a/src/pages/delta/Social.jsx b/src/pages/delta/Social.jsx
index 9f11b0a..f87d4dc 100644
--- a/src/pages/delta/Social.jsx
+++ b/src/pages/delta/Social.jsx
@@ -1,12 +1,10 @@
 import { Link } from "react-router-dom";
-import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import { SiForgejo } from "react-icons/si";
 
 export default function Social() {
   return (
@@ -42,44 +40,29 @@ export default function Social() {
               sx={{
                 maxWidth: 256,
                 margin: "3rem auto",
-                boxShadow:
-                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
                 overflow: "visible",
                 textDecoration: "none",
               }}
             >
-              <div style={{ position: "relative", overflow: "visible" }}>
-                <Avatar
-                  style={{
-                    width: "4rem",
-                    height: "4rem",
-                    position: "absolute",
-                    top: "-2rem",
-                    left: "-2rem",
-                    backgroundColor: "#0073b1",
-                  }}
-                >
+              <CardContent>
+                <Typography variant="h5" component="div" style={{ color: "#0073b1", display: "flex" }}>
+                  Linkedin
                   <LinkedInIcon
                     style={{
-                      width: "2.125rem",
-                      height: "2.125rem",
-                      color: "white",
+                      width: "24px",
+                      height: "24px",
+                      color: "inherit",
+                      marginTop: "auto",
+                      marginBottom: "auto",
+                      marginLeft: "auto",
+                      marginRight: ".25rem",
                     }}
                   />
-                </Avatar>
-              </div>
-              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
-                <Typography
-                  variant="h5"
-                  component="div"
-                  style={{ color: "#0073b1" }}
-                >
-                  Linkedin
                 </Typography>
-                <Typography variant="body2" component="div">
-                  Hard working fullstack developer Seeking entry-level part time
-                  position or internship with flexible hours to accommodate
-                  pursuit of a B.S. degree.
+                <Typography variant="body2" component="div" mt=".25rem">
+                  Hard working fullstack developer Seeking entry-level part time position or internship with flexible
+                  hours to accommodate pursuit of a B.S. degree.
                 </Typography>
               </CardContent>
             </Card>
@@ -90,57 +73,44 @@ export default function Social() {
               sx={{
                 maxWidth: 256,
                 margin: "3rem auto",
-                boxShadow:
-                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
                 overflow: "visible",
                 textDecoration: "none",
               }}
             >
-              <div style={{ position: "relative", overflow: "visible" }}>
-                <Avatar
-                  style={{
-                    width: "4rem",
-                    height: "4rem",
-                    position: "absolute",
-                    top: "-2rem",
-                    left: "-2rem",
-                    backgroundColor: "rgb(246, 152, 32)",
-                  }}
-                >
-                  <SiForgejo
-                    style={{
-                      width: "2.25rem",
-                      height: "2.25rem",
-                      color: "white",
-                    }}
-                  />
-                </Avatar>
-              </div>
-              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
+              <CardContent>
                 <Typography
                   variant="h5"
                   component="div"
                   sx={{
-                    backgroundImage:
-                      "linear-gradient(to right, var(--tw-gradient-stops))",
-                    "--tw-gradient-from":
-                      "#f59e0b var(--tw-gradient-from-position)",
-                    "--tw-gradient-stops":
-                      "var(--tw-gradient-from), var(--tw-gradient-to)",
-                    "--tw-gradient-to":
-                      "#dc2626 var(--tw-gradient-to-position)",
+                    backgroundImage: "linear-gradient(to right, var(--tw-gradient-stops))",
+                    "--tw-gradient-from": "#f59e0b var(--tw-gradient-from-position)",
+                    "--tw-gradient-stops": "var(--tw-gradient-from), var(--tw-gradient-to)",
+                    "--tw-gradient-to": "#dc2626 var(--tw-gradient-to-position)",
                     backgroundClip: "text",
                     color: "transparent",
                     "--tw-gradient-from-position": "0%",
                     "--tw-gradient-via-position": "50%",
                     "--tw-gradient-to-position": "100%",
+                    display: "flex",
                   }}
                 >
                   Forgejo
+                  <img
+                    src="/images/forgejo.svg"
+                    width="24px"
+                    height="24px"
+                    style={{
+                      marginLeft: "auto",
+                      marginRight: ".25rem",
+                      marginTop: "auto",
+                      marginBottom: "auto",
+                    }}
+                  />
                 </Typography>
-                <Typography variant="body2" component="div">
-                  Portfolio showcasing integration with CI/CD and Kubernetes.
-                  Technologies include React, Express, Python, Helm, and Docker
+                <Typography variant="body2" component="div" mt=".25rem">
+                  Portfolio showcasing integration with CI/CD and Kubernetes. Technologies include React, Express,
+                  Python, Helm, and Docker
                 </Typography>
               </CardContent>
             </Card>
@@ -152,44 +122,26 @@ export default function Social() {
               sx={{
                 maxWidth: 256,
                 margin: "3rem auto",
-                boxShadow:
-                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
                 overflow: "visible",
                 textDecoration: "none",
               }}
             >
-              <div style={{ position: "relative", overflow: "visible" }}>
-                <Avatar
-                  style={{
-                    width: "4rem",
-                    height: "4rem",
-                    position: "absolute",
-                    top: "-2rem",
-                    left: "-2rem",
-                    backgroundColor: "#24292f",
-                  }}
-                >
+              <CardContent>
+                <Typography variant="h5" component="div" style={{ color: "#24292f", display: "flex" }}>
+                  Github
                   <GitHubIcon
                     style={{
-                      width: "2.5rem",
-                      height: "2.5rem",
-                      color: "white",
+                      color: "inherit",
+                      marginLeft: "auto",
+                      marginTop: "auto",
+                      marginRight: ".25rem",
                     }}
                   />
-                </Avatar>
-              </div>
-              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
-                <Typography
-                  variant="h5"
-                  component="div"
-                  style={{ color: "#24292f" }}
-                >
-                  Github
                 </Typography>
-                <Typography variant="body2" component="div">
-                  Archived projects specializing in Java, Python, Javascript,
-                  HTML, and CSS. Built projects solo and in teams as project
-                  lead, and principal contributor.
+                <Typography variant="body2" component="div" mt=".25rem">
+                  Archived projects specializing in Java, Python, Javascript, HTML, and CSS. Built projects solo and in
+                  teams as project lead, and principal contributor.
                 </Typography>
               </CardContent>
             </Card>
diff --git a/src/pages/resume/ContactCard.jsx b/src/pages/resume/ContactCard.jsx
index 2b96f77..1ff2d26 100644
--- a/src/pages/resume/ContactCard.jsx
+++ b/src/pages/resume/ContactCard.jsx
@@ -23,8 +23,7 @@ export default function ContactCard(props) {
         width: 320,
         maxWidth: "100%",
         margin: 2,
-        boxShadow:
-          "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+        boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
       }}
     >
       <CardContent sx={{ alignItems: "center", textAlign: "center", pb: 0 }}>
@@ -42,7 +41,6 @@ export default function ContactCard(props) {
             mb: 1,
             zIndex: 5,
             backgroundColor: "rgba(0, 115, 177,.1)",
-            borderColor: "white",
             color: "#0073b1",
           }}
         />
@@ -52,22 +50,10 @@ export default function ContactCard(props) {
         </Typography>
       </CardContent>
       <CardActions style={{ display: "flex", justifyContent: "center" }}>
-        <IconButton
-          size="sm"
-          variant="plain"
-          component={Link}
-          to={linkedin}
-          sx={{ color: "#0073b1" }}
-        >
+        <IconButton size="sm" variant="plain" component={Link} to={linkedin} sx={{ color: "#0073b1" }}>
           <LinkedInIcon />
         </IconButton>
-        <IconButton
-          size="sm"
-          variant="plain"
-          color="neutral"
-          component={Link}
-          to={email}
-        >
+        <IconButton size="sm" variant="plain" color="neutral" component={Link} to={email}>
           <MailIcon />
         </IconButton>
       </CardActions>
diff --git a/src/pages/resume/ReferenceCard.jsx b/src/pages/resume/ReferenceCard.jsx
index 5290172..cdd0f2d 100644
--- a/src/pages/resume/ReferenceCard.jsx
+++ b/src/pages/resume/ReferenceCard.jsx
@@ -38,12 +38,7 @@ export default function ReferenceCard(props) {
               textAlign: "center",
             }}
           >
-            <Typography
-              variant="h5"
-              component={Link}
-              to={linkedin}
-              sx={{ textDecoration: "none", color: "inherit" }}
-            >
+            <Typography variant="h5" component={Link} to={linkedin} sx={{ textDecoration: "none", color: "inherit" }}>
               {name}
             </Typography>
             <Typography variant="h6">{title}</Typography>
diff --git a/vite.config.js b/vite.config.js
index 8e19457..7406c43 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { analyzer } from "vite-bundle-analyzer";
 import path from "node:path";
+
+const plugins = [react()];
+if (process.env.USE_ANALYZER === "true") plugins.push(analyzer());
+
 export default () => {
   return defineConfig({
-    plugins: [react()],
+    plugins,
     server: {
       port: process.env.VITE_DEV_PORT ?? 5173,
       host: "0.0.0.0",
