# 高级个人简历

**Repository Path**: tyoubin_admin/senior-resume

## Basic Information

- **Project Name**: 高级个人简历
- **Description**: 高级个人简历
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-30
- **Last Updated**: 2021-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 高级简历

## 项目上线地址
[http://hikari.top:8101/](http://hikari.top:8101/)

## 项目亮点：

### 头部

- LOGO：使用**font-face**实现了头部LOGO
- 链接：在内容区域，点击链接后，页面**平滑滚动**到下面内容具体的锚点位置上

### 基本介绍及联系方式Banner

- 增加电子邮箱及手机两个icon放在邮箱地址和电话号码之前，图标来自于**iconfont图标库**

### 个人技能介绍、基本经历介绍


- 整体第三块区域为 960px 定宽居中，高度自适应内容高度
- 左侧技能掌握程度**使用CSS实现了渐变效果**，并**使用JavaScript动态为技能掌握程度赋值**
- 使用 JavaScript 实现了**点击Tab实现内容切换**的功能

### 项目介绍模块

- 用CSS实现了**奇数行和偶数行区域背景颜色不同**
- 通过**响应式布局**的方式实现了配图随宽度随着**屏幕大小自适应调整**，当屏幕宽度过小时，配图消失。配图的高度随着宽度一同自适应变化，但有一个最大高度（值自定）

### 互动部分

线框图从上往下的第五块区域，整体区域左右两部分

- 使用CSS动画实现了鼠标hover操作背景图片放大，底边向上放大，显示详细信息
- 使用CSS动画实现了**点赞的动态效果**

右侧为留言板区域

- 使用 JavaScript 实现头像内容为留言名字的**首字母（首字）放大显示**
- 使用 JavaScript 实现输入留言内容，点击发布留言按钮后，把**新的留言内容显示到留言内容区域的最上方第一个**

### 页脚部分

线框图从上往下的最下方区域

- 背景色为深色渐变色