源代码仓库
重定向（CloudFlare部署，检查一下自己的网行不行）
开发过程经验
本项目用的是ChatGPT+VSCode内置AITRAE 开发。前者负责搭建总的项目结构，我们只需要给它对应的技术框架以及一些基本的功能它就可以自动的生成项目文件；后者就主要负责细化功能设置网页样式等等，你只需要输入你的需求它就可以自动识别项目文件进行更改。当然，你全程用TRAE写项目也是可以的，就是有时候会突然卡死或者应用不了；全程使用ChatGPT 就不太建议了，反正我用的时候它有时会吞掉我之前的功能代码，记忆性有点不行。当然，目前来看AI并不是万能的，有时候怎么改也改不对，除了保持耐心之外，我们还需要有一点看懂代码的基础，以便在AI改不动是我们自己上。
另外，我把之前写的两篇文章以及部分剑来小说放在了网站上，以后发的文章大概率也会在网站上更新，如果想看的话可以去我的网站换个心情。如果有机会的话，我以后会做个后端把我的一些实践项目放上来应用，比如一些模型什么的，有兴趣的不妨留个标记。
核心功能
1.主题切换
本项目使用了五个主题，分别是***【武侠水墨】、【赛博朋克】、【自然风光】、【泪如雨崩】、【这是我家】***。可以在右上角切换主题，改变观看体验：
这个纯黑白：
这个比较闪：
这个比较简约：
这个比较抑郁：
这个比较可爱：
还有一些细节各位可以自行探索。实现这个功能最重要的就是设置主题颜色的全局变量，其他组件的样式中调用这些颜色样式就可以了。
2.归档
只是一个下拉列表：
3.写文章
写文章界面是加了很多功能的，图中的功能按钮都可以在使用。另外为了方便，在CSDN中的写文章界面一键复制粘贴过来也是可以直接继承格式的（但是图片得一个个粘贴过来）。不过目前是只能我存在网站上，你们只能存在本地保存为JSON文件格式，以后估计也是我一个人发
4.关于
这个界面也比较简单，就一个主题轮播。
5.粒子
背景图之上会有一个个白点，会随着时间变化位置。在鼠标保持移动并且移动到粒子附近的时候，粒子会四散而开，，并且发亮（效果较弱）。
// src/components/BackgroundParticles.jsx
import React, { useState, useEffect, useRef } from "react";
const BackgroundParticles = () => {
const [mousePosition, setMousePosition] = useState({ x: -1000, y: -1000 });
const [isMouseActive, setIsMouseActive] = useState(false);
const containerRef = useRef(null);
// 预计算粒子的动画参数，避免每次渲染重新计算
const particles = useRef(
Array.from({ length: 70 }, (_, i) => {
const size = Math.random() * 4 + 4;
const left = Math.random() * 100;
const top = Math.random() * 100;
const opacity = Math.random() * 0.5 + 0.5;
const duration = Math.random() * 7 + 5; // 2-7秒，更快！
const delay = Math.random() * 1; // 0-1秒延迟
// 预计算动画关键帧的偏移量，确保每次渲染都一致
const offsets = {
x25: (Math.random() - 0.5) * 15,
y25: (Math.random() - 0.5) * 15,
x50: (Math.random() - 0.5) * 10,
y50: (Math.random() - 0.5) * 10,
x75: (Math.random() - 0.5) * 15,
y75: (Math.random() - 0.5) * 15
};
return {
id: i,
size,
left,
top,
opacity,
duration,
delay,
offsets
};
})
).current;
// 鼠标移动事件处理
useEffect(() => {
const handleMouseMove = (e) => {
if (containerRef.current) {
const rect = containerRef.current.getBoundingClientRect();
// 转换为相对于容器的百分比坐标
const xPercent = ((e.clientX - rect.left) / rect.width) * 100;
const yPercent = ((e.clientY - rect.top) / rect.height) * 100;
setMousePosition({ x: xPercent, y: yPercent });
setIsMouseActive(true);
// 重置鼠标活动状态
clearTimeout(window.mouseTimeout);
window.mouseTimeout = setTimeout(() => {
setIsMouseActive(false);
setMousePosition({ x: -1000, y: -1000 });
}, 2000);
}
};
window.addEventListener('mousemove', handleMouseMove);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
clearTimeout(window.mouseTimeout);
};
}, [containerRef]);
return (
<div
ref={containerRef}
style={{
position: "fixed",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
zIndex: 0,
overflow: "hidden",
background: "transparent",
margin: 0,
padding: 0
}}
>
{particles.map(particle => {
// 计算粒子到鼠标的距离
const dx = particle.left - mousePosition.x;
const dy = particle.top - mousePosition.y;
const distance = Math.sqrt(dx * dx + dy * dy);
// 计算扰动强度（距离越近，扰动越强）
const maxDistance = 10; // 扩大影响范围
const isAffected = isMouseActive && distance < maxDistance;
let scale = 1;
let glowIntensity = 1;
if (isAffected) {
// 扰动强度随距离衰减
const intensity = 1 - (distance / maxDistance);
scale = 1 + intensity * 1.2; // 最大放大到2.2倍
glowIntensity = 1 + intensity * 9; // 最大发光强度增加8倍
}
// 计算排斥偏移量
let repulsionOffsetX = 0;
let repulsionOffsetY = 0;
if (isAffected) {
const intensity = 1 - (distance / maxDistance);
const angle = Math.atan2(dy, dx);
const repulsionDistance = intensity * 8; // 大幅增强排斥距离
repulsionOffsetX = Math.cos(angle) * repulsionDistance;
repulsionOffsetY = Math.sin(angle) * repulsionDistance;
}
return (
<div
key={particle.id}
style={{
position: "absolute",
width: `${particle.size}px`,
height: `${particle.size}px`,
left: `${particle.left}%`,
top: `${particle.top}%`,
background: "rgba(255, 255, 255, 0.8)",
borderRadius: "50%",
opacity: particle.opacity,
pointerEvents: "none",
zIndex: 0,
boxShadow: `0 0 ${particle.size * 2 * glowIntensity}px rgba(255, 255, 255, ${0.8 * glowIntensity})`,
// 基础浮动动画 + 鼠标扰动偏移
transform: `scale(${scale})`,
animation: `float${particle.id} ${particle.duration}s ease-in-out infinite`,
animationDelay: `${particle.delay}s`,
// 专门的排斥动画
'--repel-x': `${repulsionOffsetX}px`,
'--repel-y': `${repulsionOffsetY}px`,
// 鼠标扰动效果 - 更快响应
transition: 'transform 0.1s ease-out, box-shadow 0.1s ease-out',
}}
/>
);
})}
{/* CSS动画定义 - 使用预计算的固定值，并添加排斥效果 */}
<style>
{`
${particles.map(particle => `
@keyframes float${particle.id} {
0% {
transform: translate(var(--repel-x, 0), var(--repel-y, 0)) translate(0, 0) scale(1);
}
25% {
transform: translate(var(--repel-x, 0), var(--repel-y, 0)) translate(${particle.offsets.x25}px, ${particle.offsets.y25}px) scale(1.05);
}
50% {
transform: translate(var(--repel-x, 0), var(--repel-y, 0)) translate(${particle.offsets.x50}px, ${particle.offsets.y50}px) scale(1);
}
75% {
transform: translate(var(--repel-x, 0), var(--repel-y, 0)) translate(${particle.offsets.x75}px, ${particle.offsets.y75}px) scale(0.95);
}
100% {
transform: translate(var(--repel-x, 0), var(--repel-y, 0)) translate(0, 0) scale(1);
}
}
`).join('')}
`}
</style>
{/* 调试信息 */}
<div style={{
position: "absolute",
top: "10px",
left: "10px",
color: "white",
background: "rgba(255,255,255,1)",
padding: "5px 10px",
borderRadius: "5px",
fontSize: "12px"
}}>
快速动画 + 真正排斥效果
{isMouseActive && " - 鼠标活跃中"}
</div>
</div>
);
};
export default BackgroundParticles;终
差不多就这么多了，第一次用AI开发还是比较震撼的。后续会有更多的功能开发出来，各位敬请期待，有建议可以评论一下。