**从简历石沉大海到HR主动联系，这个GitHub项目让我的开发者作品集惊艳全场**

import json

# 读取项目数据文件
with open('data.json', 'r', encoding='utf-8') as f:
    portfolios = json.load(f)

# 查看数据的基本结构
print(f"总共收录了 {len(portfolios)} 个作品集")

# 统计最常用的技术栈
tech_counts = {}
for portfolio in portfolios:
    for tech in portfolio.get('techStack', []):
        tech_counts[tech] = tech_counts.get(tech, 0) + 1

# 排序并显示前十个最热门的技术栈
sorted_techs = sorted(tech_counts.items(), key=lambda x: x[1], reverse=True)
print("\n最受欢迎的十大技术栈：")
for tech, count in sorted_techs[:10]:
    print(f"  {tech}: {count} 个作品集")

# 根据你的需求筛选作品集

# 场景一：你是React开发者，想要找React作品集
react_portfolios = [
    p for p in portfolios 
    if 'React' in p.get('techStack', [])
]
print(f"\nReact相关作品集数量：{len(react_portfolios)}")

# 场景二：你想要简约风格（描述中包含simple/minimal等关键词）
minimal_portfolios = [
    p for p in portfolios
    if any(keyword in p.get('description', '').lower() 
           for keyword in ['simple', 'minimal', 'clean', 'minimalist'])
]
print(f"简约风格作品集数量：{len(minimal_portfolios)}")

# 场景三：你想找包含特定功能的作品集
interactive_portfolios = [
    p for p in portfolios
    if any(keyword in p.get('description', '').lower() 
           for keyword in ['animation', 'interactive', 'dynamic'])
]
print(f"包含交互动效的作品集数量：{len(interactive_portfolios)}")

# 场景四：你想找中文开发者的作品集（通常GitHub用户名或描述包含中文）
chinese_portfolios = [
    p for p in portfolios
    if any('\u4e00' <= char <= '\u9fff' for char in p.get('author', '') + p.get('title', ''))
]
print(f"中文作品集数量：{len(chinese_portfolios)}")

# 建立你的灵感收藏夹
inspired_portfolios = []

# 添加你喜欢的作品集到收藏夹
inspired_portfolios.append({
    'title': 'Ahmad Awais的个人作品集',
    'url': 'https://ahmadawais.com/',
    'what_inspired_you': '使用了大胆的深色主题和绿色荧光色点缀，首页的终端动画非常抓眼球',
    'key_features': ['终端风格的首页动画', '博客与作品集一体化', '深色主题配合亮色点缀']
})

inspired_portfolios.append({
    'title': 'Brittany Chiang的作品集',
    'url': 'https://brittanychiang.com/',
    'what_inspired_you': '极简的黑白灰配色，内容层次分明，导航体验流畅',
    'key_features': ['黑白灰极简配色', '固定侧边栏导航', '项目卡片悬浮效果']
})

# 将收藏夹导出为Markdown文件，方便后续参考
with open('my_inspiration.md', 'w', encoding='utf-8') as f:
    f.write("# 我的作品集灵感收藏\n\n")
    for i, portfolio in enumerate(inspired_portfolios, 1):
        f.write(f"## {i}. {portfolio['title']}\n\n")
        f.write(f"**链接**: {portfolio['url']}\n\n")
        f.write(f"**打动我的地方**: {portfolio['what_inspired_you']}\n\n")
        f.write(f"**关键特性**: \n")
        for feature in portfolio['key_features']:
            f.write(f"- {feature}\n")
        f.write("\n---\n\n")

print("灵感收藏夹已保存到 my_inspiration.md")

# 分析作品集配色方案的脚本
from collections import Counter

# 简化分析：统计描述中提到的配色风格
color_keywords = {
    'dark': ['dark', 'dark mode', '暗色', '深色'],
    'light': ['light', 'light mode', '浅色', '白色'],
    'colorful': ['colorful', 'gradient', '渐变', '彩色'],
    'minimal': ['minimal', 'monochrome', '单色', '极简']
}

for style, keywords in color_keywords.items():
    count = sum(1 for p in portfolios 
                if any(kw in p.get('description', '').lower() for kw in keywords))
    print(f"{style} 风格: {count} 个作品集")

# 结论输出
print("\n从数据可以看出，大多数作品集倾向于极简或暗色主题，")
print("这反映了开发者社区的主流审美偏好。")

# 统计作品集页面结构的脚本
sections = Counter()
for portfolio in portfolios:
    # 这里的逻辑需要根据实际数据结构调整
    # 假设每个作品集都有tags或category字段
    for tag in portfolio.get('tags', []):
        sections[tag] += 1

print("\n作品集常见的分类标签：")
for section, count in sections.most_common(15):
    print(f"  {section}: {count}")

# 这不是一个代码脚本，而是一个思考框架
# 把它当作你在构建作品集前需要完成的心理建设

定位清单 = {
    "目标": {
        "受众": "___（HR/技术总监/客户/同行）",
        "期望传递的信息": "___（技术实力/学习能力/沟通协作/创意设计）",
    },
    "优势": {
        "技术栈": "___（你最擅长的技术）",
        "项目经验": "___（你最得意的项目）",
        "独特背景": "___（让你与众不同的地方）",
    },
    "风格": {
        "视觉倾向": "___（暗色/浅色/彩色/极简）",
        "语气风格": "___（专业严谨/轻松活泼/极客硬核）",
        "核心关键词": "___（用3个词描述你自己）",
    }
}

# 把这个清单填好，它将指导你后续的所有设计决策
print("在开始设计之前，请先完成上面的定位清单。")
print("它将是你创作过程中的指南针。")

// 作品集项目结构
const projectStructure = {
  "portfolio-project": {
    "components": {
      "Header.js": "导航栏组件",
      "Hero.js": "首屏区域，展示姓名和简介",
      "About.js": "关于我区域",
      "Skills.js": "技能展示区域",
      "Projects.js": "项目作品区域",
      "Contact.js": "联系方式区域",
      "Footer.js": "页脚组件"
    },
    "pages": {
      "index.js": "主页（组合所有组件）",
      "_app.js": "全局布局和样式配置"
    },
    "styles": {
      "globals.css": "全局样式和CSS变量定义"
    }
  }
}

console.log("这是一个典型的Next.js作品集项目结构")
console.log("每个组件负责一个功能区域，便于维护和扩展")

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发者作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-content">
            <a href="#" class="logo">Logo</a>
            <ul class="nav-links">
                <li><a href="#about">关于</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>

    <!-- 首屏区域 -->
    <header class="hero">
        <div class="hero-content">
            <h1>你好，我是<span class="highlight">[你的名字]</span></h1>
            <p class="tagline">全栈开发者 | 开源贡献者 | 技术写作者</p>
            <div class="hero-cta">
                <a href="#projects" class="btn btn-primary">查看项目</a>
                <a href="#contact" class="btn btn-secondary">联系我</a>
            </div>
        </div>
    </header>

    <!-- 关于区域 -->
    <section id="about" class="section">
        <div class="container">
            <h2>关于我</h2>
            <div class="about-content">
                <p>在这里介绍你的背景、经历和技术热情。</p>
                <p>突出你与众不同的特点和职业目标。</p>
            </div>
        </div>
    </section>

    <!-- 项目区域 -->
    <section id="projects" class="section">
        <div class="container">
            <h2>精选项目</h2>
            <div class="projects-grid">
                <!-- 项目卡片将在这里动态生成 -->
            </div>
        </div>
    </section>

    <!-- 联系区域 -->
    <section id="contact" class="section">
        <div class="container">
            <h2>联系我</h2>
            <p>邮箱: your.email@example.com</p>
            <p>GitHub: github.com/yourusername</p>
        </div>
    </section>

    <footer class="footer">
        <p>&copy; 2024 你的名字. All rights reserved.</p>
    </footer>

    <script src="main.js"></script>
</body>
</html>

/* 全局CSS变量定义 */
:root {
    --color-bg: #0a0a0a;
    --color-text: #e0e0e0;
    --color-accent: #64ffda;
    --color-surface: #1a1a1a;
    --font-main: 'Inter', -apple-system, sans-serif;
    --spacing-unit: 8px;
}

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* 容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 calc(var(--spacing-unit) * 3);
}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(var(--spacing-unit) * 2) 0;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(var(--spacing-unit) * 3);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: calc(var(--spacing-unit) * 4);
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--color-accent);
}

/* 首屏区域样式 */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
}

.hero-content {
    max-width: 800px;
}

.hero h1 {
    font-size: clamp(32px, 8vw, 64px);
    line-height: 1.1;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.highlight {
    color: var(--color-accent);
}

.tagline {
    font-size: 20px;
    color: #888;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.hero-cta {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.btn {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-bg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3);
}

.btn-secondary {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

.btn-secondary:hover {
    background: rgba(100, 255, 218, 0.1);
}

/* 通用区域样式 */
.section {
    padding: calc(var(--spacing-unit) * 15) 0;
}

.section h2 {
    font-size: 32px;
    margin-bottom: calc(var(--spacing-unit) * 6);
    position: relative;
    display: inline-block;
}

.section h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--color-accent);
}

/* 页脚样式 */
.footer {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) 0;
    color: #666;
    font-size: 14px;
}

// 作品集交互逻辑

// 项目数据
const projects = [
    {
        title: '开源组件库',
        description: '一套企业级React组件库，包含50+高质量组件，已获得2000+ Star',
        tags: ['React', 'TypeScript', 'Storybook'],
        link: 'https://github.com/yourusername/awesome-components',
        image: 'project1.jpg'
    },
    {
        title: '博客系统',
        description: '基于Next.js的静态博客系统，支持Markdown写作和SEO优化',
        tags: ['Next.js', 'MDX', 'Vercel'],
        link: 'https://github.com/yourusername/blog',
        image: 'project2.jpg'
    },
    {
        title: '效率工具',
        description: '一款提升开发效率的Chrome插件，月活用户超过5000',
        tags: ['JavaScript', 'Chrome Extension'],
        link: 'https://github.com/yourusername/productivity-tool',
        image: 'project3.jpg'
    }
]

// 渲染项目卡片
function renderProjects() {
    const grid = document.querySelector('.projects-grid')
    if (!grid) return

    grid.innerHTML = projects.map(project => `
        <article class="project-card">
            <div class="project-image">
                <img src="${project.image}" alt="${project.title}" loading="lazy">
            </div>
            <div class="project-content">
                <h3>${project.title}</h3>
                <p>${project.description}</p>
                <div class="project-tags">
                    ${project.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                </div>
                <a href="${project.link}" target="_blank" rel="noopener noreferrer" class="project-link">
                    查看详情 →
                </a>
            </div>
        </article>
    `).join('')
}

// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault()
        const target = document.querySelector(this.getAttribute('href'))
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            })
        }
    })
})

// 滚动动画（Intersection Observer）
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
}

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible')
            observer.unobserve(entry.target)
        }
    })
}, observerOptions)

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    renderProjects()

    // 观察所有section元素
    document.querySelectorAll('.section').forEach(section => {
        section.classList.add('fade-in')
        observer.observe(section)
    })
})

console.log('作品集初始化完成')

# 辅助工具：帮助生成技能展示的Markdown表格

skills_data = [
    {
        "category": "前端开发",
        "years": "5年",
        "technologies": ["React", "Vue", "TypeScript", "Next.js", "Tailwind CSS"],
        "proficiency": "精通"
    },
    {
        "category": "后端开发",
        "years": "3年",
        "technologies": ["Node.js", "Python", "Go", "PostgreSQL", "Redis"],
        "proficiency": "熟练"
    },
    {
        "category": "DevOps",
        "years": "2年",
        "technologies": ["Docker", "Kubernetes", "CI/CD", "AWS", "Vercel"],
        "proficiency": "了解"
    },
    {
        "category": "其他",
        "years": "持续学习",
        "technologies": ["GraphQL", "Three.js", "WebGL", "Machine Learning"],
        "proficiency": "探索中"
    }
]

# 生成Markdown格式的技能表格
print("| 领域 | 经验年限 | 技术栈 | 熟练度 |")
print("|------|----------|--------|--------|")
for skill in skills_data:
    techs = ", ".join(skill["technologies"])
    print(f"| {skill['category']} | {skill['years']} | {techs} | {skill['proficiency']} |")

/* 响应式断点设计 */
:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* 平板设备 */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 48px;
    }

    .nav-links {
        gap: calc(var(--spacing-unit) * 3);
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 36px;
    }

    .nav-links {
        display: none; /* 可以考虑添加汉堡菜单 */
    }

    .hero-cta {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* 性能优化：减少动画提升移动端体验 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

// 性能优化：图片懒加载
const lazyImages = document.querySelectorAll('img[data-src]')

const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target
            img.src = img.dataset.src
            img.removeAttribute('data-src')
            img.classList.add('loaded')
            observer.unobserve(img)
        }
    })
})

lazyImages.forEach(img => imageObserver.observe(img))

// 性能优化：资源预加载提示
const preloadLinks = document.createElement('link')
preloadLinks.rel = 'preload'
preloadLinks.as = 'image'
preloadLinks.href = 'hero-image.webp'
document.head.appendChild(preloadLinks)

// SEO优化：添加JSON-LD结构化数据
const structuredData = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "你的名字",
    "url": "https://yourportfolio.com",
    "sameAs": [
        "https://github.com/yourusername",
        "https://linkedin.com/in/yourusername",
        "https://twitter.com/yourusername"
    ],
    "jobTitle": "高级前端工程师",
    "worksFor": {
        "@type": "Organization",
        "name": "公司名称"
    },
    "knowsAbout": ["JavaScript", "React", "Node.js", "TypeScript"]
}

// 将结构化数据添加到页面
const script = document.createElement('script')
script.type = 'application/ld+json'
script.textContent = JSON.stringify(structuredData)
document.head.appendChild(script)

# 数据分析辅助脚本：帮助理解你的作品集访客

# 假设你收集了以下匿名化的访问数据
visitor_data = {
    'total_visitors': 1250,
    'top_pages': {
        '/projects/open-source-library': 580,
        '/projects/blog-system': 420,
        '/about': 380,
        '/': 1200
    },
    'traffic_sources': {
        'LinkedIn': 450,
        'GitHub': 320,
        'Direct': 280,
        'Google': 150,
        'Twitter': 50
    },
    'avg_time_on_page': {
        '/': '0:45',
        '/about': '1:30',
        '/projects/open-source-library': '2:15'
    }
}

print("=== 作品集访问数据分析 ===\n")
print(f"总访问量: {visitor_data['total_visitors']}")

print("\n最受欢迎的页面 TOP 3:")
for page, views in sorted(visitor_data['top_pages'].items(), 
                          key=lambda x: x[1], 
                          reverse=True)[:3]:
    print(f"  {page}: {views} 次浏览")

print("\n流量来源分布:")
for source, count in visitor_data['traffic_sources'].items():
    percentage = (count / visitor_data['total_visitors']) * 100
    print(f"  {source}: {percentage:.1f}%")

print("\n页面停留时间:")
for page, time in visitor_data['avg_time_on_page'].items():
    print(f"  {page}: 平均 {time}")

print("\n洞察：")
print("1. 首页到项目页的转化率需要关注，应加强首页的项目引导")
print("2. LinkedIn是最大的流量来源，LinkedIn档案需要与作品集保持一致")
print("3. 开源库页面停留时间最长，说明这是访客最关心的内容")