From abe287183de04a3520f5f190815f21076a552129 Mon Sep 17 00:00:00 2001 From: hankliu <397694072@qq.com> Date: Fri, 17 May 2024 10:53:21 +0800 Subject: [PATCH] feat(resume): refine components --- src/components/Carousel/index.tsx | 17 +- src/components/Carousel3d/index.tsx | 92 ++++----- src/components/Carousel3d/index1.tsx | 118 +++++------- src/components/CarouselThreeD/index.tsx | 90 ++++----- src/components/FullPage/Footer.tsx | 9 +- src/components/FullPage/Header.tsx | 9 +- .../FullPage/ScrollToTopOnMount.tsx | 2 +- src/components/FullPage/Section.tsx | 39 ++-- src/components/FullPage/SectionsContainer.tsx | 180 ++++++++---------- src/components/FullPage/index.tsx | 10 +- src/components/FullPage/sectionContext.ts | 8 +- src/components/LazyBgImage/index.tsx | 12 +- src/components/LazyImage/index.tsx | 4 +- src/components/MessageModal/index.tsx | 12 +- src/components/ParallaxCarousel/index.tsx | 49 ++--- src/components/QrcodeModal/index.tsx | 23 +-- src/components/Resume/ResumeArticle/index.tsx | 48 +++-- .../Resume/ResumeExperience/index.tsx | 102 +++++----- src/components/Resume/ResumeIndex/index.tsx | 57 +++--- .../Resume/ResumeIntroduction/index.tsx | 47 ++--- src/components/Resume/ResumeProject/index.tsx | 176 +++++++---------- src/components/Resume/ResumeSkill/index.tsx | 72 ++++--- src/components/Resume/index.tsx | 14 +- src/components/Swiper/index.tsx | 33 ++-- src/components/index.tsx | 8 +- 25 files changed, 520 insertions(+), 711 deletions(-) diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx index 4c0c4d8..c8c4f03 100644 --- a/src/components/Carousel/index.tsx +++ b/src/components/Carousel/index.tsx @@ -1,15 +1,16 @@ -"use client"; +'use client'; import { LeftCircleOutlined, LeftOutlined, RightCircleOutlined, RightOutlined, -} from "@ant-design/icons"; -import { Carousel, CarouselProps } from "antd"; -import { CarouselRef } from "antd/es/carousel"; -import classNames from "classnames"; -import React, { useCallback, useRef } from "react"; +} from '@ant-design/icons'; +import type { CarouselProps } from 'antd'; +import { Carousel } from 'antd'; +import type { CarouselRef } from 'antd/es/carousel'; +import classNames from 'classnames'; +import React, { useCallback, useRef } from 'react'; export interface ICustomCarouselProps extends CarouselProps { isMobile?: boolean; @@ -37,9 +38,9 @@ export default function CustomCarousel({ return (
{isMobile ? ( diff --git a/src/components/Carousel3d/index.tsx b/src/components/Carousel3d/index.tsx index f246c9d..dbd413f 100644 --- a/src/components/Carousel3d/index.tsx +++ b/src/components/Carousel3d/index.tsx @@ -1,25 +1,22 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -import classNames from "classnames"; -import React, { + +import classNames from 'classnames'; +import type { CSSProperties, + ReactElement} from 'react'; +import React, { memo, - ReactElement, useCallback, useEffect, useMemo, useRef, useState, -} from "react"; +} from 'react'; interface ICarousel3dProps { children: ReactElement[]; style: Partial; className: string; - onChange: (arg: { - current: number; - rotate: number; - eventType: string; - }) => void; + onChange: (arg: { current: number; rotate: number; eventType: string }) => void; tilt: string; duration: string; ease: string; @@ -40,9 +37,9 @@ const dpr = 0.5; // currentDpr / defaultDpr; export default memo(function Carousel3d({ onChange = () => {}, className, - tilt = "15rem", - duration = ".45s", - ease = "cubic-bezier(0.215, 0.61, 0.355, 1)", + tilt = '15rem', + duration = '.45s', + ease = 'cubic-bezier(0.215, 0.61, 0.355, 1)', blurIncrease = 8, opacityDecline = 0.1, opacityBasics = 0.5, @@ -58,7 +55,7 @@ export default memo(function Carousel3d({ const perspectiveDpr = useMemo(() => perspective * dpr, [perspective]); const childrenLength = useRef( - Math.max(React.Children.toArray(children).length, childMaxLength) + Math.max(React.Children.toArray(children).length, childMaxLength), ); const angle = useRef(360 / childrenLength.current); @@ -69,7 +66,7 @@ export default memo(function Carousel3d({ const [rotate, setRotate] = useState(-defaultCurrent * angle.current); const currentRotate = useRef(-defaultCurrent * angle.current); // 偏移值 - const [transition, setTransition] = useState("none"); + const [transition, setTransition] = useState('none'); // 当前选择的节点 const [current, setCurrent] = useState(defaultCurrent); @@ -81,10 +78,7 @@ export default memo(function Carousel3d({ }, []); useEffect(() => { - childrenLength.current = Math.max( - React.Children.toArray(children).length, - childMaxLength - ); + childrenLength.current = Math.max(React.Children.toArray(children).length, childMaxLength); angle.current = 360 / childrenLength.current; setCurrent(defaultCurrent); setRotate(-defaultCurrent * angle.current); @@ -104,29 +98,24 @@ export default memo(function Carousel3d({ }; const onTouchMove = (e: MouseEvent & TouchEvent) => { - if ( - (e.touches && e.touches.length > 1) || - childrenLength.current <= 1 || - !startX.current - ) { + if ((e.touches && e.touches.length > 1) || childrenLength.current <= 1 || !startX.current) { return; } const x = e.pageX || e.touches[0].pageX; const differ = (x - startX.current) * moveRange; // 幅度加大； - const rotate = - startRotate.current + (differ / clientWidth.current) * angle.current; - const r = (Math.abs(Math.ceil(rotate / 360)) * 360 - rotate) % 360; - const current = Math.round(r / angle.current) % childrenLength.current; + const nextRotate = startRotate.current + (differ / clientWidth.current) * angle.current; + const r = (Math.abs(Math.ceil(nextRotate / 360)) * 360 - nextRotate) % 360; + const nextCurrent = Math.round(r / angle.current) % childrenLength.current; - setRotate(rotate); - currentRotate.current = rotate; - setCurrent(current); - setTransition("none"); + setRotate(nextRotate); + currentRotate.current = nextRotate; + setCurrent(nextCurrent); + setTransition('none'); onChange({ - current, - rotate, - eventType: "move", + current: nextCurrent, + rotate: nextRotate, + eventType: 'move', }); }; @@ -144,9 +133,7 @@ export default memo(function Carousel3d({ const n = differ > 0 ? 1 : -1; const newRotate = startRotate.current + - n * - angle.current * - Math.round(Math.abs((rotate - startRotate.current) / angle.current)); + n * angle.current * Math.round(Math.abs((rotate - startRotate.current) / angle.current)); // const r = (Math.abs(Math.ceil(newRotate / 360)) * 360 - newRotate) % 360; // const current = Math.round(r / angle.current) % childrenLength.current; @@ -159,17 +146,17 @@ export default memo(function Carousel3d({ onChange({ current, rotate: newRotate, - eventType: "end", + eventType: 'end', }); }, - [current, duration, ease, onChange, rotate] + [current, duration, ease, onChange, rotate], ); useEffect(() => { - window.addEventListener("mouseup", onTouchEnd as any); + window.addEventListener('mouseup', onTouchEnd as any); return () => { - window.removeEventListener("mouseup", onTouchEnd as any); + window.removeEventListener('mouseup', onTouchEnd as any); }; }, [onTouchEnd]); @@ -179,25 +166,22 @@ export default memo(function Carousel3d({ const renderChildren = () => { const newChildren = React.Children.toArray(children) as ReactElement[]; const length = newChildren.length; - const zDpr = z * dpr; + const nextZDpr = z * dpr; return newChildren.map((item, i) => { if (i >= childMaxLength) { return null; } const transform = `rotateY(${ angle.current * i - }deg) translateZ(${zDpr}px) rotateY(-${angle.current * i}deg) `; + }deg) translateZ(${nextZDpr}px) rotateY(-${angle.current * i}deg) `; const diffPosition = Math.abs(current - i); const center = (childMaxLength ?? length) / 2; - const index = - diffPosition > center ? center * 2 - diffPosition : diffPosition; + const index = diffPosition > center ? center * 2 - diffPosition : diffPosition; const opacity = Math.max( 0.1, - 1 - - ((index - 1) * opacityDecline + - opacityBasics * (diffPosition ? 1 : 0)) + 1 - ((index - 1) * opacityDecline + opacityBasics * (diffPosition ? 1 : 0)), ); const animStyle: CSSProperties = { opacity, @@ -210,7 +194,7 @@ export default memo(function Carousel3d({ className="absolute left-0 top-0" key={item.key} style={{ - transformStyle: "preserve-3d", + transformStyle: 'preserve-3d', transform, }} > @@ -246,7 +230,7 @@ export default memo(function Carousel3d({ onMouseMove={onTouchMove as any} onTouchEnd={onTouchEnd as any} onMouseUp={onTouchEnd as any} - className={classNames("relative h-full w-full", { + className={classNames('relative h-full w-full', { [className!]: className, })} > @@ -256,15 +240,13 @@ export default memo(function Carousel3d({ style={{ ...style, perspective: perspectiveDpr, - transform: `translateY(-${tilt}) scale(${ - (perspectiveDpr - zDpr) / perspectiveDpr - })`, + transform: `translateY(-${tilt}) scale(${(perspectiveDpr - zDpr) / perspectiveDpr})`, }} >
; className: string; - onChange: (arg: { - current: number; - rotate: number; - eventType: string; - }) => void; + onChange: (arg: { current: number; rotate: number; eventType: string }) => void; tilt: string; duration: string; ease: string; @@ -41,9 +38,9 @@ const DefaultWidth = 360; export default function Carousel3d({ onChange = () => {}, className, - tilt = "15rem", - duration = ".45s", - ease = "cubic-bezier(0.215, 0.61, 0.355, 1)", + tilt = '15rem', + duration = '.45s', + ease = 'cubic-bezier(0.215, 0.61, 0.355, 1)', blurIncrease = 8, opacityDecline = 0.1, opacityBasics = 0.5, @@ -56,37 +53,28 @@ export default function Carousel3d({ style = {}, }: Partial) { const zDpr = useMemo(() => z * dpr, [z]); - const perspectiveDpr = useMemo( - () => perspective * dpr, - [perspective] - ); + const perspectiveDpr = useMemo(() => perspective * dpr, [perspective]); // 子元素长度 const childrenLength = useMemo( () => Math.max(React.Children.toArray(children).length, childMaxLength), - [childMaxLength, children] + [childMaxLength, children], ); // 偏移量 - const angle = useMemo( - () => DefaultWidth / childrenLength, - [childrenLength] - ); + const angle = useMemo(() => DefaultWidth / childrenLength, [childrenLength]); // body的长度 const clientWidth = useRef(0); // 旋转值 const [rotate, setRotate] = useState(-defaultCurrent * angle); // 偏移值 - const [transition, setTransition] = useState("none"); + const [transition, setTransition] = useState('none'); // 当前选择的节点 const [current, setCurrent] = useState(defaultCurrent); const startX = useRef(0); - const startRotate = useMemo( - () => Math.round(rotate / angle) * angle, - [rotate, angle] - ); + const startRotate = useMemo(() => Math.round(rotate / angle) * angle, [rotate, angle]); useEffect(() => { clientWidth.current = document.body.clientWidth; @@ -103,11 +91,11 @@ export default function Carousel3d({ const onChangeEvent = useCallback( ( - eventType: "move" | "end", + eventType: 'move' | 'end', data: { current?: number; rotate?: number; - } + }, ) => { onChange({ current, @@ -116,7 +104,7 @@ export default function Carousel3d({ ...data, }); }, - [current, onChange, rotate] + [current, onChange, rotate], ); const onTouchStart = useCallback( @@ -126,38 +114,32 @@ export default function Carousel3d({ } startX.current = e.pageX || e.touches[0].pageX; }, - [childrenLength] + [childrenLength], ); const onTouchMove = useCallback( (e: MouseEvent & TouchEvent) => { - if ( - (e.touches && e.touches.length > 1) || - childrenLength <= 1 || - !startX.current - ) { + if ((e.touches && e.touches.length > 1) || childrenLength <= 1 || !startX.current) { return; } const x = e.pageX || e.touches[0].pageX; const differ = (x - startX.current) * moveRange; // 幅度加大； - const rotate = startRotate + (differ / clientWidth.current) * angle; - const r = - (Math.abs(Math.ceil(rotate / DefaultWidth)) * DefaultWidth - rotate) % - DefaultWidth; - const current = Math.round(r / angle) % childrenLength; + const nextRotate = startRotate + (differ / clientWidth.current) * angle; + const r = (Math.abs(Math.ceil(nextRotate / DefaultWidth)) * DefaultWidth - nextRotate) % DefaultWidth; + const nextCurrent = Math.round(r / angle) % childrenLength; - console.log("onTouchMove", current); + console.log('onTouchMove', nextCurrent); - setRotate(rotate); - setCurrent(current); - setTransition("none"); + setRotate(nextRotate); + setCurrent(nextCurrent); + setTransition('none'); - onChangeEvent("move", { - current, - rotate, + onChangeEvent('move', { + current: nextCurrent, + rotate: nextRotate, }); }, - [angle, childrenLength, moveRange, onChangeEvent, startRotate] + [angle, childrenLength, moveRange, onChangeEvent, startRotate], ); const onTouchEnd = useCallback( @@ -173,24 +155,23 @@ export default function Carousel3d({ const differ = x - startX.current; const n = differ > 0 ? 1 : -1; const newRotate = - startRotate + - n * angle * Math.round(Math.abs((rotate - startRotate) / angle)); + startRotate + n * angle * Math.round(Math.abs((rotate - startRotate) / angle)); setRotate(newRotate); startX.current = 0; - onChangeEvent("end", { + onChangeEvent('end', { rotate: newRotate, }); }, - [angle, childrenLength, onChangeEvent, rotate, startRotate] + [angle, childrenLength, onChangeEvent, rotate, startRotate], ); useEffect(() => { - window.addEventListener("mouseup", onTouchEnd as any); + window.addEventListener('mouseup', onTouchEnd as any); return () => { - window.removeEventListener("mouseup", onTouchEnd as any); + window.removeEventListener('mouseup', onTouchEnd as any); }; }, [onTouchEnd]); @@ -200,23 +181,18 @@ export default function Carousel3d({ const renderChildren = () => { const newChildren = React.Children.toArray(children) as ReactElement[]; const length = newChildren.length; - const zDpr = z * dpr; + const nextZDpr = z * dpr; return newChildren.map((item, i) => { if (i >= childMaxLength) { return null; } - const transform = `rotateY(${ - angle * i - }deg) translateZ(${zDpr}px) rotateY(-${angle * i}deg) `; + const transform = `rotateY(${angle * i}deg) translateZ(${nextZDpr}px) rotateY(-${angle * i}deg) `; const diffPosition = Math.abs(current - i); const center = Math.min(childMaxLength, length) / 2; - const index = - diffPosition > center ? center * 2 - diffPosition : diffPosition; - let opacity = - 1 - - ((index - 1) * opacityDecline + opacityBasics * (diffPosition ? 1 : 0)); + const index = diffPosition > center ? center * 2 - diffPosition : diffPosition; + let opacity = 1 - ((index - 1) * opacityDecline + opacityBasics * (diffPosition ? 1 : 0)); opacity = opacity < 0.1 ? 0.1 : opacity; const animStyle: CSSProperties = { opacity, @@ -229,7 +205,7 @@ export default function Carousel3d({ className="absolute left-0 top-0" key={item.key} style={{ - transformStyle: "preserve-3d", + transformStyle: 'preserve-3d', transform, }} > @@ -243,9 +219,7 @@ export default function Carousel3d({ className="m-auto overflow-hidden rounded-lg transition-[filter] duration-[0.45s]" style={{ ...animStyle }} > -
- {item} -
+
{item}
@@ -261,7 +235,7 @@ export default function Carousel3d({ onMouseMove={onTouchMove as any} onTouchEnd={onTouchEnd as any} onMouseUp={onTouchEnd as any} - className={classNames("relative h-full w-full", { + className={classNames('relative h-full w-full', { [className!]: className, })} > @@ -271,15 +245,13 @@ export default function Carousel3d({ style={{ ...style, perspective: perspectiveDpr, - transform: `translateY(-${tilt}) scale(${ - (perspectiveDpr - zDpr) / perspectiveDpr - })`, + transform: `translateY(-${tilt}) scale(${(perspectiveDpr - zDpr) / perspectiveDpr})`, }} >
source[key] instanceof Object ? isEqual(source[key], target[key]) - : source[key] === target[key] + : source[key] === target[key], ) ); } @@ -40,9 +40,9 @@ class CarouselThreeD extends React.PureComponent { }; static defaultProps = { onChange: () => {}, - tilt: "15rem", - duration: ".45s", - ease: "cubic-bezier(0.215, 0.61, 0.355, 1)", + tilt: '15rem', + duration: '.45s', + ease: 'cubic-bezier(0.215, 0.61, 0.355, 1)', blurIncrease: 8, opacityDecline: 0.1, opacityBasics: 0.5, @@ -58,12 +58,12 @@ class CarouselThreeD extends React.PureComponent { this.state = { rotate: -props.current * this.angle, current: props.current, - transition: "none", + transition: 'none', }; } componentDidMount() { this.w = document.body.clientWidth; - window.addEventListener("mouseup", this.onTouchEnd); + window.addEventListener('mouseup', this.onTouchEnd); } componentDidUpdate(prevProps) { if (prevProps !== this.props) { @@ -103,40 +103,31 @@ class CarouselThreeD extends React.PureComponent { this.startRotate = Math.round(this.state.rotate / this.angle) * this.angle; // 偏移修复; }; onTouchMove = (e) => { - if ( - (e.touches && e.touches.length > 1) || - this.length <= 1 || - !this.startX - ) { + if ((e.touches && e.touches.length > 1) || this.length <= 1 || !this.startX) { return; } const x = e.pageX || e.touches[0].pageX; const differ = (x - this.startX) * this.props.moveRange; // 幅度加大； const rotate = this.startRotate + (differ / this.w) * this.angle; - const r = - (Math.abs(Math.ceil(this.state.rotate / 360)) * 360 - rotate) % 360; + const r = (Math.abs(Math.ceil(this.state.rotate / 360)) * 360 - rotate) % 360; const current = Math.round(r / this.angle) % this.length; this.setState( { rotate, current, - transition: "none", + transition: 'none', }, () => { this.props.onChange({ current, rotate, - eventType: "move", + eventType: 'move', }); - } + }, ); }; onTouchEnd = (e) => { - if ( - (e.changedTouches && e.changedTouches.length > 1) || - this.length <= 1 || - !this.startX - ) { + if ((e.changedTouches && e.changedTouches.length > 1) || this.length <= 1 || !this.startX) { return; } const x = e.pageX || e.changedTouches[0].pageX; @@ -145,9 +136,7 @@ class CarouselThreeD extends React.PureComponent { const n = differ > 0 ? 1 : -1; const newRotate = this.startRotate + - n * - this.angle * - Math.round(Math.abs((rotate - this.startRotate) / this.angle)); + n * this.angle * Math.round(Math.abs((rotate - this.startRotate) / this.angle)); this.setState( { rotate: newRotate, @@ -158,15 +147,14 @@ class CarouselThreeD extends React.PureComponent { this.props.onChange({ current, rotate: newRotate, - eventType: "end", + eventType: 'end', }); - } + }, ); }; setLengthAndAngle = (props) => { this.length = React.Children.toArray(props.children).length; - this.length = - this.length > props.childMaxLength ? props.childMaxLength : this.length; + this.length = this.length > props.childMaxLength ? props.childMaxLength : this.length; this.angle = 360 / this.length; }; getAnimStyle = (n, length) => { @@ -197,19 +185,15 @@ class CarouselThreeD extends React.PureComponent { }deg) translateZ(${zDpr}px) rotateY(-${this.angle * i}deg) `; const animStyle = this.getAnimStyle( Math.abs(this.state.current - i), - length > childMaxLength ? childMaxLength : length + length > childMaxLength ? childMaxLength : length, ); const style = { - transformStyle: "preserve-3d", + transformStyle: 'preserve-3d', transform, // opacity: animStyle.opacity, 留坑，preserve-3d 不可以与 opacity 同时使用，排查了一下午 }; return ( -
+
{ const footerStyle: CSSProperties = { - position: "fixed", - width: "100%", + position: 'fixed', + width: '100%', zIndex: 1, - bottom: "0", + bottom: '0', }; return
{children}
; diff --git a/src/components/FullPage/Header.tsx b/src/components/FullPage/Header.tsx index 6d4e41a..922778f 100644 --- a/src/components/FullPage/Header.tsx +++ b/src/components/FullPage/Header.tsx @@ -1,11 +1,12 @@ -import React, { CSSProperties, ReactNode } from "react"; +import type { CSSProperties, ReactNode } from 'react'; +import React from 'react'; const Header = ({ children }: { children: ReactNode }) => { const headerStyle: CSSProperties = { - position: "fixed", - width: "100%", + position: 'fixed', + width: '100%', zIndex: 1, - top: "0", + top: '0', }; return
{children}
; diff --git a/src/components/FullPage/ScrollToTopOnMount.tsx b/src/components/FullPage/ScrollToTopOnMount.tsx index b66113d..370f9e3 100644 --- a/src/components/FullPage/ScrollToTopOnMount.tsx +++ b/src/components/FullPage/ScrollToTopOnMount.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect } from 'react'; const ScrollToTopOnMount = () => { useEffect(() => { diff --git a/src/components/FullPage/Section.tsx b/src/components/FullPage/Section.tsx index 72edc97..883846d 100644 --- a/src/components/FullPage/Section.tsx +++ b/src/components/FullPage/Section.tsx @@ -1,12 +1,7 @@ -import React, { - ReactNode, - useCallback, - useContext, - useEffect, - useState, -} from "react"; +import type { ReactNode} from 'react'; +import React, { useCallback, useContext, useEffect, useState } from 'react'; -import SectionContext from "./sectionContext"; +import SectionContext from './sectionContext'; interface ISectionProps { color?: string; @@ -16,13 +11,7 @@ interface ISectionProps { children: ReactNode; } -const Section = ({ - color, - children, - verticalAlign, - className, - id, -}: ISectionProps) => { +const Section = ({ color, children, verticalAlign, className, id }: ISectionProps) => { const [windowHeight, setWindowHeight] = useState(0); // 使用 useContext 获取上下文的值 @@ -34,18 +23,18 @@ const Section = ({ useEffect(() => { handleResize(); - window.addEventListener("resize", handleResize); + window.addEventListener('resize', handleResize); return () => { - window.removeEventListener("resize", handleResize); + window.removeEventListener('resize', handleResize); }; }, [handleResize]); const renderVerticalAlign = () => { const verticalAlignStyle = { - display: "table-cell", - verticalAlign: "middle", - width: "100%", + display: 'table-cell', + verticalAlign: 'middle', + width: '100%', }; return
{children}
; @@ -54,11 +43,11 @@ const Section = ({ const alignVertical = verticalAlign || sectionContext.verticalAlign; const sectionStyle = { - width: "100%", - display: alignVertical ? "table" : "block", + width: '100%', + display: alignVertical ? 'table' : 'block', height: windowHeight, maxHeight: windowHeight, - overflow: "auto", + overflow: 'auto', backgroundColor: color, paddingTop: sectionContext.sectionPaddingTop, paddingBottom: sectionContext.sectionPaddingBottom, @@ -66,9 +55,7 @@ const Section = ({ return (
diff --git a/src/components/FullPage/SectionsContainer.tsx b/src/components/FullPage/SectionsContainer.tsx index 25cb6b7..5c3ff90 100644 --- a/src/components/FullPage/SectionsContainer.tsx +++ b/src/components/FullPage/SectionsContainer.tsx @@ -1,17 +1,18 @@ -import throttle from "lodash/throttle"; +import throttle from 'lodash/throttle'; +import type { + CSSProperties, + ReactNode} from 'react'; import React, { Children, cloneElement, - CSSProperties, - ReactNode, useCallback, useEffect, useMemo, useRef, useState, -} from "react"; +} from 'react'; -import SectionContext from "./sectionContext"; +import SectionContext from './sectionContext'; type TScrollCallbackParams = { activeSection: number; @@ -45,12 +46,12 @@ const SectionsContainer = ({ verticalAlign = false, scrollBar = false, navigation = true, - className = "SectionContainer", - sectionClassName = "Section", + className = 'SectionContainer', + sectionClassName = 'Section', anchors = [], - activeClass = "active", - sectionPaddingTop = "0", - sectionPaddingBottom = "0", + activeClass = 'active', + sectionPaddingTop = '0', + sectionPaddingBottom = '0', arrowNavigation = true, activeSection = 0, touchNavigation = true, @@ -58,14 +59,12 @@ const SectionsContainer = ({ navigationAnchorClass, navigationClass, }: ISectionsContainerProps) => { - const [stateActiveSection, setStateActiveSection] = - useState(activeSection); + const [stateActiveSection, setStateActiveSection] = useState(activeSection); const stateActiveSectionRef = useRef(stateActiveSection); const [scrollingStarted, setScrollingStarted] = useState(false); const scrollingStartedRef = useRef(false); - const [sectionScrolledPosition, setSectionScrolledPosition] = - useState(0); + const [sectionScrolledPosition, setSectionScrolledPosition] = useState(0); const scrollCallbackParams = useMemo( () => ({ @@ -73,13 +72,11 @@ const SectionsContainer = ({ scrollingStarted, sectionScrolledPosition, }), - [scrollingStarted, sectionScrolledPosition, stateActiveSection] + [scrollingStarted, sectionScrolledPosition, stateActiveSection], ); const resetScrollTimer = useRef(); - const childrenLength = useRef( - children ? (children as any).length : 0 - ); + const childrenLength = useRef(children ? (children as any).length : 0); const contextData = useMemo(() => { return { @@ -88,12 +85,7 @@ const SectionsContainer = ({ sectionPaddingTop: sectionPaddingTop, sectionPaddingBottom: sectionPaddingBottom, }; - }, [ - verticalAlign, - sectionClassName, - sectionPaddingTop, - sectionPaddingBottom, - ]); + }, [verticalAlign, sectionClassName, sectionPaddingTop, sectionPaddingBottom]); const addChildrenWithAnchorId = useCallback(() => { let index = 0; @@ -112,11 +104,11 @@ const SectionsContainer = ({ }, [anchors, children]); const addOverflowToBody = useCallback(() => { - document.querySelector("body")!.style.overflow = "hidden"; + document.querySelector('body')!.style.overflow = 'hidden'; }, []); const removeOverflowFromBody = useCallback(() => { - document.querySelector("body")!.style.overflow = "initial"; + document.querySelector('body')!.style.overflow = 'initial'; }, []); const handleScrollCallback = useCallback(() => { @@ -143,17 +135,17 @@ const SectionsContainer = ({ const addActiveClass = useCallback(() => { // 先移除 Active className const activeLinks = document.querySelectorAll( - `a:not([href="#${anchors[stateActiveSectionRef.current]}"])` + `a:not([href="#${anchors[stateActiveSectionRef.current]}"])`, ); if (activeLinks) { for (const activeLink of activeLinks) { - const className = activeLink.className - .replaceAll(activeClass, "") - .replaceAll(/\s+/g, " ") + const elemClassName = activeLink.className + .replaceAll(activeClass, '') + .replaceAll(/\s+/g, ' ') .trim(); - activeLink.className = `${className} ${activeClass}`.trim(); + activeLink.className = `${elemClassName} ${activeClass}`.trim(); } } }, [activeClass, anchors]); @@ -166,9 +158,9 @@ const SectionsContainer = ({ // 设置Hash const hash = anchors[index]; - const nextHash = "#" + hash; + const nextHash = '#' + hash; if (window.location.hash !== nextHash) { - window.location.hash = "#" + hash; + window.location.hash = '#' + hash; } // 设置translate偏移量和当前选中的Section @@ -186,15 +178,15 @@ const SectionsContainer = ({ // 修改当前选中的Section时，添加对应的active class addActiveClass(); }, - [anchors, addActiveClass, handleScrollCallback, resetScroll] + [anchors, addActiveClass, handleScrollCallback, resetScroll], ); const handleAnchor = useCallback(() => { const hash = window.location.hash.slice(1); - const activeSection = anchors.indexOf(hash); + const nextActiveSection = anchors.indexOf(hash); - if (stateActiveSectionRef.current !== activeSection) { - setAnchorAndSectionTransition(activeSection); + if (stateActiveSectionRef.current !== nextActiveSection) { + setAnchorAndSectionTransition(nextActiveSection); } }, [anchors, setAnchorAndSectionTransition]); @@ -212,24 +204,24 @@ const SectionsContainer = ({ const handleArrowKeys = useCallback( (e: any) => { const event = window.event || e; - const activeSection = + const nextActiveSection = event.keyCode === 38 || event.keyCode === 37 ? stateActiveSectionRef.current - 1 : event.keyCode === 40 || event.keyCode === 39 - ? stateActiveSectionRef.current + 1 - : -1; + ? stateActiveSectionRef.current + 1 + : -1; if ( scrollingStartedRef.current || - activeSection < 0 || - childrenLength.current === activeSection + nextActiveSection < 0 || + childrenLength.current === nextActiveSection ) { return false; } - setAnchorAndSectionTransition(activeSection); + setAnchorAndSectionTransition(nextActiveSection); }, - [setAnchorAndSectionTransition] + [setAnchorAndSectionTransition], ); // 处理滚轮事件的滚动 @@ -237,35 +229,35 @@ const SectionsContainer = ({ throttle((event: any) => { const e = window.event || event; const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail)); - const activeSection = stateActiveSectionRef.current - delta; + const nextActiveSection = stateActiveSectionRef.current - delta; if ( scrollingStartedRef.current || - activeSection < 0 || - childrenLength.current === activeSection + nextActiveSection < 0 || + childrenLength.current === nextActiveSection ) { return false; } - setAnchorAndSectionTransition(activeSection); + setAnchorAndSectionTransition(nextActiveSection); }, 100), - [setAnchorAndSectionTransition] + [setAnchorAndSectionTransition], ); // 处理wheel事件 useEffect(() => { - window.addEventListener("wheel", handleMouseWheel, false); - window.addEventListener("mousewheel", handleMouseWheel, false); - window.addEventListener("DOMMouseScroll", handleMouseWheel, false); + window.addEventListener('wheel', handleMouseWheel, false); + window.addEventListener('mousewheel', handleMouseWheel, false); + window.addEventListener('DOMMouseScroll', handleMouseWheel, false); return () => { - window.removeEventListener("wheel", handleMouseWheel); - window.removeEventListener("mousewheel", handleMouseWheel); - window.removeEventListener("DOMMouseScroll", handleMouseWheel); + window.removeEventListener('wheel', handleMouseWheel); + window.removeEventListener('mousewheel', handleMouseWheel); + window.removeEventListener('DOMMouseScroll', handleMouseWheel); }; }, [handleMouseWheel]); const handleTouchNav = useCallback(() => { - const touchsurface = document.querySelector("." + className); + const touchsurface = document.querySelector('.' + className); let swipedir: string; let startX: number; let startY: number; @@ -277,8 +269,8 @@ const SectionsContainer = ({ let elapsedTime: number; let startTime: number; - const handleswipe = function (swipedir: string) { - console.log(swipedir); + const handleswipe = function (swipeDir: string) { + console.log(swipeDir); }; const handleTouchNavStart = (e: any) => { @@ -286,7 +278,7 @@ const SectionsContainer = ({ return; } const touchobj = e.changedTouches[0]; - swipedir = "none"; + swipedir = 'none'; startX = touchobj.pageX; startY = touchobj.pageY; startTime = Date.now(); @@ -315,32 +307,25 @@ const SectionsContainer = ({ Math.abs(distY) >= threshold && Math.abs(distX) <= restraint ) { - swipedir = distY < 0 ? "up" : "down"; - const direction = - stateActiveSectionRef.current + 1 * (swipedir === "down" ? -1 : 1); + swipedir = distY < 0 ? 'up' : 'down'; + const direction = stateActiveSectionRef.current + 1 * (swipedir === 'down' ? -1 : 1); setAnchorAndSectionTransition(direction); } handleswipe(swipedir); }; - touchsurface && - touchsurface.addEventListener("touchstart", handleTouchNavStart, false); + touchsurface && touchsurface.addEventListener('touchstart', handleTouchNavStart, false); - touchsurface && - touchsurface.addEventListener("touchmove", handleTouchNavMove, false); + touchsurface && touchsurface.addEventListener('touchmove', handleTouchNavMove, false); - touchsurface && - touchsurface.addEventListener("touchend", handleTouchNavEnd, false); + touchsurface && touchsurface.addEventListener('touchend', handleTouchNavEnd, false); return () => { - touchsurface && - touchsurface.removeEventListener("touchstart", handleTouchNavStart); + touchsurface && touchsurface.removeEventListener('touchstart', handleTouchNavStart); - touchsurface && - touchsurface.removeEventListener("touchmove", handleTouchNavMove); + touchsurface && touchsurface.removeEventListener('touchmove', handleTouchNavMove); - touchsurface && - touchsurface.removeEventListener("touchend", handleTouchNavEnd); + touchsurface && touchsurface.removeEventListener('touchend', handleTouchNavEnd); }; }, [className, setAnchorAndSectionTransition]); @@ -353,16 +338,16 @@ const SectionsContainer = ({ removeOverflowFromBody(); handleResize(); - window.addEventListener("resize", handleResize); + window.addEventListener('resize', handleResize); if (!scrollBar) { addOverflowToBody(); handleAnchor(); - window.addEventListener("hashchange", handleAnchor, false); + window.addEventListener('hashchange', handleAnchor, false); if (arrowNavigation) { - window.addEventListener("keydown", handleArrowKeys); + window.addEventListener('keydown', handleArrowKeys); } if (touchNavigation) { @@ -371,41 +356,40 @@ const SectionsContainer = ({ } return () => { - window.removeEventListener("resize", handleResize); - window.removeEventListener("hashchange", handleAnchor); + window.removeEventListener('resize', handleResize); + window.removeEventListener('hashchange', handleAnchor); if (arrowNavigation) { - window.removeEventListener("keydown", handleArrowKeys); + window.removeEventListener('keydown', handleArrowKeys); } }; }, []); const renderNavigation = () => { const navigationStyle: CSSProperties = { - position: "fixed", - zIndex: "10", - right: "20px", - top: "50%", - transform: "translate(-50%, -50%)", + position: 'fixed', + zIndex: '10', + right: '20px', + top: '50%', + transform: 'translate(-50%, -50%)', }; const anchorElements = anchors.map((link: string, index: number) => { const anchorStyle: CSSProperties = { - display: "block", - margin: "10px", - borderRadius: "100%", - backgroundColor: "#556270", - padding: "5px", - transition: "all 0.2s", - transform: stateActiveSection === index ? "scale(1.3)" : "none", + display: 'block', + margin: '10px', + borderRadius: '100%', + backgroundColor: '#556270', + padding: '5px', + transition: 'all 0.2s', + transform: stateActiveSection === index ? 'scale(1.3)' : 'none', }; return ( - // eslint-disable-next-line jsx-a11y/anchor-has-content ); @@ -413,7 +397,7 @@ const SectionsContainer = ({ return (
{anchorElements} @@ -422,9 +406,9 @@ const SectionsContainer = ({ }; const containerStyle: CSSProperties = { - height: "100%", - width: "100%", - position: "relative", + height: '100%', + width: '100%', + position: 'relative', transform: `translate3d(0px, ${sectionScrolledPosition}px, 0px)`, transition: `all ${delay}ms ease`, }; diff --git a/src/components/FullPage/index.tsx b/src/components/FullPage/index.tsx index e4eca9c..435beb9 100644 --- a/src/components/FullPage/index.tsx +++ b/src/components/FullPage/index.tsx @@ -1,5 +1,5 @@ -export { default as Footer } from "./Footer"; -export { default as Header } from "./Header"; -export { default as ScrollToTopOnMount } from "./ScrollToTopOnMount"; -export { default as Section } from "./Section"; -export { default as SectionsContainer } from "./SectionsContainer"; +export { default as Footer } from './Footer'; +export { default as Header } from './Header'; +export { default as ScrollToTopOnMount } from './ScrollToTopOnMount'; +export { default as Section } from './Section'; +export { default as SectionsContainer } from './SectionsContainer'; diff --git a/src/components/FullPage/sectionContext.ts b/src/components/FullPage/sectionContext.ts index 83e8d04..bf831f2 100644 --- a/src/components/FullPage/sectionContext.ts +++ b/src/components/FullPage/sectionContext.ts @@ -1,11 +1,11 @@ -import { createContext } from "react"; +import { createContext } from 'react'; // 创FullPage上下文 const SectionContext = createContext({ verticalAlign: false, - sectionClassName: "Section", - sectionPaddingTop: "0", - sectionPaddingBottom: "0", + sectionClassName: 'Section', + sectionPaddingTop: '0', + sectionPaddingBottom: '0', }); export default SectionContext; diff --git a/src/components/LazyBgImage/index.tsx b/src/components/LazyBgImage/index.tsx index a00b415..788048c 100644 --- a/src/components/LazyBgImage/index.tsx +++ b/src/components/LazyBgImage/index.tsx @@ -1,6 +1,6 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef } from 'react'; -import { getRoutePrefix } from "@/utils/route"; +import { getRoutePrefix } from '@/utils/route'; const useLazyLoad = (style: React.CSSProperties) => { const imgRef = useRef(null); @@ -9,7 +9,7 @@ const useLazyLoad = (style: React.CSSProperties) => { const observer = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { - imgRef.current!.style.backgroundImage = style?.backgroundImage ?? ""; + imgRef.current!.style.backgroundImage = style?.backgroundImage ?? ''; observer.unobserve(entry.target); } } @@ -44,11 +44,7 @@ const LazyBgImage = ({ const { backgroundImage, ...otherStyle } = style; return ( -
+
{children}
); diff --git a/src/components/LazyImage/index.tsx b/src/components/LazyImage/index.tsx index 6fb9dfd..0cf7f38 100644 --- a/src/components/LazyImage/index.tsx +++ b/src/components/LazyImage/index.tsx @@ -1,6 +1,6 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef } from 'react'; -import { getRoutePrefix } from "@/utils/route"; +import { getRoutePrefix } from '@/utils/route'; const useLazyLoad = (src: string) => { const imgRef = useRef(null); diff --git a/src/components/MessageModal/index.tsx b/src/components/MessageModal/index.tsx index d9df98c..1cdcc68 100644 --- a/src/components/MessageModal/index.tsx +++ b/src/components/MessageModal/index.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import { Modal } from "antd"; -import classNames from "classnames"; -import React from "react"; +import { Modal } from 'antd'; +import classNames from 'classnames'; +import React from 'react'; export interface IMessageModalProps { title: string; @@ -25,8 +25,8 @@ export default function MessageModal({ title={title} onCancel={onCancel} onOk={onCancel} - wrapClassName={classNames("message-modal", { - "mobile-message-modal": isMobile, + wrapClassName={classNames('message-modal', { + 'mobile-message-modal': isMobile, })} > {children} diff --git a/src/components/ParallaxCarousel/index.tsx b/src/components/ParallaxCarousel/index.tsx index 6462763..2960e6a 100644 --- a/src/components/ParallaxCarousel/index.tsx +++ b/src/components/ParallaxCarousel/index.tsx @@ -1,18 +1,10 @@ -import { LeftCircleOutlined, RightCircleOutlined } from "@ant-design/icons"; -import classNames from "classnames"; -import BannerAnim from "rc-banner-anim"; -import QueueAnim from "rc-queue-anim"; -import { TweenOneGroup } from "rc-tween-one"; -import { - JSX, - memo, - ReactElement, - Suspense, - useCallback, - useMemo, - useRef, - useState, -} from "react"; +import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons'; +import classNames from 'classnames'; +import BannerAnim from 'rc-banner-anim'; +import QueueAnim from 'rc-queue-anim'; +import { TweenOneGroup } from 'rc-tween-one'; +import type { JSX, ReactElement} from 'react'; +import { memo, Suspense, useCallback, useMemo, useRef, useState } from 'react'; const Element = BannerAnim.Element; @@ -39,9 +31,7 @@ const ParallaxCarousel = function ({ }: IParallaxCarouselProps) { const [showInt, setShowInt] = useState(0); const [delay, setDelay] = useState(0); - const [imgAnim, setImgAnim] = useState< - Array<{ translateX: number[]; opacity: number[] }> - >([ + const [imgAnim, setImgAnim] = useState<{ translateX: number[]; opacity: number[] }[]>([ { translateX: [0, 300], opacity: [1, 0] }, { translateX: [0, -300], opacity: [1, 0] }, ]); @@ -94,7 +84,7 @@ const ParallaxCarousel = function ({ }, [listLength, showInt]); const getDuration = useCallback((e: any) => { - if (e.key === "map") { + if (e.key === 'map') { return 800; } return 1000; @@ -105,7 +95,7 @@ const ParallaxCarousel = function ({ key={i} style={{ // background: item.color, - height: "100%", + height: '100%', }} leaveChildHide > @@ -113,7 +103,7 @@ const ParallaxCarousel = function ({ animConfig={imgAnim} duration={getDuration} delay={[i ? 300 : delay, 0]} - ease={["easeOutCubic", "easeInQuad"]} + ease={['easeOutCubic', 'easeInQuad']} key="img-wrapper" > {renderLeftChildren(item)} @@ -124,11 +114,7 @@ const ParallaxCarousel = function ({ const rightQueueAnim = list.map((item, i) => { return ( - + {renderRightChildren(item)} @@ -140,7 +126,7 @@ const ParallaxCarousel = function ({ // style={{ background: dataArray[showInt].background }} >
({ > {rightQueueAnim} - + {showInt && ( ({ ); }; -const ParallaxCarouselSuspense = function ( - props: IParallaxCarouselProps -) { +const ParallaxCarouselSuspense = function (props: IParallaxCarouselProps) { return ( {...props} /> diff --git a/src/components/QrcodeModal/index.tsx b/src/components/QrcodeModal/index.tsx index 6828df1..89e7ca2 100644 --- a/src/components/QrcodeModal/index.tsx +++ b/src/components/QrcodeModal/index.tsx @@ -1,9 +1,9 @@ -"use client"; +'use client'; -import { Modal } from "antd"; -import classNames from "classnames"; -import QRCode from "qrcode.react"; -import React from "react"; +import { Modal } from 'antd'; +import classNames from 'classnames'; +import QRCode from 'qrcode.react'; +import React from 'react'; export interface IQrcodeModalProps { visible: boolean; @@ -12,21 +12,16 @@ export interface IQrcodeModalProps { isMobile: boolean; } -export default function QrcodeModal({ - visible, - content, - isMobile, - onCancel, -}: IQrcodeModalProps) { +export default function QrcodeModal({ visible, content, isMobile, onCancel }: IQrcodeModalProps) { return ( diff --git a/src/components/Resume/ResumeArticle/index.tsx b/src/components/Resume/ResumeArticle/index.tsx index 96f4c2c..c0c15c3 100644 --- a/src/components/Resume/ResumeArticle/index.tsx +++ b/src/components/Resume/ResumeArticle/index.tsx @@ -1,13 +1,13 @@ -"use client"; +'use client'; -import classNames from "classnames"; -import React, { useCallback, useEffect, useRef, useState } from "react"; -import Typed from "typed.js"; +import classNames from 'classnames'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import Typed from 'typed.js'; -import LazyBgImage from "@/components/LazyBgImage"; -import * as Constants from "@/constants"; -import useMobile from "@/hooks/useMobile"; -import { getRoutePrefix } from "@/utils/route"; +import LazyBgImage from '@/components/LazyBgImage'; +import * as Constants from '@/constants'; +import useMobile from '@/hooks/useMobile'; +import { getRoutePrefix } from '@/utils/route'; export default function ResumeArticle() { const isMobile = useMobile(); @@ -28,9 +28,7 @@ export default function ResumeArticle() { setOffsetTop((rect?.top || 0) + 50); }, []); - const onCubeMouseMove = useCallback< - React.MouseEventHandler - >( + const onCubeMouseMove = useCallback>( (e) => { window.requestAnimationFrame(function () { const elem = cube.current; @@ -44,12 +42,10 @@ export default function ResumeArticle() { // setRotateX(e.pageY - offsetTop); // setRotateY(e.pageX - offsetLeft); }, - [offsetLeft, offsetTop] + [offsetLeft, offsetTop], ); - const onCubeMouseLeave = useCallback< - React.MouseEventHandler - >(() => { + const onCubeMouseLeave = useCallback>(() => { // setRotateX(-25); // setRotateY(32); @@ -64,8 +60,8 @@ export default function ResumeArticle() { useEffect(() => { const typed = new Typed(el.current, { strings: [ - "努力去听风的声音，不必在意风的方向。", - "等风来不如追风去，追逐的过程就是人生的意义。", + '努力去听风的声音，不必在意风的方向。', + '等风来不如追风去，追逐的过程就是人生的意义。', ], typeSpeed: 100, backSpeed: 50, @@ -89,18 +85,18 @@ export default function ResumeArticle() {

@@ -125,7 +121,7 @@ export default function ResumeArticle() {
diff --git a/src/components/Resume/ResumeExperience/index.tsx b/src/components/Resume/ResumeExperience/index.tsx index bd299d8..59ad080 100644 --- a/src/components/Resume/ResumeExperience/index.tsx +++ b/src/components/Resume/ResumeExperience/index.tsx @@ -1,18 +1,19 @@ -"use client"; +'use client'; -import classNames from "classnames"; -import throttle from "lodash/throttle"; -import React, { ReactElement, useCallback, useRef, useState } from "react"; +import classNames from 'classnames'; +import throttle from 'lodash/throttle'; +import type { ReactElement} from 'react'; +import React, { useCallback, useRef, useState } from 'react'; -import { Carousel } from "@/components"; -import Carousel3d from "@/components/Carousel3d"; -import LazyBgImage from "@/components/LazyBgImage"; -import LazyImage from "@/components/LazyImage"; +import { Carousel } from '@/components'; +import Carousel3d from '@/components/Carousel3d'; +import LazyBgImage from '@/components/LazyBgImage'; +import LazyImage from '@/components/LazyImage'; // import ParallaxCarousel from "@/components/ParallaxCarousel"; -import * as Constants from "@/constants"; -import useMobile from "@/hooks/useMobile"; -import { isSafari } from "@/utils/platform"; -import { getRoutePrefix } from "@/utils/route"; +import * as Constants from '@/constants'; +import useMobile from '@/hooks/useMobile'; +import { isSafari } from '@/utils/platform'; +import { getRoutePrefix } from '@/utils/route'; type TExperience = (typeof Constants.Experiences)[0]; @@ -43,7 +44,7 @@ export default function ResumeExperience() { const diffTop = event.clientY - experienceRef.current!.offsetTop; setThrottleRotates(diffLeft, diffTop); }, - [isMobile, setThrottleRotates] + [isMobile, setThrottleRotates], ); const onMouseLeave = useCallback(() => { @@ -57,16 +58,12 @@ export default function ResumeExperience() { const renderExperienceImage = (experience: TExperience) => (
- +
); @@ -74,28 +71,28 @@ export default function ResumeExperience() { const { company, time, post, works } = experience; return (
{company}
{time}
{post} @@ -104,8 +101,8 @@ export default function ResumeExperience() { {works.map((work) => { return (
  • @@ -123,9 +120,9 @@ export default function ResumeExperience() { const { company } = experience; return (
    {renderExperienceImage(experience)}

    工作经历 @@ -194,19 +188,15 @@ export default function ResumeExperience() {

    {isMobile ? ( - + {renderExperiences()} ) : ( diff --git a/src/components/Resume/ResumeIndex/index.tsx b/src/components/Resume/ResumeIndex/index.tsx index 8522654..19c2b8b 100644 --- a/src/components/Resume/ResumeIndex/index.tsx +++ b/src/components/Resume/ResumeIndex/index.tsx @@ -1,13 +1,13 @@ -"use client"; +'use client'; -import classNames from "classnames"; -import React, { useEffect, useRef } from "react"; -import { ReactSVG } from "react-svg"; -import Typed from "typed.js"; +import classNames from 'classnames'; +import React, { useEffect, useRef } from 'react'; +import { ReactSVG } from 'react-svg'; +import Typed from 'typed.js'; -import * as Constants from "@/constants"; -import useMobile from "@/hooks/useMobile"; -import { getRoutePrefix } from "@/utils/route"; +import * as Constants from '@/constants'; +import useMobile from '@/hooks/useMobile'; +import { getRoutePrefix } from '@/utils/route'; export default function ResumeIndex() { const isMobile = useMobile(); @@ -39,19 +39,16 @@ export default function ResumeIndex() {

    「 @@ -120,21 +114,17 @@ export default function ResumeIndex() {

      {Constants.SocialAccounts.map((account) => { const { type, link, name, icon } = account; return (
    • - +
      • ); diff --git a/src/components/Resume/ResumeIntroduction/index.tsx b/src/components/Resume/ResumeIntroduction/index.tsx index 8b2361d..1100a4e 100644 --- a/src/components/Resume/ResumeIntroduction/index.tsx +++ b/src/components/Resume/ResumeIntroduction/index.tsx @@ -1,13 +1,13 @@ -"use client"; +'use client'; -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames'; +import React from 'react'; -import LazyBgImage from "@/components/LazyBgImage"; -import LazyImage from "@/components/LazyImage"; -import * as Constants from "@/constants"; -import useMobile from "@/hooks/useMobile"; -import { getRoutePrefix } from "@/utils/route"; +import LazyBgImage from '@/components/LazyBgImage'; +import LazyImage from '@/components/LazyImage'; +import * as Constants from '@/constants'; +import useMobile from '@/hooks/useMobile'; +import { getRoutePrefix } from '@/utils/route'; export default function ResumeIntroduction() { const isMobile = useMobile(); @@ -23,24 +23,21 @@ export default function ResumeIntroduction() {

      自我介绍 @@ -49,11 +46,11 @@ export default function ResumeIntroduction() {
        -
      1. +
      2. 对前端方面有着浓厚的兴趣， {isMobile - ? "有着多年的前端工作经验" - : "这几年来的前端工作经验，使我对前端技术的热情高涨，实战方面得到提升，希望能够在前端这条路上一直走下去"} + ? '有着多年的前端工作经验' + : '这几年来的前端工作经验，使我对前端技术的热情高涨，实战方面得到提升，希望能够在前端这条路上一直走下去'} ；
      3. @@ -64,12 +61,10 @@ export default function ResumeIntroduction() {
      4. 对工作认真负责， - {isMobile ? "能" : "就是做好自己的本职工作，"} + {isMobile ? '能' : '就是做好自己的本职工作，'} 在规定的时间内保质保量的完成任务；
        5. -
      5. +
      6. 学习能力强，前端技术主要在于自学。
      @@ -87,8 +82,8 @@ export default function ResumeIntroduction() { alt="" />
      {value} diff --git a/src/components/Resume/ResumeProject/index.tsx b/src/components/Resume/ResumeProject/index.tsx index 2d5e4e6..723da6d 100644 --- a/src/components/Resume/ResumeProject/index.tsx +++ b/src/components/Resume/ResumeProject/index.tsx @@ -1,23 +1,18 @@ -"use client"; +'use client'; -import { - FileTextOutlined, - LinkOutlined, - QrcodeOutlined, -} from "@ant-design/icons"; -import { Modal } from "antd"; -import classNames from "classnames"; -import React, { useState } from "react"; +import { FileTextOutlined, LinkOutlined, QrcodeOutlined } from '@ant-design/icons'; +import { Modal } from 'antd'; +import classNames from 'classnames'; +import React, { useState } from 'react'; -import { Carousel, MessageModal, QrcodeModal } from "@/components"; -import Carousel3d from "@/components/Carousel3d"; -import CarouselThreeD from "@/components/CarouselThreeD"; -import LazyBgImage from "@/components/LazyBgImage"; -import LazyImage from "@/components/LazyImage"; -import Swiper from "@/components/Swiper"; -import * as Constants from "@/constants"; -import useMobile from "@/hooks/useMobile"; -import { getRoutePrefix } from "@/utils/route"; +import { MessageModal, QrcodeModal } from '@/components'; +import CarouselThreeD from '@/components/CarouselThreeD'; +import LazyBgImage from '@/components/LazyBgImage'; +import LazyImage from '@/components/LazyImage'; +import Swiper from '@/components/Swiper'; +import * as Constants from '@/constants'; +import useMobile from '@/hooks/useMobile'; +import { getRoutePrefix } from '@/utils/route'; type TProject = (typeof Constants.Projects)[0]; @@ -27,35 +22,35 @@ export default function ResumeProject() { const projectsLength = Constants.Projects.length; const [isVisibleQr, setIsVisibleQr] = useState(false); - const [qrValue, setQrValue] = useState(""); + const [qrValue, setQrValue] = useState(''); const [isVisibleSummary, setIsVisibleSummary] = useState(false); - const [summary, setSummary] = useState(""); + const [summary, setSummary] = useState(''); const [isVisibleProject, setIsVisibleProject] = useState(false); const [project, setProject] = useState(); - const onOpenVisibleQr = (qrValue: string) => { - setQrValue(qrValue); + const onOpenVisibleQr = (value: string) => { + setQrValue(value); setIsVisibleQr(true); }; const onCloseVisibleQr = () => { - setQrValue(""); + setQrValue(''); setIsVisibleQr(false); }; - const onOpenVisibleSummary = (summary: string) => { - setSummary(summary); + const onOpenVisibleSummary = (value: string) => { + setSummary(value); setIsVisibleSummary(true); }; const onCloseVisibleSummary = () => { - setSummary(""); + setSummary(''); setIsVisibleSummary(false); }; - const onOpenVisibleProject = (project: TProject) => { - setProject(project); + const onOpenVisibleProject = (value: TProject) => { + setProject(value); setIsVisibleProject(true); }; @@ -64,110 +59,94 @@ export default function ResumeProject() { setIsVisibleProject(false); }; - const renderSlide = ( - project: (typeof Constants.Projects)[0], - preview?: boolean - ) => { - const { - name, - company, - link, - time, - image, - profile, - summary: projectSummary, - } = project; + const renderSlide = (currentProject: (typeof Constants.Projects)[0], preview?: boolean) => { + const { name, company, link, time, image, profile, summary: projectSummary } = currentProject; const isInMobileCarousel = !preview && isMobile; - const duties = isInMobileCarousel ? project.duties : project.duties; + const duties = isInMobileCarousel ? currentProject.duties : currentProject.duties; return (
      - isInMobileCarousel ? onOpenVisibleProject(project) : null - } + onClick={() => (isInMobileCarousel ? onOpenVisibleProject(currentProject) : null)} aria-hidden >
      {`${name}${isMobile ? "" : `(${company})`}`} + >{`${name}${isMobile ? '' : `(${company})`}`}
      {time}
      {profile}
        {duties.map((duty) => { return (
      • {duty} @@ -189,11 +168,11 @@ export default function ResumeProject() {
        • @@ -232,7 +211,7 @@ export default function ResumeProject() { }; const renderSlides = () => { - return Constants.Projects.map((project) => renderSlide(project)); + return Constants.Projects.map((currentProject) => renderSlide(currentProject)); }; return ( @@ -246,24 +225,21 @@ export default function ResumeProject() {

          项目经历 @@ -271,24 +247,20 @@ export default function ResumeProject() {

          {isMobile ? ( - + {renderSlides()} ) : ( diff --git a/src/components/Resume/ResumeSkill/index.tsx b/src/components/Resume/ResumeSkill/index.tsx index e5f99d9..a3174bf 100644 --- a/src/components/Resume/ResumeSkill/index.tsx +++ b/src/components/Resume/ResumeSkill/index.tsx @@ -1,14 +1,14 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -"use client"; -import { Popover, Progress } from "antd"; -import classNames from "classnames"; -import React from "react"; +'use client'; -import LazyBgImage from "@/components/LazyBgImage"; -import * as Constants from "@/constants"; -import useMobile from "@/hooks/useMobile"; -import { getRoutePrefix } from "@/utils/route"; +import { Popover, Progress } from 'antd'; +import classNames from 'classnames'; +import React from 'react'; + +import LazyBgImage from '@/components/LazyBgImage'; +import * as Constants from '@/constants'; +import useMobile from '@/hooks/useMobile'; +import { getRoutePrefix } from '@/utils/route'; const SkillPopover = ({ popover, @@ -23,20 +23,15 @@ const SkillPopover = ({ }) => { return (
          {popover}
          - +
          @@ -67,24 +62,21 @@ export default function ResumeSkill() {

          技能 @@ -93,23 +85,23 @@ export default function ResumeSkill() {
            - {Constants.Skills.map((skill, index) => { + {Constants.Skills.map((skill) => { const { type, popover, percent, contexts } = skill; return (
          • {`熟练度 ${percent}%`}
          ) : ( (
        • diff --git a/src/components/Resume/index.tsx b/src/components/Resume/index.tsx index 8bddd90..113aab8 100644 --- a/src/components/Resume/index.tsx +++ b/src/components/Resume/index.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -export { default as ResumeArticle } from "./ResumeArticle"; -export { default as ResumeExperience } from "./ResumeExperience"; -export { default as ResumeIndex } from "./ResumeIndex"; -export { default as ResumeIntroduction } from "./ResumeIntroduction"; -export { default as ResumeProject } from "./ResumeProject"; -export { default as ResumeSkill } from "./ResumeSkill"; +export { default as ResumeArticle } from './ResumeArticle'; +export { default as ResumeExperience } from './ResumeExperience'; +export { default as ResumeIndex } from './ResumeIndex'; +export { default as ResumeIntroduction } from './ResumeIntroduction'; +export { default as ResumeProject } from './ResumeProject'; +export { default as ResumeSkill } from './ResumeSkill'; diff --git a/src/components/Swiper/index.tsx b/src/components/Swiper/index.tsx index 8553578..aaf731d 100644 --- a/src/components/Swiper/index.tsx +++ b/src/components/Swiper/index.tsx @@ -1,43 +1,38 @@ // Import Swiper styles -import "swiper/css"; -import "swiper/css/navigation"; -import "swiper/css/pagination"; -import "swiper/css/scrollbar"; +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; +import 'swiper/css/scrollbar'; -import LeftCircleOutlined from "@ant-design/icons/lib/icons/LeftCircleOutlined"; -import RightCircleOutlined from "@ant-design/icons/lib/icons/RightCircleOutlined"; -import classNames from "classnames"; -import React, { ReactElement } from "react"; +import classNames from 'classnames'; +import type { ReactElement } from 'react'; +import React from 'react'; // import required modules -import { A11y, Navigation, Pagination, Scrollbar } from "swiper/modules"; +import { A11y, Navigation, Pagination, Scrollbar } from 'swiper/modules'; // Import Swiper React components -import { Swiper, SwiperProps, SwiperSlide } from "swiper/react"; +import type { SwiperProps} from 'swiper/react'; +import { Swiper, SwiperSlide } from 'swiper/react'; export interface ISwiperProps extends Partial { slides: ReactElement[]; slideClassName?: string; } -export default function CSwiper({ - slides, - slideClassName, - className, - ...others -}: ISwiperProps) { +export default function CSwiper({ slides, slideClassName, className, ...others }: ISwiperProps) { return ( <> {slides.map((children) => ( - + {children} ))} diff --git a/src/components/index.tsx b/src/components/index.tsx index db828ce..7c3b137 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,5 +1,5 @@ -"use client"; +'use client'; -export { default as Carousel } from "./Carousel"; -export { default as MessageModal } from "./MessageModal"; -export { default as QrcodeModal } from "./QrcodeModal"; +export { default as Carousel } from './Carousel'; +export { default as MessageModal } from './MessageModal'; +export { default as QrcodeModal } from './QrcodeModal';