Merge pull request #284 from kuizuo/skill-section

refactor: optimize project section

blog/reference/2023 · 谈谈职业规划.md

@@ -8,7 +8,7 @@ keywords: [年终总结]
 draft: true
 ---
 
-又到了年底写年终总结的时候了，说实话今年感觉没什么内容可写。上半年我已经写了 [叙一名转专业+休学的大学生经历](/blog/narrate-a-college-student)，而下半年我忙于学校课程 + 课程重修，加上处于“监视”下，过得其实还有点浑浑噩噩。
+又到了年底写年终总结的时候了，说实话今年感觉没什么内容可写。上半年发生了比较多的事不方便叙述，而下半年我忙于学校课程 + 课程重修，加上处于“监视”下，过得其实还有点浑浑噩噩。
 
 不过如今都大四了，也确实是要考虑实习的事了。我想结合我自身情况，谈谈我是怎么看待工作或者往远点说职业规划方面的想法。
 

docusaurus.config.ts

@@ -61,18 +61,6 @@ const config: Config = {
           position: 'right',
           to: 'project',
         },
-        {
-          label: '网站',
-          position: 'right',
-          items: [
-            { label: 'js反混淆', to: 'https://js-deobfuscator.kuizuo.cn' },
-            { label: 'cyberChef', to: 'https://gchq.github.io/CyberChef' },
-            { label: 'api服务', to: 'https://api.kuizuo.cn' },
-            { label: '便民服务', to: 'https://service.kuizuo.cn' },
-            { label: 'OCR识别验证码', to: 'http://ocr.kuizuo.cn' },
-            { label: '站点监控', to: 'https://uptime.kuizuo.cn' },
-          ],
-        },
         {
           label: '更多',
           position: 'right',
@@ -113,6 +101,16 @@ const config: Config = {
             { label: 'Discord', href: social.discord.href },
           ],
         },
+        {
+          title: '网站',
+          items: [
+            { label: 'js反混淆', to: 'https://js-deobfuscator.kuizuo.cn' },
+            { label: 'cyberChef', to: 'https://gchq.github.io/CyberChef' },
+            { label: 'api服务', to: 'https://api.kuizuo.cn' },
+            { label: '便民服务', to: 'https://service.kuizuo.cn' },
+            { label: '站点监控', to: 'https://uptime.kuizuo.cn' },
+          ],
+        },
         {
           title: '更多',
           items: [

package.json

@@ -50,6 +50,7 @@
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.4",
     "react-popper": "^2.3.0",
     "sass": "^1.72.0"
   },

src/css/custom.scss

@@ -333,3 +333,59 @@ div[class^='announcementBar_'] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.integrations-visual_circle__v1KHU[data-color='blue'] {
+  --stroke-color: #149eca;
+  --stroke-fade: 46%;
+  --stroke-angle: -50deg;
+  top: -70px;
+  left: -70px;
+}
+
+.integrations-visual_circle__v1KHU[data-color='blue'] .integrations-visual_pulse__BBsoi {
+  background: #149eca15;
+}
+
+.integrations-visual_circle__v1KHU[data-color='green'] {
+  --stroke-color: #00dc82;
+  --stroke-fade: 60%;
+  --stroke-angle: 180deg;
+  bottom: -100px;
+}
+
+.integrations-visual_circle__v1KHU[data-color='green'] .integrations-visual_pulse__BBsoi {
+  background: #00dc8215;
+}
+
+.integrations-visual_circle__v1KHU[data-color='red'] {
+  --stroke-color: #ff825a;
+  --stroke-fade: 70%;
+  --stroke-angle: 90deg;
+  top: 50%;
+  transform: translateY(-50%);
+  right: -108px;
+}
+
+.integrations-visual_circle__v1KHU[data-color='red'] .integrations-visual_pulse__BBsoi {
+  background: #ff825a15;
+}
+
+.integrations-visual_bg__J02lA {
+  position: absolute;
+  width: calc(100% - 1px);
+  height: calc(100% - 1px);
+  border-radius: 9999px;
+}
+
+.integrations-visual_icon__fGYQO {
+  --rotate: 0deg;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  border-radius: 9999px;
+  position: absolute;
+  box-shadow: var(--ds-shadow-border-small);
+  will-change: offset-path, offset-distance, offset-rotate, transform, box-shadow;
+  contain: size;
+  contain-intrinsic-height: var(--circle-size);
+  content-visibility: auto;
+}

src/pages/_components/BlogSection/index.tsx

@@ -64,7 +64,7 @@ export default function BlogSection(): JSX.Element {
   })
 
   if (blogData.postNum === 0) {
-    return <>作者还没有写过博客哦</>
+    return <>作者还没开始写博文哦...</>
   }
 
   return (

src/pages/_components/Hero/index.tsx

@@ -1,15 +1,12 @@
 import React from 'react'
-import { Variants, motion, useScroll, useTransform } from 'framer-motion' // Import motion from framer-motion
+import { Variants, motion } from 'framer-motion' // Import motion from framer-motion
 
 import Translate from '@docusaurus/Translate'
 
 import HeroMain from './img/hero_main.svg'
 
 import styles from './styles.module.scss'
 import SocialLinks from '@site/src/components/SocialLinks'
-import skills from '@site/data/skills'
-
-import { Icon } from '@iconify/react'
 
 const variants: Variants = {
   visible: i => ({
@@ -26,47 +23,6 @@ const variants: Variants = {
   hidden: { opacity: 0, y: 30 },
 }
 
-function Skills() {
-  const { scrollYProgress } = useScroll()
-
-  // 往下滚动 元素向上移动
-  const y1 = useTransform(scrollYProgress, [0, 1], ['0%', '-500%'], {
-    clamp: false,
-  })
-
-  // 往下滚动 元素向下移动
-  const y2 = useTransform(scrollYProgress, [0, 1], ['0%', '500%'], {
-    clamp: false,
-  })
-
-  return (
-    <>
-      {skills.map((skill, index) => {
-        const yValue = index % 2 === 0 ? y1 : y2
-
-        return (
-          <motion.div
-            className={styles.box}
-            initial={{ opacity: 0.01, y: 50 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{
-              duration: Math.random() * 2 + 0.5,
-              delay: 0.5,
-            }}
-            style={{
-              ...skill.style,
-              y: yValue,
-            }}
-            key={index}
-          >
-            <Icon icon={skill.icon}></Icon>
-          </motion.div>
-        )
-      })}
-    </>
-  )
-}
-
 function Circle() {
   return <div className={styles.circle} />
 }
@@ -130,7 +86,6 @@ export default function Hero() {
         </motion.div>
       </div>
       <motion.div className={styles.background}>
-        <Skills />
         <HeroMain />
         <Circle />
       </motion.div>

src/pages/_components/ProjectSection/index.tsx

@@ -1,85 +1,29 @@
-import React, { useLayoutEffect, useRef } from 'react'
+import React from 'react'
 import clsx from 'clsx'
+import Marquee from 'react-fast-marquee'
 import { Project, projects } from '@site/data/projects'
 import Translate from '@docusaurus/Translate'
 import styles from './styles.module.scss'
-import {
-  motion,
-  useAnimationFrame,
-  useMotionValue,
-  useScroll,
-  useSpring,
-  useTransform,
-  useVelocity,
-  wrap,
-} from 'framer-motion'
 import SectionTitle from '../SectionTitle'
+import { useColorMode } from '@docusaurus/theme-common'
 
 const removeHttp = (url: string) => {
   return url.replace(/(^\w+:|^)\/\//, '')
 }
 
-const defaultVelocity = 0.4
 const showProjects = projects.filter(i => i.preview)
 
 const Slider = ({ items }: { items: Project[] }) => {
-  // 初始速度
-  let baseVelocity = -defaultVelocity
-  // 移动方向
-  const directionFactor = useRef<number>(1)
-
-  const baseX = useMotionValue(0)
-  const { scrollY } = useScroll()
-  const scrollVelocity = useVelocity(scrollY)
-  const smoothVelocity = useSpring(scrollVelocity, {
-    damping: 50,
-    stiffness: 400,
-  })
-  const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 6], {
-    clamp: false,
-  })
-
-  useLayoutEffect(() => {
-    baseX.set(6)
-  })
-
-  const x = useTransform(baseX, v => `${wrap(10, -3 * showProjects.length, v)}%`)
-
-  useAnimationFrame((time, delta) => {
-    let moveBy = directionFactor.current * baseVelocity * (delta / 1000)
-
-    // if (velocityFactor.get() < 0) {
-    //   directionFactor.current = -1
-    // } else if (velocityFactor.get() > 0) {
-    //   directionFactor.current = 1
-    // }
-
-    moveBy += directionFactor.current * moveBy * velocityFactor.get()
-
-    // 重置进度
-    if (baseX.get() <= -3 * showProjects.length) {
-      baseX.set(11)
-    }
-
-    baseX.set(baseX.get() + moveBy)
-  })
-
-  const handleHoverStart = () => {
-    baseX.stop()
-    baseVelocity = 0
-  }
-
-  const handleHoverEnd = () => {
-    baseVelocity = -defaultVelocity
-  }
+  const { isDarkTheme } = useColorMode()
 
   return (
-    <div className={styles.slider} style={{ width: `${showProjects.length * 100}%` }}>
-      <motion.div
-        className={styles['slide-track']}
-        style={{ x }}
-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
+    <div className={styles.slider}>
+      <Marquee
+        pauseOnHover
+        gradient
+        gradientColor={!isDarkTheme ? '#f8fafc' : '#18181baa'}
+        gradientWidth={100}
+        className={styles.slideTrack}
       >
         {items.map((item, index) => {
           return (
@@ -94,7 +38,7 @@ const Slider = ({ items }: { items: Project[] }) => {
             </div>
           )
         })}
-      </motion.div>
+      </Marquee>
     </div>
   )
 }
@@ -106,11 +50,7 @@ export default function ProjectSection() {
         <Translate id="homepage.project.title">项目展示</Translate>
       </SectionTitle>
       <div className={styles.content}>
-        <div style={{ overflow: 'hidden' }}>
-          <Slider items={showProjects}></Slider>
-        </div>
-        <div className={clsx(styles.gradientBox, styles.leftBox)} />
-        <div className={clsx(styles.gradientBox, styles.rightBox)} />
+        <Slider items={showProjects}></Slider>
       </div>
     </section>
   )