From a9540e26c6ad3a53b542afa6badae0d058bee368 Mon Sep 17 00:00:00 2001
From: Maria Torrente <64274966+mariatorrentedev@users.noreply.github.com>
Date: Sat, 20 Apr 2024 22:48:01 -0400
Subject: [PATCH] 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 | 129 ++++++++++++++-------------
src/assets/mend.svg | 9 ++
src/assets/mevys.svg | 10 +++
src/assets/thinkful.svg | 9 ++
src/components/Experience.tsx | 159 ++++++++++++++++++++++++++++++++++
src/components/Navigation.tsx | 61 +++++++------
src/components/index.ts | 1 +
7 files changed, 286 insertions(+), 92 deletions(-)
create mode 100644 src/assets/mend.svg
create mode 100644 src/assets/mevys.svg
create mode 100644 src/assets/thinkful.svg
create mode 100644 src/components/Experience.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 09bc04a..fc2927b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,76 +8,75 @@ type Icon = {
label: string;
};
-export default function App() {
- const icons: Icon[] = [
- {
- icon: ,
- link: "https://github.com/mariatorrentedev",
- label: "GitHub",
- },
- {
- icon: ,
- link: "https://www.linkedin.com/in/mariactorrente",
- label: "LinkedIn",
- },
- ];
+const icons: Icon[] = [
+ {
+ icon: ,
+ link: "https://github.com/mariatorrentedev",
+ label: "GitHub",
+ },
+ {
+ icon: ,
+ link: "https://www.linkedin.com/in/mariactorrente",
+ label: "LinkedIn",
+ },
+];
+export default function App() {
return (
-
-
-
- Hey there!
-
-
-
-
- I'm Maria Torrente, a detailed-oriented full-stack
- engineer, focused on ensuring elegant solutions, and create meaningful
- experiences.
-
-
-
-
- {icons.map((item, index) => (
-
+
+
+ Hey there!
+
+
+
+
+ I'm Maria Torrente, a detailed-oriented full-stack
+ engineer, focused on ensuring elegant solutions, and create
+ meaningful experiences.
+
+
+
+ {icons.map((item, index) => (
+
+ {item.icon}
+
+ ))}
+
+
+
- {item.icon}
-
- ))}
-
-
-
- View full resume
-
-
-
-
+ View full resume
+
+
+
+
+
-
);
}
diff --git a/src/assets/mend.svg b/src/assets/mend.svg
new file mode 100644
index 0000000..8d34d9d
--- /dev/null
+++ b/src/assets/mend.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/mevys.svg b/src/assets/mevys.svg
new file mode 100644
index 0000000..443c32e
--- /dev/null
+++ b/src/assets/mevys.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/thinkful.svg b/src/assets/thinkful.svg
new file mode 100644
index 0000000..53b27ee
--- /dev/null
+++ b/src/assets/thinkful.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx
new file mode 100644
index 0000000..13e5c99
--- /dev/null
+++ b/src/components/Experience.tsx
@@ -0,0 +1,159 @@
+import {
+ Timeline,
+ TimelineItem,
+ TimelineSeparator,
+ TimelineConnector,
+ TimelineContent,
+ TimelineDot,
+} from "@mui/lab";
+import TimelineOppositeContent, {
+ timelineOppositeContentClasses,
+} from "@mui/lab/TimelineOppositeContent";
+import {
+ Box,
+ IconButton,
+ List,
+ ListItem,
+ Stack,
+ Chip,
+ Typography,
+ useMediaQuery,
+} from "@mui/material";
+import MendLogo from "../assets/mend.svg";
+import ThinkfulLogo from "../assets/thinkful.svg";
+import MevysLogo from "../assets/mevys.svg";
+
+type CompanyItem = {
+ name: string;
+ url: string;
+ logo: string;
+ duration: string;
+ jobs: string[];
+ tech: string[];
+};
+
+const renderList = (jobs: CompanyItem["jobs"]) => {
+ return (
+
+ {jobs.map((job, index) => (
+
+ {job}
+
+ ))}
+
+ );
+};
+
+const timelineItems: CompanyItem[] = [
+ {
+ name: "Mend Telehealth Medicine",
+ url: "https://mend.com/",
+ logo: MendLogo,
+ duration: "April 2021 - 2024",
+ jobs: [
+ "Participated in Agile development methodologies such as Scrum/Kanban for efficient project management.",
+ "Implemented rigorous testing procedures to identify and resolve any compatibility issues or regressions.",
+ "Collaborated in a pair development to execute migration of the entire dashboard from Angular/JavaScript to React/TypeScript.",
+ "Develop, tested, and deployed a Video SPA using Vonage Express, GCP(Cloud Functions, Bucket Storage) overseeing the project from inception to full production.",
+ ],
+ tech: [
+ "TypeScript",
+ "React",
+ "Angular",
+ "Material UI (MUI)",
+ "PHP",
+ "Docker",
+ "GCP",
+ "SQL",
+ ],
+ },
+ {
+ name: "Thinkful",
+ url: "https://thinkful.com/",
+ logo: ThinkfulLogo,
+ duration: "Nov 2020 - March 2021",
+ jobs: [
+ "Remote engineer immersion program focused on learning HTML5, CSS3, Javascript ES6, SQL, and associated frameworks (such as Node.js, React, jQuery, and PostgreSQL).",
+ "Designed mobile-first full-stack applications from concept development to deployment, while learning networking and industry best practices.",
+ ],
+ tech: ["JavaScript", "React", "HTML", "CSS", "PostgreSQL", "SQL"],
+ },
+ {
+ name: "Mevys Healthy Hair Optimization System",
+ url: "https://mevyspro.com/",
+ logo: MevysLogo,
+ duration: "Jun 2019 - 2021",
+ jobs: [
+ "Collaborated and coordinated with cross-functional teams to ensure seamless integration of software components.",
+ "Provided architectural design and development of the online store to implementing an authentication system for professional stylists.",
+ "Lead brainstorming sessions to generate new ideas for features and commercial relationships.",
+ ],
+ tech: ["JavaScript", "Liquid", "React", "CSS", "HTML", "MongoDB", "DevOps"],
+ },
+];
+
+export default function Experience() {
+ const isMobile = useMediaQuery("(pointer: coarse)");
+
+ return (
+
+ {timelineItems.map((item, index) => {
+ return (
+
+
+
+ {item.duration}
+
+ 
+
+ {item.name}
+
+ {item.tech.map((tech, index) => (
+
+ ))}
+
+ {isMobile && renderList(item.jobs)}
+
+
+
+
+
+
+ {!isMobile && (
+
+ {renderList(item.jobs)}
+
+ )}
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index fc33873..48336a1 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,31 +1,32 @@
import * as React from "react";
-import { Box, Tab, Tabs, Typography } from "@mui/material";
+import { Box, Tab, Tabs, Typography, useMediaQuery } from "@mui/material";
import { styled } from "@mui/system";
-import { About } from "./";
+import { About, Experience } from "./";
const TabsWrapper = styled(Box)(({ theme }) => ({
flexGrow: 1,
backgroundColor: theme.palette.primary.main,
color: theme.palette.secondary.main,
display: "flex",
- marginTop: "1rem",
+ marginTop: "3rem",
borderTop: `2px solid`,
- paddingTop: "2rem",
+ paddingTop: "3rem",
+ flexDirection: "row",
minHeight: 224,
- [theme.breakpoints.up("sm")]: {
- paddingTop: "3rem",
- marginTop: "3rem",
+ [theme.breakpoints.down("sm")]: {
+ flexDirection: "column",
+ alignItems: "center",
+ paddingTop: "1rem",
+ marginTop: "1rem",
},
}));
const StyledTabs = styled(Tabs)(({ theme }) => ({
borderRight: `1px solid ${theme.palette.divider}`,
+ flex: 1.2,
"& button": {
color: theme.palette.secondary.main,
fontSize: 14,
- paddingLeft: 0,
- maxWidth: 30,
- padding: 0,
[theme.breakpoints.up("sm")]: {
fontSize: 18,
paddingLeft: "1rem",
@@ -33,6 +34,9 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
padding: "24px 60px 24px 0",
},
},
+ [theme.breakpoints.down("sm")]: {
+ marginBottom: 16,
+ },
"& .MuiTab-root.Mui-selected": {
color: theme.palette.info.main,
},
@@ -50,24 +54,25 @@ type TabPanelProps = {
value: number;
};
-function TabPanel({ children, value, index, ...other }: TabPanelProps) {
+function TabPanel({ children, value, index }: TabPanelProps) {
return (
-
+ <>
{value === index && (
{children}
)}
-
+
);
}
@@ -83,6 +88,12 @@ type TabsContent = {
component: React.ReactNode;
};
+const tabContents: TabsContent[] = [
+ { label: "About", component: },
+ { label: "Experience", component: },
+ { label: "Projects", component: Projects },
+];
+
export default function Navigation() {
const [value, setValue] = React.useState(0);
@@ -90,20 +101,16 @@ export default function Navigation() {
setValue(newValue);
};
- const tabContents: TabsContent[] = [
- { label: "About", component: },
- { label: "Projects", component: Projects },
- ];
+ const isMobile = useMediaQuery("(pointer: coarse)");
return (
handleChange(newValue)}
- aria-label="Vertical tabs example"
>
{tabContents.map((tab, index) => (
diff --git a/src/components/index.ts b/src/components/index.ts
index e39d041..4f47074 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
export { default as About } from "./About";
export { default as Navigation } from "./Navigation";
+export { default as Experience } from "./Experience";
export { default as SpotifyNowPlaying } from "./SpotifyNowPlaying";