<commit_before>import React from 'react';
import MediaQuery from 'react-responsive';
import Skill from 'skills/skill.jsx';
import Target from 'global/target.jsx';

export default class Skillset extends React.PureComponent{
  constructor(props){
		super(props);
    this.skillChecks = this.skillCheckList.bind(this);
  }
  skillCheckList(check){
    if(check){
      return (
        <div class='skillset-check-list'>
          <ul>
            {this.props.skills.checkList.map((check, index) => {
              return (
                <li key={this.props.skills.key + index} data-aos='fade-up'>
                  <MediaQuery query='(min-width: 1024px)'>
										<span><i class="fa fa-check" aria-hidden="true"></i></span>
									</MediaQuery>
									<MediaQuery query='(max-width: 1023px)'>
                  	<div><i class="fa fa-check" aria-hidden="true"></i></div>
									</MediaQuery>
                  <h2>{check}</h2>
                </li>
              );
            })}
          </ul>
        </div>
      );
    }
  }
  render(){    
    return (
      <div class='skillset'>
        <div class={'skillset-header ' + this.props.skills.color} data-aos='zoom-in-up'>
          <i class={this.props.skills.icon} aria-hidden="true"></i>
          <Target shape='circle' color='dark-blue' translate={true} position={{bottom: '-21px', left: '50%'}}/>
          <h1 class='skillset-name'>{this.props.skills.skillset}</h1>
        </div>
        <div class='skillset-skills'>
          {this.props.skills.skillList.map((skill, index) => <Skill key={this.props.skills.key + index} color={this.props.skills.color}skill={skill}/> )}
        </div>
        {this.skillCheckList(this.props.skills.check)}
      </div>
    );
  }    
}<commit_msg>Added dynamic animation feature for each skillset<commit_after>import React from 'react';
import MediaQuery from 'react-responsive';
import Skill from 'skills/skill.jsx';
import Target from 'global/target.jsx';
import CheckList from 'skills/checkList.jsx';

export default class Skillset extends React.PureComponent{
  constructor(props){
		super(props);
    this.skillChecks = this.skillCheckList.bind(this);
    this.setAnimation = this.setAnimation.bind(this);
  }
  skillCheckList(check){
    if(check){
      return ( <CheckList skills={this.props.skills} /> );
    }
  }
  setAnimation(skillset, index){
    switch(skillset){
      case 'Front-End':
        return {
          name: 'fade-right',
          anchor: '#skillset-header-Front-End',
          delay: index * 200,
        }
      case 'Back-End':
        return {
          name: 'fade-left',
          anchor: '#skillset-header-Back-End',
          delay: index * 200,
        }
      case 'Dev-Tools':
        return {
          name: 'fade-up',
          anchor: '#skillset-header-Dev-Tools',
          delay: index * 200,
        }
    }
  }
  render(){    
    return (
      <div class={'skillset ' + this.props.skills.skillset}>
        <div id={'skillset-header-' + this.props.skills.skillset}class={'skillset-header ' + this.props.skills.skillset + ' ' + this.props.skills.color} data-aos='zoom-in-up'>
          <i class={this.props.skills.icon} aria-hidden="true"></i>
          <Target shape='circle' color='dark-blue'/>
          <h1 class={'skillset-name ' + this.props.skills.skillset}>{this.props.skills.skillset}</h1>
        </div>
        <MediaQuery query='(max-width: 1023px)'>
          <div class='skillset-skills'>
            {this.props.skills.skillList.map((skill, index) => <Skill key={this.props.skills.key + index} color={this.props.skills.color}skill={skill} animation={this.setAnimation(this.props.skills.skillset, index + 2)}/> )}
          </div>
        </MediaQuery>
        <MediaQuery query='(min-width: 1024px)'>		
          {this.props.skills.skillList.map((skill, index) => <Skill key={this.props.skills.key + index} color={this.props.skills.color}skill={skill} animation={this.setAnimation(this.props.skills.skillset, index)}/> )}
        </MediaQuery>        
        {this.skillCheckList(this.props.skills.check)}
      </div>
    );
  }    
}
{'fraction_non_alphanumeric': 0.1655709763817872, 'fraction_numerical': 0.008765522279035792, 'mean_word_length': 2.446308724832215, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2744950', 'n_tokens_mistral': 1386, 'n_tokens_neox': 1360, 'n_words': 219}