君颖投资项目经历简介

技术栈

前端框架与库

• React 18 构建用户界面
• React Router DOM 6 实现客户端路由
• SCSS/SASS 编写模块化、可维护的样式
• normalize.css 确保跨浏览器样式一致性
• classnames 实现条件类名管理
• react-transition-group 处理组件过渡动画

构建与部署

• Create React App 脚手架工具
• GitHub Actions 实现CI/CD自动化部署
• SFTP-Deploy-Action 自动部署到服务器

技术难点与解决方案

1. 响应式布局适配

• 难点：需要在不同设备上保持一致的用户体验
• 解决方案：
  • 实现自定义的flexible.js脚本动态设置根字体大小
  • 基于设计稿（1920px）将px统一转换为rem单位
  • 通过媒体查询适配不同设备尺寸

2. 滚动交互与视差效果

• 难点：实现平滑的滚动视差效果和过渡动画
• 解决方案：
  • 监听页面滚动事件，动态调整背景位置：parallax.style.backgroundPositionY = scrollPosition * 0.7 + "px"
  • 结合CSS过渡和JavaScript控制，实现导航栏滚动样式变化
  • 基于元素可见性触发动画（如联系页表单出现动画）

3. 跨组件状态管理

• 难点：管理复杂的UI状态（如手风琴组件）
• 解决方案：
  • 使用React状态钩子精确控制UI交互状态
  • 实现状态提升以管理兄弟组件间的状态
  • 通过React.memo优化组件渲染性能

4. 字体与资源加载优化

• 难点：自定义字体可能影响加载性能
• 解决方案：
  • 使用@font-face实现中文自定义字体加载
  • 通过合适的字体格式和加载策略提升用户体验
  • 图片资源按需加载，避免初始加载过大

5. 自动化部署流程

• 难点：保证部署流程的稳定性和效率
• 解决方案：
  • 配置GitHub Actions工作流，实现push代码后自动构建和部署
  • 实现了SSH身份验证自动化，确保安全部署
  • 优化构建过程，减小生产包体积

通过这个项目，不仅提升了React组件设计和前端工程化能力，也积累了响应式开发和自动化部署的实战经验。