Hot-fix: resolve responsiveness issues on iPad devices.

mariatorrentedev · Apr 21, 2024 · 59f46ad · 59f46ad
1 parent a9540e2
commit 59f46ad
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 75 deletions.
diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx
@@ -1,3 +1,5 @@
+import type { CompanyItem } from "../constants";
+import { COMPANIES } from "../constants";
 import {
   Timeline,
   TimelineItem,
@@ -17,20 +19,9 @@ import {
   Stack,
   Chip,
   Typography,
+  useTheme,
   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 (
@@ -44,56 +35,10 @@ const renderList = (jobs: CompanyItem["jobs"]) => {
   );
 };
 
-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)");
+  const theme = useTheme();
+
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   return (
     <Timeline
@@ -104,25 +49,27 @@ export default function Experience() {
         },
       }}
     >
-      {timelineItems.map((item, index) => {
+      {COMPANIES.map((item, index) => {
         return (
           <TimelineItem key={index}>
             <TimelineOppositeContent
-              sx={{ m: "auto 0" }}
-              align="right"
+              sx={{ m: "0 auto" }}
+              align="center"
               color="info.main"
+              minWidth={isMobile ? "100%" : undefined}
             >
               <Stack
                 spacing={1}
                 minWidth={[300, 0]}
-                alignItems={["baseline", "end"]}
+                alignItems={["baseline", "baseline", "end"]}
               >
                 <Typography variant="caption">{item.duration}</Typography>
                 <IconButton
                   component="a"
                   color="secondary"
                   href={item.url}
                   target="_blank"
+                  sx={{ padding: "8px 0" }}
                 >
                   <img src={item.logo} alt={item.name} />
                 </IconButton>

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -1,5 +1,12 @@
 import * as React from "react";
-import { Box, Tab, Tabs, Typography, useMediaQuery } from "@mui/material";
+import {
+  Box,
+  Tab,
+  Tabs,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import { styled } from "@mui/system";
 import { About, Experience } from "./";
 
@@ -13,7 +20,7 @@ const TabsWrapper = styled(Box)(({ theme }) => ({
   paddingTop: "3rem",
   flexDirection: "row",
   minHeight: 224,
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     flexDirection: "column",
     alignItems: "center",
     paddingTop: "1rem",
@@ -27,14 +34,14 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   "& button": {
     color: theme.palette.secondary.main,
     fontSize: 14,
-    [theme.breakpoints.up("sm")]: {
+    [theme.breakpoints.up("md")]: {
       fontSize: 18,
       paddingLeft: "1rem",
       maxWidth: "100%",
       padding: "24px 60px 24px 0",
     },
   },
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     marginBottom: 16,
   },
   "& .MuiTab-root.Mui-selected": {
@@ -101,7 +108,8 @@ export default function Navigation() {
     setValue(newValue);
   };
 
-  const isMobile = useMediaQuery("(pointer: coarse)");
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   return (
     <TabsWrapper>

diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1,3 @@
+export const CLIENT_ID = import.meta.env.VITE_APP_SPOTIFY_CLIENT_ID;
+export const CLIENT_SECRET = import.meta.env.VITE_APP_SPOTIFY_CLIENT_SECRET;
+export const REFRESH_TOKEN = import.meta.env.VITE_APP_SPOTIFY_REFRESH_TOKEN;
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,7 +1,64 @@
+import MendLogo from "./assets/mend.svg";
+import ThinkfulLogo from "./assets/thinkful.svg";
+import MevysLogo from "./assets/mevys.svg";
+
+export type CompanyItem = {
+  name: string;
+  url: string;
+  logo: string;
+  duration: string;
+  jobs: string[];
+  tech: string[];
+};
+
+export const COMPANIES: 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.",
+      "Lead the development of 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 const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";
 export const NOW_PLAYING_ENDPOINT =
   "https://api.spotify.com/v1/me/player/currently-playing";
-
-export const CLIENT_ID = import.meta.env.VITE_APP_SPOTIFY_CLIENT_ID;
-export const CLIENT_SECRET = import.meta.env.VITE_APP_SPOTIFY_CLIENT_SECRET;
-export const REFRESH_TOKEN = import.meta.env.VITE_APP_SPOTIFY_REFRESH_TOKEN;
diff --git a/src/services/spotify.ts b/src/services/spotify.ts
@@ -6,7 +6,7 @@ import {
   CLIENT_ID as clientId,
   CLIENT_SECRET as clientSecret,
   REFRESH_TOKEN as refreshToken,
-} from "../constants";
+} from "../config";
 
 export type GetAccessTokenResponse = {
   access_token: string;