import { defineProps, onMounted } from 'vue'
+import { useProfileStore } from '@/store/profile.ts'
+
+const profileStore = useProfileStore()
-// 接收技能数据和sectionId
const props = defineProps({
- skills: {
- type: Array,
- required: true
- },
sectionId: {
type: String,
required: true
diff --git a/src/store/profile.ts b/src/store/profile.ts
index b2292be..2cbabd3 100644
--- a/src/store/profile.ts
+++ b/src/store/profile.ts
@@ -12,7 +12,124 @@ export const useProfileStore = defineStore('profile', {
{ name: 'Twitter', icon: 'fa-brands fa-twitter', url: '#' },
{ name: 'Email', icon: 'fa-solid fa-envelope', url: '#' }
]
- }
+ },
+ skills: [
+ {
+ icon: 'fa-code',
+ title: '前端开发',
+ description: '精通HTML5、CSS3和JavaScript(ES6+)，熟悉响应式设计和跨浏览器兼容性处理。',
+ tags: ['HTML5', 'CSS3', 'JavaScript', 'TypeScript']
+ },
+ {
+ icon: 'fa-react',
+ title: '框架与库',
+ description: '熟练使用React、Vue等主流前端框架，以及相关的状态管理和路由库。',
+ tags: ['React', 'Vue', 'Redux', 'Vuex']
+ },
+ {
+ icon: 'fa-paint-brush',
+ title: 'UI/UX设计',
+ description: '具备良好的设计感，熟悉主流UI组件库和设计系统，能够实现高质量的用户界面。',
+ tags: ['Element UI', 'Ant Design', 'Figma', 'SCSS']
+ },
+ {
+ icon: 'fa-cogs',
+ title: '工程化',
+ description: '熟悉前端工程化工具和流程，能够提高开发效率和代码质量。',
+ tags: ['Webpack', 'Vite', 'Git', 'ESLint']
+ },
+ {
+ icon: 'fa-server',
+ title: '后端知识',
+ description: '了解Node.js和常用后端技术，能够与后端团队高效协作，实现全栈开发。',
+ tags: ['Node.js', 'Express', 'RESTful API', 'MongoDB']
+ },
+ {
+ icon: 'fa-globe',
+ title: '其他技能',
+ description: '掌握项目管理和沟通技巧，具备良好的英语能力，能够阅读英文技术文档。',
+ tags: ['敏捷开发', '英语', '团队协作', '问题解决']
+ }
+ ],
+ experiences: [
+ {
+ period: '2020年3月 - 至今',
+ position: '高级前端工程师',
+ company: '科技创新有限公司',
+ description: '负责公司核心产品的前端架构设计和开发，优化前端性能，提升用户体验。主导多个大型项目的前端开发工作，带领5人团队完成产品迭代和维护。',
+ tags: ['React', 'TypeScript', 'Redux'],
+ image: 'https://picsum.photos/id/0/400/200'
+ },
+ {
+ period: '2017年8月 - 2020年2月',
+ position: '前端开发工程师',
+ company: '互联网科技有限公司',
+ description: '参与多个企业级Web应用的开发，负责前端页面实现和交互逻辑编写。与产品和设计团队紧密合作，将设计稿转化为高质量的代码，解决各种浏览器兼容性问题。',
+ tags: ['Vue', 'SCSS', 'Webpack'],
+ image: 'https://picsum.photos/id/180/400/200'
+ },
+ {
+ period: '2016年6月 - 2017年7月',
+ position: '前端开发实习生',
+ company: '数字技术有限公司',
+ description: '参与公司官网和内部管理系统的开发与维护，学习前端开发技术和最佳实践。协助 senior 工程师完成功能模块开发，修复已知bug，优化页面性能。',
+ tags: ['HTML5', 'CSS3', 'jQuery'],
+ image: 'https://picsum.photos/id/48/400/200'
+ }
+ ],
+ education: [
+ {
+ period: '2012年9月 - 2016年6月',
+ degree: '计算机科学与技术',
+ school: '北京大学',
+ description: '本科期间主修计算机科学与技术专业，系统学习了数据结构、算法、计算机网络等基础知识，参与多个课程设计和科研项目。',
+ detailsTitle: '主要课程',
+ details: ['数据结构', '算法分析', '计算机网络', '操作系统', '数据库原理']
+ },
+ {
+ period: '2016年9月 - 2018年6月',
+ degree: '软件工程',
+ school: '清华大学',
+ description: '研究生阶段专注于软件工程领域，研究方向为Web前端技术和用户界面设计，发表2篇相关领域的学术论文，参与校企合作项目开发。',
+ detailsTitle: '主要成果',
+ details: ['学术论文2篇', '优秀毕业生', '校企合作项目', '奖学金']
+ }
+ ],
+ projects: [
+ {
+ name: '企业级电商平台',
+ period: '2022.03 - 2023.06',
+ role: '前端负责人',
+ description: '一个完整的B2B电商平台，包含商品管理、订单系统、支付系统等功能模块。',
+ responsibilities: [
+ '负责前端架构设计和核心模块开发',
+ '带领5人前端团队完成项目开发',
+ '优化前端性能，提升页面加载速度40%',
+ '实现响应式设计，适配多种设备'
+ ],
+ tags: ['前端', 'Vue3', 'TypeScript', '负责人', '电商'],
+ image: '/images/projects/ecommerce.jpg'
+ },
+ {
+ name: '智能数据分析系统',
+ period: '2021.07 - 2022.02',
+ role: '全栈开发工程师',
+ description: '为企业提供数据分析和可视化展示的系统，支持大数据处理和实时分析。',
+ responsibilities: [
+ '参与前后端功能开发',
+ '设计并实现数据可视化模块',
+ '优化数据处理算法，提升性能30%',
+ '编写技术文档和单元测试'
+ ],
+ tags: ['全栈', 'React', 'Node.js', '大数据', '可视化'],
+ image: '/images/projects/analytics.jpg'
+ }
+ ],
+ contactInfo: [
+ { icon: 'fa-map-marker', title: '地址', content: '南京市溧水区柘塘街道' },
+ { icon: 'fa-phone', title: '电话', content: '138-1407-9242' },
+ { icon: 'fa-envelope', title: '邮箱', content: 'njcxx0822@163.com' }
+ ]
}),
actions: {
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..f6329ea
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,27 @@
+export interface IEducation {
+ period: string;
+ degree: string;
+ school: string;
+ description: string;
+ detailsTitle: string;
+ details: string[];
+}
+
+export interface IExperience {
+ period: string;
+ position: string;
+ company: string;
+ description: string;
+ tags: string[];
+ image: string;
+}
+
+export interface IProject {
+ name: string
+ period: string
+ role: string
+ description: string
+ responsibilities?: string[]
+ tags: string[]
+ image?: string
+}