Latest Dev (#42)

* Some clean up, added Spotify icon for offline/loading state

* Minor clean up in Mobile view

* Updating about text.

* Fixing max width for the Tab Panel

* P-18: fixed bug when type is not track

* P-20: Add real time spotify streaming progress bar. (#21)

* P-23: Added experience section. (#24)

* P-26: Added placeholder projects section. (#27)

* Wip footer.

* develop: some footer updates, brb.

* develop: simple footer.

* P-11 (#31)

* P-11: added vitest, react testing library config for unit testing.

* P-11: add Projects unit test.

* P-11: fix bg card color.

* P-11 (#32)

* P-11: added vitest, react testing library config for unit testing.

* P-11: add Projects unit test.

* P-11: fix bg card color.

* P-11: almost done, missing Github actions and TODOS in test.

* Update src/components/Navigation/Navigation.test.tsx

* theme-mode: add dark/light mode. (#38)

* animation: add simple typing animation and set initial theme mode based on user system pref. (#41)

package.json

@@ -22,7 +22,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.8.2",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "react-type-animation": "^3.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^15.0.7",

src/App.tsx

@@ -4,6 +4,7 @@ import { Grid, Typography, Link, IconButton } from "@mui/material";
 import { GitHub, LinkedIn, LightMode, DarkMode } from "@mui/icons-material";
 import { Navigation, Footer } from "./components";
 import { ThemeContext } from "./mui/theme-context";
+import { TypeAnimation } from "react-type-animation";
 
 const icons: Icon[] = [
   {
@@ -20,7 +21,6 @@ const icons: Icon[] = [
 
 export default function App() {
   const { theme, toggleTheme } = React.useContext(ThemeContext);
-
   return (
     <>
       <Grid
@@ -39,22 +39,31 @@ export default function App() {
           </IconButton>
         </Grid>
 
-        <Grid item>
-          <Typography component="h1" fontSize={[18, 42]} color="secondary">
-            Hey there!
-          </Typography>
-        </Grid>
         <Grid item>
           <Typography
-            fontSize={[16, 42]}
-            color="info"
-            sx={{ span: { fontWeight: 600 } }}
+            component="h1"
+            fontSize={[18, 42]}
+            fontWeight={500}
+            color="secondary"
           >
-            I am <span>Maria Torrente</span>, a detail-oriented full-stack
-            engineer focused on ensuring elegant solutions and creating
-            meaningful experiences.
+            Hey there!
           </Typography>
         </Grid>
+        <Grid item fontSize={[18, 42]}>
+          <TypeAnimation
+            sequence={[
+              "Make your day outstanding 🫶🏻💫! ",
+              1000,
+              "I am Maria Torrente, a passionate human being",
+              1000,
+              "I am Maria Torrente, a detail-oriented full-stack engineer focused on ensuring elegant solutions and creating meaningful experiences",
+              1000,
+            ]}
+            wrapper="span"
+            speed={55}
+            repeat={0}
+          />
+        </Grid>
         <Grid
           item
           sx={{
@@ -82,7 +91,7 @@ export default function App() {
             component="a"
             href="/resume.pdf"
             target="_blank"
-            sx={{ fontSize: ["1rem", "2rem"] }}
+            sx={{ fontSize: ["1rem", "2rem"], padding: "1rem" }}
           >
             View full resume
           </Link>

src/mui/theme-context.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { PaletteMode, Theme } from "@mui/material";
+import { useMediaQuery } from "@mui/material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { baseTheme } from "./base-theme";
 import { lightPalette, darkPalette } from "./palettes";
@@ -17,7 +18,11 @@ export const ThemeContext = React.createContext<ThemeContextProps>({
 export const ThemeProviderWrapper: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [mode, setMode] = React.useState<PaletteMode>("light");
+  // User system mode preference.
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const [mode, setMode] = React.useState<PaletteMode>(() =>
+    prefersDarkMode ? "dark" : "light"
+  );
 
   const toggleTheme = () => {
     setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));