<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>