项目展示

1. 原生 JavaScript 实现个人在线简历网站
   • 源码链接 & 预览链接
   • 技术栈： 原生 JavaScript、CSS 3、AJAX、tween.js、scrollReveal.js
   • 项目描述：本项目的最终目的是为了做出一个在线版的个人简历，由我独立完成，使用原生 JavaScript 实现绝大多数功能，其中点击导航栏可跳转到对应的模块，页面滑动过程中，使用 tween.js 实现了缓动动画； 在留言板模块，使用 LeanCloud 提供的 API 完成留言的数据存储和展示； 使用 scrollReveal.js 实现类似懒加载效果， 即当滚动到对应高度，当前模块才会逐渐展示出来。JS 代码通过 MVC 设计模式进行了模块化分类。在本项目的实现过程中，我主要学习到了 MVC 设计模式以及模块化思想在项目中的使用。
2. Vue 技术栈实现在线多人共享博客项目
   • 源码链接 & 预览链接
   • 技术栈：Vue、Vue CLI、Vue Router、Vuex、Axios、ES 6、Element UI、Webpack
   • 项目描述：本项目最终实现的是一款在线的多人共享博客网站，前端部分由我独立完成，现已发布上线。项目中包含登录、注册，博客的创建、编辑、删除，展示首页博客列表、特定用户博客列表、博客详情等功能。使用 Vue CLI 创建项目模板，使用 Vuex 进行状态管理，使用 Vue Router 进行路由管理、使用 Axios 与后端进行数据交互，项目的样式使用 Less 完成。在本项目的实现过程中，我获得了使用 Vue.js 技术栈开发单页项目的实战经验，学到了 ES 6 中 promise / async 、Module 等语法的运用，以及在项目中进行前后端数据交互的方法，而且对一个完整的前端项目有了更深的理解。
3. 使用 Canvas 实现在线涂鸦画板
   • 源码链接 & 预览链接
   • 技术栈：原生 JavaScript、ES 6、Canvas、svg
   • 描述：本项目最终完成的是一款在线画板工具，可以在移动端使用，已发布上线。该项目的功能包括绘画、擦除、删除所有内容，改变画笔大小、颜色，以及保存绘制内容。该项目使用原生JS实现，主要调用 Canvas API，功能图标使用 svg 实现，用 ES 6 的 class 语法进行了类的封装，使用 HTML 5 的 <input type="color" />实现了 更多颜色选择功能。完全由我独立开发。在本项目的开发过程中，主要学习使用移动端触摸事件 、Canvas 和 ES 6 class 的用法。
4. 动态生成代码画出卡通人物
   • 源码链接 & 预览链接
   • 技术栈：原生 JavaScript、CSS 3、ES 6
   • 描述：本项目可以根据用户的选择，动态的逐渐生成CSS代码从而画出一个卡通形象，可供选择的形象包括皮卡丘和哆啦A梦，其中哆啦A梦的眼睛可以随着鼠标的移动而转动，也使用了CSS 3 动画做出了眼睛的眨眼效果。在使用代码绘制图案的过程中，有加速、减速和跳过动画的功能，其中选择按钮在动画完成之前是不可点击的。在项目实现过程中，使用了 ES 6 的 class、promise 等语法，完成了绘画逻辑函数的封装以及异步调用等功能。本项目中卡通形象的样式以及函数逻辑均由我独立完成，项目实现的过程中，加深了对 CSS 的理解程度，熟悉了 class 、 promise的使用。
5. 个人小作品
   • 预览链接
   • 作品列表：键盘导航页、简历动态生成器、各种轮播效果
   • 上述作品使用技术栈包括：localStorage、ES 6、CSS 3、Prism.js、marked.js 等
   • 描述：本条所展示的三个作品是个人平时学习中所做的比较简单的小项目，顾不单独列出。在这三个作品中，页面样式使用了 CSS 3 阴影/过渡/3D 变幻等，学习并掌握到了 localStorage 、事件委托、异步与回调等相关技术。