Merge latest (#25)

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

src/App.tsx

@@ -8,76 +8,75 @@ type Icon = {
   label: string;
 };
 
-export default function App() {
-  const icons: Icon[] = [
-    {
-      icon: <GitHub />,
-      link: "https://github.com/mariatorrentedev",
-      label: "GitHub",
-    },
-    {
-      icon: <LinkedIn />,
-      link: "https://www.linkedin.com/in/mariactorrente",
-      label: "LinkedIn",
-    },
-  ];
+const icons: Icon[] = [
+  {
+    icon: <GitHub />,
+    link: "https://github.com/mariatorrentedev",
+    label: "GitHub",
+  },
+  {
+    icon: <LinkedIn />,
+    link: "https://www.linkedin.com/in/mariactorrente",
+    label: "LinkedIn",
+  },
+];
 
+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'm <span>Maria Torrente</span>, a detailed-oriented full-stack
-          engineer, focused on ensuring elegant solutions, and create 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'm <span>Maria Torrente</span>, a detailed-oriented full-stack
+            engineer, focused on ensuring elegant solutions, and create
+            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>
   );
 }