diff --git a/components/Intro.tsx b/components/Intro.tsx index 08653ee7..38091d95 100644 --- a/components/Intro.tsx +++ b/components/Intro.tsx @@ -1,15 +1,44 @@ +import { Box, Typography } from "@mui/material"; +import { keyframes } from "@mui/system"; import config from "config"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useDispatch } from "react-redux"; import { setAdmin } from "redux/slices/admin"; import { useAppSelector } from "redux/typesHooks"; +const fadeIn = keyframes({ + "0%": { + opacity: 0, + }, + "100%": { + opacity: 1, + }, +}); + +const fadeOut = keyframes({ + "0%": { + opacity: 1, + }, + "100%": { + opacity: 0, + }, +}); + +const animate = (animationName: string) => ({ + animationName: `${animationName}`, + animationDuration: "500ms", + animationFillMode: "forwards", +}); + const Intro = () => { const dispatch = useDispatch(); const admin = useAppSelector((state) => state.admin); const [isFirstRender, setIsFirstRender] = useState(true); + const imageAvatarRef = useRef(null); + const editorIconRef = useRef(null); + const handleClick = () => { if (admin) { dispatch(setAdmin(false)); @@ -19,8 +48,8 @@ const Intro = () => { }; useEffect(() => { - const imageWrapper = document.querySelector("div.image-avatar"); - const editIcon = document.querySelector("img.editor-icon"); + const imageWrapper = imageAvatarRef.current; + const editIcon = editorIconRef.current; if (admin) { imageWrapper?.setAttribute("admin", ""); @@ -45,11 +74,76 @@ const Intro = () => { }, [admin, isFirstRender]); return ( -
-
-
-
-
+ ({ + py: 8.75, + background: theme.palette.mode === "light" ? "#f8fafc" : "#070809", + color: theme.palette.mode === "light" ? "#707070" : "#f2f5f7", + })} + > + + {/* check, do we need to rewrite this className? */} + ({ + display: ["-ms-flexbox", "flex"], + msFlexAlign: "center", + alignItems: "center", + [theme.breakpoints.down(768)]: { + textAlign: "center", + display: "block", + }, + })} + > + ({ + position: "relative", + msFlexNegative: 0, + flexShrink: 0, + marginLeft: "auto", + textAlign: "center", + maxWidth: "136px", + msFlexOrder: 2, + order: 2, + [theme.breakpoints.down(768)]: { + width: "100%", + maxWidth: "100%", + marginBottom: "20px", + }, + })} + > + { width="90" height="90" /> -
-
+ + ({ + "& img": { + position: "absolute", + width: "39px", + height: "39px", + borderRadius: "50%", + backgroundColor: "white", + boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", + objectFit: "none", + left: "50%", + top: "50%", + transform: "translate(-50%, -50%)", + pointerEvents: "none", + zIndex: 2, + opacity: 0, + [theme.breakpoints.down(768)]: { + top: "55%", + }, + "&[admin]": animate(fadeIn), + "&[closing]": animate(fadeOut), + }, + })} + > edit -
-
{config.author_name}
-
{config.author_position}
-
-
-

Hello, I am {config.author_name}

-

+ + ({ + color: theme.palette.mode === "light" ? "#3a3a3a" : "white", + fontSize: "16px", + fontWeight: 700, + textTransform: "uppercase", + marginBottom: "4px", + })} + > + {config.author_name} + + + {config.author_position} + + + ({ + pr: 17.5, + [theme.breakpoints.down(1260)]: { + pr: 10, + }, + [theme.breakpoints.down(1020)]: { + pr: 8.75, + }, + [theme.breakpoints.down(768)]: { + pr: 0, + }, + })} + > + ({ + color: theme.palette.mode === "light" ? "#3a3a3a" : "white", + lineHeight: 1.28, + fontWeight: "bold", + fontSize: "50px", + marginBottom: "17px", + letterSpacing: 0, + [theme.breakpoints.down(1020)]: { + fontSize: "40px", + }, + [theme.breakpoints.down(481)]: { + fontSize: "30px", + mb: 3.25, + }, + })} + > + Hello, I am {config.author_name} + + {config.site_description} -

-
-
-
-
+ + + + + ); }; diff --git a/styles/dark-theme.scss b/styles/dark-theme.scss index f578b3c3..2df5b6ec 100644 --- a/styles/dark-theme.scss +++ b/styles/dark-theme.scss @@ -40,19 +40,6 @@ filter: brightness(0) invert(1); } - .intro-section { - background: #070809; - color: #f2f5f7; - } - - .intro-text h1 { - color: #fff; - } - - .intro-avatar .name { - color: #fff; - } - .filter-tags-list li { background: #33393f; color: #f2f5f7; diff --git a/styles/main.scss b/styles/main.scss index 78431896..c0771032 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -427,142 +427,6 @@ header { background: #fe6c0a; } -/*intro-section =================================================*/ - -.intro-section { - background: #f8fafc; - padding: 35px 0; - color: #707070; -} - -.intro-content { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; -} - -.intro-avatar { - position: relative; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-left: auto; - text-align: center; - max-width: 136px; - -ms-flex-order: 2; - order: 2; -} - -.intro-avatar .image-avatar { - position: relative; - width: 90px; - height: 90px; - border-radius: 50%; - overflow: hidden; - margin: 0 auto 16px; -} - -.intro-avatar .image-avatar:after { - content: ""; - position: absolute; - border-radius: 50%; - width: 90px; - height: 90px; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - border: 3px solid #fe6c0a; - z-index: 1; - pointer-events: none; - opacity: 0; -} - -.intro-avatar .image-avatar[admin]:after { - animation: fade-in 500ms forwards; -} - -.intro-avatar .image-avatar[closing]:after { - animation: fade-out 500ms forwards; -} - -.intro-avatar .image-avatar img { - display: block; - height: 100%; - width: 100%; - object-fit: cover; -} - -.intro-avatar .image-editor .editor-icon { - position: absolute; - width: 39px; - height: 39px; - border-radius: 50%; - background: #ffffff; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - object-fit: none; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - pointer-events: none; - z-index: 2; - opacity: 0; -} - -.intro-avatar .image-editor .editor-icon[admin] { - animation: fade-in 500ms forwards; -} - -.intro-avatar .image-editor .editor-icon[closing] { - animation: fade-out 500ms forwards; -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.intro-avatar .name { - color: #3a3a3a; - font-size: 16px; - font-weight: 700; - text-transform: uppercase; - margin-bottom: 4px; -} - -.intro-avatar .job { - line-height: 1.5; - font-size: 14px; -} - -.intro-text { - padding-right: 70px; -} - -.intro-text h1 { - color: #3a3a3a; - line-height: 1.28; - font-weight: bold; - font-size: 50px; - margin-bottom: 17px; -} - -.intro-text p { - line-height: 1.69; -} - /*simple-section =================================================*/ .simple-section { diff --git a/styles/responsive.scss b/styles/responsive.scss index ac394109..c20183ea 100644 --- a/styles/responsive.scss +++ b/styles/responsive.scss @@ -26,10 +26,6 @@ } @media (max-width: 1259px) { - .intro-text { - padding-right: 40px; - } - .posts-list-block .content { padding: 25px 20px; } @@ -85,14 +81,6 @@ max-width: 150px; } - .intro-text { - padding-right: 35px; - } - - .intro-text h1 { - font-size: 40px; - } - .filter-tags-list { margin: 0 -5px 16px; } @@ -223,31 +211,10 @@ width: 6px; } - .intro-content { - text-align: center; - display: block; - } - - .intro-avatar { - width: 100%; - max-width: 100%; - margin-bottom: 20px; - } - - .intro-avatar .image-editor .editor-icon { - left: 50%; - top: 55%; - transform: translate(-50%, -50%); - } - .posts-list li { width: calc(50% - 10px); } - .intro-text { - padding-right: 0; - } - .filter-tags-list { -ms-flex-pack: center; justify-content: center; @@ -574,11 +541,6 @@ } @media (max-width: 480px) { - .intro-text h1 { - font-size: 30px; - margin-bottom: 13px; - } - .filter-tags-list { margin: 0 -4px 15px; font-size: 13px;