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;
相关推荐
secondyoung8 分钟前
Markdown转换为Word:Pandoc模板使用指南
开发语言·经验分享·笔记·c#·编辑器·word·markdown
lly2024069 分钟前
Django ORM - 聚合查询
开发语言
知识分享小能手31 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
胖咕噜的稞达鸭1 小时前
算法入门:专题攻克主题一---双指针(2)快乐数 呈最多水的容器
开发语言·数据结构·c++·算法
沐知全栈开发1 小时前
Perl 简介
开发语言
-雷阵雨-2 小时前
数据结构——优先级队列(堆)
java·开发语言·数据结构·intellij-idea
步行cgn2 小时前
Java项目包结构设计与功能划分详解
java·开发语言·架构·mvc
ss2732 小时前
手写MyBatis第92弹:SqlSource体系、SqlNode树与Trim标签实现原理全揭秘
java·开发语言
2501_915909062 小时前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
charlie1145141913 小时前
精读C++设计模式20 —— 结构型设计模式:桥接模式
开发语言·c++·学习·设计模式·桥接模式·c++23·概论