带代码雨的科技个人引导页

演示地址

源码在最下面下载喔。

这是一个具有赛博朋克风格的个人展示网站，采用了代码雨背景特效，配合深色主题与霓虹色调，营造出强烈的科技感与未来主义氛围。网站以模块化方式构建，包含个人介绍、技能展示、项目案例和联系方式等完整功能模块。

网站特色包括：

全屏动态代码雨背景，使用 Canvas 实现字符下落动画效果
响应式设计，完美适配桌面端与移动设备
赛博朋克风格 UI，使用霓虹色调与深色背景的强烈对比
平滑滚动与导航交互效果，提升用户体验
悬停动画与过渡效果，增强页面层次感
卡片式布局展示项目案例，支持交互预览
模块化结构设计，代码组织清晰，易于维护和扩展

这个网站不仅视觉上具有冲击力，同时保持了良好的代码结构与交互体验，是展示个人技能与作品的理想选择。

页面内容修改教程：

导航菜单文字
在标签内的链接文本

<ul class="hidden md:flex space-x-8 font-cyber">
    <li><a href="#about">关于</a></li>
    <li><a href="#skills">技能</a></li>
    <li><a href="#projects">项目</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="https://qiu.mrz2516.com/">博客</a></li>
</ul>

英雄区域文字在<section class="flex-1 flex items-center justify-center p-4"^>内：

<h1 class="font-cyber font-bold text-[clamp(2.5rem,8vw,5rem)] leading-none mb-4 text-shadow-neon">
    你好，我是<span class="text-neon">开发者</span>
</h1>
<p class="text-[clamp(1rem,3vw,1.5rem)] mb-8 max-w-3xl mx-auto text-gray-300">
    探索前沿技术，创造数字未来
</p>

关于我区域在id="about"的<section>的内：

<h3 class="font-cyber text-2xl mb-4 text-neon">前端工程师 & 全栈开发者</h3>
<p class="mb-6 text-gray-300 leading-relaxed">
    热衷于创造具有创新性和用户友好的数字体验...
</p>
<p class="mb-6 text-gray-300 leading-relaxed">
    我的开发哲学是将美学设计与技术实现完美结合...
</p>

技能区域在id="skills"的<section>，每个技能卡片的标题和技能列表：

<h3 class="font-cyber text-xl mb-4 text-neon">前端开发</h3>
<ul class="space-y-3">
    <li class="flex justify-between">
        <span>HTML5 / CSS3</span>
        <span class="text-primary">95%</span>
    </li>
    <!-- 其他技能项 -->
</ul>

项目区域在id="projects"的<section>内，每个项目卡片的内容：

<h3 class="font-cyber text-xl mb-2 text-neon group-hover:text-primary transition-colors duration-300">
    区块链浏览器
</h3>
<p class="text-gray-400 mb-4">一个基于React的区块链数据可视化平台...
</p>

联系区域在id="contact"的<section>内：

<form>
    <!-- 表单标签文本 -->
    <label for="name">姓名</label>
    <label for="email">邮箱</label>
    <!-- 按钮文本 -->
    <button type="submit">发送消息</button>
</form>

<h3 class="font-cyber text-xl mb-6 text-neon">也可以通过以下方式联系我</h3>

页脚文字在<footer>标签内：

<p class="text-gray-400">&copy; 2025 秋叔不太老. All rights reserved.</p>
<p class="text-gray-500 text-sm mt-2">Designed with <i class="fa fa-heart text-primary"></i> and lots of code</p>

修改建议：
如需更改文字内容，直接编辑对应标签内的文本
如需调整颜色或样式，可以修改对应的 Tailwind 类名或自定义 CSS
如需更改技能百分比或项目描述，直接修改对应数值和文本
如需添加或删除项目卡片，复制或删除整个项目卡片的 HTML 结构

所有文字内容都可以在 HTML 文件中直接找到并修改

效果图：

下载：

点击下载

文章版权归作者所有，未经允许请勿转载。

THE END