当前位置：首页 > news >正文

Three.js + React 实战系列-3D 个人主页：完成 Navbar 导航栏组件

news 来源：原创 2025/8/3 15:30:06

在上一节中，我们搭建了项目的基础结构，搭建好了项目框架。

本节我们将继续完善页面结构，完成第一个视觉组件 —— Navbar 导航栏 ✅

前置准备：

✅下载静态资源在根目录下 (src 同级)
谷歌云盘地址

🎥 02 · 完成 Navbar 导航栏组件

📁 组件结构规划

我们将导航栏作为一个单独组件，放置在 src/sections/Navbar.jsx：

src/
├── sections/
│   └── Navbar.jsx
├── App.jsx
└── main.jsx

🧱 Navbar 组件内容

我们的导航栏会固定在顶部，具备以下功能：

左侧 Logo
右侧菜单项（Home、Work、About、Contact ）
响应式布局，适配不同屏幕响应式布局，适配不同屏幕

💻 实现代码（使用 Tailwind CSS）

📄 src/components/Navbar.jsx

import React, { useState } from 'react'
import { navLinks } from '../constants/index.js'const Navbar = () => {const [isOpen, setIsOpen] = useState(false)const toggleMenu = () => setIsOpen( (prevIsOpen) => !prevIsOpen );const NavItems = () => {return (<div><ul className='nav-ul'>{ navLinks.map(({ id, href, name }) => (<li key={id} className='nav-li'><a href={href} className="nav-li_a" onClick={() => {}}> {name}</a></li>))}</ul></div>)}return (<header className='fixed top-0 left-0 right-0 z-50 bg-black/90'><div className="max-w-7xl mx-auto"><div className="flex justify-between items-center py-5 mx-auto c-space"><a href="/" className="text-neutral-400 font-bold text-xl hover:text-white transition-colors">Sunbyte</a><button onClick={toggleMenu}  className="text-neutral-400 hover:text-white focus:outline-none sm:hidden flex" aria-label="Toggle menu"><img src={isOpen ? "assets/close.svg" : "assets/menu.svg"} alt="toggle" className="w-6 h-6" /></button><nav className='sm:flex hidden'><NavItems /></nav></ div></div><div className={`nav-sidebar ${isOpen ? 'max-h-screen':'max-h-0'}`}><nav className='p-5'><NavItems /></nav></div></header>) 
}export default Navbar

📄 src/App.jsx

import React from 'react'
import Navbar from './sections/Navbar'const App = () => {return (<main className='max-w-7xl mx-auto'><Navbar /></main>)
}export default App

🎨 效果预览

大屏幕效果

小屏幕效果 ## ⏭ 下一节预告

下一节我们将进入本次课程最复杂的页面——Hero.jsx！

敬请期待 🎬

Three.js + React 实战系列-3D 个人主页：完成 Navbar 导航栏组件

在上一节中，我们搭建了项目的基础结构，搭建好了项目框架。本节我们将继续完善页面结构，完成第一个视觉组件 —— Navbar 导航栏 ✅ 前置准备： ✅下载静态资源在根目录下 (src 同级)谷歌云盘地址 🎥 02 完成 Navba…...

编程日记 2025/8/3 15:30:06

游戏引擎学习第238天:让 OpenGL 使用我们的屏幕坐标

回顾并为今天的内容做准备我们已经完成了硬件显示的实现，现在通过GPU来显示游戏。原本以为这会花费很长时间，但结果实际所需的时间并不多。因此，我们现在有了进展，但接下来应该做什么还不确定。虽然有很多事情可以做&#xff0c…...

编程日记 2025/7/31 1:09:45

go+mysql+cocos实现游戏搭建

盲目的学了一段时间了，刚开始从Box2d开始学习，明白了很多，Box2d是物理模型的基础，是我们在游戏中模拟现实的很重要的一个开源工具。后来在朋友的建议下学习了cocos，也是小程序开发的利器，而golang是一款高效…...

编程日记 2025/8/1 20:37:59

Linux 网络基础（二）（传输协议层：UDP、TCP）

目录一、传输层的意义二、端口号 1、五元组标识一个通信 2、端口号范围划分 3、知名端口号（Well-Know Port Number） （1）查看端口号 4、绑定端口号数目问题 5、pidof & netstat 命令 （1）ne…...

编程日记 2025/8/1 1:40:57

Vue常用指令入门

1. v-for 作用：用于遍历对象或数组注意：需要提供key属性，可以提高性能和避免渲染错误，值通常为index或item.id <li v-for"(item, index) in items" :key"index">{{ item }} </li>2. v-if,v-el…...

编程日记 2025/8/3 11:20:48

【文献阅读】EndoNet A Deep Architecture for Recognition Tasks on Laparoscopic Videos

关于数据集的整理 Cholec80 胆囊切除手术视频数据集介绍 https://zhuanlan.zhihu.com/p/700024359 数据集信息 Cholec80 数据集是一个针对内窥镜引导下的胆囊切除手术视频流程识别数据集。数据集提供了每段视频中总共7种手术动作及总共7种手术工具的标注，标…...

编程日记 2025/7/30 16:25:43

UML统一建模

UML UML（统一建模语言）介绍 UML（统一建模语言）介绍面向对象软件开发需要经过OOA面向对象分析、OOD面向对象设计和OOP面向对象编程三个阶段。OOA对目标系统进行分析并寄哪里分析模型，并将之文档化，OOD用面向…...

编程日记 2025/7/28 15:43:04

Ubuntu下安装和卸载MySQL

Ubuntu下安装和卸载MySQL 下面的演示系统版本：Ubuntu 24.04 更新系统软件包在开始安装之前，建议先更新系统的软件包列表，以确保所有依赖项是最新的。 sudo apt update && sudo apt upgrade -y安装MySQL服务器 Ubuntu的官方软件…...

编程日记 2025/8/1 13:02:17

物联网技术赋能：复杂环境下的能源数据零丢失

安科瑞顾强在全球能源挑战日益严峻的背景下，高效节能已成为各行业的核心诉求。无论是商业综合体、工业厂房还是公共设施，如何实现能源的精细化管理成为关键课题。安科瑞能耗云平台凭借其创新技术与多功能服务，为企业提供了一站式能源管理解…...

编程日记 2025/7/29 6:13:53

卷积神经网络综述

摘要本文对卷积神经网络（Convolutional Neural Network，CNN）进行了全面综述。首先介绍了卷积神经网络的发展历程，包括早期的理论基础和关键突破。接着详细阐述了卷积神经网络的结构组成，包括卷积层、池化层、全连接层…...

编程日记 2025/7/31 16:31:23

SpringBoot3设置maven package直接打包成二进制可执行文件

注意事项 SpringBoot普通native打包顺序clean compile spring-boot:process-aot native:compile 使用以下配置只会的打包顺序clean package（注意：使用此配置以后打包会有编译后的class文件、jar包、original源文件、二进制可执行文件【Linux是无后缀的包…...

编程日记 2025/8/3 15:28:49

在 Anaconda 上安装多版本 Python 解释器并在 PyCharm 中配置

默认已安装好 Anaconda 和 PyCharm ，想在 Anaconda 上安装最新版本的 Python 解释器。一、在 Anaconda 上创建虚拟环境在连网状态下进入系统的命令提示符（快捷键：win r ，输入 cmd 即可），输入如下命令&a…...

编程日记 2025/8/3 15:27:11

AES (高级加密标准)

原理详解 AES是一种对称加密算法，使用相同的密钥进行加密和解密。它采用替代-置换网络(SPN)结构，主要步骤包括： 密钥扩展：从初始密钥派生多轮密钥初始轮：AddRoundKey（轮密钥加） 主轮&#xff…...

编程日记 2025/7/29 7:21:18

Git拉分支技巧：从零开始创建并推送分支

Git拉分支技巧：从零开始创建并推送分支在团队协作开发中，Git 分支管理是不可或缺的技能。合理地创建、同步和推送分支，不仅能提高开发效率，还能避免代码冲突。本文将基于以下技巧，详细讲解如何从零开始创建并推送一个…...

编程日记 2025/7/31 20:19:06

线性回归之归一化(normalization)

文章目录归一化与梯度下降归一化的必要性：从特征量纲到梯度下降问题背景矛盾与低效归一化的作用归一化提高模型精度的原因归一化的本质常见归一化方法最大值最小值归一化示例说明优缺点分析标准归一化具体机制示例说明强调归一化与梯度下降归一化与梯度下降 &…...

编程日记 2025/7/31 23:30:45

mac监控linux上mysql性能(Grafana+Prometheus+mysqld_exporter)

一、监控查看端安装 Grafana安装-CSDN博客普罗米修斯Prometheus监控安装（mac）-CSDN博客 1.启动Grafana服务 brew services start grafana 打开浏览器输入http://localhost:3000进入grafana登录页面 （默认用户名和密码都为admin,进入后…...

编程日记 2025/7/29 7:21:12

【玩泰山派】MISC（杂项）- linux桌面环境

文章目录 linux桌面环境linux四大桌面环境概述ubuntu基于四大桌面环境的版本显示管理器gdm3（GNOME Display Manager）lightdm（Lightweight Display Manager）SDDM（Simple Desktop Display Manager）KDM&#…...

编程日记 2025/7/29 7:21:10

MVCC介绍

MVCC（多版本并发控制）详解 MVCC（Multi-Version Concurrency Control） 是一种数据库并发控制技术，核心思想是通过维护数据的多个版本来实现读写操作的无锁并发，从而在高并发场景下提升性能。它广泛用于 MyS…...

编程日记 2025/7/29 7:21:09

神经网络与模型训练过程笔记

1.专有名词 ANN 人工神经网络，一种受生物神经元启发的监督学习算法。输入数据通过网络中的层级函数传递，激活特定神经元。函数复杂度越高，模型对数据的拟合能力越强，预测精度越高。偏置项其中x下表从1开始的是输入变量&#xf…...

编程日记 2025/8/1 1:39:10

ASP.NET 0~1学习

变量 string username Request["id"]; 声明并初始化一个字符串变量 username 数据类型下面列出了常用的数据类型： 类型描述实例int整数（全数字）103, 12, 5168float浮点数3.14, 3.4e38decimal十进制数字（高精度&a…...

编程日记 2025/8/2 16:27:34

对macho文件有一定理解后,了解下optool是如何给macho文件增加动态库等功能的 optool 源码环境 macOS 13.4 (22F66) Xcode 14.3.1 0x0 编译下载源码 $ git clone --recurse-submodules https://github.com/alexzielenski/optool.git修改下Deployment Target,比如改成11.0&…...

编程日记 2025/7/29 7:21:03

【C++】类和对象之日期类的实现（构造、运算符重载）

文章目录一、日期类要实现的函数二、函数实现1、GetMonthDay获取对应月份的天数2、CheckDate检查日期3、Date构造函数4、Print打印日期5、运算符重载1. 、、-、-2. 前置/--、后置/--3. 两个日期类相减（求相差日期） 6、比较7、流插入、流提取&#xff0…...

编程日记 2025/8/2 17:17:54

【Rust 精进之路之第9篇-所有权·核心】规则与移动 (Move)：Rust 内存安全基石详解

系列： Rust 精进之路：构建可靠、高效软件的底层逻辑作者：码觉客发布日期： 2025年4月20日引言：没有 GC，Rust 如何管好内存？答案是所有权！在我们的 Rust 探索之旅中，我们已经学习了变量、数据类型、控制流、函数和强大的构建工具 Cargo。现在，我们将踏入 Rust 最…...

编程日记 2025/8/1 14:36:18

【任务调度】xxl-job入门

xxl- job 入门附上笔者写的测视示例：chenmeng-test-demos/demo8-task/task-xxl-job at master cmty256/chenmeng-test-demos 官方文档 XXL-JOB官网源码仓库地址： Github：https://github.com/xuxueli/xxl-job Gitee：http://g…...

编程日记 2025/8/2 17:17:55

Go语言--语法基础4--基本数据类型--浮点数类型

3 、浮点数类型浮点型用于表示包含小数点的数据，比如 1.234 就是一个浮点型数据。 Go 语言中的浮点类型采用 IEEE-754 标准的表达方式。 float32 精度是小数点后 7 位 float64 精度是小数点后 15 位。 1. 浮点数表示 Go 语言定义了两个类型 float32 和 floa…...

编程日记 2025/7/29 7:20:55

秘密任务 3.0：如何通过 JWT 认证确保 WebSockets 安全

在之前的文章中，我们探讨了如何通过 WebSockets DTOs 设计实时操作。现在，我们迎来了一项新的挑战：确保 WebSocket 通信在任务执行过程中保持安全。如果敌方潜伏在我们的实时通信渠道中，机密情报可能会被泄露。任务&#xff1a…...

编程日记 2025/8/3 1:16:11

UID和GID的区别

UID（用户标识符）和 GID（组标识符）是 Linux/Unix 系统中用于管理用户和组权限的核心机制，它们的区别主要体现在作用对象和用途上： 目录 1. 定义与作用对象 2. 主要用途 3. 系统保留范围 4. 用户与组的关…...

编程日记 2025/8/3 12:18:49

【网络】通过Samba实现Window挂在Linux服务器路径

有时候我们去进行内网部署时，会遇到客户或者甲方爸爸说，需要将Linux中的某个路径共享出去到Window上，挂载出比如Z:\这种盘符。通过打开Z盘，来查看服务器的指定目录下的数据。步骤1： 在Linux中安装samba yum install…...

编程日记 2025/7/31 11:21:13

UE5 UI 教程系列全集

https://www.youtube.com/TheRoyalSkies/search?queryUnreal-5%20UI...

编程日记 2025/7/29 7:20:48

论文笔记（七十八）Do generative video models understand physical principles?

Do generative video models understand physical principles? 文章概括Physics-IQ基准数据集评估协议为什么要创建一个真实世界的Physics-IQ数据集模型物理理解的评估指标动作发生在哪里？空间IoU（Spatial IoU）动作在哪里、何时发生&#xf…...

编程日记 2025/8/1 5:10:25

Viper配置管理笔记

一、什么是 Viper？ Viper 是 Go 语言的一个强大工具，就像一个超级管家，专门负责帮你打理程序的各种配置。它能把配置文件（比如 JSON、YAML、TOML 等格式）里的内容读出来，还能监控配置文件的变化&#xff0…...

编程日记 2025/7/31 4:21:54

visual studio无法跳转到函数定义、变量定义、跳转函数位置不准问题解决

参考：https://blog.csdn.net/snakehacker/article/details/135438353 程序有时会出现大部分函数都不能准确的从头文件中正确定位到函数定位,这是因为数据库错乱造成的,可以通过重构数据库来解决,操作方法如下： 菜单栏：工具——选项文本编辑…...

编程日记 2025/7/29 7:20:41

【Rust 精进之路之第15篇-枚举 Enum】定义、变体与数据关联：表达多种可能性

系列： Rust 精进之路：构建可靠、高效软件的底层逻辑作者：码觉客发布日期： 2025年4月20日引言：当值拥有“选项”——超越结构体的表达力在上一篇【结构体 Struct】中，我们学习了如何使用结构体将多个相关的数据字段组合成一个有意义的整体。结构体非常适合表示那些…...

编程日记 2025/8/2 13:56:30

C++ 相关系统软件简介与学习方法【最水的一期】

C 作为一种强大的C 相关系统软件简介编程语言，广泛应用于系统软件开发领域。以下为你介绍几款基于 C 开发的典型系统软件及其特点： 操作系统内核部分操作系统内核采用 C 开发，例如某些嵌入式操作系统。C 的高性能、底层硬件访问能力和强大的…...

编程日记 2025/7/29 7:20:38

【Linux我做主】GDB调试工具完全指南

Linux下GDB调试工具完全指南：25个核心命令详解与实战示例 github地址有梦想的电信狗前言 GDB（GNU Debugger）是Linux开发中不可或缺的调试工具，尤其在定位代码逻辑错误和内存问题时表现卓越。本文基于实际开发经验&#xff0…...

编程日记 2025/7/30 10:09:35

基于SpringBoot3实现MyBatis-Plus(SSMP)整合快速入门CURD(增删改查)

目录一、快速搭建SpringBoot-Web工程脚手架。 1.1 Spring Initializr 初始化工程。(官方提供) 1.2 工程脚手架初始化详细步骤。(IDEA2024.1.1) 二、MyBatis-Plus的特性与快速上手。 2.1 官网地址与基本特性。 2.2 快速上手技术栈基础。 2.3 Spring Boot2 的 MyBatis-Plus Star…...

编程日记 2025/7/29 7:20:34

短视频电商新纪元：TikTok Shop全球蓝海争夺战进入关键窗口期

一、流量重构：TikTok Shop改写全球电商版图 2024年，全球跨境电商市场迎来新一轮洗牌。当Temu、Shein等平台深陷“低价内卷”泥潭时，TikTok Shop凭借日均30亿次的短视频流量，正在开辟一条“内容即货架”的颠覆性赛道。最新数据显示…...

编程日记 2025/7/31 10:03:09

uniapp-商城-29-vuex 关于系统状态的管理

按照我们前面讲的，vuex，的使用方式： 步骤如下： 1 先创建store 文件夹 2 在 store 中创建一个 index.js 3、在 store 中，创建一个modules文件夹 4、在store中，创建一个getters.js 5、在modules文件…...

编程日记 2025/7/29 7:20:30

Qt中修改了UI设计文件后编译不生效问题的解决办法

复制工程过来后： 1、删除build文件 2、删除.user文件，恢复为文件最初的那样 3、执行make distclean,删除所有由先前构建过程生成的文件 4、再次打开工程，修改ui文件编译生效！...

编程日记 2025/7/29 7:20:28

Python 项目环境配置与 Vanna 安装避坑指南 (PyCharm + venv)

在进行 Python 项目开发时，一个干净、隔离且配置正确的开发环境至关重要。尤其是在使用像 PyCharm 这样的集成开发环境 (IDE) 时，正确理解和配置虚拟环境 (Virtual Environment) 是避免许多常见问题的关键。本文结合之前安装 Vanna 库时遇到的问题&#…...

编程日记 2025/8/1 1:28:30

Matlab FCM模糊聚类

1、内容简介 Matlab 211-FCM模糊聚类可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/7/28 11:57:46

标准的JNI (Java Native Interface) 加载函数 JNI_OnLoad

1.JNI_OnLoad 在 Android Native 开发中，JNI_OnLoad 是动态注册本地方法的标准入口点。以下是一个标准实现示例及其说明： JNI_OnLoad 标准实现 #include <jni.h> #include <string>// 声明本地方法对应的 C/C 函数 jint native_add(JNIEnv…...

编程日记 2025/7/29 7:20:22

微信小程序中使用h5页面预览图片、视频、pdf文件

遇到了这么一个需求，需要在微信小程序中点击文件，进行文件预览。要求： 图片：长图需要宽度100%高度自适应；横图的话宽度100%，高度居中显示视频：视频不管横向还是竖向都居中显示，有…...

编程日记 2025/7/29 7:20:20

A2A协议详解：打造统一的AI代理通信标准，实现多Agent系统协同

A2A 协议中文说明文章目录 A2A 解决现有 Agent 问题 Agent 生态系统现状当前面临的主要问题为什么需要统一协议，有个标准采用复用 A2A 解决方案统一通信标准代理能力发现机制安全协作框架灵活的交互模式 A2A 与 MCP 的关系 MCP 简介两者的区别与联系集成场景协同…...

编程日记 2025/8/2 19:16:18

博客系统案例练习2-用户注册-redis

前言用户注册 [请求]/user/register[参数]contentType: application/json{"userName":"wangwu","password":"456789","githubUrl": "https://gitee.com/bubble-fish666/spring-cloud","email": &quo…...

编程日记 2025/7/29 7:20:16

【人工智能】推荐开源企业级OCR大模型InternVL3

推荐开源企业级OCR大模型InternVL3 文章参考来源: https://huggingface.co/OpenGVLab/InternVL3-14B-Instruct https://www.aivi.fyi/llms/deploy-InternVL3 InternVL3，这是一个高级多模态大型语言模型 （MLLM） 系列，展示了卓越的整…...

编程日记 2025/7/29 7:20:15

聊天室项目

一.完善注册页面 1.完善注册页面图标，添加检测注册页面各个登录信息是否完善，并且通过信号和槽与自定义一个计时器，当注册完毕后跳转到显示注册完毕的页面。 2.各个坚持注册页面是否按要求的函数 3.完善主页面，设置信号和槽&…...

编程日记 2025/8/1 1:44:14

并发设计模式实战系列(4)：线程池

🌟 大家好，我是摘星！ 🌟 今天为大家带来的是并发设计模式实战系列，第四章线程池（Thread Pool），废话不多说直接开始~ 目录一、核心原理深度拆解 1. 线程池核心组件 2. 核心…...

编程日记 2025/7/29 7:20:11

大模型应用案例：主动提问式的 AI 面试官（接入 DeepSeek）

目录核心逻辑效果演示技术选型大模型应用开发框架：langchain-deepseek UI 展示框架—streamlit 代码获取后续改进想法本文附带详细的视频讲解，欢迎小伙伴们来支持—— 【代码宇宙017】大模型：主动提问式的 AI 面试官&#xff0…...

编程日记 2025/7/29 6:13:48

算法笔记—动态规划

1137. 第 N 个泰波那契数 - 力扣（LeetCode） class Solution { public:int tribonacci(int n) {if(n0) return 0;if(n1||n2) return 1;vector<int> dp(4);//初始化dp[0]0; dp[1]1; dp[2]1;for(int i3;i<n1;i){//滚动数组优化需要循环dp[i%4]dp[…...

编程日记 2025/8/3 1:54:57

📁 组件结构规划

🧱 Navbar 组件内容

💻 实现代码（使用 Tailwind CSS）

🎨 效果预览

相关文章：