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

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

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

输入rafce快速生成代码块

js 复制代码
import React from 'react'

const HomeInfo = () => {
  return (
    <div>HomeInfo</div>
  )
}

export default HomeInfo

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

js 复制代码
......
  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代码

js 复制代码
// 从 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;
相关推荐
慕y27413 分钟前
Java学习第九十三部分——RestTemplate
java·开发语言·学习
上单带刀不带妹15 分钟前
JavaScript 中的宏任务与微任务
开发语言·前端·javascript·ecmascript·宏任务·微任务
旋风菠萝16 分钟前
设计模式---单例
android·java·开发语言
啊呦.超能力25 分钟前
QT开发---图形与图像(补充)
开发语言·qt
郝学胜-神的一滴37 分钟前
应用Builder模式在C++中进行复杂对象构建
开发语言·c++·程序人生
微露清风44 分钟前
C语言习题讲解-第九讲- 常见错误分类等
c语言·开发语言
寄思~1 小时前
学习笔记:封装和单继承
开发语言·笔记·python·学习
归云鹤1 小时前
C++ 构造函数语义学
开发语言·c++
E_ICEBLUE1 小时前
Python 操作 Word 文档:主流库对比与选择指南
开发语言·经验分享·python·word·办公自动化
zwjapple1 小时前
Next.js 中使用 MongoDB 完整指南
开发语言·javascript·mongodb