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;
相关推荐
Wild_Pointer.6 分钟前
Qt Creator:避免QRunnable和QObject多重继承
开发语言·qt
三无少女指南6 分钟前
关于JVM调优,我想聊聊数据和耐心
java·开发语言·jvm
濑户川12 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
南棱笑笑生44 分钟前
20251027在Ubuntu20.04.6上编译AIO-3576Q38开发板的Buildroot系统解决qt5webengine编译异常的问题
开发语言·qt·rockchip
沅霖1 小时前
android kotlin语言中的协程
android·开发语言·kotlin
xiaobobo33301 小时前
c语言中const关键字和枚举enum的新认识
c语言·开发语言·const·enum
葛小白11 小时前
C#数据类型:List
开发语言·c#
VT.馒头1 小时前
【力扣】2725. 间隔取消
javascript·leetcode·1024程序员节
合作小小程序员小小店1 小时前
web开发,在线%蛋糕销售%管理系统,基于asp.net,webform,c#,sql server
开发语言·后端·asp.net·html5·教育电商
小龙报1 小时前
《算法通关指南数据结构和算法篇(3)--- 栈和stack》
开发语言·数据结构·c++·算法·创业创新·学习方法·visual studio