updating resume, adding assets, moving files into single place that u…

…sers can edit, implementing the ability for users to edit them, implement certifications, fix marquee blinker moving text, implement bullet points for job descriptions, add resume button under links

src/assets/certificationList.tsx

@@ -0,0 +1,7 @@
+export const certificationList = [
+    {
+        image: 'https://d1.awsstatic.com/certification/badges/AWS-Certified-Cloud-Practitioner_badge_150x150.17da917fbddc5383838d9f8209d2030c8d99f31e.png',
+        link: '',
+        alt: 'AWS Certified Cloud Practitioner',
+    },
+]

src/assets/greeting.tsx

@@ -0,0 +1,4 @@
+export const greetingList = {
+    intro: "Hello, I'm",
+    name: "Chris Alvis"
+}

src/assets/socialLinks.tsx

@@ -0,0 +1,31 @@
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
+import ContactPageIcon from '@mui/icons-material/ContactPage';
+
+export const socialLinksList = [
+    {
+        title: "Github",
+        href: "https://github.com/Alvis1337",
+        icon: <GitHubIcon/>,
+        alt: "My Github"
+    },
+    {
+        title: 'LinkedIn',
+        href: "https://www.linkedin.com/in/devops-alvis/",
+        icon: <LinkedInIcon/>,
+        alt: "My LinkedIn"
+    },
+    {
+        title: "Email",
+        href: "mailto:[email protected]",
+        icon: <AlternateEmailIcon/>,
+        alt: "My email"
+    },
+    {
+        title: "Resume",
+        href: "",
+        icon: <ContactPageIcon/>,
+        alt: "My Resume"
+    },
+]

src/assets/technologyIcons.tsx

@@ -0,0 +1,73 @@
+export const technologyIconsList = [
+    {
+        image: "https://img.icons8.com/color/512/000000/kubernetes.png",
+        alt: "Kubernetes",
+        language: "Kubernetes"
+    },
+    // Gitlab CI/CD
+    {
+        image: "https://img.icons8.com/color/512/000000/gitlab.png",
+        alt: "Gitlab",
+        language: "Gitlab"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/postgreesql.png",
+        alt: "PostgreSQL",
+        language: "PostgreSQL"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/mysql-logo.png",
+        alt: "MySQL",
+        language: "MySQL"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/git.png",
+        alt: "Git",
+        language: "Git"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/docker.png",
+        alt: "Docker",
+        language: "Docker"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/python--v1.png",
+        alt: "Python",
+        language: "Python"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/typescript.png",
+        alt: "TypeScript",
+        language: "TypeScript"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/react-native.png",
+        alt: "React",
+        language: "React"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/redux.png",
+        alt: "Redux",
+        language: "Redux"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/angularjs.png",
+        alt: "Angular",
+        language: "Angular"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/vue-js.png",
+        alt: "Vue",
+        language: "Vue"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/nodejs.png",
+        alt: "Node",
+        language: "Node"
+    },
+    {
+        image: "https://img.icons8.com/color/512/000000/mongodb.png",
+        alt: "MongoDB",
+        language: "MongoDB"
+    },
+]

src/assets/workExperience.tsx

@@ -0,0 +1,49 @@
+export const workExperienceList = [
+    {
+        title: "DevOps Engineer",
+        company: "Alphatech Computing",
+        startDate: "April 2019",
+        endDate: "Present",
+        description: [
+            "Deployed and maintained production K8s clusters leveraging IaC",
+            "Wrote and deployed Puppet modules and Ansible scripts for SSL certs, server updates, etc, to minimize time spent on process that should be automated",
+            "Containerized entire app ecosystems in order to create deployments so they could be migrated to K8s clusters",
+            "Primary Fullstack developer for the past 5 years implementing Django, React, Typescript, Laravel",
+            "Became the primary individual responsible for current and new client relationships",
+            "Led initiatives in disaster recovery, orchestrated seamless cloud migrations, and optimized operations for small to medium businesses"
+
+        ],
+        direction: 'flex-start',
+        position: 'DevOps Engineer'
+    },
+    {
+        title: "STNA",
+        company: "Kimes Nursing Home",
+        startDate: "May 2018",
+        endDate: "April 2019",
+        description: [
+            "Assists with direct patient care under the supervision of the RN or other medical professionals", 
+            "Provide patients with help walking, exercising, and moving in and out of bed", 
+            "Position, feed, bathe, dress and assist patients with grooming and other tasks",
+            "Obtained state certification and completed continued education during entire stay at the role"
+        ],
+        direction: 'flex-end',
+        position: 'Kimes Nursing Home'
+
+    },
+    {
+        title: "Packaging Specialist I",
+        company: "Quidel Corporation",
+        startDate: "November 2016",
+        endDate: "May 2018",
+        description: [
+            "Led daily operations at assigned station overseeing two other team members",
+            "Increased efficiencies by implementing standard operations and practices that ar still in use",
+            "Packaging of biomedical testing kits, products, live cells, mediums, etc",
+            "Exercised and displayed flexibility working different stations and even entire departments when requested"
+        ],
+        direction: 'flex-start',
+        position: 'Packaging Specialist I'
+
+    },
+]

src/components/BlinkCursor.tsx

@@ -1,4 +1,3 @@
-import Typography from "@mui/material/Typography";
 import {useEffect, useState} from "react";
 
 const BlinkCursor = () => {
@@ -13,9 +12,7 @@ const BlinkCursor = () => {
     }, [])
 
     return (
-        <Typography variant={"h4"} color={'#21CE6B'} fontWeight={"bold"}>
-            {blinkCursor ? '|' : <> &nbsp; </>}
-        </Typography>
+            blinkCursor ? '|' : <>&nbsp;</>
     )
 }
 

src/components/Certifications.tsx

@@ -0,0 +1,27 @@
+import { Grid, Link } from "@mui/material"
+import { certificationList } from "../assets/certificationList";
+
+const Certifications = () => {
+    return (
+        <Grid container sx={{
+            flexDirection: { xs: 'column', md: 'row' },
+            justifyContent: 'center'
+        }}>
+            {certificationList.map((certification, index) => {
+                return (
+                    <Link key={`link-index-${index}`} href={certification.link} color={'inherit'}>
+                        <Grid
+                            key={index}
+                            item
+                            component={'img'}
+                            src={certification.image}
+                            alt={certification.alt}
+                        />
+                    </Link>
+                );
+            })}
+        </Grid>
+    )
+}
+
+export default Certifications;

src/components/Navbar.tsx

@@ -17,7 +17,7 @@ function Navbar() {
     }
 
     return (
-        <AppBar position="static" sx={{mb: '12rem'}}>
+        <AppBar position="static" sx={{mb: '6rem'}}>
             <Toolbar disableGutters>
                 <Grid container sx={{
                     display: 'flex',

src/components/WorkHistory.tsx

@@ -1,27 +1,65 @@
-import {Grid} from "@mui/material";
+import { Grid, List, ListItem, ListItemText } from "@mui/material";
 import Typography from "@mui/material/Typography";
 
 interface WorkHistoryProps {
     company: string;
     position: string;
     date: string;
-    description: string;
+    description: string | string[];
     direction: string;
 }
 
 const WorkHistory = (props: WorkHistoryProps) => {
+    const { company, position, date, description, direction } = props;
+
     return (
         <Grid item xs={10} sx={{
             display: 'flex',
-            alignItems: props.direction,
+            alignItems: direction,
             flexDirection: 'column'
         }}>
-            <Typography variant={"h6"} color={'#21CE6B'} fontWeight={"bold"} textAlign={props.direction === 'flex-start' ? 'left' : 'right'}>{props.company}</Typography>
-            <Typography variant={"subtitle1"} textAlign={props.direction === 'flex-start' ? 'left' : 'right'}>{props.position}</Typography>
-            <Typography variant={"subtitle2"} textAlign={props.direction === 'flex-start' ? 'left' : 'right'}>{props.date}</Typography>
-            <Typography variant={"body1"} textAlign={props.direction === 'flex-start' ? 'left' : 'right'}>{props.description}</Typography>
+            <Typography variant={"h6"} color={'#21CE6B'} fontWeight={"bold"} textAlign={direction === 'flex-start' ? 'left' : 'right'}>
+                {company}
+            </Typography>
+            <Typography variant={"subtitle1"} textAlign={direction === 'flex-start' ? 'left' : 'right'}>
+                {position}
+            </Typography>
+            <Typography variant={"subtitle2"} textAlign={direction === 'flex-start' ? 'left' : 'right'}>
+                {date}
+            </Typography>
+            {Array.isArray(description) ? (
+                <List disablePadding>
+                    {description.map((item, index) => (
+                        <ListItem
+                            key={index}
+                            sx={{
+                                display: 'flex',
+                                justifyContent: direction === 'flex-start' ? 'flex-start' : 'flex-end',
+                                alignItems: 'center', // Align bullets and text
+                                paddingLeft: 0,
+                                paddingRight: 0,
+                            }}
+                        >
+                            <Typography variant="body1" sx={{
+                                marginRight: direction === 'flex-start' ? '8px' : '0',
+                                marginLeft: direction === 'flex-end' ? '8px' : '0',
+                                order: direction === 'flex-end' ? 2 : 0, // Position bullet on the right
+                            }}>
+                                •
+                            </Typography>
+                            <ListItemText primary={item} sx={{
+                                textAlign: direction === 'flex-start' ? 'left' : 'right',
+                            }} />
+                        </ListItem>
+                    ))}
+                </List>
+            ) : (
+                <Typography variant={"body1"} textAlign={direction === 'flex-start' ? 'left' : 'right'}>
+                    {description}
+                </Typography>
+            )}
         </Grid>
     );
 }
 
-export default WorkHistory;
+export default WorkHistory;

src/main.tsx

@@ -6,12 +6,14 @@ import {persistor, store} from "./store/store.ts";
 import {PersistGate} from "redux-persist/integration/react";
 import {createBrowserRouter, Navigate, RouterProvider} from "react-router-dom";
 import Layout from "./components/Layout.tsx";
-import LandingPage from "./components/LandingPage.tsx";
+import LandingPage from "./pages/LandingPage.tsx";
+import ErrorPage from './pages/ErrorPage.tsx';
 
 const router = createBrowserRouter([
     {
         path: "/",
         element: <Layout/>,
+        errorElement: <ErrorPage/>,
         children: [
             {
                 path: "*",
@@ -21,11 +23,14 @@ const router = createBrowserRouter([
                 index: true,
                 element: <LandingPage/>,
             },
+            {
+                path: '/404',
+                element: <ErrorPage/>
+            }
         ],
     },
 ]);
 
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <Provider store={store}>

src/pages/ErrorPage.tsx

@@ -0,0 +1,25 @@
+import {Grid, Typography} from "@mui/material";
+
+const ErrorPage = () => {
+    return (
+        <Grid container sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%'
+        }}>
+            <Grid item xs={12} sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh',
+                width: '100%',
+                marginTop: '10vh',
+                padding: '10px'
+            }}>
+                <Typography textAlign={'center'} variant="h4">The page you are trying to navigate to does not exist, please go back or click one of our links.</Typography>
+            </Grid>
+        </Grid>
+    );
+}
+
+export default ErrorPage;