Logo update

index.html

@@ -26,31 +26,31 @@
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="/favicons/apple-touch-icon.png?v=0.0.1-sep-9-2022"
+      href="/favicons/apple-touch-icon.png?v=jan27deltaburn"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="/favicons/favicon-32x32.png?v=0.0.1-sep-9-2022"
+      href="/favicons/favicon-32x32.png?v=jan27deltaburn"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="/favicons/favicon-16x16.png?v=0.0.1-sep-9-2022"
+      href="/favicons/favicon-16x16.png?v=jan27deltaburn"
     />
-    <link rel="manifest" href="/favicons/site.webmanifest?v=0.0.1-sep-9-2022" />
+    <link rel="manifest" href="/favicons/site.webmanifest?v=jan27deltaburn" />
     <link
       rel="mask-icon"
-      href="/favicons/safari-pinned-tab.svg?v=0.0.1-sep-9-2022"
+      href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn"
       color="#ffc40d"
     />
-    <link rel="shortcut icon" href="/favicons/favicon.ico?v=0.0.1-sep-9-2022" />
+    <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=0.0.1-sep-9-2022"
+      content="/favicons/browserconfig.xml?v=jan27deltaburn"
     />
     <meta name="theme-color" content="#5d5d5d" />
   </head>
@@ -62,10 +62,8 @@
       </header>
       <div class="loading-content">
         <div class="loading-content-wrapper">
-          <img
-            src="/images/phx-animated-compressed.gif"
-            class="loading-content-media"
-          />
+          <img src="/images/phx-micro.png" class="loading-content-media" />
+          <div id="loading-content-media-cover"></div>
         </div>
       </div>
       <h1 class="loading-content-subtitle">Loading</h1>
@@ -73,7 +71,7 @@
     <div id="root"></div>
     <style>
       body {
-        background: linear-gradient(to bottom, #eee, #fff);
+        background: linear-gradient(to bottom, #eee, #fff 20%);
         background-size: cover;
         background-repeat: no-repeat;
       }
@@ -100,20 +98,68 @@
         height: 100%;
         text-align: center;
         max-width: 1024px;
+        position: relative;
+        overflow: hidden;
       }
 
       #loading .loading-content-media {
-        width: 50%;
-        height: 50%;
+        width: 100%;
+        height: 100%;
         max-height: 100vh;
         max-width: 1024px;
         margin: auto;
       }
 
+      #loading-content-media-cover {
+        position: absolute;
+        min-width: 100%;
+        min-height: 100%;
+        bottom: 0px;
+        background-color: #fff;
+        -webkit-animation: load 2s ease;
+        animation: load 2s ease;
+        -webkit-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        animation-direction: normal;
+        -webkit-animation-direction: normal;
+        display: none;
+      }
+
       #loading .loading-content-subtitle {
         text-align: center;
       }
+
+      @keyframes load {
+        15% {
+          min-height: 100%;
+        }
+
+        30% {
+          min-height: 0px;
+        }
+
+        100% {
+          min-height: 0px;
+        }
+      }
     </style>
+    <script>
+      function loaderInitScript() {
+        function showLoader() {
+          const mediaCover = document.getElementById(
+            "loading-content-media-cover"
+          );
+          mediaCover.style.display = "block";
+        }
+
+        function onDocumentStateChange(e) {
+          if (document.readyState === "interactive")
+            setTimeout(showLoader, 2000);
+        }
+        document.addEventListener("readystatechange", onDocumentStateChange);
+      }
+      loaderInitScript();
+    </script>
     <script type="module" src="/src/App.jsx"></script>
   </body>
 </html>

public/favicons/README.md

@@ -6,18 +6,18 @@ This package was generated with [RealFaviconGenerator](https://realfavicongenera
 
 To install this package:
 
-Extract this package in <code>&lt;web site&gt;/images/favicons/</code>. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/images/favicons/favicon.ico</code>.
+Extract this package in <code>&lt;web site&gt;/favicons/</code>. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/favicons/favicon.ico</code>.
 
 Insert the following code in the `head` section of your pages:
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png?v=12-19-22-delta">
-    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png?v=12-19-22-delta">
-    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png?v=12-19-22-delta">
-    <link rel="manifest" href="/images/favicons/site.webmanifest?v=12-19-22-delta">
-    <link rel="mask-icon" href="/images/favicons/safari-pinned-tab.svg?v=12-19-22-delta" color="#ffc40d">
-    <link rel="shortcut icon" href="/images/favicons/favicon.ico?v=12-19-22-delta">
+    <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="shortcut icon" href="/favicons/favicon.ico?v=jan27deltaburn">
     <meta name="msapplication-TileColor" content="#ffc40d">
-    <meta name="msapplication-config" content="/images/favicons/browserconfig.xml?v=12-19-22-delta">
-    <meta name="theme-color" content="#ffffff">
+    <meta name="msapplication-config" content="/favicons/browserconfig.xml?v=jan27deltaburn">
+    <meta name="theme-color" content="#ff0000">
 
 *Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

public/favicons/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/images/favicons/mstile-150x150.png?v=12-19-22-delta"/>
+            <square150x150logo src="/favicons/mstile-150x150.png?v=jan27deltaburn"/>
             <TileColor>#ffc40d</TileColor>
         </tile>
     </msapplication>

public/favicons/html_code.html

@@ -1,9 +0,0 @@
-<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png?v=12-19-22-delta">
-<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png?v=12-19-22-delta">
-<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png?v=12-19-22-delta">
-<link rel="manifest" href="/images/favicons/site.webmanifest?v=12-19-22-delta">
-<link rel="mask-icon" href="/images/favicons/safari-pinned-tab.svg?v=12-19-22-delta" color="#ffc40d">
-<link rel="shortcut icon" href="/images/favicons/favicon.ico?v=12-19-22-delta">
-<meta name="msapplication-TileColor" content="#ffc40d">
-<meta name="msapplication-config" content="/images/favicons/browserconfig.xml?v=12-19-22-delta">
-<meta name="theme-color" content="#ffffff">

public/favicons/site.webmanifest

@@ -1,19 +1,54 @@
 {
-    "name": "Delta",
-    "short_name": "Delta",
+    "name": "Dunemask",
+    "short_name": "Dunemask",
     "icons": [
         {
-            "src": "/images/favicons/android-chrome-192x192.png?v=12-19-22-delta",
+            "src": "/favicons/android-chrome-36x36.png?v=jan27deltaburn",
+            "sizes": "36x36",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-48x48.png?v=jan27deltaburn",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-72x72.png?v=jan27deltaburn",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-96x96.png?v=jan27deltaburn",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-144x144.png?v=jan27deltaburn",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-192x192.png?v=jan27deltaburn",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/images/favicons/android-chrome-384x384.png?v=12-19-22-delta",
+            "src": "/favicons/android-chrome-256x256.png?v=jan27deltaburn",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-384x384.png?v=jan27deltaburn",
             "sizes": "384x384",
             "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-512x512.png?v=jan27deltaburn",
+            "sizes": "512x512",
+            "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
+    "theme_color": "#ff0000",
+    "background_color": "#ff0000",
     "display": "standalone"
 }

src/pages/delta/Delta.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Box from "@mui/material/Box";
 import About from "./About.jsx";
 import Projects from "./Projects.jsx";
-import Environments from "./Environments.jsx";
+//import Environments from "./Environments.jsx";
 import Footer from "./Footer.jsx";
 
 const Skills = React.lazy(() => import("./Skills.jsx"));

src/pages/delta/Skills.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa";
 import { SiJavascript } from "react-icons/si";
-import Carousel from "react-material-ui-carousel";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
@@ -10,6 +9,7 @@ import CardMedia from "@mui/material/CardMedia";
 import SkillPaper from "./SkillPaper.jsx";
 import PhotoHover from "./PhotoHover.jsx";
 
+const Carousel = React.lazy(() => import("react-material-ui-carousel"));
 export default function Skills() {
   const [image, setImage] = useState();
   const [open, setOpen] = useState(false);

src/pages/delta/Social.jsx

@@ -1,5 +1,3 @@
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
 import Box from "@mui/material/Box";
 import MailIcon from "@mui/icons-material/Mail";
 import GitHubIcon from "@mui/icons-material/GitHub";
@@ -28,29 +26,20 @@ const socialLinks = [
 export default function Social() {
   return (
     <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="contact">
-      <Accordion
-        style={{ boxShadow: "none" }}
-        defaultExpanded
-        disableGutters
-        square
-      >
-        <AccordionSummary content={{ margin: 0 }} style={{ margin: 0 }}>
-          <h3 style={{ paddingRight: 20 }}>Social</h3>
-          <Box
-            style={{ display: "flex", marginLeft: "auto", flexWrap: "wrap" }}
-          >
-            {socialLinks.map((v, i) => (
-              <a
-                key={i}
-                href={v.url}
-                style={{ margin: "auto 0", color: "black", padding: "10px" }}
-              >
-                {v.icon}
-              </a>
-            ))}
-          </Box>
-        </AccordionSummary>
-      </Accordion>
+      <Box style={{ boxShadow: "none", display: "flex", padding: 16 }}>
+        <h3 style={{ paddingRight: 20 }}>Social</h3>
+        <Box style={{ display: "flex", marginLeft: "auto", flexWrap: "wrap" }}>
+          {socialLinks.map((v, i) => (
+            <a
+              key={i}
+              href={v.url}
+              style={{ margin: "auto 0", color: "black", padding: "10px" }}
+            >
+              {v.icon}
+            </a>
+          ))}
+        </Box>
+      </Box>
     </Box>
   );
 }