学习目标

  • 分析GitHub用户主页的布局结构和组件
  • 使用Tailwind CSS实现个人资料侧边栏的复杂布局
  • 构建活动流时间线及其各种卡片类型
  • 实现响应式设计，确保在移动设备上的良好体验
  • 掌握GitHub主页的交互设计模式

GitHub用户主页分析

GitHub的用户主页是展示个人资料和活动的核心页面。它包含丰富的信息和交互元素，主要分为两大部分：左侧的个人资料侧边栏和右侧的活动流时间线。

主要区域和功能

  1. 顶部导航栏（复用前一节的设计）
  2. 个人资料侧边栏（头像、名称、简介、统计数据等）
  3. 活动流时间线（提交、Issues、PR等活动）
  4. 贡献图表（活动热力图）
  5. 仓库列表（置顶仓库）

让我们逐步构建这个页面，先从页面的基本结构开始。

页面基本结构

首先，创建页面的HTML框架和Tailwind CSS配置：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>GitHub User Profile</title>
  7.   <script src="https://cdn.tailwindcss.com"></script>
  8.   <script>
  9.     tailwind.config = {
  10.       theme: {
  11.         extend: {
  12.           colors: {
  13.             "github-blue": "#0969da",
  14.             "github-green": "#2da44e",
  15.             "github-red": "#cf222e",
  16.             "github-yellow": "#bf8700",
  17.             "github-purple": "#8250df",
  18.             "github-bg": "#f6f8fa",
  19.             "github-border": "#d0d7de",
  20.             "github-text-primary": "#24292f",
  21.             "github-text-secondary": "#57606a",
  22.             "github-header-bg": "#24292f",
  23.             "github-header-text": "#ffffff",
  24.             "github-btn-primary": "#2da44e",
  25.             "github-btn-primary-hover": "#2c974b",
  26.           },
  27.           fontFamily: {
  28.             "github": [
  29.               "-apple-system", 
  30.               "BlinkMacSystemFont", 
  31.               "Segoe UI", 
  32.               "Noto Sans", 
  33.               "Helvetica", 
  34.               "Arial", 
  35.               "sans-serif", 
  36.               "Apple Color Emoji", 
  37.               "Segoe UI Emoji"
  38.             ],
  39.           },
  40.           borderRadius: {
  41.             "github-md": "6px",
  42.           },
  43.           boxShadow: {
  44.             "github-sm": "0 1px 0 rgba(27, 31, 36, 0.04)",
  45.             "github-btn": "0 1px 0 rgba(27, 31, 36, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
  46.           }
  47.         }
  48.       }
  49.     }
  50.   </script>
  51. </head>
  52. <body class="bg-white font-github text-github-text-primary">
  53.   <!-- GitHub Header/Navbar -->
  54.   <header class="bg-github-header-bg text-github-header-text py-3 px-4 flex items-center justify-between">
  55.     <!-- GitHub Logo -->
  56.     <div class="flex items-center">
  57.       <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" class="fill-current">
  58.         <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
  59.       </svg>
  61.       <!-- Search bar -->
  62.       <div class="relative ml-4 hidden md:block">
  63.         <input type="text" placeholder="Search or jump to..." 
  64.           class="bg-github-header-bg border border-gray-600 rounded-md text-sm text-white placeholder-gray-400 w-64 py-1 px-3">
  65.       </div>
  66.     </div>
  68.     <!-- Navigation links -->
  69.     <nav class="hidden md:flex items-center space-x-4">
  70.       <a href="#" class="text-white hover:text-gray-300">Pull requests</a>
  71.       <a href="#" class="text-white hover:text-gray-300">Issues</a>
  72.       <a href="#" class="text-white hover:text-gray-300">Marketplace</a>
  73.       <a href="#" class="text-white hover:text-gray-300">Explore</a>
  74.     </nav>
  76.     <!-- User menu -->
  77.     <div class="flex items-center">
  78.       <!-- Notifications icon -->
  79.       <a href="#" class="text-white mr-4">
  80.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
  81.           <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path>
  82.         </svg>
  83.       </a>
  85.       <!-- User avatar dropdown -->
  86.       <div class="relative">
  87.         <button class="flex items-center">
  88.           <img src="https://avatars.githubusercontent.com/u/123456789?v=4" alt="User avatar" class="w-5 h-5 rounded-full">
  89.           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="ml-1 text-white">
  90.             <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path>
  91.           </svg>
  92.         </button>
  93.       </div>
  94.     </div>
  95.   </header>
  97.   <!-- Main Content Area -->
  98.   <main class="container mx-auto px-4 py-6 max-w-7xl">
  99.     <!-- Two-column layout will go here -->
  100.     <div class="flex flex-col md:flex-row gap-6">
  101.       <!-- Left sidebar: User profile -->
  102.       <div class="w-full md:w-1/4">
  103.         <!-- Profile content will go here -->
  104.       </div>
  106.       <!-- Right content: Activity feed -->
  107.       <div class="w-full md:w-3/4">
  108.         <!-- Activity feed will go here -->
  109.       </div>
  110.     </div>
  111.   </main>
  112. </body>
  113. </html>

个人资料侧边栏实现

接下来，让我们实现左侧的个人资料侧边栏：

  1. <!-- Left sidebar: User profile -->
  2. <div class="w-full md:w-1/4">
  3.   <!-- Profile picture -->
  4.   <div class="mb-4">
  5.     <div class="relative group">
  6.       <div class="rounded-full overflow-hidden border border-github-border">
  7.         <img src="https://avatars.githubusercontent.com/u/123456789?v=4" alt="User avatar" class="w-full">
  8.       </div>
  9.       <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
  10.         <span class="text-white">😄</span>
  11.       </div>
  12.     </div>
  13.   </div>
  15.   <!-- Name and username -->
  16.   <div class="mb-4">
  17.     <h1 class="text-2xl font-bold">John Doe</h1>
  18.     <p class="text-github-text-secondary">johndoe</p>
  19.   </div>
  21.   <!-- Bio -->
  22.   <div class="mb-4">
  23.     <p>
  24.       Software developer passionate about web technologies and open source. Building tools to make developers' lives easier.
  25.     </p>
  26.   </div>
  28.   <!-- Edit profile button -->
  29.   <div class="mb-4">
  30.     <button class="w-full py-1 px-3 text-sm bg-github-bg border border-github-border rounded-github-md hover:bg-gray-100 font-medium">
  31.       Edit profile
  32.     </button>
  33.   </div>
  35.   <!-- Followers info -->
  36.   <div class="mb-4 flex items-center text-sm">
  37.     <a href="#" class="flex items-center hover:text-github-blue">
  38.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-1 text-github-text-secondary">
  39.         <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path>
  40.       </svg>
  41.       <span class="font-bold">128</span>&nbsp;followers
  42.     </a>
  43.     <span class="mx-1">·</span>
  44.     <a href="#" class="hover:text-github-blue">
  45.       <span class="font-bold">56</span>&nbsp;following
  46.     </a>
  47.   </div>
  49.   <!-- Contact and details -->
  50.   <div class="mb-6">
  51.     <ul class="space-y-1 text-sm">
  52.       <!-- Company -->
  53.       <li class="flex items-center">
  54.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-2 text-github-text-secondary">
  55.           <path d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3 3h4v2H3Zm0 3h4v2H3Zm5-3h2v2H8Zm0 3h2v2H8ZM3 9h2v2H3Zm3 0h2v2H6Zm3 0h2v2H9Z"></path>
  56.         </svg>
  57.         <span>Awesome Tech Inc.</span>
  58.       </li>
  60.       <!-- Location -->
  61.       <li class="flex items-center">
  62.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-2 text-github-text-secondary">
  63.           <path d="m12.596 11.596-3.535 3.536a1.5 1.5 0 0 1-2.122 0l-3.535-3.536a6.5 6.5 0 1 1 9.192-9.193 6.5 6.5 0 0 1 0 9.193Zm-1.06-8.132v-.001a5 5 0 1 0-7.072 7.072L8 14.07l3.536-3.534a5 5 0 0 0 0-7.072ZM8 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"></path>
  64.         </svg>
  65.         <span>San Francisco, CA</span>
  66.       </li>
  68.       <!-- Website -->
  69.       <li class="flex items-center">
  70.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-2 text-github-text-secondary">
  71.           <path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25Zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0Z"></path>
  72.         </svg>
  73.         <a href="#" class="text-github-blue hover:underline">johndoe.dev</a>
  74.       </li>
  76.       <!-- Twitter -->
  77.       <li class="flex items-center">
  78.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-2 text-github-text-secondary">
  79.           <path d="M8.38 14.408 8 14.376l-.38.033a7.25 7.25 0 0 1-6.212-3.287l-.117-.168-.023-.436a7.316 7.316 0 0 1 2.857-6.358 7.221 7.221 0 0 1 3.877-1.132l.006 1.44-.466.055a5.313 5.313 0 0 0-2.86.984A5.275 5.275 0 0 0 2.74 9.166a5.225 5.225 0 0 0 4.266 3.593 5.279 5.279 0 0 0 4.897-1.49l-1.204-1.225a3.438 3.438 0 0 1-2.66.945 3.428 3.428 0 0 1-2.77-1.436 3.378 3.378 0 0 1-.672-2.309c0-.073 0-.137.005-.145L8.582 6.11l.005.147a1.415 1.415 0 0 0 .423 1.064 1.417 1.417 0 0 0 1.32.395 1.412 1.412 0 0 0 1.132-1.383c0-.296-.031-.578-.079-.783l.483-.483a7.29 7.29 0 0 1 .177 1.266 7.304 7.304 0 0 1-1.983 5.027A7.243 7.243 0 0 1 8.38 14.408Z"></path>
  80.         </svg>
  81.         <a href="#" class="text-github-blue hover:underline">@johndoe</a>
  82.       </li>
  83.     </ul>
  84.   </div>
  86.   <!-- Achievements -->
  87.   <div class="mb-6">
  88.     <h2 class="font-semibold text-base mb-2">Achievements</h2>
  89.     <div class="flex flex-wrap gap-1">
  90.       <a href="#" class="block">
  91.         <img src="https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png" alt="Pull Shark" class="w-16 h-16 rounded-full border border-github-border">
  92.       </a>
  93.       <a href="#" class="block">
  94.         <img src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png" alt="Starstruck" class="w-16 h-16 rounded-full border border-github-border">
  95.       </a>
  96.       <a href="#" class="block">
  97.         <img src="https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png" alt="YOLO" class="w-16 h-16 rounded-full border border-github-border">
  98.       </a>
  99.     </div>
  100.   </div>
  102.   <!-- Organizations -->
  103.   <div class="mb-6">
  104.     <h2 class="font-semibold text-base mb-2">Organizations</h2>
  105.     <div class="flex flex-wrap gap-2">
  106.       <a href="#" class="block">
  107.         <img src="https://avatars.githubusercontent.com/u/9919?v=4" alt="GitHub" class="w-8 h-8 rounded border border-github-border">
  108.       </a>
  109.       <a href="#" class="block">
  110.         <img src="https://avatars.githubusercontent.com/u/6412038?v=4" alt="React" class="w-8 h-8 rounded border border-github-border">
  111.       </a>
  112.       <a href="#" class="block">
  113.         <img src="https://avatars.githubusercontent.com/u/13629408?v=4" alt="Tailwind Labs" class="w-8 h-8 rounded border border-github-border">
  114.       </a>
  115.     </div>
  116.   </div>
  117. </div>

活动流时间线实现

接下来，实现右侧的活动流时间线，包括各种类型的活动卡片：

  1. <!-- Right content: Activity feed -->
  2. <div class="w-full md:w-3/4">
  3.   <!-- Profile tabs -->
  4.   <div class="border-b border-github-border mb-6">
  5.     <nav class="flex flex-wrap -mb-px">
  6.       <a href="#" class="px-4 py-2 border-b-2 border-github-blue text-github-blue font-semibold">
  7.         Overview
  8.       </a>
  9.       <a href="#" class="px-4 py-2 border-b-2 border-transparent hover:border-gray-300 text-github-text-secondary hover:text-github-text-primary">
  10.         Repositories
  11.       </a>
  12.       <a href="#" class="px-4 py-2 border-b-2 border-transparent hover:border-gray-300 text-github-text-secondary hover:text-github-text-primary">
  13.         Projects
  14.       </a>
  15.       <a href="#" class="px-4 py-2 border-b-2 border-transparent hover:border-gray-300 text-github-text-secondary hover:text-github-text-primary">
  16.         Packages
  17.       </a>
  18.       <a href="#" class="px-4 py-2 border-b-2 border-transparent hover:border-gray-300 text-github-text-secondary hover:text-github-text-primary">
  19.         Stars
  20.       </a>
  21.     </nav>
  22.   </div>
  24.   <!-- Pinned Repositories -->
  25.   <div class="mb-8">
  26.     <div class="flex justify-between items-center mb-4">
  27.       <h2 class="text-base font-semibold">Pinned</h2>
  28.       <a href="#" class="text-sm text-github-blue hover:underline">Customize your pins</a>
  29.     </div>
  31.     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  32.       <!-- Pinned Repo 1 -->
  33.       <div class="border border-github-border rounded-github-md p-4">
  34.         <div class="flex justify-between items-start mb-2">
  35.           <div>
  36.             <h3 class="font-semibold">
  37.               <a href="#" class="text-github-blue hover:underline">awesome-project</a>
  38.             </h3>
  39.             <p class="text-sm text-github-text-secondary">A collection of awesome resources for developers</p>
  40.           </div>
  41.           <button class="text-github-text-secondary hover:text-github-text-primary">
  42.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
  43.               <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
  44.             </svg>
  45.           </button>
  46.         </div>
  47.         <div class="mb-4">
  48.           <p class="text-sm text-github-text-secondary">Public</p>
  49.         </div>
  50.         <div class="flex items-center text-github-text-secondary text-sm">
  51.           <span class="flex items-center mr-3">
  52.             <span class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></span>
  53.             JavaScript
  54.           </span>
  55.           <span class="flex items-center mr-3">
  56.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-1">
  57.               <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
  58.             </svg>
  59.             128
  60.           </span>
  61.           <span class="flex items-center">
  62.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-1">
  63.               <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 0-6 0Zm1.5 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm6.75.75a.75.75 0 0 0 0-1.5h-3a.75.75 0 0 0 0 1.5h3ZM4.5 15a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75ZM4.5 13.5a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75ZM4.5 12a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75ZM4.5 10.5a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75Z"></path>
  64.             </svg>
  65.             42
  66.           </span>
  67.         </div>
  68.       </div>
  70.       <!-- Pinned Repo 2 -->
  71.       <div class="border border-github-border rounded-github-md p-4">
  72.         <div class="flex justify-between items-start mb-2">
  73.           <div>
  74.             <h3 class="font-semibold">
  75.               <a href="#" class="text-github-blue hover:underline">react-components</a>
  76.             </h3>
  77.             <p class="text-sm text-github-text-secondary">Collection of reusable React components</p>
  78.           </div>
  79.           <button class="text-github-text-secondary hover:text-github-text-primary">
  80.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
  81.               <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
  82.             </svg>
  83.           </button>
  84.         </div>
  85.         <div class="mb-4">
  86.           <p class="text-sm text-github-text-secondary">Public</p>
  87.         </div>
  88.         <div class="flex items-center text-github-text-secondary text-sm">
  89.           <span class="flex items-center mr-3">
  90.             <span class="w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
  91.             TypeScript
  92.           </span>
  93.           <span class="flex items-center mr-3">
  94.               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-1">
  95.               <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
  96.             </svg>
  97.             95
  98.           </span>
  99.           <span class="flex items-center">
  100.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-1">
  101.               <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 0-6 0Zm1.5 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm6.75.75a.75.75 0 0 0 0-1.5h-3a.75.75 0 0 0 0 1.5h3ZM4.5 15a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75ZM4.5 13.5a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75ZM4.5 12a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75ZM4.5 10.5a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .414.336.75.75.75Z"></path>
  102.             </svg>
  103.             37
  104.           </span>
  105.         </div>
  106.       </div>
  107.     </div>
  108.   </div>
  110.   <!-- Contribution activity -->
  111.   <div class="mb-8">
  112.     <h2 class="text-base font-semibold mb-4">Contribution activity</h2>
  114.     <!-- Contribution graph -->
  115.     <div class="border border-github-border rounded-github-md p-4 mb-6">
  116.       <div class="flex justify-between items-center mb-4">
  117.         <h3 class="text-sm font-semibold">March 2025</h3>
  118.         <div class="flex text-xs text-github-text-secondary">
  119.           <span class="mr-1">Less</span>
  120.           <div class="flex items-center">
  121.             <span class="block w-3 h-3 bg-github-bg border border-github-border"></span>
  122.             <span class="block w-3 h-3 bg-green-100 border border-github-border"></span>
  123.             <span class="block w-3 h-3 bg-green-300 border border-github-border"></span>
  124.             <span class="block w-3 h-3 bg-green-500 border border-github-border"></span>
  125.             <span class="block w-3 h-3 bg-green-700 border border-github-border"></span>
  126.           </div>
  127.           <span class="ml-1">More</span>
  128.         </div>
  129.       </div>
  131.       <!-- Simplified contribution calendar (would be a heatmap in real GitHub) -->
  132.       <div class="grid grid-cols-7 gap-1">
  133.         <!-- Generate a 7x5 grid of squares for a simplified contribution graph -->
  134.         <!-- Each square represents a day, colored based on contribution count -->
  135.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  136.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  137.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  138.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  139.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  140.         <div class="w-4 h-4 bg-green-500 border border-github-border rounded-sm"></div>
  141.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  143.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  144.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  145.         <div class="w-4 h-4 bg-green-500 border border-github-border rounded-sm"></div>
  146.         <div class="w-4 h-4 bg-green-700 border border-github-border rounded-sm"></div>
  147.         <div class="w-4 h-4 bg-green-500 border border-github-border rounded-sm"></div>
  148.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  149.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  151.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  152.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  153.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  154.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  155.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  156.         <div class="w-4 h-4 bg-green-700 border border-github-border rounded-sm"></div>
  157.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  159.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  160.         <div class="w-4 h-4 bg-green-500 border border-github-border rounded-sm"></div>
  161.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  162.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  163.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  164.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  165.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  167.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  168.         <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  169.         <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  170.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  171.         <div class="w-4 h-4 bg-green-500 border border-github-border rounded-sm"></div>
  172.         <div class="w-4 h-4 bg-green-700 border border-github-border rounded-sm"></div>
  173.         <div class="w-4 h-4 bg-green-300 border border-github-border rounded-sm"></div>
  174.       </div>
  175.     </div>
  177.     <!-- Activity feed timeline -->
  178.     <div class="border-l-2 border-github-border ml-2 pl-4">
  179.       <!-- Activity Header -->
  180.       <div class="flex items-center mb-4 -ml-6">
  181.         <span class="w-4 h-4 bg-white border-2 border-github-border rounded-full"></span>
  182.         <h3 class="ml-2 text-sm font-semibold">March 2025</h3>
  183.       </div>
  185.       <!-- Activity Item: Created Repository -->
  186.       <div class="mb-4 relative">
  187.         <div class="absolute -left-[22px] mt-1 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
  188.         <div class="flex flex-col sm:flex-row sm:items-center text-sm mb-1">
  189.           <span class="font-semibold mr-1">Created repository</span>
  190.           <span class="text-github-text-secondary">15 days ago</span>
  191.         </div>
  192.         <div class="border border-github-border rounded-github-md p-3">
  193.           <div class="flex items-start">
  194.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-2 text-github-text-secondary mt-1">
  195.               <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25Z"></path>
  196.             </svg>
  197.             <div>
  198.               <h4 class="font-semibold">
  199.                 <a href="#" class="text-github-blue hover:underline">johndoe/tailwind-github-clone</a>
  200.               </h4>
  201.               <p class="text-github-text-secondary text-sm">A GitHub UI clone built with Tailwind CSS</p>
  202.             </div>
  203.           </div>
  204.         </div>
  205.       </div>
  207.       <!-- Activity Item: Created Pull Request -->
  208.       <div class="mb-4 relative">
  209.         <div class="absolute -left-[22px] mt-1 w-3 h-3 bg-github-purple border-2 border-white rounded-full"></div>
  210.         <div class="flex flex-col sm:flex-row sm:items-center text-sm mb-1">
  211.           <span class="font-semibold mr-1">Opened a pull request</span>
  212.           <span class="text-github-text-secondary">20 days ago</span>
  213.         </div>
  214.         <div class="border border-github-border rounded-github-md p-3">
  215.           <div class="flex items-start">
  216.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-2 text-github-purple mt-1">
  217.               <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM9.75 8.75a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Zm0 2.5a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Zm-7.5 4v-1.625a3.75 3.75 0 1 0 0-7.5V4.5a3.75 3.75 0 1 0 0 7.5V13.5a.75.75 0 0 0 .75.75h3a.75.75 0 0 0 0-1.5Zm6-3a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"></path>
  218.             </svg>
  219.             <div>
  220.               <h4 class="font-semibold">
  221.                 <a href="#" class="text-github-text-primary hover:underline">Fix navigation responsive issues</a>
  222.                 <span class="text-github-text-secondary ml-1">#42</span>
  223.               </h4>
  224.               <p class="text-github-text-secondary text-sm">
  225.                 <a href="#" class="text-github-blue hover:underline">open-source/awesome-project</a>
  226.               </p>
  227.             </div>
  228.           </div>
  229.         </div>
  230.       </div>
  232.       <!-- Activity Item: Issue Comment -->
  233.       <div class="mb-4 relative">
  234.         <div class="absolute -left-[22px] mt-1 w-3 h-3 bg-github-blue border-2 border-white rounded-full"></div>
  235.         <div class="flex flex-col sm:flex-row sm:items-center text-sm mb-1">
  236.           <span class="font-semibold mr-1">Commented on issue</span>
  237.           <span class="text-github-text-secondary">22 days ago</span>
  238.         </div>
  239.         <div class="border border-github-border rounded-github-md p-3">
  240.           <div class="flex items-start mb-2">
  241.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="mr-2 text-github-green mt-1">
  242.               <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
  243.               <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
  244.             </svg>
  245.             <div>
  246.               <h4 class="font-semibold">
  247.                 <a href="#" class="text-github-text-primary hover:underline">Bug: Mobile menu not working on iOS</a>
  248.                 <span class="text-github-text-secondary ml-1">#28</span>
  249.               </h4>
  250.               <p class="text-github-text-secondary text-sm">
  251.                 <a href="#" class="text-github-blue hover:underline">open-source/awesome-project</a>
  252.               </p>
  253.             </div>
  254.           </div>
  255.           <div class="pl-6 border-l-2 border-github-border ml-1">
  256.             <p class="text-sm">I've found a solution to this. It appears to be a Safari-specific issue with the event delegation on touch events.</p>
  257.           </div>
  258.         </div>
  259.       </div>
  261.       <!-- Activity Item: Commit Push -->
  262.       <div class="mb-4 relative">
  263.         <div class="absolute -left-[22px] mt-1 w-3 h-3 bg-github-green border-2 border-white rounded-full"></div>
  264.         <div class="flex flex-col sm:flex-row sm:items-center text-sm mb-1">
  265.           <span class="font-semibold mr-1">Pushed 3 commits to</span>
  266.           <a href="#" class="text-github-blue hover:underline mr-1">johndoe/react-components</a>
  267.           <span class="text-github-text-secondary">25 days ago</span>
  268.         </div>
  269.         <div class="border border-github-border rounded-github-md p-3">
  270.           <div class="flex flex-col divide-y divide-github-border">
  271.             <div class="pb-2 mb-2 flex items-start">
  272.               <img src="https://avatars.githubusercontent.com/u/123456789?v=4" alt="User avatar" class="w-5 h-5 rounded-full mr-2">
  273.               <div>
  274.                 <p class="text-sm font-mono">
  275.                   <a href="#" class="font-semibold text-github-text-primary hover:underline">a1b2c3d</a>
  276.                   <span class="text-github-text-primary">Fix button focus state on dark mode</span>
  277.                 </p>
  278.               </div>
  279.             </div>
  280.             <div class="py-2 flex items-start">
  281.               <img src="https://avatars.githubusercontent.com/u/123456789?v=4" alt="User avatar" class="w-5 h-5 rounded-full mr-2">
  282.               <div>
  283.                 <p class="text-sm font-mono">
  284.                   <a href="#" class="font-semibold text-github-text-primary hover:underline">e4f5g6h</a>
  285.                   <span class="text-github-text-primary">Add accessibility improvements to dropdown</span>
  286.                 </p>
  287.               </div>
  288.             </div>
  289.             <div class="pt-2 flex items-start">
  290.               <img src="https://avatars.githubusercontent.com/u/123456789?v=4" alt="User avatar" class="w-5 h-5 rounded-full mr-2">
  291.               <div>
  292.                 <p class="text-sm font-mono">
  293.                   <a href="#" class="font-semibold text-github-text-primary hover:underline">i7j8k9l</a>
  294.                   <span class="text-github-text-primary">Update documentation for new features</span>
  295.                 </p>
  296.               </div>
  297.             </div>
  298.           </div>
  299.         </div>
  300.       </div>
  302.       <!-- Show more activity link -->
  303.       <div class="text-center my-4">
  304.         <a href="#" class="text-github-blue hover:underline text-sm">
  305.           Show more activity
  306.         </a>
  307.       </div>
  308.     </div>
  309.   </div>
  310. </div>

移动设备适配注意事项

在实现GitHub用户主页时，我们已经做了一些响应式设计的处理，但让我们总结一下关键的移动设备适配注意事项：

  1. 布局切换：

    • 在桌面端是两列布局（侧边栏+主内容区）
    • 在移动端切换为单列布局，侧边栏内容移至顶部简化显示

  2. 导航栏简化：

    • 移动端隐藏大部分导航链接
    • 使用汉堡菜单图标替代

  3. 个人资料内容精简：

    • 移动端只展示最基本的用户信息
    • 完整的个人资料信息可能在单独页面中访问

  4. 卡片样式：

    • 置顶仓库在桌面端双列显示
    • 在移动端改为单列全宽显示

  5. 触摸友好：

    • 确保所有交互元素有足够的点击区域
    • 避免过小的互动目标

关键样式技术点

1. 侧边栏布局技术

GitHub的侧边栏使用了固定宽度和滚动独立的设计。我们使用了以下Tailwind类来实现：

  1. <div class="w-full md:w-1/4">

这确保侧边栏在桌面上占据约1/4的宽度，而在移动设备上则是全宽。

2. 活动时间线

GitHub的活动时间线是一个左侧带有彩色点和垂直线的布局。我们使用相对和绝对定位来实现：

  1. <div class="border-l-2 border-github-border ml-2 pl-4">
  2.   <!-- 活动项 -->
  3.   <div class="mb-4 relative">
  4.     <div class="absolute -left-[22px] mt-1 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
  5.     <!-- 活动内容 -->
  6.   </div>
  7. </div>

这种技术创建了一条垂直线，通过绝对定位将彩色圆点放置在适当的位置。

3. 贡献图表

GitHub的贡献热力图是其最具特色的可视化元素之一。我们使用CSS网格来创建简化版本：

  1. <div class="grid grid-cols-7 gap-1">
  2.   <!-- 各种颜色的单元格 -->
  3.   <div class="w-4 h-4 bg-github-bg border border-github-border rounded-sm"></div>
  4.   <div class="w-4 h-4 bg-green-100 border border-github-border rounded-sm"></div>
  5.   <!-- ... -->
  6. </div>

这创建了一个7列的网格，每个单元格代表一天的贡献。

4. 卡片设计模式

GitHub大量使用卡片模式来组织内容。我们使用以下样式：

  1. <div class="border border-github-border rounded-github-md p-4">
  2.   <!-- 卡片内容 -->
  3. </div>

这提供了一致的边框、圆角和内边距。

5. 悬停效果

GitHub的交互设计使用了微妙的悬停效果。例如：

  1. <a href="#" class="text-github-blue hover:underline">

或者对于标签/按钮：

  1. <button class="bg-github-bg hover:bg-gray-100">

常见问题与解决方案

问题1：保持侧边栏与主内容的平衡

解决方案：使用Flexbox或Grid布局，并为不同的视口大小设置适当的比例。在较小屏幕上转为堆叠布局。

  1. <div class="flex flex-col md:flex-row gap-6">
  2.   <div class="w-full md:w-1/4"><!-- 侧边栏 --></div>
  3.   <div class="w-full md:w-3/4"><!-- 主内容 --></div>
  4. </div>

问题2：活动时间线的样式一致性

解决方案：使用相对/绝对定位和边框来创建一致的垂直线和彩色节点。对于嵌套内容，使用统一的内边距和边框样式。

  1. <div class="border-l-2 border-github-border ml-2 pl-4">
  2.   <div class="relative">
  3.     <div class="absolute -left-[22px] mt-1 w-3 h-3 bg-github-blue border-2 border-white rounded-full"></div>
  4.     <!-- 内容 -->
  5.   </div>
  6. </div>

问题3：移动设备上的复杂导航

解决方案：在小屏幕上隐藏非关键导航元素，提供汉堡菜单按钮。使用响应式类控制显示：

  1. <nav class="hidden md:flex items-center space-x-4">
  2.   <!-- 导航链接 -->
  3. </nav>
  4. <button class="md:hidden">
  5.   <!-- 汉堡菜单图标 -->
  6. </button>

扩展与练习建议

  1. 添加标签系统：在个人资料部分添加技能标签系统，展示用户的技术专长。

  2. 实现”编辑个人资料”弹窗：创建一个弹出表单，允许用户编辑个人资料信息。

  3. 完善贡献图表：实现一个更完整的贡献热力图，包括悬停时显示具体贡献数量的工具提示。

  4. 添加仓库过滤功能：在仓库部分添加过滤选项，允许按语言、最近更新等进行筛选。

  5. 实现切换主题功能：添加一个暗/亮主题切换按钮，并使用Tailwind的暗模式支持来适配GitHub的暗色主题。

总结

在本节中，我们成功复刻了GitHub的用户主页，包括个人资料侧边栏和活动流时间线。我们学习了如何使用Tailwind CSS实现复杂的布局结构、响应式设计和交互元素。

GitHub的用户主页是一个信息密集型页面，它巧妙地组织了大量内容，同时保持了清晰的视觉层次结构。通过仔细分析和实现这个页面，我们获得了关于界面设计、响应式布局和组件复用的宝贵经验。

关键要点包括：

  • 使用Flexbox创建响应式双列布局
  • 用相对/绝对定位实现活动时间线
  • 使用CSS网格绘制贡献热力图
  • 在移动设备上适当简化界面
  • 保持一致的卡片设计语言

在下一节中，我们将探索如何实现GitHub的仓库列表页面，进一步扩展我们的GitHub界面复刻项目。