diff --git a/index.html b/index.html
index a0fe754..dcba5cb 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,15 @@
-
+
+
+
+
+
+
+
+
+
Sayyed Sharuk
diff --git a/src/TYPES.ts b/src/TYPES.ts
index a2c4b67..5ee4b13 100644
--- 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
index 608dd1e..7cdcf3c 100644
--- 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
index 55e3d16..6d2536c 100644
--- 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
index 9bd230d..4b0157d 100644
--- 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
index 38cf219..9093d62 100644
--- 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
index 30891e2..befa2ab 100644
--- 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
index c96b6ed..fea1378 100644
--- 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
index 0e7c7c9..529f4ee 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -34,7 +34,7 @@ const Home = () => {
gap={"12"}
>
-
+
diff --git a/src/pages/Timeline/Timeline.tsx b/src/pages/Timeline/Timeline.tsx
index 5d56973..01bf9fd 100644
--- 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 (
@@ -25,7 +25,7 @@ const Timeline = () => {
return (