Fixed Glitch Issues

sayshark75 · Dec 7, 2023 · 4fb49a0 · 4fb49a0
1 parent 18c6f2b
commit 4fb49a0
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,15 @@
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#006aff" />
-
+    <link rel="preload" href="./src/assets/images/pic-blue.png" />
+    <link rel="preload" href="./src/assets/images/pic-orange.png" />
+    <link rel="preload" href="./src/assets/images/pic-red.png" />
+    <link rel="preload" href="./src/assets/images/pic-green.png" />
+    <link rel="preload" href="./src/assets/images/pic-violet.png" />
+    <link rel="preload" href="./src/assets/images/pic-yellow.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
     <title>Sayyed Sharuk</title>
   </head>
   <body>

diff --git a/src/TYPES.ts b/src/TYPES.ts
@@ -128,3 +128,13 @@ export type ThemeInput =
 export type ColorScale = [level0: Color, level1: Color, level2: Color, level3: Color, level4: Color];
 
 export type Color = string;
+
+export type CustomThemeType = {
+  customTheme: ThemeInput;
+  __primary: string;
+  __accent: string;
+  _accent: string;
+  _text: string;
+  _primaryLight: string;
+  _darker: string;
+};
diff --git a/src/components/AboutPage/ResumeButton.tsx b/src/components/AboutPage/ResumeButton.tsx
@@ -16,7 +16,7 @@ const ResumeButton = () => {
         animation={`${ScalePing} 1s ease-in 2s forwards`}
         bgColor={"accent"}
         opacity={0}
-        color={"white"}
+        color={"light"}
         transition={"200ms"}
         _hover={{}}
         _active={{ bgColor: "darker" }}

diff --git a/src/components/Headings/MdHeading.tsx b/src/components/Headings/MdHeading.tsx
@@ -20,6 +20,7 @@ const MdHeading = ({ title1, title2 }: HeadingProps) => {
         ref={animRef}
         cursor={"pointer"}
         rounded={"full"}
+        opacity={0}
         animation={isIntersecting ? `${fadeTop} 1s ease-in forwards` : "none"}
         _active={{ transform: "translateY(-20px)", animation: isIntersecting ? `${ScalePing} 1s ease-in-out` : "none" }}
       >

diff --git a/src/components/HomePage/DescHome.tsx b/src/components/HomePage/DescHome.tsx
@@ -18,6 +18,7 @@ const DescHome = () => {
       fontSize={["12px", "14px", "16px", "18px"]}
       m={["4", "8"]}
       letterSpacing={"2px"}
+      opacity={0}
       animation={isIntersecting ? `${fadeTop} 1s ease-out forwards` : "none"}
     >
       A Full Stack Developer who enjoys solving problems and building quality projects. With a diverse set of skills and technologies, Can

diff --git a/src/components/HomePage/IconButtonComp.tsx b/src/components/HomePage/IconButtonComp.tsx
@@ -37,9 +37,9 @@ const IconButtonHome = ({ label, icon, onClick, tooltip, delay }: SocialBtnType)
         opacity={0}
         mx={["1px", "2", "3", "5", "6"]}
         color={"text"}
-        bgColor={"primaryLighter"}
+        bgColor={"light"}
         animation={isIntersecting ? `${fadeTop} 1s ease-in-out ${delay} forwards` : "none"}
-        shadow={"dark-lg"}
+        shadow={"lg"}
         transition={"700ms"}
         _hover={{ bgColor: "light", color: "text" }}
         border={"2px solid"}

diff --git a/src/hooks/useCustomTheme.ts b/src/hooks/useCustomTheme.ts
@@ -1,5 +1,5 @@
 import { useColorModeValue, useTheme } from "@chakra-ui/react";
-import { ThemeInput } from "../TYPES";
+import { CustomThemeType } from "../TYPES";
 
 const useCustomTheme = () => {
   const theme = useTheme();
@@ -8,7 +8,7 @@ const useCustomTheme = () => {
     return null;
   }
 
-  const { primary, accent, text, primaryLight } = theme.semanticTokens.colors;
+  const { primary, accent, text, primaryLight, darker } = theme.semanticTokens.colors;
   //! We cannot proceed without theme.semanticTokens present.
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -18,20 +18,14 @@ const useCustomTheme = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const _text = useColorModeValue(text.default, text._dark);
   // eslint-disable-next-line react-hooks/rules-of-hooks
+  const _darker = useColorModeValue(darker.default, darker._dark);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const _primaryLight = useColorModeValue(primaryLight.default, primaryLight._dark);
 
   const __primary = _primary.split("#")[1];
   const __accent = _accent.split("#")[1];
 
-  // Resolve type in Future
-  const resObj: {
-    customTheme: ThemeInput;
-    __primary: string;
-    __accent: string;
-    _accent: string;
-    _text: string;
-    _primaryLight: string;
-  } = {
+  const resObj: CustomThemeType = {
     customTheme: {
       light: [_primary, _accent],
     },
@@ -40,6 +34,7 @@ const useCustomTheme = () => {
     __primary,
     __accent,
     _primaryLight,
+    _darker,
   };
   return resObj;
 };

diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
+/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); */
 
 :root {
-  font-family: Poppins, Montserrat, Arial, sans-serif;
+  font-family: Poppins, Arial, sans-serif;
   font-display: swap;
   font-weight: 200;
   margin: 0px;

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -34,7 +34,7 @@ const Home = () => {
         gap={"12"}
       >
         <BigHeading title1="Hi I'm" title2="Sharuk Sayyed" />
-        <Flex transition={"1000"} w={{ base: "95%", sm: "90%", md: "85%", lg: "70%" }}>
+        <Flex w={{ base: "95%", sm: "90%", md: "85%", lg: "70%" }}>
           <DescHome />
         </Flex>
         <ThemeContainer />

diff --git a/src/pages/Timeline/Timeline.tsx b/src/pages/Timeline/Timeline.tsx
@@ -14,7 +14,7 @@ const Timeline = () => {
     return null;
   }
 
-  const { _primaryLight, _accent } = themeData;
+  const { _primaryLight, _accent, _darker } = themeData;
 
   return (
     <Flex justify={"center"} alignItems={"center"} direction={"column"} w={"100%"} m={"auto"} gap={"4"} pt={"5"} mt={"5"}>
@@ -25,7 +25,7 @@ const Timeline = () => {
           return (
             <VerticalTimelineElement
               key={nanoid()}
-              contentStyle={{ background: _primaryLight, color: "#fff" }}
+              contentStyle={{ background: _primaryLight, color: _darker }}
               contentArrowStyle={{ borderRight: `7px solid ${_primaryLight}` }}
               date={timeline.date}
               iconStyle={{ background: _accent, color: "#fff" }}

diff --git a/src/themes/BlueTheme.ts b/src/themes/BlueTheme.ts
@@ -8,7 +8,7 @@ export const blueTheme: ThemeConfig = extendTheme({
         _dark: "#fff",
       },
       white: {
-        default: "#fff",
+        default: "#ccc",
         _dark: "#eee",
       },
       light: {
@@ -24,7 +24,7 @@ export const blueTheme: ThemeConfig = extendTheme({
         _dark: "#aaa",
       },
       primary: {
-        default: "#fff",
+        default: "#fefefe",
         _dark: "#2a2a2a",
       },
       primaryLight: {