简历所用代码

<meta charset="UTF-8" />
<meta name=viewport content='width=device-width, initial-scale=1, maximum-scale=1'>
<title>define the frontend again</title>
<style>
*{
  margin:0;
  padding:0;
}  
li , span , img{
    list-style-type:none;
    cursor:pointer;
} 
#app{
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
}
#text{
  width: 0px;
  height: 0px;
  border-top:100px solid gray; 
  border-left:50px solid gray; 
  border-top-left-radius: 100%;
  transform: rotate(110deg);
}
.chart{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red 33.3%,blue 33.3% 66.6%, green 66.6%);
}
.chart~ul{margin-left: 70px;}
.chart~ul li{
  width: 70px;
  height: 25px;
  margin-bottom: 8px;
}
.chart~ul li:nth-child(1){background:red;} 
.chart~ul li:nth-child(2){background:blue;}
.chart~ul li:nth-child(3){background:green;}
.chart~ul li::after{margin-left: 100px;}  
.chart~ul li:nth-child(1)::after{content: 'react';} 
.chart~ul li:nth-child(2)::after{content: 'css3';} 
.chart~ul li:nth-child(3)::after{content: 'canvas';} 
#experience span:nth-of-type(1)::after{
  content: '汕头邦盛科技有限公司';
  margin-left:20px;
}
#experience span:nth-of-type(2)::after{
  content: '汕头亿迪科技有限公司';
  margin-left:20px;
}
</style>
<div id="app"></div>
<link href='index.css' rel='stylesheet' type='text/css' />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="index.js"></script>
<script src="jq.js"></script>
<script type="text/babel">
const[l,w,h,]=[console.log,window.innerWidth,window.innerHeight]
const Flex=(flex,props)=>
<div className={flex} style={props.style} onClick={props.click} id={props.id} 
  onTouchStart={props.touchstart} onTouchMove={props.touchmove} onTouchEnd={props.touchend}>
    {props.data ? props.data.map(d=><span>{d}</span>) : props.children}
</div>
class Index extends React.Component{state={}
  componentDidMount(){}

  render() {
    return (
      <C>
       <AS style={{width:'50%',height:'100vh'}}> 
          <AS style={{height:'20%'}} id='experience'>
            <h3> 工作经历 </h3>
            <span>2017-2018</span>
            <span>2018-2019</span>
          </AS>  
          <AS style={{height:'25%'}}>
            <h3> 技能 </h3>
            <Row style={{marginLeft:'-10px'}} >
              <li className='chart' ></li>
              <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </Row>
          </AS> 
          <Row style={{height:'25%'}}> 
            <AS style={{width:'100px'}}>
              <h3> 博客 </h3>
              <img src="blog.png" style={{width:'100px',height:'100px'}} />
            </AS>  
            <AS style={{marginLeft:'70px'}}>
              <h3> 作品 </h3>
              <img src="blog.png" style={{width:'100px',height:'100px'}} />
            </AS>  
          </Row>  
        </AS>  
      </C>
      
    )
  }
}
ReactDOM.render(
  <Index />,
  document.getElementById('app')
)

</script>