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 渲染画布，宽度和高度占满整个屏幕，背景透明，
          并设置相机的近裁剪面和远裁剪面 */}
      <Canvas
        className='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 不满足以上任何条件，返回 null
  return null;
};

// 默认导出 HomeInfo 组件
export default HomeInfo;