Spaces:

hepansls
/

resume-wizard

Running

App Files Files Community

hepansls commited on Dec 11, 2025

Commit

9bc6cc2

verified ·

1 Parent(s): c35e1d0

你需要从本地路径读取json数据，例如resume.json，而不是直接展示resume_dict，resume_dict只是一个示例。

Browse files

Files changed (8) hide show

README.md +8 -5
components/resume-footer.js +43 -0
components/resume-header.js +76 -0
components/resume-section.js +49 -0
index.html +150 -19
resume.json +86 -0
script.js +131 -0
style.css +27 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Resume Wizard
-emoji: 😻
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Resume Wizard 🧙
+colorFrom: red
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/resume-footer.js ADDED Viewed

	@@ -0,0 +1,43 @@

+class ResumeFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    margin-top: 3rem;
+                    padding-top: 2rem;
+                    border-top: 1px solid #e5e7eb;
+                    text-align: center;
+                    color: #6b7280;
+                    font-size: 0.875rem;
+                }
+                .print-button {
+                    background-color: #4f46e5;
+                    color: white;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.375rem;
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    cursor: pointer;
+                    margin-bottom: 1rem;
+                }
+                .print-button:hover {
+                    background-color: #4338ca;
+                }
+            </style>
+            <footer>
+                <button class="print-button no-print" onclick="window.print()">
+                    <i data-feather="printer"></i>
+                    Print Resume
+                </button>
+                <p>Last updated: ${new Date().toLocaleDateString()}</p>
+            </footer>
+        `;
+    }
+}
+customElements.define('resume-footer', ResumeFooter);

components/resume-header.js ADDED Viewed

	@@ -0,0 +1,76 @@

+class ResumeHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .header {
+                    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+                    color: white;
+                    border-radius: 0.75rem;
+                    padding: 2rem;
+                    position: relative;
+                    overflow: hidden;
+                }
+                .header::before {
+                    content: "";
+                    position: absolute;
+                    top: -50%;
+                    right: -50%;
+                    width: 100%;
+                    height: 200%;
+                    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+                    transform: rotate(30deg);
+                }
+                .contact-info {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                .contact-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-size: 0.9rem;
+                }
+                @media (max-width: 640px) {
+                    .header {
+                        padding: 1.5rem;
+                    }
+                    .name {
+                        font-size: 1.5rem;
+                    }
+                }
+            </style>
+            <header class="header shadow-lg">
+                <div class="relative z-10">
+                    <h1 class="name text-3xl font-bold">何攀</h1>
+                    <p class="title text-xl opacity-90 mt-1">NLP Researcher</p>
+                    <div class="contact-info">
+                        <div class="contact-item">
+                            <i data-feather="mail"></i>
+                            <span>newtonysls@gmail.com</span>
+                        </div>
+                        <div class="contact-item">
+                            <i data-feather="phone"></i>
+                            <span>156-8312-1839</span>
+                        </div>
+                        <div class="contact-item">
+                            <i data-feather="map-pin"></i>
+                            <span>四川省成都市电子科技大学清水河校区</span>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        `;
+    }
+}
+customElements.define('resume-header', ResumeHeader);

components/resume-section.js ADDED Viewed

	@@ -0,0 +1,49 @@

+class ResumeSection extends HTMLElement {
+    connectedCallback() {
+        const title = this.getAttribute('title') || '';
+        const icon = this.getAttribute('icon') || 'file';
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .section-title {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    margin-bottom: 1.5rem;
+                    color: #4f46e5;
+                }
+                .section-title h2 {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    margin: 0;
+                }
+                .section-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: #eef2ff;
+                    border-radius: 50%;
+                }
+            </style>
+            <section class="resume-section">
+                <div class="section-title">
+                    <div class="section-icon">
+                        <i data-feather="${icon}"></i>
+                    </div>
+                    <h2>${title}</h2>
+                </div>
+                <div class="section-content">
+                    <slot></slot>
+                </div>
+            </section>
+        `;
+    }
+}
+customElements.define('resume-section', ResumeSection);

index.html CHANGED Viewed

@@ -1,19 +1,150 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resume - He Pan</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/resume-header.js"></script>
+    <script src="components/resume-section.js"></script>
+    <script src="components/resume-footer.js"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans">
+    <div class="max-w-4xl mx-auto p-6 md:p-8">
+        <resume-header></resume-header>
+        <main class="mt-8 space-y-8" id="resume-content">
+            <!-- Resume content will be dynamically loaded here -->
+        </main>
+        <resume-footer></resume-footer>
+    </div>
+    <script>
+        feather.replace();
+        // Load resume data from JSON file
+        fetch('resume.json')
+            .then(response => response.json())
+            .then(data => {
+                const resumeContent = document.getElementById('resume-content');
+                generateResumeContent(data, resumeContent);
+                feather.replace(); // Refresh icons after content is loaded
+            })
+            .catch(error => {
+                console.error('Error loading resume data:', error);
+            });
+    </script>
+<div class="space-y-6">
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="text-lg font-semibold">电子科技大学</h3>
+                                <p class="text-gray-600">计算机科学与技术 - 硕士</p>
+                            </div>
+                            <span class="text-gray-500">2020-09 - 至今</span>
+                        </div>
+                        <div class="mt-2">
+                            <p class="text-gray-700"><span class="font-medium">GPA:</span> 4.4(示例)</p>
+                            <p class="text-gray-700 mt-1"><span class="font-medium">Courses:</span> 自然语言处理, 深度学习, 机器学习, 计算机操作系统, 计算机网络</p>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="text-lg font-semibold">吉林大学</h3>
+                                <p class="text-gray-600">地球物理 - 学士</p>
+                            </div>
+                            <span class="text-gray-500">2016-09 - 2020-06</span>
+                        </div>
+                        <div class="mt-2">
+                            <p class="text-gray-700"><span class="font-medium">GPA:</span> 4.4/5.0</p>
+                            <p class="text-gray-700 mt-1"><span class="font-medium">Courses:</span> 计算机操作系统, 计算机网络, 自然语言处理基础, 机器学习导论, 深度学习框架实践</p>
+                        </div>
+                    </div>
+                </div>
+            </resume-section>
+            <resume-section title="Work Experience" icon="briefcase">
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="text-lg font-semibold">网易伏羲</h3>
+                            <p class="text-gray-600">NLP研究员</p>
+                        </div>
+                        <span class="text-gray-500">2022-03 - 2022-06</span>
+                    </div>
+                    <ul class="mt-4 space-y-3 list-disc list-inside text-gray-700">
+                        <li>构建基于预训练模型的无监督段落级文本摘要系统，针对游戏剧情生成场景设计创新性数据增强方案。通过动态段落删减策略结合连续性判断机制构建正负样本，实现无需人工标注的段落级缩写模型，有效解决小样本场景下的训练数据稀缺问题，成果可迁移应用���NLU领域的文本精简与信息压缩任务。</li>
+                        <li>主导开发Lizards-GEAT：参数高效且泛化增强的Prompt Tuning框架。创新性提出无梯度反向传播的直接分类架构，显著提升训练效率；设计答案词干扰增强策略，通过错误词注入提升模型泛化能力。该方法在保持模型性能的同时降低90%计算开销，相关成果已形成论文投递ACL 2024，独立完成实验设计、模型实现及论文撰写工作，充分展现大模型微调与算法优化能力。</li>
+                    </ul>
+                </div>
+            </resume-section>
+            <resume-section title="Research Publications" icon="file-text">
+                <div class="space-y-6">
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                        <h3 class="text-lg font-semibold">Sentence Rewriting for Fine-Tuned Model Based on Dictionary: Taking the Track 1 of NLPCC 2021 Argumentative Text Understanding for AI Debater as an Example</h3>
+                        <p class="text-gray-600 mt-1">He P, Wang Y, Zhang Y | CCF International Conference on Natural Language Processing and Chinese Computing | 2021</p>
+                        <p class="text-gray-700 mt-2">Proposed a novel sentence rewriting framework for fine-tuned models based on dictionary matching mechanisms. The approach effectively enhanced argumentative text understanding capabilities for AI debater systems, achieving state-of-the-art results on NLPCC 2021 Track 1 benchmark.</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                        <h3 class="text-lg font-semibold">Zhegu@SMM4H-2022: The Pre-training Tweet & Claim Matching Makes Your Prediction Better</h3>
+                        <p class="text-gray-600 mt-1">Pan He, Yuze Chen, Yanru Zhang | Proceedings of the Seventh Social Media Mining for Health Applications (SMM4H) Workshop & Shared Task | 2022</p>
+                        <p class="text-gray-700 mt-2">Proposed a pre-training framework for tweet and claim matching in health domain, achieving state-of-the-art accuracy on social media text classification. The method effectively enhances contextual understanding through domain-specific pre-training.</p>
+                    </div>
+                </div>
+            </resume-section>
+            <resume-section title="Skills" icon="code">
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <ul class="space-y-3 list-disc list-inside text-gray-700">
+                        <li>精通Python编程及PyTorch深度学习框架，具备NLP算法开发经验。熟悉Transformer/BERT等预训练模型的微调实践，掌握RAG系统构建流程（文档切分、向量检索、知识融合），了解LangChain等Agent框架原理。具备模型工程化部署能力，熟悉意图识别、实体抽取等NLU核心任务的优化方法</li>
+                        <li>精通自然语言处理核心技术，包括文本分类、意图识别、实体抽取及情感分析等NLU任务。具备大语言模型（如Llama、GLM）的预训练、微调及Prompt Tuning实践经验，能针对业务场景优化模型效果。熟悉向量数据库和语义检索技术，具备RAG系统全链路开发能力。</li>
+                        <li>CET-6，具备专业级英文听说读写能力，能够高效阅读NLP领域顶会论文（如ACL/EMNLP）并撰写英文学术论文。擅长解析NLU算法论文（意图识别/实体抽取），可快速复现SOTA模型。熟悉Agent领域核心论文（ReAct/Tool-use），具备基于LangChain/LlamaIndex框架的工程实现能力</li>
+                    </ul>
+                </div>
+            </resume-section>
+            <resume-section title="Patents" icon="award">
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <h3 class="text-lg font-semibold">基于预训练模型语义理解的多语言缩写消歧义算法</h3>
+                    <p class="text-gray-600 mt-1">Owner: 何攀</p>
+                </div>
+            </resume-section>
+            <resume-section title="Awards" icon="star">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                        <h4 class="font-medium">国家励志奖学金</h4>
+                        <p class="text-gray-600 text-sm mt-1">2017-09</p>
+                    </div>
+                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                        <h4 class="font-medium">校一等奖学金</h4>
+                        <p class="text-gray-600 text-sm mt-1">2022-09</p>
+                    </div>
+                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                        <h4 class="font-medium">校二等奖学金</h4>
+                        <p class="text-gray-600 text-sm mt-1">2021-09</p>
+                    </div>
+                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                        <h4 class="font-medium">校三等奖学金</h4>
+                        <p class="text-gray-600 text-sm mt-1">2017-09, 2020-09</p>
+                    </div>
+                </div>
+            </resume-section>
+            <resume-section title="Self Assessment" icon="user">
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <p class="text-gray-700">具备扎实的自然语言处理理论基础，擅长意图识别、实体抽取等NLU核心技术研发。熟悉Transformer架构及大语言模型微调技术，有基于LangChain框架的智能体开发经验。擅长将前沿研究成果（如ReAct框架）转化为实际业务方案，在多轮对话管理和RAG系统优化方面有成功落地案例。具备优秀的跨团队协作能力，能够通过技术分享促进团队知识沉淀，曾主导构建NLP模型评测体系并推动数据闭环建设。</p>
+                </div>
+            </resume-section>
+        </main>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

resume.json ADDED Viewed

	@@ -0,0 +1,86 @@

+```json
+{
+    "name": "何攀",
+    "title": "NLP Researcher",
+    "contact": {
+        "email": "newtonysls@gmail.com",
+        "phone": "156-8312-1839",
+        "address": "四川省成都市电子科技大学清水河校区"
+    },
+    "education": [
+        {
+            "institution": "电子科技大学",
+            "degree": "硕士",
+            "major": "计算机科学与技术",
+            "startDate": "2020-09",
+            "endDate": "至今",
+            "gpa": "4.4(示例)",
+            "courses": ["自然语言处理", "深度学习", "机器学习", "计算机操作系统", "计算机网络"]
+        },
+        {
+            "institution": "吉林大学",
+            "degree": "学士",
+            "major": "地球物理",
+            "startDate": "2016-09",
+            "endDate": "2020-06",
+            "gpa": "4.4/5.0",
+            "courses": ["计算机操作系统", "计算机网络", "自然语言处理基础", "机器学习导论", "深度学习框架实践"]
+        }
+    ],
+    "workExperience": [
+        {
+            "company": "网易伏羲",
+            "position": "NLP研究员",
+            "startDate": "2022-03",
+            "endDate": "2022-06",
+            "responsibilities": [
+                "构建基于预训练模型的无监督段落级文本摘要系统，针对游戏剧情生成场景设计创新性数据增强方案。通过动态段落删减策略结合连续性判断机制构建正负样本，实现无需人工标注的段落级缩写模型，有效解决小样本场景下的训练数据稀缺问题，成果可迁移应用于NLU领域的文本精简与信息压缩任务。",
+                "主导开发Lizards-GEAT：参数高效且泛化增强的Prompt Tuning框架。创新性提出无梯度反向传播的直接分类架构，显著提升训练效率；设计答案词干扰增强策略，通过错误词注入提升模型泛化能力。该方法在保持模型性能的同时降低90%计算开销，相关成果已形成论文投递ACL 2024，独立完成实验设计、模型实现及论文撰写工作，充分展现大模型微调与算法优化能力。"
+            ]
+        }
+    ],
+    "publications": [
+        {
+            "title": "Sentence Rewriting for Fine-Tuned Model Based on Dictionary: Taking the Track 1 of NLPCC 2021 Argumentative Text Understanding for AI Debater as an Example",
+            "authors": "He P, Wang Y, Zhang Y",
+            "conference": "CCF International Conference on Natural Language Processing and Chinese Computing",
+            "year": "2021",
+            "description": "Proposed a novel sentence rewriting framework for fine-tuned models based on dictionary matching mechanisms. The approach effectively enhanced argumentative text understanding capabilities for AI debater systems, achieving state-of-the-art results on NLPCC 2021 Track 1 benchmark."
+        },
+        {
+            "title": "Zhegu@SMM4H-2022: The Pre-training Tweet & Claim Matching Makes Your Prediction Better",
+            "authors": "Pan He, Yuze Chen, Yanru Zhang",
+            "conference": "Proceedings of the Seventh Social Media Mining for Health Applications (SMM4H) Workshop & Shared Task",
+            "year": "2022",
+            "description": "Proposed a pre-training framework for tweet and claim matching in health domain, achieving state-of-the-art accuracy on social media text classification. The method effectively enhances contextual understanding through domain-specific pre-training."
+        }
+    ],
+    "skills": [
+        "精通Python编程及PyTorch深度学习框架，具备NLP算法开发经验。熟悉Transformer/BERT等预训练模型的微调实践，掌握RAG系统构建流程（文档切分、向量检索、知识融合），了解LangChain等Agent框架原理。具备模型工程化部署能力，熟悉意图识别、实体抽取等NLU核心任务的优化方法",
+        "精通自然语言处理核心技术，包括文本分类、意图识别、实体抽取及情感分析等NLU任务。具备大语言模型（如Llama、GLM）的预训练、微调及Prompt Tuning实践经验，能针对业务场景优化模型效果。熟悉向量数据库和语义检索技术，具备RAG系统全链路开发能力。",
+        "CET-6，具备专业级英文听说读写能力，能够高效阅读NLP领域顶会论文（如ACL/EMNLP）并撰写英文学术论文。擅长解析NLU算法论文（意图识别/实体抽取），可快速复现SOTA模型。熟悉Agent领域核心论文（ReAct/Tool-use），具备基于LangChain/LlamaIndex框架的工程实现能力"
+    ],
+    "awards": [
+        {
+            "name": "国家励志奖学金",
+            "date": "2017-09"
+        },
+        {
+            "name": "校一等奖学金",
+            "date": "2022-09"
+        },
+        {
+            "name": "校二等奖学金",
+            "date": "2021-09"
+        },
+        {
+            "name": "校三等奖学金",
+            "date": "2017-09, 2020-09"
+        }
+    ],
+    "selfAssessment": "具备扎实的自然语言处理理论基础，擅长意图识别、实体抽取等NLU核心技术研发。熟悉Transformer架构及大语言模型微调技术，有基于LangChain框架的智能体开发经验。擅长将前沿研究成果（如ReAct框架）转化为实际业务方案，在多轮对话管理和RAG系统优化方面有成功落地案例。具备优秀的跨团队协作能力，能够通过技术分享促进团队知识沉淀，曾主导构建NLP模型评测体系并推动数据闭环建设。"
+}
+```
+___METADATA_START___
+{"isNew":true,"userName":"hepansls"}
+___METADATA_END___

script.js ADDED Viewed

	@@ -0,0 +1,131 @@

+function generateResumeContent(data, container) {
+    // Generate Education section
+    if (data.education && data.education.length > 0) {
+        const educationSection = document.createElement('resume-section');
+        educationSection.setAttribute('title', 'Education');
+        educationSection.setAttribute('icon', 'book');
+        let educationHTML = '<div class="space-y-6">';
+        data.education.forEach(edu => {
+            educationHTML += `
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="text-lg font-semibold">${edu.institution}</h3>
+                            <p class="text-gray-600">${edu.degree} - ${edu.major}</p>
+                        </div>
+                        <span class="text-gray-500">${edu.startDate} - ${edu.endDate}</span>
+                    </div>
+                    <div class="mt-2">
+                        <p class="text-gray-700"><span class="font-medium">GPA:</span> ${edu.gpa}</p>
+                        <p class="text-gray-700 mt-1"><span class="font-medium">Courses:</span> ${edu.courses.join(', ')}</p>
+                    </div>
+                </div>
+            `;
+        });
+        educationHTML += '</div>';
+        educationSection.innerHTML = educationHTML;
+        container.appendChild(educationSection);
+    }
+    // Generate Work Experience section
+    if (data.workExperience && data.workExperience.length > 0) {
+        const workSection = document.createElement('resume-section');
+        workSection.setAttribute('title', 'Work Experience');
+        workSection.setAttribute('icon', 'briefcase');
+        let workHTML = '<div class="space-y-6">';
+        data.workExperience.forEach(work => {
+            workHTML += `
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="text-lg font-semibold">${work.company}</h3>
+                            <p class="text-gray-600">${work.position}</p>
+                        </div>
+                        <span class="text-gray-500">${work.startDate} - ${work.endDate}</span>
+                    </div>
+                    <ul class="mt-4 space-y-3 list-disc list-inside text-gray-700">
+                        ${work.responsibilities.map(resp => `<li>${resp}</li>`).join('')}
+                    </ul>
+                </div>
+            `;
+        });
+        workHTML += '</div>';
+        workSection.innerHTML = workHTML;
+        container.appendChild(workSection);
+    }
+    // Generate Publications section
+    if (data.publications && data.publications.length > 0) {
+        const pubSection = document.createElement('resume-section');
+        pubSection.setAttribute('title', 'Research Publications');
+        pubSection.setAttribute('icon', 'file-text');
+        let pubHTML = '<div class="space-y-6">';
+        data.publications.forEach(pub => {
+            pubHTML += `
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <h3 class="text-lg font-semibold">${pub.title}</h3>
+                    <p class="text-gray-600 mt-1">${pub.authors} | ${pub.conference} | ${pub.year}</p>
+                    <p class="text-gray-700 mt-2">${pub.description}</p>
+                </div>
+            `;
+        });
+        pubHTML += '</div>';
+        pubSection.innerHTML = pubHTML;
+        container.appendChild(pubSection);
+    }
+    // Generate Skills section
+    if (data.skills && data.skills.length > 0) {
+        const skillsSection = document.createElement('resume-section');
+        skillsSection.setAttribute('title', 'Skills');
+        skillsSection.setAttribute('icon', 'code');
+        const skillsHTML = `
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                <ul class="space-y-3 list-disc list-inside text-gray-700">
+                    ${data.skills.map(skill => `<li>${skill}</li>`).join('')}
+                </ul>
+            </div>
+        `;
+        skillsSection.innerHTML = skillsHTML;
+        container.appendChild(skillsSection);
+    }
+    // Generate Awards section
+    if (data.awards && data.awards.length > 0) {
+        const awardsSection = document.createElement('resume-section');
+        awardsSection.setAttribute('title', 'Awards');
+        awardsSection.setAttribute('icon', 'award');
+        let awardsHTML = '<div class="grid grid-cols-1 md:grid-cols-2 gap-4">';
+        data.awards.forEach(award => {
+            awardsHTML += `
+                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                    <h4 class="font-medium">${award.name}</h4>
+                    <p class="text-gray-600 text-sm mt-1">${award.date}</p>
+                </div>
+            `;
+        });
+        awardsHTML += '</div>';
+        awardsSection.innerHTML = awardsHTML;
+        container.appendChild(awardsSection);
+    }
+    // Generate Self Assessment section
+    if (data.selfAssessment) {
+        const selfSection = document.createElement('resume-section');
+        selfSection.setAttribute('title', 'Self Assessment');
+        selfSection.setAttribute('icon', 'user');
+        const selfHTML = `
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                <p class="text-gray-700">${data.selfAssessment}</p>
+            </div>
+        `;
+        selfSection.innerHTML = selfHTML;
+        container.appendChild(selfSection);
+    }
+}

style.css CHANGED Viewed

@@ -1,28 +1,37 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
 }
+.resume-section {
+    transition: all 0.3s ease;
 }
+.resume-section:hover {
+    transform: translateY(-2px);
 }
+.print-button {
+    transition: all 0.2s ease;
 }
+.print-button:hover {
+    transform: scale(1.05);
 }
+@media print {
+    body {
+        background-color: white;
+        color: black;
+    }
+    .no-print {
+        display: none !important;
+    }
+    .resume-section {
+        break-inside: avoid;
+    }
+}