feat: profile

Author: wkylin

src/components/stateless/GradientAnimation/index.module.less

@@ -3,7 +3,6 @@
   background: linear-gradient(45deg, #ff6347, #ffd700, #32cd32, #1e90ff, #8a2be2);
   background-size: 400% 400%;
   background-clip: text;
-  background-clip: text;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.1;

src/components/stateless/ShootingStars/index.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState, useRef } from 'react'
+import clsx from 'clsx'
+
+interface ShootingStar {
+  id: number
+  x: number
+  y: number
+  angle: number
+  scale: number
+  speed: number
+  distance: number
+}
+
+interface ShootingStarsProps {
+  minSpeed?: number
+  maxSpeed?: number
+  minDelay?: number
+  maxDelay?: number
+  starColor?: string
+  trailColor?: string
+  starWidth?: number
+  starHeight?: number
+  className?: string
+}
+
+const getRandomStartPoint = () => {
+  const side = Math.floor(Math.random() * 4)
+  const offset = Math.random() * window.innerWidth
+
+  switch (side) {
+    case 0:
+      return { x: offset, y: 0, angle: 45 }
+    case 1:
+      return { x: window.innerWidth, y: offset, angle: 135 }
+    case 2:
+      return { x: offset, y: window.innerHeight, angle: 225 }
+    case 3:
+      return { x: 0, y: offset, angle: 315 }
+    default:
+      return { x: 0, y: 0, angle: 45 }
+  }
+}
+const ShootingStars: React.FC<ShootingStarsProps> = ({
+  minSpeed = 10,
+  maxSpeed = 30,
+  minDelay = 1200,
+  maxDelay = 4200,
+  starColor = '#9E00FF',
+  trailColor = '#2EB9DF',
+  starWidth = 10,
+  starHeight = 1,
+  className,
+}) => {
+  const [star, setStar] = useState<ShootingStar | null>(null)
+  const svgRef = useRef<SVGSVGElement>(null)
+
+  useEffect(() => {
+    const createStar = () => {
+      const { x, y, angle } = getRandomStartPoint()
+      const newStar: ShootingStar = {
+        id: Date.now(),
+        x,
+        y,
+        angle,
+        scale: 1,
+        speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,
+        distance: 0,
+      }
+      setStar(newStar)
+
+      const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay
+      setTimeout(createStar, randomDelay)
+    }
+
+    createStar()
+
+    return () => {}
+  }, [minSpeed, maxSpeed, minDelay, maxDelay])
+
+  useEffect(() => {
+    const moveStar = () => {
+      if (star) {
+        setStar((prevStar) => {
+          if (!prevStar) return null
+          const newX = prevStar.x + prevStar.speed * Math.cos((prevStar.angle * Math.PI) / 180)
+          const newY = prevStar.y + prevStar.speed * Math.sin((prevStar.angle * Math.PI) / 180)
+          const newDistance = prevStar.distance + prevStar.speed
+          const newScale = 1 + newDistance / 100
+          if (newX < -20 || newX > window.innerWidth + 20 || newY < -20 || newY > window.innerHeight + 20) {
+            return null
+          }
+          return {
+            ...prevStar,
+            x: newX,
+            y: newY,
+            distance: newDistance,
+            scale: newScale,
+          }
+        })
+      }
+    }
+
+    const animationFrame = requestAnimationFrame(moveStar)
+    return () => cancelAnimationFrame(animationFrame)
+  }, [star])
+
+  return (
+    <svg ref={svgRef} className={clsx('absolute inset-0 h-full w-full', className)}>
+      {star && (
+        <rect
+          key={star.id}
+          x={star.x}
+          y={star.y}
+          width={starWidth * star.scale}
+          height={starHeight}
+          fill="url(#gradient)"
+          transform={`rotate(${star.angle}, ${star.x + (starWidth * star.scale) / 2}, ${star.y + starHeight / 2})`}
+        />
+      )}
+      <defs>
+        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style={{ stopColor: trailColor, stopOpacity: 0 }} />
+          <stop offset="100%" style={{ stopColor: starColor, stopOpacity: 1 }} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default ShootingStars

src/pages/profile/index.jsx

@@ -1,9 +1,56 @@
 import React, { useRef } from 'react'
 import FixTabPanel from '@stateless/FixTabPanel'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
+const codeString = `const profile = {
+  name: 'wkylin.w',
+  title: 'Full-Stack Developer',
+  skills: [
+    'React', 'Vue' 'NextJS', 'Redux', 'TypeScript',
+    'MySQL', 'MongoDB', 'Docker', 'Express',
+    'GraphQL', 'Git',
+  ],
+  hardWorker: true,
+  quickLearner: true,
+  problemSolver: true,
+  yearsOfExperience: 12,
+};`
 const Profile = () => {
   const scrollRef = useRef(null)
-  return <FixTabPanel ref={scrollRef}>Profile</FixTabPanel>
+  return (
+    <FixTabPanel>
+      <div className="code-window relative h-full w-full bg-gray-900 shadow-black">
+        <div className="relative z-10 flex items-center bg-gray-800 px-4 py-2">
+          <div className="flex space-x-2">
+            <div className="h-3 w-3 rounded-full bg-red-500"></div>
+            <div className="h-3 w-3 rounded-full bg-yellow-500"></div>
+            <div className="h-3 w-3 rounded-full bg-green-500"></div>
+          </div>
+          <div className="ml-4 text-sm text-gray-400">developer.js</div>
+        </div>
+        <div className="relative z-20 font-mono text-3xl">
+          <div className="relative z-20">
+            <SyntaxHighlighter
+              language="javascript"
+              style={dracula}
+              customStyle={{
+                margin: 0,
+                lineHeight: '1',
+                padding: '1.5rem',
+                background: '#0f1117',
+                borderRadius: '0',
+                fontSize: 'clamp(0.7rem, 2vw, 1rem)',
+              }}
+              showLineNumbers={true}
+            >
+              {codeString}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      </div>
+    </FixTabPanel>
+  )
 }
 
 export default Profile