setMenuOpen(false)}
/>
);
}
/* ============================================================
Hero 区域
============================================================ */
function Hero() {
return (
{Array.from({ length: 6 }).map((_, i) => (
))}
Digital Media Portfolio
你好，我是
文雪怡
数字媒体创作者，专注于视频制作、平面设计与声音艺术。
用影像讲故事，用设计传情感，用声音造氛围。
视频剪辑
影视后期
平面设计
UI/UX
音频设计
AI 创作
);
}
/* ============================================================
视频作品卡片
============================================================ */
function VideoCard({ work, onPlay }) {
const videoRef = useRef(null);
const [hovered, setHovered] = useState(false);
const [loaded, setLoaded] = useState(false);
const [videoReady, setVideoReady] = useState(false);
const [videoError, setVideoError] = useState(false);
useEffect(() => {
if (hovered && !loaded && videoRef.current) {
videoRef.current.src = work.src;
videoRef.current.load();
setLoaded(true);
}
}, [hovered, loaded, work.src]);
useEffect(() => {
if (videoRef.current && loaded && videoReady) {
if (hovered) {
videoRef.current.play().catch(() => {});
} else {
videoRef.current.pause();
videoRef.current.currentTime = 0;
}
}
}, [hovered, loaded, videoReady]);
const handleMouseEnter = () => {
setHovered(true);
};
const handleMouseLeave = () => {
setHovered(false);
};
return (
onPlay(work)}
>
{work.title}
{work.desc}
{work.duration}
点击播放
);
}
/* ============================================================
海报作品卡片
============================================================ */
function PosterCard({ work }) {
return (
);
}
/* ============================================================
音频作品卡片
============================================================ */
function AudioCard({ work }) {
const bars = 12;
return (
{Array.from({ length: bars }).map((_, i) => (
))}
{work.title}
{work.desc}
);
}
/* ============================================================
作品分区
============================================================ */
function WorksSection({ category, works, index, onPlayVideo }) {
const { id, name, desc } = category;
const num = String(index + 1).padStart(2, '0');
const renderWorks = () => {
if (id === 'poster') {
return (
{works.map((w, i) => (
))}
);
}
if (id === 'audio') {
return (
{works.map((w, i) => (
))}
);
}
return (
{works.map((w, i) => (
))}
);
};
return (
Section {num}
{name}
{desc}
{renderWorks()}
);
}
/* ============================================================
视频弹窗
============================================================ */
function VideoModal({ work, onClose }) {
const videoRef = useRef(null);
useEffect(() => {
if (work && videoRef.current) {
videoRef.current.play().catch(() => {});
}
}, [work]);
useEffect(() => {
const handleKey = (e) => {
if (e.key === 'Escape') onClose();
};
if (work) {
document.body.style.overflow = 'hidden';
window.addEventListener('keydown', handleKey);
}
return () => {
document.body.style.overflow = '';
window.removeEventListener('keydown', handleKey);
};
}, [work, onClose]);
if (!work) return null;
return (
e.stopPropagation()}>
{work.title}
);
}
/* ============================================================
页脚
============================================================ */
function Footer() {
return (
);
}
/* ============================================================
主应用
============================================================ */
function App() {
const [activeSection, setActiveSection] = useState('top');
const [playingVideo, setPlayingVideo] = useState(null);
// 滚动联动导航高亮
useEffect(() => {
const sectionIds = ['top', ...CATEGORIES.map((c) => c.id), 'contact'];
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && entry.intersectionRatio > 0.3) {
setActiveSection(entry.target.id);
}
});
},
{ threshold: [0.3, 0.5, 0.7], rootMargin: '-100px 0px -40% 0px' }
);
sectionIds.forEach((id) => {
const el = document.getElementById(id);
if (el) observer.observe(el);
});
return () => observer.disconnect();
}, []);
// 滚动揭示动画
useEffect(() => {
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
);
reveals.forEach((el) => observer.observe(el));
return () => observer.disconnect();
}, []);
const handleNavigate = useCallback((id) => {
const el = document.getElementById(id);
if (el) {
const navHeight = 72;
const top = el.getBoundingClientRect().top + window.scrollY - navHeight + 1;
window.scrollTo({ top, behavior: 'smooth' });
}
}, []);
const handlePlayVideo = useCallback((work) => {
setPlayingVideo(work);
}, []);
const handleCloseVideo = useCallback(() => {
setPlayingVideo(null);
}, []);
return (
<>
{CATEGORIES.map((cat, idx) => (
{idx < CATEGORIES.length - 1 && }
))}
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);