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

3D个人简历网站 6.弹出框
  
在components下创建HomeInfo.jsx用于控制主页弹出框信息

输入rafce快速生成代码块

1. import React from 'react'
3. const HomeInfo = () => {
4.   return (
5.     <div>HomeInfo</div>
6.   )
7. }
9. export default HomeInfo

复制代码

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

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

复制代码

完善HomeInfo.jsx代码
[code]// 从 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>
        

继续阅读请点击广告