<file_sep>import React from 'react';
import '../styles/social-links.scss'


const SocialLinks = (props) => {

  return (
    <ul className="social-links">
      {
        props.socialData ? props.socialData.map( (item, index)=>
        <li key={index}>
          <a href={item.link} title={item.title} target="_blank" rel="noopener noreferrer">
           <i aria-hidden="true" className={`${item.icon} icon`}></i>
          </a>
        </li>
        ) : ''
      }
    </ul>
  )
}


export default SocialLinks;<file_sep>import React, { Component } from 'react';
import ContactImage from '../images/get-in-touch.jpg';

// Libraries
import Fade from 'react-reveal/Fade';

class Contact extends Component {

  constructor() {
    super();
  }

  render() {
    return (
      <Fade>
        <section id="contact" className="bg-grey">
          <div className="container py-5">
            <h1>Get in touch <span className="emoji" aria-label="Emoji heart letter" role="img">💌</span></h1>
            <div className="grid-wrapper col-2 align-center grid-gap-4">
              <img className="img-fluid rounded" src={ContactImage} alt="Get in touch" />
              <div>
                <p>If you would like to get in touch regarding any freelance consulting projects and start-up advice on technology roadmaps, please get in touch through my business website <a href="https://nimblestudios.dev/">Nimble Studios</a> <span aria-label="Emoji smiley" role="img">😄</span></p>
              </div>
            </div>
          </div>
        </section>
      </Fade>
    );
  }

}

export default Contact;<file_sep>import React, { Component } from 'react';

import commercialPortfolio from '../data/portfolio-commercial';
import PortfolioPanel from '../components/PortfolioPanel';


class Portfolio extends Component {

  constructor() {
    super();


    this.state = {
      commercialPortfolio,
      tabValue: 'commercial'
    }

    this.showTab = this.showTab.bind(this);

  }

  showTab = (value) => (e) => {

    e.preventDefault();

    // set state
    this.setState({
      tabValue: value
    })

  };  

  PortfolioTemplate(props) {
    return (
      <div className="portfolio-panel-container">

        {
          props.data.map((item, index) => {
            return (
              <PortfolioPanel key={index} data={item} />
            )
          })
        }
      </div>
    )
  }  




  render() {
    return (
      <section id="portfolio">
        <div className="container py-5">
          <h1>Portfolio</h1>

          <div className="filter-bar">
          <button
              className={this.state.tabValue === 'commercial' ? 'active' : ''} 
              onClick={this.showTab('commercial')}>Commercial</button>                       
            <button
              className={this.state.tabValue === 'freelance' ? 'active' : ''}
              onClick={this.showTab('freelance')}>Freelance</button>

          </div>

          {
            this.state.tabValue === 'freelance' && (
              <div>
                <p>Freelance projects are carried out under my sole-trader business <a href="https://nimblestudios.dev/">Nimble Studios</a>, where I occasionally work with other team members on client projects</p>
              </div>
            )
          }

          {
            this.state.tabValue === 'commercial' && <this.PortfolioTemplate data={this.state.commercialPortfolio} />
          }          


          
        </div>
      </section>
    );
  }

}

export default Portfolio;<file_sep>import React, {useEffect} from 'react';
import './App.scss';

import Header from './layouts/Header';
import About from './layouts/About';
import Skills from './layouts/Skills';
import Portfolio from './layouts/Portfolio';
import Contact from './layouts/Contact';
import Footer from './layouts/Footer';

function App() {

  // let timer;

  // window.addEventListener('scroll', () => {

  //   let scrollPosition = window.pageYOffset;

  //   if (timer) {
  //     window.clearTimeout(timer);
  //   }

  //   timer = setTimeout(() => {
  //     console.log(scrollPosition);

  //     if (scrollPosition >= 300) {
  //       console.log('fired change state');
  //     }

  //   }, 1000);



  // });

  useEffect(()=>{

    console.log('useEffect hook')

  }, [])

  function intersectionObservor() {

    // this is the target which is observed
    var target = document.querySelector('#services');

    // configure the intersection observer instance
    var intersectionObserverOptions = {
      root: null,
      rootMargin: '150px',
      threshold: 1.0
    }

    var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);

    // provide the observer with a target
    observer.observe(target);

    function onIntersection(entries) {
      entries.forEach(entry => {
        console.clear();
        console.log(entry.intersectionRatio)
        target.classList.toggle('visible', entry.intersectionRatio > 0);

        if (entry.intersectionRatio > 0) {
          console.log('in the view');
          target.classList.add('bg-gray-700');
          target.querySelector('h1').classList.remove('text-gray-700');
          target.querySelector('h1').classList.add('text-gray-200');
          observer.unobserve(entry.target);
        } else {
          console.log('out of view');
        }

      });
    }

  }  

  return (
    <div className="App">
      <Header />
      <About />
      <Skills />
      <Portfolio />
      <Contact />
      <Footer />
    </div>
  );
}

export default App;
<file_sep>import React from 'react';
import '../styles/portfolio-panel.scss';

// Libraries
import Fade from 'react-reveal/Fade';

const PortfolioPanel = (props) => {

  let { themeClass, name, image, imageWebP, company, html, link, tags } = props.data;

  return (
    <Fade>
      <div className={`${themeClass} portfolio grid-wrapper col-2 align-center grid-gap-4 my-3`}>
        <div className="media">
          <picture>
            <source srcSet={imageWebP} type="image/webp" />
            <source srcSet={image} type="image/png" />
            <img className="img-fluid rounded media__image" src={image} alt={`${company}`} />
          </picture>
        </div>
        <div className="content">
          <h2 className="content__title">{name}</h2>
          <h3 className="content__company">{company}</h3>
          <div className="content__info" dangerouslySetInnerHTML={{ __html: html }}></div>
          {

            link && (<a className="content__cta" href={link} target="_blank" rel="noreferrer noopener">View Work</a>)
          }
          <ul className="content__tags">
            {
              tags.map((tag, index) => {
                return <li key={index}>{tag}</li>
              })
            }
          </ul>
        </div>
      </div>
    </Fade>
  )


}

export default PortfolioPanel;<file_sep>import React from 'react';
import '../styles/card.scss';

const Card = (props) => {

  let { themeClass, icon, name, skills } = props.cardData;

  return (

    <div className={`${themeClass} card`}>
      <i className={`fas ${icon} card__icon`}></i>
      <h2 className="card__title">{name}</h2>
      <ul className="card__skills">
        {
          skills.map((skill, index) =>
            <li key={index}>{skill}</li>
          )
        }
      </ul>
    </div>
  )


}

export default Card;<file_sep>import React from 'react';

const Footer = () => {

  const FooterStyles = {
    'borderTop': '1px solid #bebebe',
    'backgroundColor': 'whitesmoke',
    'paddingTop': '2rem',
    'paddingBottom': '2rem'
  }

  return (
    <footer style={FooterStyles}>
      <div className="container">
        <h3 className="text-center">&copy; { new Date().getFullYear() } <NAME></h3>
      </div>
    </footer>
  )
}

export default Footer;<file_sep>import React, { Component } from 'react';

import skills from '../data/skills';


class About extends Component {

  constructor() {
    super();

    console.log(skills);

    this.state = {
      skills: skills,
      animateTile: false
    }

  }

  clickHandler = () => {
    this.setState({
      animateTile: !this.state.animateTile // toggle
    })
  }

  render() {

    return (
      <div>
        <ul>
          {
            this.state.skills.map((item, index) => {
              return (
                <li key={index}> - Car {item.name}
                  {
                    item.models.map((model, index) => {
                      return <p key={index}>Model - {model}</p>
                    })
                  }
                </li>
              )
            })
          }
        </ul>

        <button onClick={this.clickHandler.bind(this)}>Move tile</button>

        <div className={`tile ${this.state.animateTile ? 'is-active' : '' }`}>
          This is a sample tile
        </div>

      </div>
    );
  }
}

export default About;<file_sep>import React, { Component } from 'react';
import '../styles/about.scss';

import socialLinksData from '../data/social';
import SocialLinks from '../components/SocialLinks';

// Libraries
import Fade from 'react-reveal/Fade';


class About extends Component {

  constructor() {
    super();

    this.state = {
      socialLinksData
    }

  }

  render() {

    return (
      <Fade>
        <section id="about" className="about">
          <div className="container py-5">
            <h1 className="title">Hi there, nice to meet you <span className="emoji" aria-label="Emoji wave hand" role="img">👋</span></h1>
            <p>A seasonal front-end developer with over 5+ years (and counting) experience in various industries, ranging from fast-paced digital agencies, fin-techs, start-ups, professional governing institutions, public sectors and various business projects. I specialise in the front-end stack and have a keen interest in User Experience (UX) and Product Development. I constantly up-skill myself on new frameworks and processes through personal pet projects, freelance projects and commercial work experience.</p>
            <p>
              I strive to create amazing digital experiences for customers &amp; clients and I'm passionate about building early-stage companies. I believe that having a functional website is only part of the solution. Principles such as Progressive Enhancement, SEO optimised websites with semantic HTML and accessibility principles are key concepts on being noticed in the Internet 'jungle'.
        </p>
            <p>
              Being a front-end developer, it's also important to think from a consumer's point of view as they are the primary audience and the code you produce is their first point of interaction. So it needs to have a good first impression :)
        </p>
            <p>You can view my skills and some examples of my work. If you need to work with me on project or consulting work, please get in touch through my freelance business website <a href="https://nimblestudios.dev/">Nimble Studios</a></p>
            <SocialLinks socialData={this.state.socialLinksData} />
          </div>

        </section>
      </Fade>
    );
  }
}

export default About;<file_sep>import React, { Component } from 'react';
import { Link, animateScroll as scroll } from "react-scroll";

import '../styles/header.scss';

class Header extends Component {


  constructor() {
    super();
  }

  componentDidMount() {

    let timer;

    window.addEventListener('scroll', () => {

      if (timer) {
        window.clearTimeout(timer);
      }

      let scrollPosition = window.pageYOffset;

      timer = setTimeout(() => {

        if (scrollPosition > 100) {
          document.querySelector('header').classList.add('sticky');
        } else {
          document.querySelector('header').classList.remove('sticky');
        }

      }, 500);
    });

  }

  render() {
    return (
      <header className="site-header">
        <nav className="navigation">
          <ul className="navigation__list">
            <li className="navigation__list-item">
              <Link
                href="#"
                className="navigation__link"
                activeClass="active"
                to="about"
                spy={true}
                smooth={true}
                offset={-20}
                duration={500}
              >About
            </Link>
            </li>
            <li className="navigation__list-item">
              <Link
                href="#"
                className="navigation__link"
                activeClass="active"
                to="skills"
                spy={true}
                smooth={true}
                offset={-20}
                duration={500}
              >Skills
            </Link>
            </li>
            <li className="navigation__list-item">
              <Link
                href="#"
                className="navigation__link"
                activeClass="active"
                to="portfolio"
                spy={true}
                smooth={true}
                offset={-20}
                duration={500}
              >Portfolio
            </Link>
            </li>
            <li className="navigation__list-item">
              <Link
                href="#"
                className="navigation__link"
                activeClass="active"
                to="contact"
                spy={true}
                smooth={true}
                offset={-20}
                duration={500}
              >Contact
            </Link>
            </li>
          </ul>

        </nav>
      </header>
    );
  }
}

export default Header;<file_sep>import React, { Component } from 'react';
import skillsData from '../data/skills-matrix';

import Card from '../components/Card';

// Libraries
import Fade from 'react-reveal/Fade';


class Skills extends Component {

  constructor() {
    super();

    this.state = {
      skillsData
    }

  }

  render() {
    return (
      <Fade>
        <section id="skills" className="bg-grey">
          <div className="container py-5">
            <h1>Skills</h1>
            <div className="mb-4">
              <p>As the front-end landscape constantly evolves at breakneck speed it's important for any developer to keep up with the latest trends and technologies. I've started to focus on ES6+, React.js and Vue.js and I'm slowly moving away from jQuery in favour of vanilla javascript as most of jQuery's capabilities are now possible with ES6</p>
              <p>On the back-end side of things, I have a fair understanding of the listed back-end technologies that complement my core skills in front-end development</p>
              <p>Although I have a good knowledge of Angular 1, LESS, SVN, Compass and Bower - I have moved on from these technologies to market trends</p>
              <p>Below are my various skills with competency levels marked for certain technologies</p>
            </div>

            <div className="card-container grid-wrapper col-3 grid-gap-2">
              {
                this.state.skillsData.map((item, index) =>
                  <Card key={index} cardData={item} />
                )
              }
            </div>
          </div>
        </section>
      </Fade>
    );
  }
}

export default Skills;