3D个人简历网站 6.弹出框

在components下创建HomeInfo.jsx用于控制主页弹出框信息

输入rafce快速生成代码块

import React from 'react'const HomeInfo = () => {return (<div>HomeInfo</div>)
}export default HomeInfo

修改Home.jsx代码实现弹出简单效果

……return (// 创建一个 section 元素，宽度和高度占满整个屏幕，且采用相对定位<section className='w-full h-screen relative'><div className='absolute top-28 left-0 right-0 z-10 flex items-center justify-center'>{currentStage && <HomeInfo currentStage={currentStage} />}</div>{/* 创建 Three.js 渲染画布，宽度和高度占满整个屏幕，背景透明，并设置相机的近裁剪面和远裁剪面 */}<CanvasclassName='w-full h-screen bg-transparent'camera={{ near:0.1, far:1000 }}>
……

完善HomeInfo.jsx代码

// 从 react-router-dom 库中导入 Link 组件，用于创建导航链接
import { Link } from "react-router-dom";// 从 ../assets/icons 路径导入 arrow 图标
import { arrow } from "../assets/icons";/*** HomeInfo 组件，根据传入的 currentStage 状态渲染不同的信息内容。* @param {number} currentStage - 当前阶段的编号，用于决定渲染哪部分信息。* @returns {JSX.Element} 根据 currentStage 渲染对应的信息元素，若不符合任何条件则返回 null。*/
const HomeInfo = ({ currentStage }) => {// 当 currentStage 为 1 时，渲染自我介绍信息if (currentStage === 1)return (// 创建一个标题元素，设置响应式字体大小、居中对齐、背景样式等<h1 className='sm:text-xl sm:leading-snug text-center neo-brutalism-blue py-4 px-8 text-white mx-5'>嗨！我是{/* 使用 span 元素突出显示姓名，设置字体加粗 */}<span className='font-semibold mx-2 text-white'>90后小陈老师</span>👋<br />曾担任开发工程师，目前是一名高校教师，来自重庆</h1>);// 当 currentStage 为 2 时，渲染工作经历相关信息及查看更多链接if (currentStage === 2) {return (// 创建一个包含信息和链接的容器，使用 'info-box' 类名<div className='info-box'>{/* 创建一个段落元素，设置字体粗细、响应式字体大小和居中对齐 */}<p className='font-medium sm:text-xl text-center'>我曾在多个公司工作过，并且在工作中积累了许多技能。</p>{/* 创建一个链接，点击后导航到 '/about' 页面，设置样式类 */}<Link to='/about' className='neo-brutalism-white neo-btn'>了解更多{/* 显示箭头图标，设置宽度、高度和对象适配方式 */}<img src={arrow} alt='arrow' className='w-4 h-4 object-contain' /></Link></div>);}// 当 currentStage 为 3 时，渲染项目相关信息及查看项目链接if (currentStage === 3) {return (// 创建一个包含信息和链接的容器，使用 'info-box' 类名<div className='info-box'>{/* 创建一个段落元素，设置字体粗细、响应式字体大小和居中对齐 */}<p className='font-medium text-center sm:text-xl'>我曾在多个项目中收获颇多，项目相关信息请点击下方。</p>{/* 创建一个链接，点击后导航到 '/projects' 页面，设置样式类 */}<Link to='/projects' className='neo-brutalism-white neo-btn'>查看我的项目{/* 显示箭头图标，设置宽度、高度和对象适配方式 */}<img src={arrow} alt='arrow' className='w-4 h-4 object-contain' /></Link></div>);}// 当 currentStage 为 4 时，渲染商务合作相关信息及联系链接if (currentStage === 4) {return (// 创建一个包含信息和链接的容器，使用 'info-box' 类名<div className='info-box'>{/* 创建一个段落元素，设置字体粗细、响应式字体大小和居中对齐 */}<p className='font-medium sm:text-xl text-center'>{/* Need a project done or looking for a dev? <br/> I'm just a few keystrokes away */}如果你有不错的项目，希望商务合作<br/> 点击下方联系我</p>{/* 创建一个链接，点击后导航到 '/contact' 页面，设置样式类 */}<Link to='/contact' className='neo-brutalism-white neo-btn'>联系我{/* 显示箭头图标，设置宽度、高度和对象适配方式 */}<img src={arrow} alt='arrow' className='w-4 h-4 object-contain' /></Link></div>);}// 若 currentStage 不满足以上任何条件，返回 nullreturn null;
};// 默认导出 HomeInfo 组件
export default HomeInfo;