程序员主页

发布于 2025-04-25 浏览 163 人次

一个简洁、现代且自适应的程序员主页布局，使用Tailwind CSS和Font Awesome图标。这个设计将包含以下部分：

  1. 响应式导航栏
  2. 个人简介区域
  3. 技能展示部分
  4. 项目展示卡片
  5. 联系信息区域
  6. 微妙的动画效果

以下是完整的HTML代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员主页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'fade-in': 'fadeIn 1s ease-in',
                        'bounce-slow': 'bounce 3s infinite'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 font-sans text-gray-800 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex-shrink-0 flex items-center">
                    <i class="fas fa-code text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-semibold text-dark">DevPort</span>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-center space-x-8">
                        <a href="#about" class="text-dark hover:text-primary transition-colors duration-300">关于</a>
                        <a href="#skills" class="text-dark hover:text-primary transition-colors duration-300">技能</a>
                        <a href="#projects" class="text-dark hover:text-primary transition-colors duration-300">项目</a>
                        <a href="#contact" class="text-dark hover:text-primary transition-colors duration-300">联系</a>
                    </div>
                </div>
                <div class="md:hidden">
                    <button class="text-dark hover:text-primary focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- 个人简介区域 -->
        <section id="about" class="mb-20 animate-fade-in">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-64 h-64">
                        <div class="absolute inset-0 bg-primary rounded-full opacity-20 animate-float"></div>
                        <div class="absolute inset-4 bg-secondary rounded-full opacity-20 animate-float" style="animation-delay: 1s;"></div>
                        <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="程序员头像" 
                             class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-lg">
                    </div>
                </div>
                <div class="md:w-1/2 mt-8 md:mt-0">
                    <h1 class="text-4xl md:text-5xl font-bold text-dark mb-4">你好, 我是<span class="text-primary">张伟</span></h1>
                    <h2 class="text-2xl md:text-3xl font-semibold text-secondary mb-6">全栈开发工程师</h2>
                    <p class="text-lg text-gray-600 mb-6 leading-relaxed">
                        我是一名热爱技术的开发者，专注于构建高效、可扩展的Web应用程序。拥有5年以上开发经验，擅长使用现代技术栈解决复杂问题。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1">
                            联系我
                        </a>
                        <a href="#" class="border border-primary text-primary hover:bg-primary/10 px-6 py-3 rounded-lg transition-colors duration-300">
                            下载简历
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技能展示 -->
        <section id="skills" class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-dark mb-2">我的<span class="text-primary">技能</span></h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我不断学习和掌握新技术，以下是我精通的领域</p>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <!-- 技能卡片 -->
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 group">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-primary/20 transition-colors duration-300">
                        <i class="fab fa-js text-primary text-3xl animate-bounce-slow"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center text-dark mb-2">JavaScript</h3>
                    <p class="text-gray-600 text-center">ES6+, Node.js, Express</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 group">
                    <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-secondary/20 transition-colors duration-300">
                        <i class="fab fa-react text-secondary text-3xl animate-spin-slow" style="animation-duration: 10s;"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center text-dark mb-2">React</h3>
                    <p class="text-gray-600 text-center">Hooks, Context, Redux</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 group">
                    <div class="w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-blue-500/20 transition-colors duration-300">
                        <i class="fas fa-database text-blue-500 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center text-dark mb-2">数据库</h3>
                    <p class="text-gray-600 text-center">MongoDB, PostgreSQL</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 group">
                    <div class="w-16 h-16 bg-purple-500/10 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-purple-500/20 transition-colors duration-300">
                        <i class="fab fa-css3-alt text-purple-500 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center text-dark mb-2">CSS</h3>
                    <p class="text-gray-600 text-center">Tailwind, Sass, CSS3</p>
                </div>
            </div>
        </section>

        <!-- 项目展示 -->
        <section id="projects" class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-dark mb-2">我的<span class="text-primary">项目</span></h2>
                <p class="text-gray-600 max-w-2xl mx-auto">以下是我参与开发的一些代表性项目</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 项目卡片 1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 group">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="项目截图" 
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-2">电商平台</h3>
                        <p class="text-gray-600 mb-4">一个全功能的B2C电商平台，支持多种支付方式和实时库存管理。</p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">React</span>
                            <span class="bg-secondary/10 text-secondary text-sm px-3 py-1 rounded-full">Node.js</span>
                            <span class="bg-blue-500/10 text-blue-500 text-sm px-3 py-1 rounded-full">MongoDB</span>
                        </div>
                        <a href="#" class="text-primary font-medium inline-flex items-center group-hover:underline">
                            查看详情 <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 项目卡片 2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 group">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="项目截图" 
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-2">任务管理应用</h3>
                        <p class="text-gray-600 mb-4">一个协作式任务管理工具，支持团队协作、任务分配和进度跟踪。</p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">Vue.js</span>
                            <span class="bg-secondary/10 text-secondary text-sm px-3 py-1 rounded-full">Firebase</span>
                            <span class="bg-purple-500/10 text-purple-500 text-sm px-3 py-1 rounded-full">Tailwind</span>
                        </div>
                        <a href="#" class="text-primary font-medium inline-flex items-center group-hover:underline">
                            查看详情 <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 项目卡片 3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 group">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="项目截图" 
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-2">数据分析仪表盘</h3>
                        <p class="text-gray-600 mb-4">一个实时数据可视化平台，支持多种数据源和自定义报表。</p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">TypeScript</span>
                            <span class="bg-secondary/10 text-secondary text-sm px-3 py-1 rounded-full">D3.js</span>
                            <span class="bg-green-500/10 text-green-500 text-sm px-3 py-1 rounded-full">PostgreSQL</span>
                        </div>
                        <a href="#" class="text-primary font-medium inline-flex items-center group-hover:underline">
                            查看详情 <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系信息 -->
        <section id="contact" class="mb-20">
            <div class="bg-white rounded-xl shadow-sm p-8 md:p-12">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-dark mb-2">联系<span class="text-primary">我</span></h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">如果您有任何问题或合作机会，欢迎随时联系</p>
                </div>
                
                <div class="flex flex-col md:flex-row gap-12">
                    <div class="md:w-1/2">
                        <form class="space-y-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all duration-300">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all duration-300">
                            </div>
                            <div>
                                <label for="message" class="block text-sm font-medium text-gray-700 mb-1">消息</label>
                                <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all duration-300"></textarea>
                            </div>
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1">
                                发送消息
                            </button>
                        </form>
                    </div>
                    
                    <div class="md:w-1/2">
                        <div class="space-y-6">
                            <div class="flex items-start gap-4">
                                <div class="bg-primary/10 text-primary p-3 rounded-full">
                                    <i class="fas fa-envelope text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-dark mb-1">邮箱</h4>
                                    <p class="text-gray-600">zhangwei@example.com</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-4">
                                <div class="bg-secondary/10 text-secondary p-3 rounded-full">
                                    <i class="fas fa-phone text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-dark mb-1">电话</h4>
                                    <p class="text-gray-600">+86 138 1234 5678</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-4">
                                <div class="bg-blue-500/10 text-blue-500 p-3 rounded-full">
                                    <i class="fas fa-map-marker-alt text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-dark mb-1">地址</h4>
                                    <p class="text-gray-600">北京市海淀区中关村软件园</p>
                                </div>
                            </div>
                            
                            <div class="pt-6">
                                <h4 class="text-lg font-semibold text-dark mb-4">社交媒体</h4>
                                <div class="flex space-x-4">
                                    <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 transition-colors duration-300">
                                        <i class="fab fa-github"></i>
                                    </a>
                                    <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 transition-colors duration-300">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                    <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 transition-colors duration-300">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 transition-colors duration-300">
                                        <i class="fab fa-weixin"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center">
                        <i class="fas fa-code text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-semibold">DevPort</span>
                    </div>
                    <p class="text-gray-400 mt-2">用代码创造价值</p>
                </div>
                <div class="text-gray-400 text-sm">
                    <p>© 2023 张伟的个人主页. 保留所有权利.</p>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

这个设计包含以下特点：

  1. 响应式布局：适配从手机到桌面的所有屏幕尺寸
  2. 柔和配色：使用蓝色和绿色为主色调，搭配灰色背景
  3. 动画效果：包括浮动动画、淡入效果、悬停缩放等
  4. 清晰排版：使用合理的字体大小和间距确保可读性
  5. 模块化设计：分为简介、技能、项目和联系四个主要部分
  6. Font Awesome图标：使用6.4.0版本图标增强视觉表现

所有交互效果仅使用Tailwind CSS实现，无需JavaScript。

相关推荐

智能后台管理系统

智能后台管理系统

阅读量 136 · 2025-09-13
现代化后台管理系统

现代化后台管理系统

阅读量 159 · 2025-05-13
稿定设计模板页面

稿定设计模板页面

阅读量 144 · 2025-05-08
帮助中心 - 专业问题解决方案

帮助中心 - 专业问题解决方案

阅读量 162 · 2025-05-03
创意素材库 - 高品质设计资源平台

创意素材库 - 高品质设计资源平台

阅读量 117 · 2025-05-02
标签云卡片布局

标签云卡片布局

阅读量 130 · 2025-05-02
素材下载详情页面模块

素材下载详情页面模块

阅读量 137 · 2025-05-01
响应式后台管理系统

响应式后台管理系统

阅读量 122 · 2025-04-28
透明素材库 - 高品质PNG透明背景素材下载

透明素材库 - 高品质PNG透明背景素材下载

阅读量 125 · 2025-04-26
透明素材库 - 免费PNG透明背景图片下载

透明素材库 - 免费PNG透明背景图片下载

阅读量 132 · 2025-04-26
亮色响应式网站

亮色响应式网站

阅读量 139 · 2025-04-26
漂亮的搜索模块

漂亮的搜索模块

阅读量 136 · 2025-04-25
管理系统登录后台登陆

管理系统登录后台登陆

阅读量 134 · 2025-04-25
高级登录模块布局设计

高级登录模块布局设计

阅读量 128 · 2025-04-25
企业官网科技未来 - 企业官网

企业官网科技未来 - 企业官网

阅读量 152 · 2025-04-25
现代聊天界面

现代聊天界面

阅读量 145 · 2025-04-25
优雅登录界面

优雅登录界面

阅读量 142 · 2025-04-25
AI聊天窗口

AI聊天窗口

阅读量 122 · 2025-04-25
高级编程助手聊天界面

高级编程助手聊天界面

阅读量 127 · 2025-04-25
高级登录系统

高级登录系统

阅读量 121 · 2025-04-25