diff --git a/src/App.tsx b/src/App.tsx
index 7fbfbf2..183d2fc 100644
--- 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: ,
@@ -23,60 +18,60 @@ const icons: Icon[] = [
export default function App() {
return (
-
-
-
- Hey there!
-
-
-
-
- I am Maria Torrente, a detail-oriented full-stack
- engineer focused on ensuring elegant solutions and creating
- meaningful experiences.
-
-
-
- {icons.map((item, index) => (
-
- {item.icon}
-
- ))}
-
-
-
+
+
+ Hey there!
+
+
+
+
+ I am Maria Torrente, a detail-oriented full-stack
+ engineer focused on ensuring elegant solutions and creating meaningful
+ experiences.
+
+
+
+ {icons.map((item, index) => (
+
- View full resume
-
-
-
-
-
+ {item.icon}
+
+ ))}
+
+
+
+ View full resume
+
+
+
+
+
);
}
diff --git a/src/assets/ecannab.svg b/src/assets/ecannab.svg
new file mode 100644
index 0000000..451ad03
--- /dev/null
+++ b/src/assets/ecannab.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/random-quiz.svg b/src/assets/random-quiz.svg
new file mode 100644
index 0000000..92ec40a
--- /dev/null
+++ b/src/assets/random-quiz.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/taste-buddy.svg b/src/assets/taste-buddy.svg
new file mode 100644
index 0000000..91dfa53
--- /dev/null
+++ b/src/assets/taste-buddy.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx
index 4b58480..3386252 100644
--- 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
index c6a9f7e..e3a3a57 100644
--- 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: },
{ label: "Experience", component: },
- { label: "Projects", component: Projects },
+ { label: "Projects", component: },
];
export default function Navigation() {
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
new file mode 100644
index 0000000..13de0ca
--- /dev/null
+++ 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 (
+
+ {PROJECTS.map((project, index) => (
+
+
+
+
+
+
+
+ {project.title}
+
+
+ {project.tech.map((tech, index) => (
+
+ ))}
+
+
+ {project.description}
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/SpotifyNowPlaying.tsx b/src/components/SpotifyNowPlaying.tsx
index 459827e..b37b621 100644
--- 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
index 4f47074..e24f94c 100644
--- 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
index 8bf9abb..fe304ad 100644
--- 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
new file mode 100644
index 0000000..243fc0b
--- /dev/null
+++ b/src/types/shared.ts
@@ -0,0 +1,5 @@
+export type Icon = {
+ icon: React.ReactNode;
+ link: string;
+ label: string;
+};