+
+ )
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/contexts.ts b/react-frontend/src/Types/contexts.ts
index 42696b7..36da7b3 100644
--- a/react-frontend/src/Types/contexts.ts
+++ b/react-frontend/src/Types/contexts.ts
@@ -1,40 +1,23 @@
type Theme = {
colors: {
- main: {
- full: string,
- faded: string,
- percent: (percent: number) => string
- },
- dark: {
- full: string,
- faded: string,
- percent: (percent: number) => string
- },
- contrastText: {
- full: string,
- faded: string
- }
+ base: string,
+ dark1: string,
+ dark2: string,
+ dark3: string,
+ dark4: string,
+ text: string,
},
transition: string,
borderRadius: string,
boxShadow: string,
backgroundImage: string,
- bluryStyle: {
- main: {
- backgroundColor: string,
- backdropFilter: string,
- border: string
- },
- dark: {
- backgroundColor: string,
- backdropFilter: string,
- border: string
- }
- }
+ border: string,
+ button: object,
+ boxingStyle: object,
+ container: object,
+ buttonEffects: object,
};
-type PortfolioPages = "about" | "skills" | "education" | "experience" | "projects" | "contacts";
+type PortfolioPathes = "" | "skills" | "education" | "experience" | "projects" | "contacts";
-type Links = Record
+
+
+
+
+
+
+ diff --git a/react-frontend/src/components/CenteredSection/index.tsx b/react-frontend/src/components/CenteredSection/index.tsx index 42e5b01..5e23d22 100644 --- a/react-frontend/src/components/CenteredSection/index.tsx +++ b/react-frontend/src/components/CenteredSection/index.tsx @@ -13,17 +13,9 @@ export default function CenteredSection({ title, subtitle, icon, children }: Cen const { theme } = useThemeContext(); const containerStyle = useMemo((): CSSProperties => { return { - display: "flex", + ...theme.container, flexDirection: "column", - alignItems: "center", - justifyContent: "center", - gap: "1rem", textAlign: "center", - padding: "1rem", - ...theme.bluryStyle.main, - placeItems: "stretch", - borderRadius: theme.borderRadius, - boxShadow: theme.boxShadow, } }, [theme]); diff --git a/react-frontend/src/components/ContainerWrap.tsx b/react-frontend/src/components/ContainerWrap.tsx index 127da0e..62ddf8b 100644 --- a/react-frontend/src/components/ContainerWrap.tsx +++ b/react-frontend/src/components/ContainerWrap.tsx @@ -1,26 +1,5 @@ -import { motion, AnimatePresence } from "framer-motion" import { CSSProperties, FC, useMemo } from "react"; - -const variants = { - enter: (direction: number) => { - return { - x: direction > 0 ? 100 : -100, - opacity: 0 - }; - }, - center: (direction: number) => { - return { - x: 0, - opacity: 1 - }; - }, - exit: (direction: number) => { - return { - x: direction < 0 ? 100 : -100, - opacity: 0 - }; - } -}; +import { useTransition, animated } from "react-spring"; const ContainerWrap = (Component: FC) => function HOC() { const containerStyle = useMemo((): CSSProperties => { @@ -33,21 +12,20 @@ const ContainerWrap = (Component: FC) => function HOC() { } }, []); - return ( -
-
-
+
+
-
)
}
\ No newline at end of file
diff --git a/react-frontend/src/components/MainSection/Content.tsx b/react-frontend/src/components/MainSection/Content.tsx
index 556ffa9..7e86e3f 100644
--- a/react-frontend/src/components/MainSection/Content.tsx
+++ b/react-frontend/src/components/MainSection/Content.tsx
@@ -18,10 +18,8 @@ export default function Content({ children }: ContentProps) {
}, []);
const verticalLineStyle = useMemo((): CSSProperties => {
return {
- borderWidth: "1px",
- borderStyle: "solid",
- borderColor: theme.colors.main.full,
- backgroundColor: theme.colors.main.full,
+ border: theme.border,
+ backgroundColor: theme.colors.base,
}
}, [theme]);
diff --git a/react-frontend/src/components/MainSection/Header.tsx b/react-frontend/src/components/MainSection/Header.tsx
index e1116e8..c783ae4 100644
--- a/react-frontend/src/components/MainSection/Header.tsx
+++ b/react-frontend/src/components/MainSection/Header.tsx
@@ -25,13 +25,13 @@ export default function Header({ title, link, subtitle }: HeaderProps) {
const headerTextStyle = useMemo(() => {
return {
- color: theme.colors.main.full,
+ color: theme.colors.base,
display: "flex",
alignItems: "center",
gap: "0.5rem",
cursor: link ? "pointer" : "default",
}
- }, [link, theme.colors.main.full]);
+ }, [link, theme.colors]);
const headerOnCLickHandler = useCallback(() => {
link && window.open(link, "_blank");
diff --git a/react-frontend/src/components/MainSection/HeaderSymbol.tsx b/react-frontend/src/components/MainSection/HeaderSymbol.tsx
index 418e28e..b71a3e0 100644
--- a/react-frontend/src/components/MainSection/HeaderSymbol.tsx
+++ b/react-frontend/src/components/MainSection/HeaderSymbol.tsx
@@ -3,20 +3,21 @@ import { useThemeContext } from '../../contexts/ThemeContext';
export default function HeaderSymbol() {
const { theme } = useThemeContext();
- const outerStyle = useMemo(() : CSSProperties => ({
+ const outerStyle = useMemo((): CSSProperties => ({
width: "20px",
height: "20px",
- ...theme.bluryStyle.main,
+ backgroundColor: theme.colors.dark3,
+ border: theme.border,
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
}), [theme]);
- const innerStyle = useMemo(() : CSSProperties => ({
+ const innerStyle = useMemo((): CSSProperties => ({
width: "70%",
height: "70%",
borderRadius: "50%",
- backgroundColor: theme.colors.main.full,
+ backgroundColor: theme.colors.base,
}), [theme]);
return (
diff --git a/react-frontend/src/components/MainSection/index.tsx b/react-frontend/src/components/MainSection/index.tsx
index 66108ff..b085bf7 100644
--- a/react-frontend/src/components/MainSection/index.tsx
+++ b/react-frontend/src/components/MainSection/index.tsx
@@ -17,17 +17,9 @@ export default function MainSection({ title, link, subtitle, style, children }:
const { theme } = useThemeContext();
const containerStyle = useMemo((): CSSProperties => {
return {
- display: "flex",
+ ...theme.container,
flexDirection: "column",
- alignItems: "center",
- justifyContent: "center",
- gap: "1rem",
- padding: "1rem",
- ...theme.bluryStyle.main,
- placeItems: "stretch",
...style,
- borderRadius: theme.borderRadius,
- boxShadow: theme.boxShadow,
}
}, [theme, style]);
diff --git a/react-frontend/src/components/Navbar/Links/LinkButton.tsx b/react-frontend/src/components/Navbar/Links/LinkButton.tsx
new file mode 100644
index 0000000..97b26a4
--- /dev/null
+++ b/react-frontend/src/components/Navbar/Links/LinkButton.tsx
@@ -0,0 +1,33 @@
+import Button from '../../Button'
+import { PortfolioPathes } from '../../../Types';
+import { memo, useCallback } from 'react';
+import { useMatch, useNavigate } from 'react-router-dom';
+import { useThemeContext } from '../../../contexts/ThemeContext';
+
+type LinkButtonProps = {
+ readonly path: PortfolioPathes,
+ readonly pageName: string,
+ readonly onClick?: () => void
+}
+
+function LinkButton({ path, pageName, onClick }: LinkButtonProps) {
+ const { theme } = useThemeContext();
+ const navigate = useNavigate();
+ const active = useMatch(`/${path}`);
+ const linkButtonStyle = useCallback((linkActive: boolean) => ({
+ backgroundColor: linkActive ? theme.colors.dark1 : theme.colors.dark3
+ }), [theme.colors]);
+
+ return (
+