Minor footer update (#30)

* 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.

src/App.tsx

@@ -1,7 +1,7 @@
 import type { Icon } from "./types/shared";
 import { Grid, Typography, Link, IconButton } from "@mui/material";
 import { GitHub, LinkedIn } from "@mui/icons-material";
-import { Navigation } from "./components";
+import { Navigation, Footer } from "./components";
 
 const icons: Icon[] = [
   {
@@ -18,60 +18,63 @@ const icons: Icon[] = [
 
 export default function App() {
   return (
-    <Grid
-      container
-      maxWidth="md"
-      textAlign="left"
-      margin="0 auto"
-      alignItems="center"
-      padding={["2rem", "5rem 2rem"]}
-      spacing={2}
-    >
-      <Grid item>
-        <Typography fontSize={[18, 42]} color="secondary">
-          Hey there!
-        </Typography>
-      </Grid>
-      <Grid item>
-        <Typography
-          fontSize={[16, 42]}
-          color="info"
-          sx={{ span: { fontWeight: 600 } }}
-        >
-          I am <span>Maria Torrente</span>, a detail-oriented full-stack
-          engineer focused on ensuring elegant solutions and creating meaningful
-          experiences.
-        </Typography>
-      </Grid>
-      <Grid item>
-        {icons.map((item, index) => (
-          <IconButton
-            key={index}
-            aria-label={item.label}
+    <>
+      <Grid
+        container
+        maxWidth="md"
+        textAlign="left"
+        margin="0 auto"
+        alignItems="center"
+        padding={["2rem", "5rem 2rem"]}
+        spacing={2}
+      >
+        <Grid item>
+          <Typography fontSize={[18, 42]} color="secondary">
+            Hey there!
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography
+            fontSize={[16, 42]}
+            color="info"
+            sx={{ span: { fontWeight: 600 } }}
+          >
+            I am <span>Maria Torrente</span>, a detail-oriented full-stack
+            engineer focused on ensuring elegant solutions and creating
+            meaningful experiences.
+          </Typography>
+        </Grid>
+        <Grid item>
+          {icons.map((item, index) => (
+            <IconButton
+              key={index}
+              aria-label={item.label}
+              component="a"
+              color="secondary"
+              href={item.link}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {item.icon}
+            </IconButton>
+          ))}
+        </Grid>
+        <Grid item>
+          <Link
+            color="secondary.main"
             component="a"
-            color="secondary"
-            href={item.link}
+            href="/resume.pdf"
             target="_blank"
-            rel="noopener noreferrer"
+            sx={{ fontSize: ["1rem", "2rem"] }}
           >
-            {item.icon}
-          </IconButton>
-        ))}
-      </Grid>
-      <Grid item>
-        <Link
-          color="secondary.main"
-          component="a"
-          href="/resume.pdf"
-          target="_blank"
-          sx={{ fontSize: ["1rem", "2rem"] }}
-        >
-          View full resume
-        </Link>
-      </Grid>
-      <Grid item sx={{ width: "100%" }}>
-        <Navigation />
+            View full resume
+          </Link>
+        </Grid>
+        <Grid item sx={{ width: "100%" }}>
+          <Navigation />
+        </Grid>
       </Grid>
-    </Grid>
+      <Footer />
+    </>
   );
 }

src/components/Footer.tsx

@@ -0,0 +1,20 @@
+import { Typography, Container, Stack, IconButton } from "@mui/material";
+import MTLogo from "../assets/mt.png";
+
+export default function Footer() {
+  return (
+    <Container component="footer" maxWidth="md" sx={{ padding: 2 }}>
+      <Stack alignItems="center" spacing={1}>
+        <IconButton
+          component="a"
+          color="secondary"
+          sx={{ img: { maxWidth: 50 } }}
+          href="#"
+        >
+          <img src={MTLogo} alt="Maria Torrente" />
+        </IconButton>
+        <Typography variant="caption"> © Maria Torrente 2024</Typography>
+      </Stack>
+    </Container>
+  );
+}

src/components/index.ts

@@ -3,3 +3,4 @@ export { default as Navigation } from "./Navigation";
 export { default as Experience } from "./Experience";
 export { default as Projects } from "./Projects";
 export { default as SpotifyNowPlaying } from "./SpotifyNowPlaying";
+export { default as Footer } from "./Footer";