feat: 半成品

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:prettier/recommended",
+    "next/core-web-vitals"
+  ],
+  "rules": {
+    "prettier/prettier": ["warn", { "endOfLine": "auto" }],
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-unsafe-argument": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "prefer-const": "warn",
+    "react-hooks/exhaustive-deps": "off"
+  }
+}

.github/workflows/gitleaks.yml

@@ -0,0 +1,21 @@
+name: Gitleaks Scan
+
+on:
+  push:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  gitleaks:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Run Gitleaks
+        uses: gitleaks/gitleaks-action@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+certificates
+.eslintcache
+

.husky/commit-msg

@@ -0,0 +1,36 @@
+#!/usr/bin/env sh
+# 读取提交信息文件的路径
+COMMIT_MSG_FILE="$1"
+
+# 使用 commitlint 校验提交信息
+pnpm exec commitlint --edit $COMMIT_MSG_FILE
+if [ $? -ne 0 ]; then
+  echo "Commit message linting failed."
+  exit 1
+fi
+
+# 定义 emoji 和 type 的映射关系
+feat="🎉"
+optimize="✨"
+fix="🔧"
+revert="⏪️"
+
+# 从提交信息中提取类型（假设格式为 "type(scope): description"）
+TYPE=$(grep -oE '^[a-z]+' $COMMIT_MSG_FILE)
+
+# 根据类型匹配 emoji 表情
+case "$TYPE" in
+  feat)     EMOJI=$feat ;;
+  optimize) EMOJI=$optimize ;;
+  fix)      EMOJI=$fix ;;
+  revert)   EMOJI=$revert ;;
+esac
+
+# 读取原始提交信息
+COMMIT_MSG=$(cat $COMMIT_MSG_FILE)
+
+# 添加 emoji 到提交信息前面
+NEW_COMMIT_MSG="$EMOJI $COMMIT_MSG"
+
+# 将更新后的提交信息写回文件
+echo "$NEW_COMMIT_MSG" > $COMMIT_MSG_FILE

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+pnpm exec lint-staged

.ncurc.json

@@ -0,0 +1,4 @@
+{
+  "upgrade": true,
+  "reject": ["eslint"]
+}

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*@nextui-org/*

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

app/components/Profile.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { SocialLinkDock } from "@/components/SocialLinkDock";
+import { profileInfo } from "@/constants/constants";
+import { Card, Image } from "@nextui-org/react";
+import { useEffect, useState } from "react";
+
+export default function Profile() {
+  const descriptionText = profileInfo.description;
+  const [typedText, setTypedText] = useState("");
+
+  useEffect(() => {
+    const startTypingAnimation = () => {
+      let i = 0;
+      const typingInterval = setInterval(() => {
+        if (i <= descriptionText.length) {
+          setTypedText(descriptionText.slice(0, i));
+          i++;
+        } else {
+          clearInterval(typingInterval);
+        }
+      }, 100);
+    };
+
+    const animationInterval = setInterval(startTypingAnimation, 5000);
+    startTypingAnimation();
+
+    return () => clearInterval(animationInterval);
+  }, []);
+
+  return (
+    <Card className="my-10 w-full max-w-sm bg-white/60 p-6 backdrop-blur-lg">
+      <div className="flex flex-col items-center justify-center space-y-4">
+        <Image
+          src={profileInfo.portraitPath}
+          alt="portrait"
+          width={128}
+          height={128}
+          className="rounded-full border-2 border-white/50 shadow-lg"
+        />
+        <h1 className="text-2xl font-bold text-gray-600">{profileInfo.name}</h1>
+        <p className="h-8 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-xl text-transparent">
+          {typedText}
+        </p>
+        <SocialLinkDock />
+      </div>
+    </Card>
+  );
+}

app/components/Projects.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { projectsInfo } from "@/constants/constants";
+import { Card, Image, Link } from "@nextui-org/react";
+import { motion } from "framer-motion";
+import { Github, Globe } from "lucide-react";
+
+export default function Projects() {
+  return (
+    <div className="my-10 grid w-full max-w-7xl grid-cols-5 gap-6">
+      {Object.values(projectsInfo).map((project, index) => (
+        <motion.div key={index} whileHover={{ scale: 1.05 }}>
+          <Card className="group bg-white/80 p-6 backdrop-blur-lg">
+            <div className="flex flex-col items-center text-center">
+              <Image
+                src={project.logoPath}
+                alt={`${project.name} Logo`}
+                width={60}
+                height={60}
+                className="mb-4 rounded-full"
+              />
+              <h2 className="mb-2 text-lg font-semibold text-gray-800">
+                {project.name}
+              </h2>
+              <p className="mb-4 text-sm text-gray-600">
+                {project.description}
+              </p>
+            </div>
+            <div className="flex justify-center space-x-4 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Link href={project.website} target="_blank">
+                <Globe className="text-gray-600 hover:text-gray-900" />
+              </Link>
+              <Link href={project.github} target="_blank">
+                <Github className="text-gray-600 hover:text-gray-900" />
+              </Link>
+            </div>
+          </Card>
+        </motion.div>
+      ))}
+    </div>
+  );
+}

app/components/ProjectsBeam.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { AnimatedBeam } from "@/components/ui/animated-beam";
+import { projectsInfo } from "@/constants/constants";
+import { cn } from "@/lib/utils";
+import { Card } from "@nextui-org/react";
+import Image from "next/image";
+import { forwardRef, useRef } from "react";
+
+const Circle = forwardRef<
+  HTMLDivElement,
+  { className?: string; projectName: keyof typeof projectsInfo }
+>(({ className, projectName }, ref) => {
+  const project = projectsInfo[projectName];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "z-10 flex size-16 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+        className,
+      )}
+    >
+      <Image
+        src={project.logoPath}
+        alt={project.name}
+        width={32}
+        height={32}
+        className="size-full object-contain"
+      />
+    </div>
+  );
+});
+
+Circle.displayName = "Circle";
+
+export default function ProjectsBeam() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const leftTopRef = useRef<HTMLDivElement>(null);
+  const leftBottomRef = useRef<HTMLDivElement>(null);
+  const middleRef = useRef<HTMLDivElement>(null);
+  const rightTopRef = useRef<HTMLDivElement>(null);
+  const rightBottomRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Card
+      className="relative flex h-[350px] w-[600px] items-center justify-center overflow-hidden bg-background p-10"
+      ref={containerRef}
+    >
+      <Circle
+        ref={middleRef}
+        className="absolute left-1/2 top-1/2 size-16 -translate-x-1/2 -translate-y-1/2"
+        projectName="Seaverse"
+      />
+      <div className="flex size-full flex-col items-stretch justify-between">
+        <div className="flex flex-row items-center justify-between">
+          <Circle ref={leftTopRef} projectName="Poseidon" />
+          <Circle ref={rightTopRef} projectName="SeaEye" />
+        </div>
+        <div className="flex flex-row items-center justify-between">
+          <Circle ref={leftBottomRef} projectName="Trident" />
+          <Circle ref={rightBottomRef} projectName="Tsunami" />
+        </div>
+      </div>
+      <AnimatedBeam
+        containerRef={containerRef}
+        fromRef={leftTopRef}
+        toRef={middleRef}
+        curvature={-50}
+      />
+      <AnimatedBeam
+        containerRef={containerRef}
+        fromRef={leftBottomRef}
+        toRef={middleRef}
+        curvature={50}
+      />
+      <AnimatedBeam
+        containerRef={containerRef}
+        fromRef={rightTopRef}
+        toRef={middleRef}
+        curvature={-50}
+        reverse
+      />
+      <AnimatedBeam
+        containerRef={containerRef}
+        fromRef={rightBottomRef}
+        toRef={middleRef}
+        curvature={50}
+        reverse
+      />
+    </Card>
+  );
+}

app/components/SocialLinkDock.tsx

@@ -0,0 +1,65 @@
+import { buttonVariants } from "@/components/ui/button";
+import { Dock, DockIcon } from "@/components/ui/dock";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { profileInfo } from "@/constants/constants";
+import { cn } from "@/lib/utils";
+import { Github, Send, Twitter } from "lucide-react";
+import Link from "next/link";
+
+const SOCIAL_LINKS = [
+  {
+    name: "GitHub",
+    url: profileInfo.github,
+    icon: Github,
+  },
+  {
+    name: "Twitter",
+    url: profileInfo.twitter,
+    icon: Twitter,
+  },
+  {
+    name: "Telegram",
+    url: profileInfo.telegram,
+    icon: Send,
+  },
+];
+
+export function SocialLinkDock() {
+  return (
+    <TooltipProvider>
+      <Dock
+        className="rounded-full bg-white/60 p-2 backdrop-blur-lg"
+        magnification={50}
+        direction="middle"
+      >
+        {SOCIAL_LINKS.map((social) => (
+          <DockIcon key={social.name}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href={social.url}
+                  target="_blank"
+                  aria-label={social.name}
+                  className={cn(
+                    buttonVariants({ variant: "ghost", size: "icon" }),
+                    "size-10 rounded-full",
+                  )}
+                >
+                  <social.icon className="size-6" />
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{social.name}</p>
+              </TooltipContent>
+            </Tooltip>
+          </DockIcon>
+        ))}
+      </Dock>
+    </TooltipProvider>
+  );
+}