fix: removes project list animation, adds css optimization, adds targ…

…et option for social links, fixes linkedin social link bug
AdamuAbba · Feb 16, 2023 · c20e8a8 · c20e8a8
1 parent 9f07d9c
commit c20e8a8
Show file tree

Hide file tree

Showing 20 changed files with 146 additions and 152 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -29,20 +29,20 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Hi, i'm just a simple guy who wants to code, come checkout my very simple site :)."
+      content="3+ years of building complex and scalable software both within the WEB and MOBILE ecosystems"
     />
     <meta
       property="og:title"
-      content="Abba Adamu - | Mobile app developer | Art lover"
+      content="shy.X | Software Engineer | Frontend Engineer | Mobile Developer | MERN Stack | ReactJS | NextJS | Typescript | Javascript | React Native"
     />
 
-    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="300" />
     <meta property="og:image:height" content="300" />
     <meta
       property="og:image"
       itemprop="image"
-      content="%PUBLIC_URL%/socialImg.jpg"
+      content="%PUBLIC_URL%/socialImg.png"
     />
     <meta property="og:image:alt" content="my card image" />
     <meta property="og:type" content="website" />
@@ -52,24 +52,18 @@
     <meta property="og:site_name" content="abbaportfolio.netlify.app" />
     <meta
       name="twitter:title"
-      content="Abba Adamu - | Mobile app developer | Art lover"
+      content="shy.X | Software Engineer | Frontend Engineer | Mobile Developer | MERN Stack | ReactJS | NextJS | Typescript | Javascript | React Native"
     />
-    <meta name="author" content="Abba Adamu" />
+    <meta name="author" content="shy.X" />
     <meta
       name="twitter:description"
-      content="just a simple guy who wants to code, come checkout my very simple site :)."
+      content="3+ years of building complex and scalable software both within the WEB and MOBILE ecosystems"
     />
-    <meta name="twitter:image" content="%PUBLIC_URL%/socialImg.jpg" />
+    <meta name="twitter:image" content="%PUBLIC_URL%/socialImg.png" />
 
     <!-- meta tags section -->
 
-    <title>Abba</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
-      crossorigin="anonymous"
-    />
+    <title>Shy.X</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,19 +1 @@
-{
-  "name": "Portfolio",
-  "short_name": "Portfolio",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/public/socialImg.jpg b/public/socialImg.jpg
diff --git a/public/socialImg.png b/public/socialImg.png
diff --git a/src/components/AttributesRow/AttributesRow.tsx b/src/components/AttributesRow/AttributesRow.tsx
@@ -15,6 +15,7 @@ const AttributesRow: IAttributesRow = () => {
 
   return (
     <Stack
+      bgcolor="#212529"
       spacing={4}
       sx={{
         height: 'auto',
@@ -72,12 +73,13 @@ const AttributesRow: IAttributesRow = () => {
                       }}
                       transition={{ duration: 0.1 }}
                     >
-                      <hr
+                      <div
                         style={{
-                          color:
+                          backgroundColor:
                             index === cardId ? colors.shyGreen : colors.shyPink,
                           width: '13rem',
-                          height: '2px',
+                          height: '2.2px',
+                          borderRadius: '150px',
                         }}
                       />
                     </motion.div>

diff --git a/src/components/BannerContent/BannerContent.tsx b/src/components/BannerContent/BannerContent.tsx
@@ -10,7 +10,12 @@ import { IBannerContent } from './types';
 
 const BannerContent: IBannerContent = () => {
   return (
-    <Grid container justifyContent="center" alignItems="center">
+    <Grid
+      container
+      bgcolor="#212529"
+      justifyContent="center"
+      alignItems="center"
+    >
       <Grid md={6} item>
         <img src={image} alt="abba" style={{ width: '100%', height: 'auto' }} />
       </Grid>

diff --git a/src/components/MyFooter/MyFooter.tsx b/src/components/MyFooter/MyFooter.tsx
@@ -69,6 +69,8 @@ const MyFooter: IMyFooter = () => {
 
   return (
     <Stack
+      bgcolor="#212529"
+      border="none"
       spacing={3}
       sx={{
         paddingTop: {

diff --git a/src/components/ProjectList/ProjectList.tsx b/src/components/ProjectList/ProjectList.tsx
@@ -54,8 +54,6 @@ const ProjectList = () => {
                   borderRadius: 18,
                 }}
                 whileHover={{ y: -5, scale: 1.1 }}
-                initial={{ opacity: 0, y: 90 }}
-                animate={{ opacity: 1, y: 0 }}
                 transition={{
                   duration: 0.5,
                   type: 'spring',
@@ -85,113 +83,118 @@ const ProjectList = () => {
             </Grid>
 
             <Grid item xs={12} md={7}>
-              <motion.div
-                initial={{ opacity: 0, x: 50 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{
-                  duration: 0.5,
-                  delay: index * 0.5,
-                  type: 'spring',
-                  stiffness: 150,
-                  damping: 4,
+              <Stack
+                alignItems="flex-start"
+                sx={{
+                  paddingLeft: {
+                    xs: '8px',
+                    md: '0px',
+                  },
+                  paddingRight: {
+                    xs: '5px',
+                    md: '0px',
+                  },
                 }}
+                direction="column"
               >
-                <Stack
-                  alignItems="flex-start"
+                <Heading>0{index + 1}</Heading>
+                <Paragraph
+                  sx={{
+                    fontSize: '1.8rem',
+                  }}
+                  className="text-has-shadow"
+                >
+                  {eachProject.title}
+                </Paragraph>
+                <Paragraph
                   sx={{
-                    paddingLeft: {
-                      xs: '8px',
-                      md: '0px',
+                    textAlign: {
+                      xs: 'left',
                     },
-                    paddingRight: {
-                      xs: '5px',
-                      md: '0px',
+                  }}
+                >
+                  {eachProject.description}
+                </Paragraph>
+                <Paragraph>Technologies :</Paragraph>
+                <Stack direction="row" mb={1} flexWrap="wrap">
+                  {eachProject.techs.map((techItem: any, index: number) => (
+                    <Pill key={index}>{techItem}</Pill>
+                  ))}
+                </Stack>
+                <Stack
+                  sx={{
+                    flexDirection: {
+                      lg: 'row',
+                      md: 'row',
+                      sm: 'row',
+                      xs: 'column',
                     },
+                    width: '100%',
                   }}
-                  direction="column"
                 >
-                  <Heading>0{index + 1}</Heading>
-                  <Paragraph
-                    sx={{
-                      fontSize: '1.8rem',
-                    }}
-                    className="text-has-shadow"
-                  >
-                    {eachProject.title}
-                  </Paragraph>
-                  <Paragraph
-                    sx={{
-                      textAlign: {
-                        xs: 'left',
-                      },
-                    }}
-                  >
-                    {eachProject.description}
-                  </Paragraph>
-                  <Paragraph>Technologies :</Paragraph>
-                  <Stack direction="row" mb={1} flexWrap="wrap">
-                    {eachProject.techs.map((techItem: any, index: number) => (
-                      <Pill key={index}>{techItem}</Pill>
-                    ))}
-                  </Stack>
-                  <div className="d-flex flex-row justify-content-start flex-wrap align-items-start text-has-shadow">
-                    {typeof eachProject.youTube === 'undefined' ? null : (
-                      <motion.div
-                        whileHover={{ y: -5, scale: 1.1 }}
-                        className="m-2 box-with-shadow text-has-shadow"
-                      >
-                        {/* @ts-ignore */}
-                        <AwesomeButtonSocial
-                          type="youtube"
-                          size="medium"
-                          ripple
-                          onPress={() => {
-                            window.open(eachProject.youTube, '_blank');
-                          }}
-                        >
-                          Youtube
-                        </AwesomeButtonSocial>
-                      </motion.div>
-                    )}
-
-                    {typeof eachProject.gitUrl === 'undefined' ? null : (
-                      <motion.div
-                        whileHover={{ y: -5, scale: 1.1 }}
-                        className="m-2 box-with-shadow text-has-shadow"
+                  {typeof eachProject.youTube === 'undefined' ? null : (
+                    <motion.div
+                      whileHover={{ y: -5, scale: 1.1 }}
+                      style={{
+                        margin: 5,
+                      }}
+                    >
+                      {/* @ts-ignore */}
+                      <AwesomeButtonSocial
+                        type="youtube"
+                        size="medium"
+                        ripple
+                        className="box-with-shadow"
+                        onPress={() => {
+                          window.open(eachProject.youTube, '_blank');
+                        }}
                       >
-                        {/* @ts-ignore */}
-                        <AwesomeButtonSocial
-                          type="github"
-                          size="medium"
-                          ripple
-                          onPress={() => {
-                            window.open(eachProject.gitUrl, '_blank');
-                          }}
-                        >
-                          GitHub
-                        </AwesomeButtonSocial>
-                      </motion.div>
-                    )}
+                        Youtube
+                      </AwesomeButtonSocial>
+                    </motion.div>
+                  )}
 
+                  {typeof eachProject.gitUrl === 'undefined' ? null : (
                     <motion.div
                       whileHover={{ y: -5, scale: 1.1 }}
-                      className="m-2 box-with-shadow"
+                      style={{
+                        margin: 5,
+                      }}
                     >
-                      <div>
-                        {/* @ts-ignore */}
-                        <AwesomeButton
-                          type="primary"
-                          size="medium"
-                          ripple
-                          onPress={() => handleOnLiveSamplePress(eachProject)}
-                        >
-                          Live
-                        </AwesomeButton>
-                      </div>
+                      {/* @ts-ignore */}
+                      <AwesomeButtonSocial
+                        type="github"
+                        size="medium"
+                        ripple
+                        className="box-with-shadow"
+                        onPress={() => {
+                          window.open(eachProject.gitUrl, '_blank');
+                        }}
+                      >
+                        GitHub
+                      </AwesomeButtonSocial>
                     </motion.div>
-                  </div>
+                  )}
+
+                  <motion.div
+                    whileHover={{ y: -5, scale: 1.1 }}
+                    style={{
+                      margin: 5,
+                    }}
+                  >
+                    {/* @ts-ignore */}
+                    <AwesomeButton
+                      type="primary"
+                      size="medium"
+                      ripple
+                      className="box-with-shadow"
+                      onPress={() => handleOnLiveSamplePress(eachProject)}
+                    >
+                      Live
+                    </AwesomeButton>
+                  </motion.div>
                 </Stack>
-              </motion.div>
+              </Stack>
             </Grid>
           </Grid>
         ))}

diff --git a/src/components/TechStacks/TechStacks.tsx b/src/components/TechStacks/TechStacks.tsx
@@ -22,6 +22,8 @@ const defaultOptions: Options = {
 const TechStacks: ITechStacks = () => {
   return (
     <Stack
+      border="none"
+      bgcolor="#212529"
       sx={{
         paddingTop: {
           md: 10,

diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,4 @@
+* {
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+import './index.css';
 
 import '@fontsource/quicksand/300.css';
 import '@fontsource/quicksand/400.css';

diff --git a/src/pages/HomeScreen/HomeScreen.tsx b/src/pages/HomeScreen/HomeScreen.tsx
@@ -7,7 +7,7 @@ import './HomeScreen.css';
 
 const HomeScreen = () => {
   return (
-    <Stack direction="column">
+    <Stack bgcolor="#212529" direction="column">
       <BannerContent />
       <AttributesRow />
       <TechStacks />