fix: 升级2.0
This commit is contained in:
parent
7782440b4e
commit
4afd399a9f
12
.dumi/layouts/index.tsx
Normal file
12
.dumi/layouts/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
// .dumi/theme/layout.tsx(本地主题) 或 src/layout.tsx(主题包)
|
||||
import React from 'react';
|
||||
import Layout from 'dumi-theme-default/es/layout';
|
||||
|
||||
export default ({ children, ...props }) => (
|
||||
<Layout {...props}>
|
||||
<>
|
||||
<button>反馈</button>
|
||||
{children}
|
||||
</>
|
||||
</Layout>
|
||||
);
|
||||
32
.dumi/theme/layout.tsx
Normal file
32
.dumi/theme/layout.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
// .dumi/theme/layout.tsx(本地主题) 或 src/layout.tsx(主题包)
|
||||
import React, { useEffect } from 'react';
|
||||
import Layout from 'dumi-theme-default/es/layout';
|
||||
|
||||
export default ({ children, ...props }) => {
|
||||
const { history } = props;
|
||||
|
||||
useEffect(() => {
|
||||
const header = document.querySelector('.__dumi-default-navbar')
|
||||
const cont = document.querySelector('.__dumi-default-layout-content')
|
||||
const lo = document.querySelector('.__dumi-default-layout')
|
||||
|
||||
if (location.hash === '#/resume' && lo) {
|
||||
|
||||
cont.style.position = 'relative'
|
||||
cont.style.top = '-64px'
|
||||
header.style.display = 'none'
|
||||
} else {
|
||||
cont.style.position = 'relative'
|
||||
cont.style.top = '0'
|
||||
header.style.display = 'flex'
|
||||
}
|
||||
},[location.hash])
|
||||
|
||||
return (
|
||||
<Layout {...props}>
|
||||
<>
|
||||
{children}
|
||||
</>
|
||||
</Layout>
|
||||
)
|
||||
};
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,3 +3,4 @@ node_modules
|
||||
.dumi/tmp
|
||||
.dumi/tmp-production
|
||||
.DS_Store
|
||||
.umi
|
||||
|
||||
118
docs/fea/webgl/Q&A.md
Normal file
118
docs/fea/webgl/Q&A.md
Normal file
@ -0,0 +1,118 @@
|
||||
---
|
||||
nav:
|
||||
title: 前端
|
||||
path: /fea
|
||||
group:
|
||||
title: 💊 webGL
|
||||
order: 100
|
||||
---
|
||||
|
||||
# 常见问题
|
||||
|
||||
## 创建形状实例时，如何去定位位置？
|
||||
|
||||
初始创建的时候，是以 3d 世界坐标系（0,0,0）为中心，基于这个点创建对应素材，再去配置 transform 和 position 参数
|
||||
|
||||
## 如何加载 exr 文件？
|
||||
|
||||
可以下载对应的 loader，进行文件的加载
|
||||
<https://www.jianshu.com/p/cc7dfdc51598>
|
||||
|
||||
## 镜头变成了鱼眼镜头？
|
||||
|
||||
- PerspectiveCamera 的 fov 参数设置过高，调低就行了
|
||||
|
||||
## 模型放大缩小会有点丢失细节，一直在闪烁？
|
||||
|
||||
把 PerspectiveCamera 的 near 参数调小，比如：0.01（按实际情况调整）
|
||||
|
||||
## 为什么材质很黑？
|
||||
|
||||
& ● 材质的质感需要通过环境来衬托，这边需要设置场景的环境值
|
||||
|
||||
```js
|
||||
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
|
||||
|
||||
// 场景环境添加纹理（这里默认使用threeJS提供的房间环境）
|
||||
const pmremGenerator = new THREE.PMREMGenerator(renderer);
|
||||
this.scene.environment = pmremGenerator.fromScene(
|
||||
new RoomEnvironment(),
|
||||
0.04,
|
||||
).texture;
|
||||
```
|
||||
|
||||
- ● 试试添加个环境光
|
||||
|
||||
## 为什么光线会过曝？
|
||||
|
||||
- ● child.material.envMapIntensity 参数设置的太高，导致本身的过曝
|
||||
- ● this.renderer.toneMappingExposure 色调映射的曝光级别过高
|
||||
- ● child.material.emissive = child.material.color 这段删除
|
||||
|
||||
## 模型文件过大，如何优化？
|
||||
|
||||
1. 使用压缩工具，去压缩处理模型，例如：gltf-pipeline（推荐）
|
||||
2. 加载 DRACOLoader 去压缩模型，但是会额外消耗浏览器内存与时间去进行额外计算
|
||||
|
||||
## 如何给 glb 模型的某个模块添加材质？
|
||||
|
||||
```js
|
||||
const diamondTexture = new RGBELoader().load('./path/diamond1.hdr');
|
||||
// 映射场景（球状体里面）
|
||||
diamondTexture.mapping = THREE.EquirectangularRefractionMapping;
|
||||
await model.traverse(
|
||||
(child) => {
|
||||
if (child.isMesh && child.material instanceof THREE.MeshStandardMaterial) {
|
||||
child.material.envMap = diamondTexture; // 上材质
|
||||
}
|
||||
},
|
||||
undefined,
|
||||
function (error) {
|
||||
console.error(error);
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
## 字体加载的时候报错，fontloader unexpected token '<', "<!doctype "... is not valid json?
|
||||
|
||||
大概率是字体库的文件路径有问题，两个解决方案：
|
||||
|
||||
1. 把字体库上床到 oss，使用链接的形式加载字体
|
||||
2. 配置一下 vite 或者 webpack，让它能正确读取 json 格式的文件
|
||||
|
||||
## 用 RGBELoader 加载 hdr 材质，赋值给 glb 模型，为什么模型会丢失？
|
||||
|
||||
没有加上 mapping 属性
|
||||
|
||||
```
|
||||
// 映射场景（球状体里面）
|
||||
texture.mapping = THREE.EquirectangularRefractionMapping;
|
||||
```
|
||||
|
||||
## 如何查看光源是从哪里来？
|
||||
|
||||
可以给光源添加一个 helper，来帮助查看光的位置
|
||||
|
||||
```js
|
||||
// 平行光
|
||||
const directionalLightCameraHelper = new THREE.DirectionalLightHelper(
|
||||
new THREE.DirectionalLight(0xffffff, 1),
|
||||
5,
|
||||
'#000',
|
||||
);
|
||||
scene.add(directionalLightCameraHelper);
|
||||
|
||||
// 点光
|
||||
const pointLightHelper = new THREE.PointLightHelper(
|
||||
new THREE.PointLight(0xff0000, 1, 100),
|
||||
1,
|
||||
);
|
||||
scene.add(pointLightHelper);
|
||||
|
||||
// 半球光
|
||||
const helper = new THREE.HemisphereLightHelper(
|
||||
new THREE.HemisphereLight(0xffffbb, 0x080820, 1),
|
||||
5,
|
||||
);
|
||||
scene.add(helper);
|
||||
```
|
||||
296
docs/fea/webgl/demo/base.tsx
Normal file
296
docs/fea/webgl/demo/base.tsx
Normal file
@ -0,0 +1,296 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
|
||||
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
|
||||
import { resizeRendererToDisplaySize } from '../utils'
|
||||
|
||||
export default () => {
|
||||
const ref = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
ref.current && init(ref.current)
|
||||
}, [])
|
||||
|
||||
const init = (dom: HTMLElement) => {
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(38, dom.clientWidth / dom.clientHeight, 0.1, 1000)
|
||||
// camera.lookAt( 0, 0, 0 );
|
||||
camera.position.set(25, 5, 40)
|
||||
camera.rotation.set(10, 0, 40)
|
||||
const cameraHelper = new THREE.CameraHelper( camera );
|
||||
scene.add( cameraHelper );
|
||||
|
||||
// 渲染器
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: dom });
|
||||
// renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
THREE.Cache.enabled = true;
|
||||
|
||||
// 创建立方体
|
||||
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
||||
const material = new THREE.MeshLambertMaterial({ color: 0x00ffff })
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.y = -1
|
||||
scene.add(cube);
|
||||
|
||||
const edges = new THREE.EdgesGeometry( geometry );
|
||||
const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
|
||||
line.position.y = -1
|
||||
scene.add( line );
|
||||
|
||||
// 创建一个胶囊
|
||||
const capGeometry = new THREE.CapsuleGeometry(1, 1, 10, 20)
|
||||
const capMaterial = new THREE.MeshLambertMaterial({ color: 0xdede8d, wireframe: false })
|
||||
const cap = new THREE.Mesh(capGeometry, capMaterial);
|
||||
cap.position.y = 1
|
||||
scene.add(cap);
|
||||
|
||||
// 创建一个圆形（半径，分段，分段起始角度，中心角）
|
||||
const circleGeometry = new THREE.CircleGeometry(2, 32, 10, Math.PI * 1.5)
|
||||
const circleMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccd, wireframe: false })
|
||||
const circle = new THREE.Mesh(circleGeometry, circleMaterial);
|
||||
circle.position.y = 4
|
||||
circle.position.x = 3
|
||||
circleMaterial.side = THREE.DoubleSide
|
||||
scene.add(circle);
|
||||
|
||||
// 创建一个圆锥（半径，高度，侧面分段，侧面沿着高度的分段、底面是否封闭、分段起始角度、中心角）
|
||||
const coneGeometry = new THREE.ConeGeometry(1, 6, 20)
|
||||
const coneMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccd, wireframe: false })
|
||||
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
|
||||
cone.position.y = 4
|
||||
cone.position.x = -3
|
||||
scene.add(cone);
|
||||
|
||||
// 创建一个圆柱（顶半径，底半径，圆柱高，侧面分段、侧面沿高分段、底面是否封闭、起始角度、中心角）
|
||||
const cylinderGeometry = new THREE.CylinderGeometry(1, 1.5, 3, 10)
|
||||
const cylinderMaterial = new THREE.MeshLambertMaterial({ color: 0xcffcff, wireframe: false })
|
||||
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
|
||||
cylinder.position.y = -3
|
||||
cylinder.position.x = -3
|
||||
scene.add(cylinder);
|
||||
|
||||
|
||||
// 创建一个12面几何体（半径、顶点）
|
||||
const dodecahedronGeometry = new THREE.DodecahedronGeometry(1)
|
||||
const dodecahedronMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccd, wireframe: false })
|
||||
const dodecahedron = new THREE.Mesh(dodecahedronGeometry, dodecahedronMaterial);
|
||||
dodecahedron.position.y = 0
|
||||
dodecahedron.position.x = -4
|
||||
dodecahedron.position.z = 1
|
||||
scene.add(dodecahedron);
|
||||
|
||||
// 创建一个20面几何体（半径、顶点）
|
||||
const icosahedronGeometry = new THREE.IcosahedronGeometry(1)
|
||||
const icosahedronMaterial = new THREE.MeshLambertMaterial({ color: 0xcffcfd, wireframe: false })
|
||||
const icosahedron = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial);
|
||||
icosahedron.position.y = 4
|
||||
icosahedron.position.x = -5
|
||||
icosahedron.position.z = 0.5
|
||||
scene.add(icosahedron);
|
||||
|
||||
// 车削缓冲几何体（）
|
||||
const points = [];
|
||||
for ( let i = 0; i < 10; i ++ ) {
|
||||
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
|
||||
}
|
||||
const latheGeometry = new THREE.LatheGeometry( points );
|
||||
const latheMaterial = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
|
||||
const lathe = new THREE.Mesh( latheGeometry, latheMaterial );
|
||||
lathe.position.y = 6
|
||||
lathe.position.x = 6
|
||||
lathe.position.z = 1
|
||||
// scene.add( lathe );
|
||||
|
||||
// 多面缓冲几何体，自定义坐标
|
||||
const verticesOfCube = [
|
||||
-1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
|
||||
-1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
|
||||
];
|
||||
|
||||
const indicesOfFaces = [
|
||||
2,1,0, 0,3,2,
|
||||
0,4,7, 7,3,0,
|
||||
0,1,5, 5,4,0,
|
||||
1,2,6, 6,5,1,
|
||||
2,3,7, 7,6,2,
|
||||
4,5,6, 6,7,4
|
||||
];
|
||||
|
||||
const polyGeometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 3 );
|
||||
const polyMaterial = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
|
||||
const poly = new THREE.Mesh( polyGeometry, polyMaterial );
|
||||
poly.position.y = -3
|
||||
poly.position.x = 7
|
||||
poly.position.z = -3
|
||||
scene.add( poly );
|
||||
|
||||
// 创建一个圆环（内半径、外半径、圆环的分段）
|
||||
const ringGeometry = new THREE.RingGeometry(1, 3)
|
||||
const ringMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
|
||||
const ring = new THREE.Mesh(ringGeometry, ringMaterial);
|
||||
ring.position.y = 5
|
||||
ring.position.x = 7
|
||||
ring.position.z = 1
|
||||
ringMaterial.side = THREE.DoubleSide
|
||||
scene.add(ring);
|
||||
|
||||
// 绘制图形
|
||||
const heartShape = new THREE.Shape();
|
||||
const x = -2.5;
|
||||
const y = -5;
|
||||
heartShape.moveTo(x + 2.5, y + 2.5);
|
||||
heartShape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
|
||||
heartShape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
|
||||
heartShape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
|
||||
heartShape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
|
||||
heartShape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
|
||||
heartShape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);
|
||||
|
||||
|
||||
const shapeGeo = new THREE.ExtrudeGeometry( heartShape, {
|
||||
steps: 2,
|
||||
depth: 1,
|
||||
bevelEnabled: true,
|
||||
bevelThickness: 1,
|
||||
bevelSize: 1,
|
||||
bevelSegments: 5
|
||||
});
|
||||
const shapeMat = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
|
||||
const heart = new THREE.Mesh( shapeGeo, shapeMat ) ;
|
||||
heart.position.y = 6
|
||||
heart.position.z = 6
|
||||
heart.rotation.z = Math.PI * 1
|
||||
shapeMat.side = THREE.DoubleSide
|
||||
scene.add( heart );
|
||||
|
||||
// 球体
|
||||
const ballGeometry = new THREE.SphereGeometry(1, 19)
|
||||
const ballMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
|
||||
const ball = new THREE.Mesh(ballGeometry, ballMaterial);
|
||||
ball.position.y = 6
|
||||
ball.position.x = 0
|
||||
ball.position.z = -1
|
||||
scene.add(ball);
|
||||
|
||||
// 四面体
|
||||
const fourGeometry = new THREE.TetrahedronGeometry(1)
|
||||
const fourMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
|
||||
const four = new THREE.Mesh(fourGeometry, fourMaterial);
|
||||
four.position.y = 3
|
||||
four.position.x = -9
|
||||
four.position.z = -1
|
||||
scene.add(four);
|
||||
|
||||
// 圆环（半径，粗细）
|
||||
const torusGeometry = new THREE.TorusGeometry(3, 0.3)
|
||||
const torusMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
|
||||
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
|
||||
torus.position.y = 4
|
||||
torus.position.x = -15
|
||||
torus.position.z = -1
|
||||
|
||||
scene.add(torus);
|
||||
|
||||
// 圆环扭结（半径，粗细，）
|
||||
const kontGeometry = new THREE.TorusKnotGeometry( 2, 0.3 );
|
||||
const kontMaterial = new THREE.MeshLambertMaterial( { color: 0xffddd0 } );
|
||||
const knot = new THREE.Mesh( kontGeometry, kontMaterial );
|
||||
knot.position.y = -5
|
||||
knot.position.x = -15
|
||||
knot.position.z = -1
|
||||
scene.add( knot );
|
||||
|
||||
//创建线段
|
||||
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff })
|
||||
|
||||
const linePoints = []
|
||||
linePoints.push(new THREE.Vector3(0, 0, 0))
|
||||
linePoints.push(new THREE.Vector3(0, 100, 0))
|
||||
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
|
||||
const line2 = new THREE.Line( lineGeometry, lineMaterial );
|
||||
scene.add( line2 );
|
||||
|
||||
// 创建文字
|
||||
const fontLoader = new FontLoader();
|
||||
let textMesh
|
||||
fontLoader.load('https://fancy-content-test.oss-cn-beijing.aliyuncs.com/helvetiker_regular.typeface.json', function ( font ) {
|
||||
const textGeometry = new TextGeometry('ykx, I Love U!', {
|
||||
font: font,
|
||||
size: 6,
|
||||
depth: 1,
|
||||
height: 0.1,
|
||||
curveSegments: 10,
|
||||
bevelEnabled: true, // 平滑
|
||||
bevelThickness: 1,
|
||||
bevelSize: 0.8, //
|
||||
bevelSegments: 3 // 平滑切角分段
|
||||
});
|
||||
textGeometry.computeBoundingBox();
|
||||
|
||||
const centerOffset = - 0.5 * ( textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x );
|
||||
|
||||
|
||||
const materials = [
|
||||
new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
|
||||
new THREE.MeshPhongMaterial( { color: 0xf00fff } ) // side
|
||||
];
|
||||
textMesh = new THREE.Mesh( textGeometry, materials );
|
||||
|
||||
textMesh.position.z = 10;
|
||||
textMesh.position.x = centerOffset;
|
||||
|
||||
scene.add( textMesh )
|
||||
} );
|
||||
|
||||
// --------------------- 光线 ------------------------------
|
||||
|
||||
// 半球光
|
||||
const fillLight = new THREE.HemisphereLight( 0x8dc1de, 0x00668d, 1.5 );
|
||||
fillLight.position.set( 0, 1, 1 );
|
||||
scene.add( fillLight );
|
||||
|
||||
// const helper = new THREE.HemisphereLightHelper( fillLight, 5 );
|
||||
// scene.add( helper );
|
||||
|
||||
// 平行光
|
||||
const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
|
||||
directionalLight.position.set( - 5, 25, - 1 );
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.camera.near = 0.01;
|
||||
directionalLight.shadow.camera.far = 500;
|
||||
directionalLight.shadow.camera.right = 30;
|
||||
directionalLight.shadow.camera.left = - 30;
|
||||
directionalLight.shadow.camera.top = 30;
|
||||
directionalLight.shadow.camera.bottom = - 30;
|
||||
directionalLight.shadow.mapSize.width = 1024;
|
||||
directionalLight.shadow.mapSize.height = 1024;
|
||||
directionalLight.shadow.radius = 4;
|
||||
directionalLight.shadow.bias = - 0.00006;
|
||||
scene.add(directionalLight);
|
||||
|
||||
|
||||
const controls = new OrbitControls( camera, renderer.domElement );
|
||||
controls.autoRotate = true
|
||||
|
||||
function render() {
|
||||
directionalLight.rotation.x += 0.1
|
||||
directionalLight.rotation.z += 0.1
|
||||
scene.rotation.y += -0.001
|
||||
|
||||
if (resizeRendererToDisplaySize(renderer)) {
|
||||
const canvas = renderer.domElement;
|
||||
camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
renderer.setAnimationLoop(render)
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
render()
|
||||
}
|
||||
|
||||
return (
|
||||
<canvas ref={ref} style={{ width: '100%', height: '100%' }} />
|
||||
)
|
||||
};
|
||||
19
docs/fea/webgl/demo/earth copy.tsx
Normal file
19
docs/fea/webgl/demo/earth copy.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
export default () => {
|
||||
const ref = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
})
|
||||
|
||||
const init = () => {
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<canvas ref={ref} id="earth" />
|
||||
)
|
||||
}
|
||||
142
docs/fea/webgl/demo/earth.tsx
Normal file
142
docs/fea/webgl/demo/earth.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
||||
import { resizeRendererToDisplaySize, addControls } from '../utils'
|
||||
|
||||
class AxisGridHelper {
|
||||
axes: any;
|
||||
grid: any;
|
||||
_visible: any;
|
||||
constructor( node, units = 10 ) {
|
||||
const axes = new THREE.AxesHelper();
|
||||
axes.material.depthTest = false;
|
||||
axes.renderOrder = 2; // after the grid
|
||||
node.add( axes );
|
||||
|
||||
const grid = new THREE.GridHelper( units, units );
|
||||
grid.material.depthTest = false;
|
||||
grid.renderOrder = 1;
|
||||
node.add( grid );
|
||||
|
||||
this.grid = grid;
|
||||
this.axes = axes;
|
||||
this.visible = false;
|
||||
|
||||
}
|
||||
get visible() {
|
||||
return this._visible;
|
||||
}
|
||||
set visible( v ) {
|
||||
this._visible = v;
|
||||
this.grid.visible = v;
|
||||
this.axes.visible = v;
|
||||
}
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const ref = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
ref.current && init(ref.current)
|
||||
})
|
||||
|
||||
|
||||
const init = (dom: any) => {
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(40, 2, 0.1, 1000)
|
||||
camera.position.set(0, 50, 0)
|
||||
camera.up.set(0, 0, 1)
|
||||
camera.lookAt(0, 0, 0)
|
||||
const gui = new GUI();
|
||||
|
||||
{
|
||||
const light = new THREE.PointLight(0xffffff, 500)
|
||||
scene.add(light)
|
||||
}
|
||||
|
||||
// 创建球体实例
|
||||
const radius = 1
|
||||
const widthSegments = 6
|
||||
const heightSegments = 6
|
||||
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)
|
||||
|
||||
const objects = []
|
||||
const solarSystem = new THREE.Object3D()
|
||||
scene.add(solarSystem)
|
||||
objects.push(solarSystem)
|
||||
|
||||
// 太阳
|
||||
const sunMaterial = new THREE.MeshPhongMaterial({ emissive: 0xffff00 })
|
||||
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
|
||||
sunMesh.scale.set(5, 5, 5)
|
||||
solarSystem.add(sunMesh)
|
||||
objects.push(sunMesh)
|
||||
|
||||
// 地球
|
||||
const earthOrbit = new THREE.Object3D()
|
||||
earthOrbit.position.x = 10;
|
||||
solarSystem.add(earthOrbit)
|
||||
objects.push(earthOrbit)
|
||||
const earthMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x2233ff,
|
||||
emissive: 0x112244,
|
||||
})
|
||||
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial)
|
||||
earthOrbit.add(earthMesh)
|
||||
objects.push(earthMesh)
|
||||
|
||||
// 月球
|
||||
const moonOrbit = new THREE.Object3D()
|
||||
moonOrbit.position.x = 2
|
||||
earthOrbit.add(moonOrbit)
|
||||
const moonMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x888888,
|
||||
emissive: 0x222222
|
||||
})
|
||||
const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial)
|
||||
moonMesh.scale.set(.5, .5, .5);
|
||||
moonOrbit.add(moonMesh)
|
||||
objects.push(moonMesh)
|
||||
|
||||
// 渲染器
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: dom });
|
||||
|
||||
// 集体旋转
|
||||
function makeAxisGrid(node, label, units) {
|
||||
const helper = new AxisGridHelper( node, units );
|
||||
gui.add(helper, 'visible').name(label);
|
||||
}
|
||||
|
||||
makeAxisGrid(solarSystem, 'solarSystem', 25);
|
||||
makeAxisGrid(sunMesh, 'sunMesh');
|
||||
makeAxisGrid(earthOrbit, 'earthOrbit');
|
||||
makeAxisGrid(earthMesh, 'earthMesh');
|
||||
makeAxisGrid(moonOrbit, 'moonOrbit');
|
||||
makeAxisGrid(moonMesh, 'moonMesh');
|
||||
|
||||
addControls(camera, renderer);
|
||||
|
||||
function render(time) {
|
||||
time *= 0.001
|
||||
|
||||
if (resizeRendererToDisplaySize(renderer)) {
|
||||
const canvas = renderer.domElement;
|
||||
camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
objects.forEach((obj) => {
|
||||
obj.rotation.y = time
|
||||
})
|
||||
|
||||
renderer.setAnimationLoop(render)
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
renderer.setAnimationLoop(render)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<canvas ref={ref} id="earth" style={{ width: '100%', height: '500px'}} />
|
||||
)
|
||||
}
|
||||
@ -4,55 +4,71 @@ nav:
|
||||
path: /fea
|
||||
group:
|
||||
title: 💊 webGL
|
||||
order: 9
|
||||
path: /webGL
|
||||
order: 1
|
||||
---
|
||||
|
||||
# 💊 webGL
|
||||
# 基础
|
||||
|
||||
## 介绍
|
||||
|
||||
:::info{title=记录日志}
|
||||
本文档从 2023 年 10 月 20 开始，主要用来记录 threejs 的学习过程和踩坑记录，方便复盘与总结。
|
||||
:::
|
||||
|
||||
### 基本对象
|
||||
|
||||
一个基本的3d场景需要包括的以下几个必备要素：
|
||||
一个基本的 3D 场景需要包括的以下几个必备要素：
|
||||
|
||||
- 场景：scence
|
||||
- 相机：camera
|
||||
- 相机创建实例图（THREE.PerspectiveCamera(fov, aspect, zNear, zFar)）：
|
||||
- 相机：camera（实例 THREE.PerspectiveCamera(fov, aspect, zNear, zFar)）
|
||||
- 渲染器：renderer
|
||||
|
||||
### 绘制方法
|
||||
|
||||
- 网孔（Meshes，推荐）
|
||||
- 多边形（Polygons）
|
||||
- 顶点（Vertices）
|
||||
基本的场景搭建好了，现在我们需要在这个场景中放置我们想要的对象，一般我们想要的基本几何体可以通过以下方式创建：
|
||||
|
||||
- Geomety（几何体，常用）
|
||||
- Materials（材质）
|
||||
- Mesh（网格对象）
|
||||
|
||||
大致思路为：创建一个几何体，给几何体附加材质，组合之后加入场景中，如下所示
|
||||
|
||||
```js
|
||||
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
scene.add(mesh);
|
||||
```
|
||||
|
||||
### 其它
|
||||
|
||||
- 材料（Materials）
|
||||
如果想要让场景更加精美，我们需要添加更多的参数来达到想要的效果
|
||||
|
||||
- 纹理（Textures）
|
||||
- 光照（Lights）
|
||||
- 变换（Transforms）
|
||||
- 矩阵（Matrices）
|
||||
- 相机（Cameras）
|
||||
- 视角（Perspective）
|
||||
- 视窗（Viewports）
|
||||
- 着色器（shader）
|
||||
- 着色器（Shader）
|
||||
- 群组（Group）
|
||||
|
||||
## pixi
|
||||
## 社区
|
||||
|
||||
一款基于webGL的 2d渲染引擎，用来写一些bit游戏还是挺好用的。
|
||||
### pixiJS
|
||||
|
||||
## threeJs
|
||||
一款基于 webGL 的 2d 渲染引擎，用来写一些 bit 游戏还是挺好用的。
|
||||
|
||||
目前比较热门的基于webgl的框架，缺点是每个版本之间的接口差异较大，所以使用的时候需要根据版本来找对应的接口文档
|
||||
### threeJs
|
||||
|
||||
本文会更多的以threejs为基础框架来展开深入构建一个3Dweb世界
|
||||
目前比较热门的基于 webgl 的框架，缺点是每个版本之间的接口差异较大，所以使用的时候需要根据版本来找对应的接口文档
|
||||
|
||||
参考的文档有以下：
|
||||
本文会更多的以 threejs 为基础框架来展开深入构建一个 3Dweb 世界
|
||||
|
||||
1. [pixi中文](http://pixijs.huashengweilai.com/guide/start/9.make-sprite-from-texture-atlas.html#%E9%80%9A%E8%BF%87%E7%BA%B9%E7%90%86%E8%B4%B4%E5%9B%BE%E9%9B%86%E5%88%9B%E5%BB%BA%E7%B2%BE%E7%81%B5)
|
||||
2. [PIXI API大全](https://pixijs.download/release/docs/index.html)
|
||||
## 参考文档
|
||||
|
||||
1. [pixi 中文](http://pixijs.huashengweilai.com/guide/start/9.make-sprite-from-texture-atlas.html#%E9%80%9A%E8%BF%87%E7%BA%B9%E7%90%86%E8%B4%B4%E5%9B%BE%E9%9B%86%E5%88%9B%E5%BB%BA%E7%B2%BE%E7%81%B5)
|
||||
2. [PIXI API 大全](https://pixijs.download/release/docs/index.html)
|
||||
3. [bit 贴图大全](https://opengameart.org/)
|
||||
4. [threeJs](https://techbrood.com/threejs/examples/#webgl_shadowmap_pointlight)
|
||||
5. [puxiao的教程](https://github.com/puxiao/threejs-tutorial)
|
||||
5. [puxiao 的教程](https://github.com/puxiao/threejs-tutorial)
|
||||
6. [threeJs 官方教程](https://threejs.org/manual/#zh/fundamentals)
|
||||
|
||||
18
docs/fea/webgl/threeJS.md
Normal file
18
docs/fea/webgl/threeJS.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
nav:
|
||||
title: 前端
|
||||
path: /fea
|
||||
group:
|
||||
title: 💊 webGL
|
||||
order: 3
|
||||
---
|
||||
|
||||
# threeJS 入门
|
||||
|
||||
## 创建基础元素
|
||||
|
||||
<!-- <code src="./demo/base.tsx" ></code> -->
|
||||
|
||||
## 创建一个地球的场景
|
||||
|
||||
<code src="./demo/earth.tsx" ></code>
|
||||
18
docs/fea/webgl/utils/index.ts
Normal file
18
docs/fea/webgl/utils/index.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
export const resizeRendererToDisplaySize = (renderer) => {
|
||||
const canvas = renderer.domElement;
|
||||
const pixelRatio = window.devicePixelRatio;
|
||||
const width = canvas.clientWidth * pixelRatio | 0;
|
||||
const height = canvas.clientHeight * pixelRatio | 0;
|
||||
const needResize = canvas.width !== width || canvas.height !== height;
|
||||
if (needResize) {
|
||||
renderer.setSize(width, height, false);
|
||||
}
|
||||
return needResize;
|
||||
}
|
||||
|
||||
export const addControls = (camera: any, renderer: any) => {
|
||||
const controls = new OrbitControls( camera, renderer.domElement );
|
||||
controls.autoRotate = true
|
||||
}
|
||||
19
package.json
19
package.json
@ -2,17 +2,14 @@
|
||||
"name": "nicenote",
|
||||
"version": "0.0.1",
|
||||
"description": "nicenote,nicecode,学习,总结",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "npm run dev",
|
||||
"dev": "dumi dev",
|
||||
"build": "dumi build",
|
||||
"deploy": "npm run build && gh-pages -d docs-dist",
|
||||
"prepare": "husky install && dumi setup"
|
||||
"dev": "dumi dev",
|
||||
"prepare": "husky install && dumi setup",
|
||||
"start": "npm run dev"
|
||||
},
|
||||
"authors": [
|
||||
"71032866@qq.com"
|
||||
],
|
||||
"license": "MIT",
|
||||
"commitlint": {
|
||||
"extends": [
|
||||
"@commitlint/config-conventional"
|
||||
@ -23,6 +20,9 @@
|
||||
"prettier --write --no-error-on-unmatched-pattern"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"three": "^0.158.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.1.2",
|
||||
"@commitlint/config-conventional": "^17.1.0",
|
||||
@ -30,5 +30,8 @@
|
||||
"husky": "^8.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"prettier": "^2.7.1"
|
||||
}
|
||||
},
|
||||
"authors": [
|
||||
"71032866@qq.com"
|
||||
]
|
||||
}
|
||||
|
||||
137
temp/heartbeat/index.less
Normal file
137
temp/heartbeat/index.less
Normal file
@ -0,0 +1,137 @@
|
||||
.title {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
// background: rgb(121, 242, 157);
|
||||
}
|
||||
|
||||
/* just some styling*/
|
||||
body {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
/* heart div class - in html i used just a simple html simbol entity for heart sign, you can use text or whatever u want*/
|
||||
|
||||
.heart {
|
||||
font-size: 150px;
|
||||
color: #e00;
|
||||
animation: beat .25s infinite alternate;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
/* Heart beat animation */
|
||||
@keyframes beat{
|
||||
to { transform: scale(1.4); }
|
||||
}
|
||||
|
||||
@property --rotate {
|
||||
syntax: "<angle>";
|
||||
initial-value: 132deg;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
:root {
|
||||
--card-height: 45vh;
|
||||
--card-width: calc(var(--card-height) / 1.5);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: #212534;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background: #191c29;
|
||||
width: var(--card-width);
|
||||
height: var(--card-height);
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
color: rgb(88 199 250 / 0%);
|
||||
cursor: pointer;
|
||||
font-family: cursive;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
color: rgb(88 199 250 / 100%);
|
||||
transition: color 1s;
|
||||
}
|
||||
.card:hover:before, .card:hover:after {
|
||||
animation: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.card::before {
|
||||
content: "";
|
||||
width: 104%;
|
||||
height: 102%;
|
||||
border-radius: 8px;
|
||||
background-image: linear-gradient(
|
||||
var(--rotate)
|
||||
, #5ddcff, #3c67e3 43%, #4e00c2);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -1%;
|
||||
left: -2%;
|
||||
animation: spin 2.5s linear infinite;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: calc(var(--card-height) / 6);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
transform: scale(0.8);
|
||||
filter: blur(calc(var(--card-height) / 6));
|
||||
background-image: linear-gradient(
|
||||
var(--rotate)
|
||||
, #5ddcff, #3c67e3 43%, #4e00c2);
|
||||
opacity: 1;
|
||||
transition: opacity .5s;
|
||||
animation: spin 2.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
--rotate: 0deg;
|
||||
}
|
||||
100% {
|
||||
--rotate: 360deg;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #212534;
|
||||
text-decoration: none;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
11
temp/heartbeat/index.tsx
Normal file
11
temp/heartbeat/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import './index.less';
|
||||
|
||||
export default function () {
|
||||
|
||||
return (
|
||||
<div className='card'>
|
||||
<div className="heart">♥</div>
|
||||
<h1 className="title">hello! motherfucker!</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
491
temp/resume/css/base.less
Executable file
491
temp/resume/css/base.less
Executable file
@ -0,0 +1,491 @@
|
||||
.resume {
|
||||
:global {
|
||||
// 基础样式
|
||||
@color-main: #00b38a; // 主色
|
||||
@font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; // 普通字体
|
||||
@font-family-title: 'Lucida Grande', 'Hiragino Sans GB', 'Hiragino Sans GB W3', @font-family; // 标题字体
|
||||
|
||||
.kill-ie {
|
||||
margin: 0;
|
||||
padding: .5em 0;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
background: #fff8e2;
|
||||
}
|
||||
|
||||
.last-modified {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 50%;
|
||||
width: 1000px;
|
||||
transform: translateX(-50%);
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
transition: all .2s ease-in-out;
|
||||
animation: fade 1.6s;
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: auto;
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
text-align: left;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
width: 1024px;
|
||||
margin: 10px auto 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 15px #c0c0c0;
|
||||
overflow: hidden;
|
||||
transition: all .2s ease-in-out;
|
||||
// opacity: 0;
|
||||
transform: translate3d(0,50px,0);
|
||||
animation: fadeUp 2s cubic-bezier(0.19,1,0.22,1) forwards;
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translate3d(0,50px,0); }
|
||||
to { opacity: 1; transform: translate3d(0,0,0); }
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.content-hd {
|
||||
padding: 30px 50px;
|
||||
color: #fff;
|
||||
background-color: @color-main;
|
||||
overflow: hidden;
|
||||
@media screen and (max-width: 720px) {
|
||||
padding: 25px;
|
||||
}
|
||||
.title {
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 2px solid darken(@color-main, 2%);
|
||||
font-size: 52px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.name,
|
||||
.job,
|
||||
.info,
|
||||
.contact {
|
||||
width: 50%;
|
||||
@media screen and (max-width: 720px) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.name,
|
||||
.info {
|
||||
float: left;
|
||||
}
|
||||
.job,
|
||||
.contact {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.name {
|
||||
h1 {
|
||||
font-family: @font-family-title;
|
||||
font-weight: 500;
|
||||
letter-spacing: 5px;
|
||||
@media screen and (max-width: 720px) {
|
||||
margin-top: 10px;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.25;
|
||||
}
|
||||
small {
|
||||
padding-left: 10px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
@media screen and (max-width: 720px) {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.job {
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
@media screen and (max-width: 720px) {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
@media screen and (max-width: 720px) {
|
||||
margin: 5px auto 0;
|
||||
padding: 10px;
|
||||
border-top: 1px solid darken(@color-main, 2%);
|
||||
}
|
||||
small {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding-left: 5px;
|
||||
line-height: 30px;
|
||||
h2 {
|
||||
margin: 8px 0 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
padding-right: 5px;
|
||||
ul {
|
||||
margin-top: 8px;
|
||||
@media screen and (max-width: 720px) {
|
||||
margin: 16px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
> li {
|
||||
height: 23px;
|
||||
@media screen and (max-width: 720px) {
|
||||
display: inline-block;
|
||||
}
|
||||
> a {
|
||||
font-family: @font-family-title;
|
||||
font-size: 14px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
color: #e8e8e8;
|
||||
}
|
||||
.contact-link {
|
||||
@media screen and (max-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.iconfont {
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
@media screen and (max-width: 720px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-bd {
|
||||
min-height: 200px;
|
||||
padding: 18px 30px 50px;
|
||||
overflow: hidden;
|
||||
@media screen and (max-width: 720px) {
|
||||
padding: 15px 10px 50px;
|
||||
}
|
||||
.content-left,
|
||||
.content-right {
|
||||
width: 50%;
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content-left {
|
||||
float: left;
|
||||
}
|
||||
.content-right {
|
||||
float: right;
|
||||
}
|
||||
section {
|
||||
padding: 10px 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.section-hd {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
margin: 10px auto 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.section-bd {
|
||||
overflow: hidden;
|
||||
+ .section-bd {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.section-title-l,
|
||||
.section-title-r {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 32%;
|
||||
height: 0;
|
||||
border-top: 1px solid #ededed;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.section-title-l {
|
||||
left: 0;
|
||||
}
|
||||
.section-title-r {
|
||||
right: 0;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 24%;
|
||||
min-width: 100px;
|
||||
margin: 0 auto;
|
||||
padding: 4px 10px;
|
||||
border-radius: 32px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
background-color: #eee;
|
||||
}
|
||||
ul.section-list {
|
||||
padding: 8px 0 4px;
|
||||
> li:last-child {
|
||||
.section-content {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-main {
|
||||
.item-hd {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.item-bd {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
~ .item {
|
||||
padding-left: 1px;
|
||||
.item-hd {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.item-bd {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
&:last-child {
|
||||
.item-bd {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-stage {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
.item-hd {
|
||||
padding: 0 0 2px;
|
||||
.item-time {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-hd {
|
||||
position: relative;
|
||||
padding: 8px 0 5px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
.iconfont {
|
||||
color: @color-main;
|
||||
}
|
||||
.item-time {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
width: 135px;
|
||||
@media screen and (max-width: 720px) {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.item-more {
|
||||
float: right;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-left: 5px;
|
||||
@media screen and (max-width: 720px) {
|
||||
&.btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-name {
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
.item-bd {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.section-content {
|
||||
line-height: 25px;
|
||||
text-align: justify;
|
||||
word-break: break-all;
|
||||
margin-bottom: 2px;
|
||||
.iconfont {
|
||||
color: @color-main;
|
||||
}
|
||||
em {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-family: Monaco, Menlo, @font-family;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
color: #383838;
|
||||
margin: 0 3px;
|
||||
padding: 0 4px;
|
||||
transition: all .2s ease-in-out;
|
||||
background-color: #f6f6f6;
|
||||
&:hover {
|
||||
border: 1px solid @color-main;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-family: @font-family;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
font-weight: 500;
|
||||
color: #494949;
|
||||
margin: 0 3px;
|
||||
font-weight: 500;
|
||||
padding: 0 4px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: all .2s ease-in-out;
|
||||
box-shadow: inset 0 -5px #eee;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: inset 0 -10px rgb(220, 217, 217);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.iconfont {
|
||||
vertical-align: middle;
|
||||
&.icon-dot {
|
||||
vertical-align: -1px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
border: 1px solid @color-main;
|
||||
border-radius: 3px;
|
||||
font-family: Menlo, @font-family;
|
||||
height: 20px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 20px !important;
|
||||
margin: 2px 0;
|
||||
text-align: center;
|
||||
color: @color-main;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: @color-main;
|
||||
}
|
||||
}
|
||||
.pdf {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
bottom: 6px;
|
||||
left: 50%;
|
||||
margin-left: 520px;
|
||||
padding: 0 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color: #fff;
|
||||
background-color: @color-main;
|
||||
transition: all .2s ease-in-out;
|
||||
animation: fade 1.6s;
|
||||
@media screen and (max-width: 1246px) {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
transition: all .2s ease-in-out;
|
||||
animation: fade 1.6s;
|
||||
&.github-footer {
|
||||
display: block;
|
||||
}
|
||||
&.print-footer {
|
||||
display: none;
|
||||
}
|
||||
.footer-link {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
color: #d1d1d1;
|
||||
.iconfont {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #f1f1f1;
|
||||
overflow: visible;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
background-clip: padding-box;
|
||||
min-height: 15px;
|
||||
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical:hover {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical:active {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-clip: padding-box;
|
||||
border: solid transparent;
|
||||
border-width: 0 0 0 4px;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #d1d1d1;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
BIN
temp/resume/css/font/iconfont.eot
Executable file
BIN
temp/resume/css/font/iconfont.eot
Executable file
Binary file not shown.
47
temp/resume/css/font/iconfont.svg
Executable file
47
temp/resume/css/font/iconfont.svg
Executable file
@ -0,0 +1,47 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="dian" unicode="" d="M414.985216 480.877568l192.331776 0 0-191.906816-192.331776 0 0 191.906816Z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="lianjie" unicode="" d="M607.934444 478.143147c-6.179746 6.1777-12.766768 11.746532-19.554358 16.910135l-0.01228-0.011256c-6.986111 6.719028-16.47216 10.857279-26.930349 10.857279-21.464871 0-38.864146-17.400299-38.864146-38.864146 0-9.497305 3.411703-18.196431 9.071609-24.947182l-0.001023 0c0.001023-0.001023 0.00307-0.00307 0.005117-0.004093 2.718925-3.242857 5.953595-6.03853 9.585309-8.251941 3.664459-3.021823 7.261381-5.997598 10.624988-9.361205l3.203972-3.204995c40.279379-40.229237 28.254507-109.539812-12.024871-149.820214L371.157763 99.616044c-40.278355-40.229237-105.761766-40.229237-146.042167 0l-3.229554 3.231601c-40.281425 40.278355-40.281425 105.809861 0 145.991002l75.93546 75.909877c9.742898 7.733125 15.997346 19.668968 15.997346 33.072233 0 23.312962-18.898419 42.211381-42.211381 42.211381-8.797363 0-16.963347-2.693342-23.725354-7.297197-0.021489 0.045025-0.044002 0.088004-0.066515 0.134053l-0.809435-0.757247c-2.989077-2.148943-5.691629-4.669346-8.025791-7.510044l-78.913281-73.841775c-74.178443-74.229608-74.178443-195.632609 0-269.758863l3.203972-3.202948c74.178443-74.127278 195.529255-74.127278 269.707698 0l171.829484 171.880649c74.076112 74.17435 80.357166 191.184297 6.282077 265.311575L607.934444 478.143147zM855.61957 730.195743l-3.203972 3.203972c-74.17742 74.178443-195.528232 74.178443-269.706675 0L410.87944 561.520089c-74.178443-74.178443-78.263481-181.296089-4.085038-255.522628l3.152806-3.104711c3.368724-3.367701 6.865361-6.54302 10.434653-9.588379 2.583848-2.885723 5.618974-5.355985 8.992815-7.309476 0.025583-0.020466 0.052189-0.041956 0.077771-0.062422l0.011256 0.010233c5.377474-3.092431 11.608386-4.870938 18.257829-4.870938 20.263509 0 36.68962 16.428158 36.68962 36.68962 0 5.719258-1.309832 11.132548-3.645017 15.95846l0 0c-4.850471 10.891048-13.930267 17.521049-20.210297 23.802102l-3.15383 3.102664c-40.278355 40.278355-24.982998 98.79612 15.295358 139.074476l171.930791 171.830507c40.179095 40.280402 105.685018 40.280402 145.965419 0l3.206018-3.152806c40.279379-40.281425 40.279379-105.838513 0-146.06775l-75.686796-75.737962c-10.296507-7.628748-16.97358-19.865443-16.97358-33.662681 0-23.12365 18.745946-41.87062 41.87062-41.87062 8.048303 0 15.563464 2.275833 21.944801 6.211469 0.048095-0.081864 0.093121-0.157589 0.141216-0.240477l1.173732 1.083681c3.616364 2.421142 6.828522 5.393847 9.529027 8.792247l79.766718 73.603345C929.798013 534.665465 929.798013 656.018324 855.61957 730.195743z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="youjian" unicode="" d="M960.992 155.232c0-19.712-5.536-37.952-14.432-54.048l-283.84 317.568 280.768 245.632c10.912-17.344 17.504-37.696 17.504-59.68L960.992 155.232 960.992 155.232zM511.488 361.12 902.176 702.944c-16.032 8.768-34.08 14.144-53.568 14.144L174.368 717.088c-19.52 0-37.568-5.376-53.536-14.144L511.488 361.12 511.488 361.12zM620.416 381.792l-90.432-79.168c-5.28-4.608-11.872-6.912-18.496-6.912-6.624 0-13.216 2.304-18.496 6.912l-90.464 79.168L115.104 60.16c17.216-10.816 37.408-17.28 59.264-17.28l674.24 0c21.824 0 42.048 6.464 59.264 17.28L620.416 381.792 620.416 381.792zM79.488 664.416C68.576 647.104 62.016 626.72 62.016 604.736l0-449.472c0-19.712 5.504-37.952 14.432-54.048l283.808 317.632L79.488 664.416 79.488 664.416zM79.488 664.416" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="github" unicode="" d="M950.930286 384q0-143.433143-83.748571-257.974857t-216.283429-158.573714q-15.433143-2.852571-22.601143 4.022857t-7.168 17.115429l0 120.539429q0 55.442286-29.696 81.115429 32.548571 3.437714 58.587429 10.313143t53.686857 22.308571 46.299429 38.034286 30.281143 59.977143 11.702857 86.016q0 69.12-45.129143 117.686857 21.138286 52.004571-4.534857 116.589714-16.018286 5.12-46.299429-6.290286t-52.589714-25.161143l-21.723429-13.677714q-53.174857 14.848-109.714286 14.848t-109.714286-14.848q-9.142857 6.290286-24.283429 15.433143t-47.689143 22.016-49.152 7.68q-25.161143-64.585143-4.022857-116.589714-45.129143-48.566857-45.129143-117.686857 0-48.566857 11.702857-85.723429t29.988571-59.977143 46.006857-38.253714 53.686857-22.308571 58.587429-10.313143q-22.820571-20.553143-28.013714-58.88-11.995429-5.705143-25.746286-8.557714t-32.548571-2.852571-37.449143 12.288-31.744 35.693714q-10.825143 18.285714-27.721143 29.696t-28.306286 13.677714l-11.410286 1.682286q-11.995429 0-16.603429-2.56t-2.852571-6.582857 5.12-7.972571 7.460571-6.875429l4.022857-2.852571q12.580571-5.705143 24.868571-21.723429t17.993143-29.110857l5.705143-13.165714q7.460571-21.723429 25.161143-35.108571t38.253714-17.115429 39.716571-4.022857 31.744 1.974857l13.165714 2.267429q0-21.723429 0.292571-50.834286t0.292571-30.866286q0-10.313143-7.460571-17.115429t-22.820571-4.022857q-132.534857 44.032-216.283429 158.573714t-83.748571 257.974857q0 119.442286 58.88 220.306286t159.744 159.744 220.306286 58.88 220.306286-58.88 159.744-159.744 58.88-220.306286z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="pdf" unicode="" d="M869.073488 618.69323 657.110959 618.69323 657.110959 830.655759 869.073488 618.69323 869.073488 618.69323zM630.840642 592.422913 630.840642 830.655759 154.343227 830.709995l0-416.957367 714.730261 0L869.073488 592.422913 630.840642 592.422913 630.840642 592.422913zM295.004851 231.852788c-5.070482 3.063779-10.94426 5.132904-17.609053 6.201236-6.670933 1.064238-13.603833 1.600451-20.809955 1.600451l-48.821939 0 0-85.641519 48.821939 0c7.206122 0 14.140045 0.532119 20.809955 1.600451 6.664793 1.064238 12.539594 3.13234 17.609053 6.201236 5.064342 3.063779 9.134031 7.40669 12.208043 13.007245 3.064802 5.602601 4.600785 12.936637 4.600785 22.011316 0 9.070586-1.535983 16.407692-4.600785 22.010293C304.138882 224.446098 300.069193 228.783893 295.004851 231.852788L295.004851 231.852788zM35.820833 354.195184l0-416.904155 952.358333 0L988.179167 354.195184 35.820833 354.195184 35.820833 354.195184zM367.242082 163.016003c-3.599991-11.07115-9.342786-20.878516-17.20894-29.41289-7.874341-8.54256-18.077727-15.407921-30.617321-20.61041-12.543687-5.205559-27.746948-7.806803-45.621037-7.806803l-66.035996 0 0-102.449323-62.831001 0L144.927787 288.48153l128.866996 0c17.874089 0 33.07735-2.600221 45.621037-7.801686 12.540617-5.206582 22.744004-12.076036 30.617321-20.614503 7.866155-8.538467 13.603833-18.277272 17.20894-29.212322 3.601015-10.943236 5.402033-22.278399 5.402033-34.017768C372.644115 185.357847 370.843096 174.08306 367.242082 163.016003L367.242082 163.016003zM644.898823 89.582527c-5.342682-17.609053-13.407358-32.81743-24.211425-45.626153-10.807137-12.803607-24.283056-22.87908-40.423665-30.213116-16.145725-7.343245-35.154661-11.007705-57.028854-11.007705L399.973554 2.735553 399.973554 288.48153l123.261325 0c18.409279 0 35.550681-2.940982 51.427276-8.807596 15.872502-5.868661 29.617551-14.671141 41.219797-26.411533 11.608386-11.744485 20.673855-26.411533 27.216875-44.020586 6.534833-17.609053 9.803273-38.288025 9.803273-62.034868C652.901077 126.396991 650.232295 107.186464 644.898823 89.582527L644.898823 89.582527zM890.261043 235.653347 752.192478 235.653347l0-66.030879 119.66031 0 0-48.828079L752.192478 120.794389l0-118.058836-62.831001 0L689.361477 288.48153l200.900589 0L890.262066 235.653347 890.261043 235.653347zM572.060911 210.042039c-6.401804 8.266267-14.876826 14.603603-25.411763 19.009959-10.544147 4.402263-23.551392 6.602372-39.018665 6.602372L462.804555 235.65437l0-180.088588 56.029084 0c9.070586 0 17.872043 1.463328 26.415626 4.40124 8.534374 2.931772 16.140609 7.801686 22.811542 14.608719 6.664793 6.800893 12.007475 15.666818 16.007579 26.611078 4.002151 10.939143 6.002714 24.273846 6.002714 40.020482 0 14.408151-1.399883 27.415396-4.201695 39.018665C583.068615 191.833329 578.462714 201.767586 572.060911 210.042039L572.060911 210.042039zM572.060911 210.042039" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="dianhua" unicode="" d="M912 152.2c0-10.3-1.9-23.6-5.7-40-3.8-16.5-7.8-29.4-11.9-38.9-8-19-31.1-39-69.4-60.2-35.5-19.3-70.7-28.9-105.7-28.9-10.3 0-20.4 0.6-30.1 2.1-9.8 1.3-20.8 3.7-32.6 7.1-11.9 3.4-20.8 6.2-26.7 8.2-5.8 2.1-16.4 6.1-31.6 11.6-15.1 5.7-24.4 9.1-27.8 10.3-37.1 13.3-70.3 28.9-99.4 47.2-48.2 29.8-98.1 70.9-150 122.7-51.8 51.8-92.8 102-122.7 150-18.2 29.1-34 62.3-47.2 99.4-1.2 3.4-4.5 12.7-10.3 27.8s-9.6 25.7-11.6 31.6c-2.1 5.8-4.7 14.8-8.2 26.7-3.4 11.9-5.7 22.8-7.1 32.6s-2.1 19.9-2.1 30.1c0 34.9 9.7 70.1 28.9 105.7 21.2 38.2 41.2 61.4 60.2 69.4 9.5 4.1 22.4 8.1 38.9 11.9 16.5 3.8 29.8 5.7 40 5.7 5.2 0 9.4-0.6 11.9-1.6 6.9-2.3 16.8-16.7 30.1-43.2 4.1-7.2 9.8-17.4 17.1-30.8 7.2-13.3 13.9-25.3 19.9-36.1 6.2-10.8 11.9-20.9 17.5-30.4 1.2-1.5 4.4-6.3 10-14.2 5.5-8 9.6-14.7 12.1-20.3 2.6-5.5 3.9-10.9 3.9-16.3 0-7.6-5.4-17.1-16.3-28.4-10.8-11.3-22.6-21.8-35.3-31.4-12.7-9.5-24.4-19.5-35.3-30.1-10.8-10.6-16.3-19.3-16.3-26.1 0-3.4 0.9-7.7 2.9-12.8 1.9-5.1 3.4-9 4.7-11.6 1.3-2.6 3.9-7.2 8-13.6 3.9-6.5 6.2-10.1 6.6-10.8 28.7-51.9 61.7-96.4 98.8-133.5 37.1-37.1 81.6-70.1 133.5-98.8 0.7-0.3 4.2-2.5 10.8-6.6 6.5-3.9 11-6.6 13.6-8 2.6-1.3 6.6-3 11.6-4.7 5.1-1.9 9.4-2.9 12.8-2.9 6.9 0 15.5 5.4 26.1 16.3 10.6 10.8 20.7 22.6 30.1 35.3 9.5 12.7 19.9 24.4 31.4 35.3 11.5 10.9 20.8 16.3 28.4 16.3 5.2 0 10.8-1.3 16.3-3.9s12.1-6.7 20.3-12.1c8-5.5 12.7-8.8 14.2-10 9.5-5.7 19.7-11.6 30.4-17.5 10.8-6.2 22.8-12.7 36.1-19.9 13.3-7.2 23.6-12.9 30.8-17.1 26.5-13.3 40.9-23.3 43.2-30.1 1.6-3.2 2.2-7.3 2.2-12.5z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="home1" unicode="" d="M841.142857 329.142857v-274.285714q0-14.857143-10.857143-25.714286t-25.714285-10.857143h-219.428572v219.428572H438.857143v-219.428572H219.428571q-14.857143 0-25.714285 10.857143t-10.857143 25.714286V329.142857q0 0.571429 0.285714 1.714286t0.285714 1.714286l328.571429 270.857142 328.571429-270.857142q0.571429-1.142857 0.571428-3.428572z m127.428572 39.428572l-35.428572-42.285715q-4.571429-5.142857-12-6.285714h-1.714286q-7.428571 0-12 4L512 653.714286l-395.428571-329.714286q-6.857143-4.571429-13.714286-4-7.428571 1.142857-12 6.285714l-35.428572 42.285715q-4.571429 5.714286-4 13.428571t6.285715 12.285714l410.857143 342.285715q18.285714 14.857143 43.428571 14.857142t43.428571-14.857142l139.428572-116.571429V731.428571q0 8 5.142857 13.142858t13.142857 5.142857h109.714286q8 0 13.142857-5.142857t5.142857-13.142858v-233.142857l125.142857-104q5.714286-4.571429 6.285715-12.285714t-4-13.428571z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
BIN
temp/resume/css/font/iconfont.ttf
Executable file
BIN
temp/resume/css/font/iconfont.ttf
Executable file
Binary file not shown.
BIN
temp/resume/css/font/iconfont.woff
Executable file
BIN
temp/resume/css/font/iconfont.woff
Executable file
Binary file not shown.
BIN
temp/resume/css/font/iconfont.woff2
Executable file
BIN
temp/resume/css/font/iconfont.woff2
Executable file
Binary file not shown.
45
temp/resume/css/iconfont.css
Executable file
45
temp/resume/css/iconfont.css
Executable file
@ -0,0 +1,45 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('font/iconfont.eot?t=1561992927873'); /* IE9 */
|
||||
src: url('font/iconfont.eot?t=1561992927873#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAaQAAsAAAAAC+AAAAZBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDZAqKIIgpATYCJAMgCxIABCAFhG0HYxsOChEVpPuT/TwwbprHeq7b5Jzom6CR3nvOh8dNez8JkCZYhVBjWlNKxXy0M2ciEu4cNm994rW5egNgc64HNipCjeRb9OjbLSkM0suyhwQIIPufY6nXfmD53zssl6ykSDo+qgENKDKxgvaGG7AMwKcwN2ZlX3g0EAAcWsAPJCUtpx1YMLBWIgDIoP6mHmBzWjAteAJWIa3ZkgGZBQlY6n/qJICZ4e+TF9ATFqAgoWEdq6Bvam8kPMbT77TYLHamRYjzmQEI2wE0AD8ADEDEWusE0HHUDzQ47TIM8gDIwYIC8xiPqceyx9+efm9uzuEkQstKILeR6n/xAAYUCGhIIIUMIFJAKmexvWMy4DFcNRhNRkGCUCaBGgQyKdSgIZNBgjbZN4gB3dPvEANeAKy/hRqABiBNAPkGSx4TVhJQkIDAJn53jF4vk8llpJCWKhm1ilOSbNvWJh7cyAqBVGysFzWElJdrNA0XvdrVW3yERrNvaaVLTSNncSAOZQ7tzoqFmnPW4tILV4pKhfOWggLiYnm5hpTz1iZiHk4rCI1XfEubrN4I8ZuUOVY38FYt0VZqSy+YJ1Y59u3VoOtuWsEpLW592pVZhJLeDbzK6juhypWqdjL1nChebFdWQYjZZ8uRE3uuEHPSBn3FUTe3w5aUisbLbmuD90K8tOvYodB617Jllu3ONdsFwVK2WVX5KvcBqrdtsmq1EMuEy5eJ+coV66VLEznSjsgpFRlWsYLjwFvrKmvNNUJPypYeVFW/sbgBR/PWTQ3zRcceVTu3cjnXtl3rwItLe0rRpOg+7E6bFpoXCGSiuMihKuMoZ1mxWcg6HnX5cslqvb5iQQ0xh2zwrDzCWzXl/kZvj6oa4sqtW9n7YjnhS5eM7uUXZFqzZgcrWV5UGbfhfiZSYj3HEQ6cpZHQpj5iaUyZA2cR+vYuqxDiKiq1pjqru5GYK3neWg4Yy8sX3N1rnQHdbv1Xhxq0a2kBDHUpbe5wxjdNjb+Lfsefp+hOdvYLhpjslBWAPiQvc0LVhDZ1VXVNTeOZsv4ff1eV1ZVNjeNp6/iTIUn4i1OlqFlPhLe7dVqR/aap6VXxr7a3i+9kZ/0cf0fycqDYkJ8xoBox6lrFEZdY7Ucb7Pvwj3Gybqlu8vuEDnljNGPYL9YycVbrpa1nhZzv/A375UddYh0/Inq4OLPu0Z++727y4yKu0jFDugiZwal7kxd+3DwoN29E3t/nExyZmcl7U4OFzNzBsXSvtI2b3DMuzxbWLZb/5WnS6w8O69y5T+S/Hvv2FfIv7/3pW/dw1tjRx46Nfu2wgj8eYUUDL150ev3m1uIT62NNI0O44JJgTv9VdBFHUeMXb108aHfCuHyXpL7xOrNL3vhFbQo0GRMkn1pP1E10vdvG4NZy/MfZlqRxwePGxOuOxebWvtL6b4xQVBrW+o+oBSJRpVo8eMfMnFDVBZ8/Nvbake5XW+OX3hTe0WtujNpw8NuOS84qNmhumFuScr61O8u/66zkJR7Z9h06+OQOHZrrMzn4kYR/u6klz8q2XHvyNcmtV6QDDLMz7VRG5c2bc5CiNKqEDIU9FzXVPcowjJIlWzKJqfc9Q2YdVXFNiU6vs44aytawQ9yaZ5NMxSpMhfUiVHdyD2h+Tc+iBQCg91Gngeab9BY6HGjeR9+i44Hmt/Rs2hYA6NPUW8qzFBqmXae7qWI+sfz/NHItIf5O6Gnex2AclwbI0JtHVXg9uxhdYOlYRm3O5fYms+gNmzAFgLMHAEritMPtOeUaNh8gYKFJgYIMOqDBwg3JYP1AAh4GkIJFPHDwRfr2POwxAjQIYwPAB38TIFBjDVBQYg/QUOMUksHeAgkEvAIp1IQGDiXEfo88PCz1P5wEjWID9g+h5oEcgx6iwju6qTOSFYSEN8oYAlBmRTFxwwFljnXGj6tUCUi4hys5HnYdQxKOWGvmVdMxz6nuHFnN/ewgWdAoNsD+feZQ80DD9VD6+Tu6qTPSUldjfqOMYfaglCl6IG/SoVfdvZSPH1dRJkyAhHzuwZUxY2dHGaT6xSLWmvEjwukoZ/pRX2m2vrz/0jMAONb+2ShCE4ZIiJTICEtswBzMsO28shhw++cpJgtuXFA/2WVqaNvGUivN2nOP5WwGAAAA') format('woff2'),
|
||||
url('font/iconfont.woff?t=1561992927873') format('woff'),
|
||||
url('font/iconfont.ttf?t=1561992927873') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('font/iconfont.svg?t=1561992927873#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-homepage:before {
|
||||
content: "\e8fa";
|
||||
}
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-email:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-phone:before {
|
||||
content: "\e6f9";
|
||||
}
|
||||
|
||||
.icon-dot:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-link:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-pdf:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
5
temp/resume/css/index.less
Executable file
5
temp/resume/css/index.less
Executable file
@ -0,0 +1,5 @@
|
||||
@import './reset.less';
|
||||
@import './iconfont.css';
|
||||
@import './base.less';
|
||||
@import './print.less';
|
||||
@import './style.less';
|
||||
110
temp/resume/css/print.less
Executable file
110
temp/resume/css/print.less
Executable file
@ -0,0 +1,110 @@
|
||||
// 打印样式
|
||||
// 调试方式 Chrome Devtools > Menu > More Tools > Rendering -> Emulate CSS media: print.
|
||||
:global {
|
||||
@media print {
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
.content {
|
||||
width: 1024px;
|
||||
// height: 1450px; // A4 大小
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
.content-hd {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 40px;
|
||||
.title {
|
||||
font-size: 56px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.name h1 small {
|
||||
font-size: 26px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.job h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
.info {
|
||||
line-height: 32px;
|
||||
h2 {
|
||||
font-size: 19px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
.contact ul {
|
||||
> li {
|
||||
height: 25px;
|
||||
> a {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-bd {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
section {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
~ section {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.section-hd {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.item-hd {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.item-bd {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-content {
|
||||
line-height: 26px !important;
|
||||
}
|
||||
.print-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.pdf {
|
||||
display: none;
|
||||
}
|
||||
.last-modified {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 970px;
|
||||
top: auto;
|
||||
bottom: 25px;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 970px;
|
||||
bottom: 25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
&.github-footer {
|
||||
display: none;
|
||||
}
|
||||
&.print-footer {
|
||||
display: block;
|
||||
.footer-link {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
73
temp/resume/css/reset.less
Executable file
73
temp/resume/css/reset.less
Executable file
@ -0,0 +1,73 @@
|
||||
.resume {
|
||||
@color-main: #00b38a; // 主色
|
||||
@font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; // 普通字体
|
||||
@font-family-title: 'Lucida Grande', 'Hiragino Sans GB', 'Hiragino Sans GB W3', @font-family; // 标题字体
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: none;
|
||||
font-family: @font-family;
|
||||
font-size: 14px;
|
||||
line-height: 22 / 14;
|
||||
color: #333;
|
||||
background-color: #eee;
|
||||
padding-top: 5px;
|
||||
overflow: auto;
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding-top: 0;
|
||||
}
|
||||
:global {
|
||||
/* reset */
|
||||
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
|
||||
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
|
||||
dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
|
||||
h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li,
|
||||
mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small,
|
||||
span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead,
|
||||
time, tr, tt, u, ul, var, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
caption, td, th {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:after, blockquote:before, q:after, q:before {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
elements-of-type(html5-block) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
temp/resume/css/style.less
Executable file
15
temp/resume/css/style.less
Executable file
@ -0,0 +1,15 @@
|
||||
// 定制化样式
|
||||
#experience {
|
||||
.item-main {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
#skill {
|
||||
.section-content {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
// 打印样式
|
||||
@media print {
|
||||
|
||||
}
|
||||
10
temp/resume/index.md
Normal file
10
temp/resume/index.md
Normal file
@ -0,0 +1,10 @@
|
||||
<!-- ---
|
||||
nav:
|
||||
title: 关于我
|
||||
path: /resume
|
||||
group:
|
||||
order: 99
|
||||
gapless: true
|
||||
--- -->
|
||||
|
||||
<!-- <code src="./index.tsx" inline /> -->
|
||||
310
temp/resume/index.tsx
Normal file
310
temp/resume/index.tsx
Normal file
@ -0,0 +1,310 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
|
||||
import styles from './css/index.less'
|
||||
|
||||
export default (props) => {
|
||||
|
||||
useEffect(() =>{
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={styles.resume}>
|
||||
<p className="last-modified"><a onClick={() => location.replace('/')} >回首页</a> 最后更新时间：2022年05月</p>
|
||||
<div className="content">
|
||||
<header className="content-hd">
|
||||
<section className="title">
|
||||
<div className="name">
|
||||
<h1>江志雄<small>Jiang Zhixiong</small></h1>
|
||||
</div>
|
||||
<div className="job">
|
||||
<h2>Web前端开发工程师<small> / 杭州</small></h2>
|
||||
</div>
|
||||
</section>
|
||||
<section className="info">
|
||||
<h2>男 · 本科</h2>
|
||||
<h3>2018年毕业 · 5年经验</h3>
|
||||
<h3>东华理工大学 · 软件工程</h3>
|
||||
</section>
|
||||
<section className="contact">
|
||||
<ul>
|
||||
<li><a href="https://j710328466.github.io" target="_blank"><span className="contact-link">https://j710328466.github.io</span><i className="iconfont icon-homepage"></i></a></li>
|
||||
<li><a href="https://github.com/j710328466" target="_blank"><span className="contact-link">github.com/j710328466</span><i className="iconfont icon-github"></i></a></li>
|
||||
<li><a href="mailto:710328466@qq.com" target="_blank"><span className="contact-link">710328466@qq.com</span><i className="iconfont icon-email"></i></a></li>
|
||||
<li><a href="#" target="_blank"><span className="contact-link">极简主义·热爱生活</span><i className="iconfont icon-email"></i></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</header>
|
||||
<div className="content-bd">
|
||||
<div className="content-left">
|
||||
<section id="experience">
|
||||
<header className="section-hd">
|
||||
<span className="section-title-l"></span>
|
||||
<h2 className="section-title">工作经验</h2>
|
||||
<span className="section-title-r"></span>
|
||||
</header>
|
||||
<div className="section-bd">
|
||||
<div className="item item-main">
|
||||
<header className="item-hd">
|
||||
<span className="item-time">2017.10 ~ 2020.03</span>
|
||||
<h3 className="item-name" style={{ float: 'right' }}>早稻科技</h3>
|
||||
</header>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<a className="btn item-more" href="http://jimistore.com" target="_blank" title="工作经历">官网</a>
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 官网 · nextJs、reactJs、antd、pm2</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>前端开发</strong>
|
||||
负责优化旧版官网，针对之前用户体验差的基础上向领导提出优化引入服务端渲染框架<em>nextJs</em>，使用<em>antd</em>作为官网辅助样式，使用<em>ant Motion</em>作为动画库，并使用<em>Pm2</em>部署在服务器上，该项目属于公司<em>第一个node端搭建项目</em>，对于公司node后端化具有一定的里程碑意义。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 定制H5 · webpack、typescript</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>Owner</strong><strong>前端开发</strong>
|
||||
从最初版本的<em>gulp</em>版本使用<em>Webpack</em>重新搭建脚手架将资源优化到更节约，后期引入<em>typescript</em>
|
||||
强制规范开发规范，使代码更易维护，其中开发过的<em>月饼大作战</em>和<em>约会大乱斗</em>
|
||||
两款小游戏使用了大量<em>css样式</em>，趣味性颇受好评。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<a className="btn item-more" href="https://www.npmjs.com/package/jimi-web-public-tools" target="_blank" title="工作经历">jimi-tools</a>
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 定制工具库 · webpack、typescript</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>前端开发</strong>
|
||||
该活动依赖于公司最底层工具库，并服务于活动开发，主要作用是为了统一管理优化在活动开发时使用的多端约定的函数方法，该工具包使用<em>typescript</em>规范开发，并放置于公司私有npm仓库中维护，内容包括但不限于：<em>登录授权</em>、
|
||||
<em>分享</em>、<em>语音验证</em><em>验证码登录</em>、<em>获取验证码</em>等等...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 运营管理平台 · ReactJs、Redux、Dva、Antd</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>前端开发</strong>
|
||||
负责运营平台商品营销模块、渠道管理模块、会员管理模块、数据配置模块。
|
||||
基于<em>react</em><em>redux</em><em>antd</em>开发，实现单文件页面组件化开发、依赖处理等能力；封装部分重复<em>组件</em>和<em>函数</em>方法，减少重复工作量。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> BI数据管理平台 · ReactJs、Redux、Dva、Antd</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>Owner</strong>
|
||||
主要用于BI团队，整合用户信息，构建用户画像，从而起到降低风险和降低成本的作用。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section-bd">
|
||||
<div className="item item-main">
|
||||
<header className="item-hd">
|
||||
<span className="item-time">2020.03 ~ 2021.03</span>
|
||||
<h3 className="item-name" style={{ float: 'right' }}>佰钧成科技-天猫精灵事业部</h3>
|
||||
</header>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 天猫精灵内测平台 · Umi、reactJs、midway、antd、ts</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>Owner</strong>
|
||||
负责该平台的bug维护，功能开发，使用的技术为阿里技术栈：<em>cuz</em>（已开源但体验效果不佳），后重构升级为<em>Umi</em> + <em>midway</em>(eggjs前身)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 天猫精灵安全服务中心 · umi、reactJs、midway、antd、ts</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>前端开发</strong>
|
||||
用户数据采集、用户画像、用户数据申请、内外数据合作评审、数据使用要求规范等业务相关的聚合平台。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 天猫精灵售后服务中心 · umi、antd-mobile-v2、midway、ts</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>Owner</strong><strong>前端开发</strong>
|
||||
属于天猫精灵app端，帮助中心项目，具体满足的需求为：用户售后申请或者是在使用app时问题反馈到运营同学，记录并解决问题。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 数字制造服务平台 · nextJs、antd、midway、ts</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>前端开发</strong>
|
||||
将线上的客户需求提出，运营团队评估，结果交付在线上实现流转的最小闭环（属于beta阶段产品）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section-bd">
|
||||
<div className="item item-main">
|
||||
<header className="item-hd">
|
||||
<span className="item-time">2021.03 ~ 2022.02</span>
|
||||
<h3 className="item-name" style={{ float: 'right' }}>宇泛智能科技</h3>
|
||||
</header>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 蓝色荣耀 · Umi、reactJs、antd、ts、yapi</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>Owner</strong><strong>前端开发</strong>
|
||||
属于供对接甲方使用的平台、将智慧工地概念应用落地的闭环式解决方案，功能包括：签署合同、工人打卡、安全监控、发放薪资、设备监控...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 数据可视化大屏 · easyV-UI、reactJs、yapi</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>Owner</strong><strong>前端开发</strong>
|
||||
杭州湾开发商对接项目，供客户将智慧工地部分系统功能通过可视化图表方式展示在数据大屏上，功能包括：升降机大屏、安全帽、扬尘设备、工人进出场记录、在场人员统计...等
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> Toucan-UI · Echart、G2/plot、react、ts、dumi、lerna</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>Owner</strong><strong>前端开发</strong>
|
||||
toucan-UI 属于二期数据大屏的自研产物，弥补了一期数据大屏功能上的不完善与可维护性差的缺陷，有三部分组件：<em>meta 元组件</em>、<em>chart 图表组件</em>、<em>bizs 业务组件</em> 构成
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> UU中心 · electron、antd、Oss、ts、umi</h3>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<strong>前端开发</strong>
|
||||
基于 <em>electron</em> 的桌面端应用，功能包含各种提升前端效能的应用，包括有：OSS 资源上传平台、物料库、波塞冬集成埋点、uniubi-ui、uniubi-lib...等（部分应用属于推广阶段）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className="content-right">
|
||||
<section id="skill">
|
||||
<header className="section-hd">
|
||||
<span className="section-title-l"></span>
|
||||
<h2 className="section-title">专业能力</h2>
|
||||
<span className="section-title-r"></span>
|
||||
</header>
|
||||
<div className="section-bd">
|
||||
<ul className="section-list">
|
||||
<li><p className="section-content"><i className="iconfont icon-dot"></i>
|
||||
熟悉<strong>JavaScript</strong>、<strong>HTML</strong>、<strong>CSS</strong>开发规范、<strong>UI重构</strong>、<strong>页面布局</strong>，重视<strong>页面交互</strong>与<strong>用户体验</strong>。
|
||||
</p></li>
|
||||
<li><p className="section-content"><i className="iconfont icon-dot"></i>
|
||||
对<strong>JavaScript</strong>、各类<strong>UI组件库</strong>、<strong>JS类库</strong>、<strong>模板引擎</strong>、<strong>MV*框架</strong>、<strong>工程化工具</strong>等有着较熟练的实践和较深刻的感悟。
|
||||
</p></li>
|
||||
<li><p className="section-content"><i className="iconfont icon-dot"></i>
|
||||
对<strong>Node.js</strong>、<strong>模块化规范</strong>、<strong>CSS预处理器</strong>、<strong>数据可视化</strong>、<strong>设计模式</strong>、<strong>性能优化</strong>、<strong>前端安全</strong>等也有一定的应用与思考。
|
||||
</p></li>
|
||||
<li><p className="section-content"><i className="iconfont icon-dot"></i>
|
||||
熟练使用<strong>ES6</strong>代码洁癖<strong>高质量</strong><strong>可维护性</strong>。以<em>React</em><em>scss</em><em>Webpack</em><em>Node.js</em>等为常用技术栈，同时也了解主流的<em>Vue</em><em>gulp</em><em>koa</em>等技术。
|
||||
</p></li>
|
||||
<li><p className="section-content"><i className="iconfont icon-dot"></i>
|
||||
熟练使用<strong>Git</strong>进行版本控制和代码托管、<strong>Markdown</strong>进行文档编写，了解项目常规开发流程、<strong>开发调试</strong>技巧、<strong>发布部署</strong>步骤，掌握<strong>类Unix</strong>服务器基本运维能力。
|
||||
</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="personal">
|
||||
<header className="section-hd">
|
||||
<span className="section-title-l"></span>
|
||||
<h2 className="section-title">个人作品</h2>
|
||||
<span className="section-title-r"></span>
|
||||
</header>
|
||||
<div className="section-bd">
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i>NiceCode</h3>
|
||||
<a className="btn item-more" href="https://nicecoders.github.io" target="_blank" title="nicenote">NiceCode</a>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
nicecoder 项目发起维护人，该项目包含各个技术栈的工具库，内容正在不断完善中，旨在提高工作效率，减少重复工作，目前成熟的工具有：
|
||||
<em>@nicecode/changelog</em><em>@nicecode/lint</em><em>@nicecode/commit</em><em>@nicecode/tools</em>...等
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 技术博客</h3>
|
||||
<a className="btn item-more" href="https://j710328466.github.io/" target="_blank" title="nicenote">NiceNote</a>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
紧跟技术潮流，记录一些自己的学习记录和生活感悟，该博客系统最早使用主流博客系统<em>Hexo</em>搭建，<em>aliyun flow</em>集成部署，后为了更方便记录展示案例代码，修改为<em>Dumi</em>，托管于gitee仓库
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 语音聊天室</h3>
|
||||
<a className="item-more" href="https://github.com/j710328466/chatroom" target="_blank" title="个人主页"><i className="iconfont icon-homepage"></i></a>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
<em>Vue全家桶</em>开发，<em>muse-Ui</em>作为UI框架，<em>axios</em>作为接口请求工具，后端使用了<em>socket.io</em>库搭配 express 开发。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<header className="item-hd">
|
||||
<h3 className="item-name"><i className="iconfont icon-dot"></i> 二手商城系统 · vue2、vuex、vue-router、mongodb、express</h3>
|
||||
<a className="item-more" href="https://cqu.pt" target="_blank" title="内网外入"><i className="iconfont icon-link"></i></a>
|
||||
</header>
|
||||
<div className="item-bd">
|
||||
<p className="section-content">
|
||||
前端使用了<em>vue全家桶</em>，<em>muse-UI</em>作为UI框架，后端使用了<em>express</em>作为框架，<em>阿里云oss</em>作为文件资源处理库，<em>mongoDB</em>作为数据库。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <p className="last-modified"> chrome浏览器 > 打印 > 目标另存为`PDF` > 更多设置无边距 > 即可导出</p> */}
|
||||
<a className="pdf" href="resume.pdf"><i className="iconfont icon-pdf"></i> PDF简历</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
BIN
temp/resume/static/【react前端开发_杭州】江志雄 3年.pdf
Normal file
BIN
temp/resume/static/【react前端开发_杭州】江志雄 3年.pdf
Normal file
Binary file not shown.
BIN
temp/resume/static/江志雄-前端开发15088662107.pdf
Normal file
BIN
temp/resume/static/江志雄-前端开发15088662107.pdf
Normal file
Binary file not shown.
BIN
temp/resume/static/阿里JD及内面题库_WEB前端开发.xlsx
Normal file
BIN
temp/resume/static/阿里JD及内面题库_WEB前端开发.xlsx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user