Merge latest changes. (#28)

* 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)
mariatorrentedev · Apr 22, 2024 · 20949c5 · 20949c5
1 parent 51512e1
commit 20949c5
Show file tree

Hide file tree

Showing 11 changed files with 260 additions and 70 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,8 @@
+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";
 
-type Icon = {
-  icon: React.ReactNode;
-  link: string;
-  label: string;
-};
-
 const icons: Icon[] = [
   {
     icon: <GitHub />,
@@ -23,60 +18,60 @@ 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}
-              component="a"
-              color="secondary"
-              href={item.link}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {item.icon}
-            </IconButton>
-          ))}
-        </Grid>
-        <Grid item>
-          <Link
-            color="secondary.main"
+    <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"
-            href="/resume.pdf"
+            color="secondary"
+            href={item.link}
             target="_blank"
-            sx={{ fontSize: ["1rem", "2rem"] }}
+            rel="noopener noreferrer"
           >
-            View full resume
-          </Link>
-        </Grid>
-        <Grid item sx={{ width: "100%" }}>
-          <Navigation />
-        </Grid>
+            {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 />
       </Grid>
+    </Grid>
   );
 }
diff --git a/src/assets/ecannab.svg b/src/assets/ecannab.svg
diff --git a/src/assets/random-quiz.svg b/src/assets/random-quiz.svg
diff --git a/src/assets/taste-buddy.svg b/src/assets/taste-buddy.svg
diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx
@@ -37,7 +37,6 @@ const renderList = (jobs: CompanyItem["jobs"]) => {
 
 export default function Experience() {
   const theme = useTheme();
-
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   return (

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -1,14 +1,7 @@
 import * as React from "react";
-import {
-  Box,
-  Tab,
-  Tabs,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Tab, Tabs, useMediaQuery, useTheme } from "@mui/material";
 import { styled } from "@mui/system";
-import { About, Experience } from "./";
+import { About, Experience, Projects } from "./";
 
 const TabsWrapper = styled(Box)(({ theme }) => ({
   flexGrow: 1,
@@ -98,7 +91,7 @@ type TabsContent = {
 const tabContents: TabsContent[] = [
   { label: "About", component: <About /> },
   { label: "Experience", component: <Experience /> },
-  { label: "Projects", component: <Typography> Projects </Typography> },
+  { label: "Projects", component: <Projects /> },
 ];
 
 export default function Navigation() {

diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -0,0 +1,109 @@
+import { GitHub, OpenInNew } from "@mui/icons-material";
+import {
+  Box,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  Typography,
+  Stack,
+  CardActionArea,
+  IconButton,
+} from "@mui/material";
+import { PROJECTS } from "../constants";
+import { styled } from "@mui/system";
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  color: "info.main",
+  padding: 16,
+  flexGrow: 1,
+  margin: 1,
+  [theme.breakpoints.up("md")]: {
+    maxWidth: 300,
+  },
+}));
+
+const iconButtonSize = {
+  ".MuiSvgIcon-root": { height: "2.5rem", width: "2.5rem" },
+};
+
+export default function Projects() {
+  return (
+    <Stack
+      flexDirection={["column", "column", "row"]}
+      useFlexGap
+      flexWrap="wrap"
+      spacing={3}
+    >
+      {PROJECTS.map((project, index) => (
+        <StyledCard key={index}>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <CardActionArea
+              sx={{ opacity: 0.5, ":hover": { opacity: 1 } }}
+              href={project.repoLink}
+              target="_blank"
+            >
+              <CardMedia
+                component="img"
+                sx={{ height: 160, width: "max-content" }}
+                image={project.img}
+                title={project.title}
+              />
+            </CardActionArea>
+            <CardContent>
+              <Typography
+                gutterBottom
+                variant="h5"
+                component="div"
+                color="secondary.main"
+              >
+                {project.title}
+              </Typography>
+              <Box marginY={2}>
+                {project.tech.map((tech, index) => (
+                  <Chip
+                    key={index}
+                    label={tech}
+                    variant="outlined"
+                    color="secondary"
+                    size="small"
+                    sx={{ margin: 0.5 }}
+                  />
+                ))}
+              </Box>
+              <Typography variant="body1" color="info.main">
+                {project.description}
+              </Typography>
+            </CardContent>
+          </Box>
+          <CardActions disableSpacing>
+            <IconButton
+              component="a"
+              target="_blank"
+              aria-label={project.title}
+              href={project.repoLink}
+              color="secondary"
+              rel="noopener noreferrer"
+              sx={iconButtonSize}
+            >
+              <GitHub />
+            </IconButton>
+            <IconButton
+              component="a"
+              target="_blank"
+              aria-label={project.title}
+              href={project.prodLink}
+              color="secondary"
+              rel="noopener noreferrer"
+              sx={iconButtonSize}
+            >
+              <OpenInNew />
+            </IconButton>
+          </CardActions>
+        </StyledCard>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/components/SpotifyNowPlaying.tsx b/src/components/SpotifyNowPlaying.tsx
@@ -42,9 +42,8 @@ export default function SpotifyNowPlaying() {
   const { data: nowPlayingData, isLoading, refetch } = useNowPlaying();
 
   React.useEffect(() => {
-    // For the case when the spotify user stop and restart streaming, there is not refresh
     /**
-     * For the case when the spotify user stop and restart the satreaming,
+     * For the case when the spotify user stop and restart the streaming,
      * there is no refresh but we want to do a hard refresh of the query to
      * get the latest state, although we don't want to do it if is currently
      * playing because the query interval is in charge of that.

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,4 +1,5 @@
 export { default as About } from "./About";
 export { default as Navigation } from "./Navigation";
 export { default as Experience } from "./Experience";
+export { default as Projects } from "./Projects";
 export { default as SpotifyNowPlaying } from "./SpotifyNowPlaying";
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,6 +1,9 @@
 import MendLogo from "./assets/mend.svg";
 import ThinkfulLogo from "./assets/thinkful.svg";
 import MevysLogo from "./assets/mevys.svg";
+import RandomQuiz from "./assets/random-quiz.svg";
+import ECannaB from "./assets/ecannab.svg";
+import TasteBuddy from "./assets/taste-buddy.svg";
 
 export type CompanyItem = {
   name: string;
@@ -59,6 +62,65 @@ export const COMPANIES: CompanyItem[] = [
   },
 ];
 
+export type ProjectItem = {
+  title: string;
+  img: string;
+  repoLink: string;
+  prodLink: string;
+  description: string;
+  tech: string[];
+};
+
+export const PROJECTS: ProjectItem[] = [
+  {
+    title: "eCannab",
+    img: ECannaB,
+    repoLink: "https://github.com/mariatorrentedev/eCannab-server",
+    prodLink: "https://ecannab-client.vercel.app/",
+    description:
+      "V1 Application created for CBD Wholesale sellers so that they can create single websites, adding products and resources to it. A double registration implemented (user/customer).",
+    tech: [
+      "JavaScript",
+      "React",
+      "Express",
+      "Vercel",
+      "Node",
+      "Mocha",
+      "Knex",
+      "PostgreSQL",
+      "Resful-API",
+    ],
+  },
+  {
+    title: "Taste Buddy",
+    img: TasteBuddy,
+    repoLink: "https://github.com/mariatorrentedev/taste-buddy-api",
+    prodLink: "https://taste-buddy-client.vercel.app/home",
+    description:
+      "Full Stack PERN Application to create, save, edit and delete wine tasting sheets.",
+    tech: [
+      "JavaScript",
+      "React",
+      "Heroku",
+      "Express",
+      "Node",
+      "Mocha",
+      "Knex",
+      "PostgreSQL",
+      "Resful-API",
+    ],
+  },
+  {
+    title: "Random Music Quiz",
+    img: RandomQuiz,
+    repoLink: "https://github.com/Jeuq/quizapp",
+    prodLink: "https://jeuq.github.io/quizapp/",
+    description:
+      "Simple client-side quiz application to test your random musical knowledge. A collaboration between: Avery O'Banion and Jacq Babb",
+    tech: ["jQuery", "HTML", "CSS", "Pages"],
+  },
+];
+
 export const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";
 export const NOW_PLAYING_ENDPOINT =
   "https://api.spotify.com/v1/me/player/currently-playing";
diff --git a/src/types/shared.ts b/src/types/shared.ts
@@ -0,0 +1,5 @@
+export type Icon = {
+  icon: React.ReactNode;
+  link: string;
+  label: string;
+};