diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx index 13e5c99..4b58480 100644 --- 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 ( - {timelineItems.map((item, index) => { + {COMPANIES.map((item, index) => { return ( {item.duration} {item.name} diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 48336a1..c6a9f7e 100644 --- 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 ( diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..63c8d62 --- /dev/null +++ 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 index 3845fbe..8bf9abb 100644 --- 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 index 8779d7b..04d6fa7 100644 --- 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;