From 7374e97f44bb5047b1d5e8735bb408eec13a84cd Mon Sep 17 00:00:00 2001 From: seahi Date: Thu, 13 Mar 2025 21:07:42 +0800 Subject: [PATCH] first commit --- README.md | 39 ++++ index.html | 117 +++++++++++ styles.css | 596 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 752 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..0228a5d --- /dev/null +++ b/README.md @@ -0,0 +1,39 @@ +# 个人简历网页 + +这是一个使用HTML和CSS创建的简单个人简历网页模板。 + +## 文件结构 + +- `index.html` - 简历的HTML结构 +- `styles.css` - 简历的CSS样式 + +## 功能特点 + +- 响应式设计，适配各种屏幕尺寸 +- 简洁现代的界面 +- 包含个人信息、工作经历、教育背景、技能和项目经验等部分 + +## 如何使用 + +1. 下载或克隆这个仓库到本地 +2. 使用任何现代浏览器打开`index.html`文件 +3. 根据需要修改HTML内容和CSS样式 + +## 自定义 + +- 在`index.html`中修改个人信息、工作经历等内容 +- 在`styles.css`中调整颜色、字体、布局等样式 +- 可以替换占位图片为自己的照片 + +## 预览方式 + +可以通过以下方式在本地预览： + +1. 直接双击打开`index.html`文件 +2. 使用简单的HTTP服务器，例如： + - Python: `python -m http.server` + - Node.js: `npx serve` + +## 许可 + +可自由使用和修改 diff --git a/index.html b/index.html new file mode 100644 index 0000000..0fa6578 --- /dev/null +++ b/index.html @@ -0,0 +1,117 @@ + + + + + + 个人简历 - 张三 + + + + + + +
+
+
+
+ 个人照片 +
+
+

张三

+

前端开发工程师

+
+

zhangsan@example.com

+

138-8888-8888

+
+
+
+
+ +
+
+

个人简介

+
+

5年前端开发经验，精通HTML、CSS、JavaScript等前端技术，熟悉Vue、React等前端框架。对用户体验和界面设计有深入理解，能够高效地将设计转化为代码实现。

+
+
+ +
+

教育背景

+
+
+
+

北京大学

+

2014年9月 - 2018年6月

+
+

计算机科学与技术 学士学位

+
+
+
+ +
+

技能专长

+
+
+

前端技术

+
+ HTML5 + CSS3 + JavaScript + Vue.js + React +
+
+
+

工具与方法

+
+ Git + Webpack + 响应式设计 +
+
+
+
+ +
+

项目经验

+
+
+

企业管理系统重构

+

使用Vue.js重构旧版管理系统，提升用户体验和开发效率，系统响应速度提升50%。

+
+
+

移动端电商平台

+

负责移动端电商平台的前端开发，实现了商品展示、购物车、支付等核心功能。

+
+
+
+
+ +
+
+

更新日期: 2025年3月

+
+
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..cbe7c69 --- /dev/null +++ b/styles.css @@ -0,0 +1,596 @@ +/* 全局样式 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif; + line-height: 1.6; + color: #333; + background-color: #f8f9fa; + background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + background-attachment: fixed; + opacity: 0; + transition: opacity 0.5s ease; +} + +body.loaded { + opacity: 1; +} + +.container { + max-width: 900px; + margin: 40px auto; + background-color: #fff; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + border-radius: 12px; + overflow: hidden; + transition: all 0.3s ease; +} + +.container:hover { + transform: translateY(-5px); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); +} + +/* 头部样式 */ +header { + padding: 50px 40px; + background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); + color: #fff; + position: relative; + overflow: hidden; +} + +header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%23ffffff" fill-opacity="0.05" d="M0,160L48,181.3C96,203,192,245,288,229.3C384,213,480,139,576,117.3C672,96,768,128,864,160C960,192,1056,224,1152,213.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E'); + background-size: cover; + background-position: center; + opacity: 0.8; +} + +.profile-header { + display: flex; + align-items: center; + position: relative; + z-index: 1; +} + +.profile-img { + margin-right: 40px; + position: relative; +} + +.profile-img::after { + content: ''; + position: absolute; + top: -10px; + left: -10px; + right: -10px; + bottom: -10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + z-index: -1; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 0.6; + } + 50% { + transform: scale(1.05); + opacity: 0.3; + } + 100% { + transform: scale(1); + opacity: 0.6; + } +} + +.profile-img img { + width: 160px; + height: 160px; + border-radius: 50%; + border: 5px solid rgba(255, 255, 255, 0.3); + object-fit: cover; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} + +.profile-img img:hover { + transform: scale(1.05); + border-color: rgba(255, 255, 255, 0.5); +} + +.profile-info h1 { + font-size: 2.8rem; + margin-bottom: 5px; + letter-spacing: 1px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +.title { + font-size: 1.4rem; + margin-bottom: 20px; + opacity: 0.9; + font-weight: 300; + letter-spacing: 1px; +} + +.contact-info { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin-top: 15px; +} + +.contact-info p { + display: flex; + align-items: center; + background-color: rgba(255, 255, 255, 0.1); + padding: 8px 15px; + border-radius: 30px; + backdrop-filter: blur(5px); + transition: all 0.3s ease; +} + +.contact-info p:hover { + background-color: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +.icon { + margin-right: 10px; + font-style: normal; + font-size: 1.2rem; +} + +/* 主体内容样式 */ +main { + padding: 50px 40px; +} + +.section { + margin-bottom: 50px; + animation: fadeIn 0.8s ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.section-title { + font-size: 1.6rem; + color: #2980b9; + margin-bottom: 25px; + padding-bottom: 12px; + border-bottom: 2px solid #eee; + position: relative; + display: inline-block; +} + +.section-title i { + margin-right: 10px; + color: #3498db; +} + +.section-title::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 80px; + height: 2px; + background: linear-gradient(90deg, #3498db, #2980b9); +} + +.section-content { + padding-left: 20px; +} + +/* 工作经历样式 */ +.experience { + margin-bottom: 35px; + padding: 25px; + border-radius: 8px; + background-color: #f9f9f9; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.experience:hover { + transform: translateY(-5px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +.experience-header, .education-header { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + align-items: center; +} + +.experience-header h3, .education-header h3 { + color: #2c3e50; + font-size: 1.3rem; +} + +.date { + color: #7f8c8d; + font-size: 0.9rem; + background-color: #ecf0f1; + padding: 5px 12px; + border-radius: 20px; + font-weight: 500; +} + +.job-title { + font-weight: bold; + margin-bottom: 15px; + color: #3498db; + font-size: 1.1rem; +} + +ul { + padding-left: 20px; +} + +li { + margin-bottom: 10px; + position: relative; +} + +li::before { + content: "•"; + color: #3498db; + font-weight: bold; + display: inline-block; + width: 1em; + margin-left: -1em; +} + +/* 标签样式 */ +.tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 15px; +} + +.tag { + background-color: #e1f0fa; + color: #3498db; + padding: 4px 12px; + border-radius: 20px; + font-size: 0.85rem; + transition: all 0.3s ease; +} + +.tag:hover { + background-color: #3498db; + color: white; + transform: translateY(-2px); +} + +/* 教育背景样式 */ +.education { + padding: 25px; + border-radius: 8px; + background-color: #f9f9f9; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.education:hover { + transform: translateY(-5px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +.degree { + font-weight: 600; + color: #2c3e50; + margin-bottom: 10px; +} + +.education-desc { + color: #7f8c8d; + margin-bottom: 15px; +} + +/* 技能样式 */ +.skills { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.skill-category { + background-color: #f9f9f9; + padding: 25px; + border-radius: 8px; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.skill-category:hover { + transform: translateY(-5px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +.skill-category h3 { + margin-bottom: 20px; + font-size: 1.2rem; + color: #2c3e50; + position: relative; + display: inline-block; + padding-bottom: 8px; +} + +.skill-category h3::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 40px; + height: 2px; + background-color: #3498db; +} + +.skill-items { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.skill-item { + background: linear-gradient(135deg, #e8f4fc 0%, #d0e6f7 100%); + color: #2980b9; + padding: 8px 18px; + border-radius: 20px; + font-size: 0.95rem; + font-weight: 500; + transition: all 0.3s ease; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.skill-item:hover { + transform: translateY(-3px) !important; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + background: linear-gradient(135deg, #d0e6f7 0%, #c2dcf2 100%); +} + +/* 项目经验样式 */ +.project { + margin-bottom: 30px; + padding: 25px; + border-radius: 8px; + background-color: #f9f9f9; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.project:hover { + transform: translateY(-5px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +.project h3 { + margin-bottom: 15px; + color: #2c3e50; + font-size: 1.2rem; + position: relative; + display: inline-block; + padding-bottom: 8px; +} + +.project h3::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 40px; + height: 2px; + background-color: #3498db; +} + +.project-meta { + display: flex; + gap: 20px; + margin-bottom: 15px; + flex-wrap: wrap; +} + +.project-period, .project-role { + color: #7f8c8d; + font-size: 0.9rem; + background-color: #ecf0f1; + padding: 4px 12px; + border-radius: 20px; + display: inline-flex; + align-items: center; +} + +.project-desc { + margin-bottom: 15px; + color: #555; + line-height: 1.7; +} + +/* 证书与荣誉样式 */ +.certificate { + margin-bottom: 25px; + padding: 20px; + border-radius: 8px; + background-color: #f9f9f9; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.certificate:hover { + transform: translateY(-5px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +.certificate h3 { + color: #2c3e50; + font-size: 1.2rem; + margin-bottom: 10px; +} + +/* 页脚样式 */ +footer { + padding: 25px; + background-color: #f9f9f9; + color: #7f8c8d; + font-size: 0.9rem; + border-top: 1px solid #eee; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.social-links { + display: flex; + gap: 15px; +} + +.social-link { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: #ecf0f1; + color: #3498db; + text-decoration: none; + transition: all 0.3s ease; +} + +.social-link:hover { + background-color: #3498db; + color: white; + transform: translateY(-3px); +} + +.download-resume { + text-align: center; +} + +.download-btn { + display: inline-block; + background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); + color: white; + padding: 10px 20px; + border-radius: 30px; + text-decoration: none; + font-weight: 500; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.download-btn:hover { + transform: translateY(-3px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); +} + +.download-btn i { + margin-right: 8px; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .profile-header { + flex-direction: column; + text-align: center; + } + + .profile-img { + margin-right: 0; + margin-bottom: 30px; + } + + .contact-info { + justify-content: center; + } + + .experience-header, .education-header { + flex-direction: column; + gap: 10px; + } + + .container { + margin: 20px; + border-radius: 12px; + } + + header, main { + padding: 30px; + } + + .section-title { + font-size: 1.4rem; + } + + .footer-content { + flex-direction: column; + gap: 15px; + } +} + +/* 打印样式 */ +@media print { + body { + background: none; + } + + .container { + box-shadow: none; + margin: 0; + max-width: 100%; + } + + header { + background: #3498db !important; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + .profile-img::after { + display: none; + } + + .experience, .education, .project, .skill-category, .certificate { + box-shadow: none; + page-break-inside: avoid; + } + + .section { + page-break-inside: avoid; + } + + .download-resume, .social-links { + display: none; + } +}