在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 渲染畫布，寬度和高度占滿整個屏幕，背景透明，并設置相機的近裁剪面和遠裁剪面 */}<CanvasclassName='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 不滿足以上任何條件，返回 nullreturn null;
};// 默認導出 HomeInfo 組件
export default HomeInfo;