adding vector images

Author: knight-coder-llc

widgets/portfolio/package.json

@@ -15,6 +15,7 @@
  "react-dom": "^17.0.1",
  "react-isotope": "^1.0.7",
  "react-messenger-customer-chat": "^0.8.0",
+ "react-reveal": "^1.2.2",
  "react-router-dom": "^5.2.0",
  "react-transition-group": "^4.4.1",
  "slick-carousel": "^1.8.1"

widgets/portfolio/src/components/Home/index.tsx

@@ -4,6 +4,11 @@ import { ProfileSlider } from '../Carousel';
 import { HomePageProps } from './interface';
 import { Contact } from '../Contact';
 import { ChatBot } from '../Chatbot';
+import moneyman from '../../images/holding-money.jpg';
+import heartRobot from '../../images/happy.jpg';
+
+import { Roll, Flip, Fade, Zoom, Bounce, Rubberband } from 'react-reveal';
+
 import { Container, Row, Col } from 'react-bootstrap';
 export class HomePage extends React.Component<HomePageProps, {}> {
  constructor(props: HomePageProps) {
@@ -17,11 +22,14 @@ export class HomePage extends React.Component<HomePageProps, {}> {
  <Col lg={6} className="text-center mt-5 mb-5" id="home-page">
 
  <div className="hero-container" id="">
- <picture className="hero-img mb-5">
- <source media="..." srcSet={this.props.imgSrc} />
- <img className="rounded-circle border-white mb-3" src={this.props.imgSrc} alt="Brian Kilburn" width='250'
- height='250' />
- </picture>
+ 
+ <picture className="hero-img mb-5">
+ <source media="..." srcSet={this.props.imgSrc} />
+ <Zoom top>
+ <img className="rounded-circle border-white mb-3" src={this.props.imgSrc} alt="Brian Kilburn" width='250'
+ height='250' />
+ </Zoom>
+ </picture>
 
  </div>
  <Contact />
@@ -43,56 +51,86 @@ export class HomePage extends React.Component<HomePageProps, {}> {
  </div>
  </Col>
  <Col lg={6} className="text-center ">
- <h1 className="title white d-inline-flex">{this.props.title}<span className="d-none d-sm-block ml-2 mr-2"></span></h1>
- <h2 className="text-center ">Full Stack Engineer</h2>
- </Col>
- </Row>
- <Row className="mb-5">
- <Col className="text-center" xs={12} >
- <h2>Dependable</h2>
- </Col>
- <Col lg={6} className="mt-5 d-flex align-items-center" > 
- <p>
- Brian Kilburn is a programmer with the skills to provide pragmatic software application solutions for any client to facilitate daily operation, provide autonomy for repetitive tasks, and software that brings in recurring income, so the client can focus on more important things such as expanding their business or marketing their product. 
- </p>
- </Col>
- <Col lg={6} className="mt-5 text-center"> 
- <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " />
+ <h1 className="title white d-inline-flex"><Roll right cascade>{this.props.title}</Roll><span className="d-none d-sm-block ml-2 mr-2"></span></h1>
+ <h2 className="text-center "><Flip bottom>Full Stack Engineer</Flip></h2>
  </Col>
  </Row>
+ 
+ <Row className="mb-5">
+ 
+ <Col className="text-center" xs={12} >
+ <h2><Roll right cascade>Dependable</Roll></h2>
+ </Col>
+ 
+ <Col lg={6} className="mt-5 d-flex align-items-center" >
+ <Zoom left>
+ <p>
+ Brian Kilburn is a programmer with the skills to provide pragmatic software application solutions for any client to facilitate daily operation, provide autonomy for repetitive tasks, and software that brings in recurring income. The client can focus on more important things such as expanding their business or marketing their product. 
+ </p>
+ </Zoom>
+ </Col>
+ <Col lg={6} className="mt-5 text-center"> 
+ <Fade right>
+ {/* <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " /> */}
+ <img src={moneyman} width={325} />
+ </Fade>
+ </Col>
+ </Row>
+ 
  <Row className="mt-5 mb-5"> 
  <Col xs={12} className="text-center">
- <h2>Committed</h2>
+ <h2><Roll left cascade>Committed</Roll></h2>
  </Col>
  <Col lg={6} className="mt-5 text-center"> 
- <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " />
+ <Fade left>
+ {/* <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " /> */}
+ <img src={heartRobot} width={325} />
+ </Fade>
  </Col>
  <Col lg={6} className="mt-5"> 
- After investing seven years earning his degree combined with on the job experience Brian knows how to build a robust application that can bring results, he excels in his ability to learn new technology when it is necessary to accomplish the task at hand, and stands behind the quality of his work. "I have worked super hard to get where I am in my career, and I continue to learn, focusing on ways to improve my skills." 
+ <Roll top>
+ <p>
+ After investing seven years earning his degree combined with on the job experience Brian knows how to build a robust application that can bring results, he excels in his ability to learn new technology when it is necessary to accomplish the task at hand, and stands behind the quality of his work. "I have worked super hard to get where I am in my career, and I continue to learn, focusing on ways to improve my skills." 
+ </p>
+ </Roll>
  </Col>
  </Row>
+ 
  <Row className="mt-5 mb-5">
  <Col xs={12} className="text-center">
- <h2>Hard Working</h2>
+ <h2><Roll right cascade>Hard Working</Roll></h2>
  </Col>
- <Col lg={6} className="mt-5 "> 
- After investing seven years earning his degree combined with on the job experience Brian knows how to build a robust application that can bring results, he excels in his ability to learn new technology when it is necessary to accomplish the task at hand, and stands behind the quality of his work. "I have worked super hard to get where I am in my career, and I continue to learn, focusing on ways to improve my skills." 
+ <Col lg={6} className="mt-5 ">
+ <Roll bottom> 
+ <p>
+ After investing seven years earning his degree combined with on the job experience Brian knows how to build a robust application that can bring results, he excels in his ability to learn new technology when it is necessary to accomplish the task at hand, and stands behind the quality of his work. "I have worked super hard to get where I am in my career, and I continue to learn, focusing on ways to improve my skills." 
+ </p>
+ </Roll>
  </Col>
  <Col lg={6} className="mt-5 text-center"> 
- <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " />
+ <Fade right>
+ <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " />
+ </Fade>
  </Col>
  </Row>
  <Row className="mt-5 mb-5">
  <Col xs={12} className="text-center ">
- <h2>Educated and Highly Trained</h2>
+ <h2><Roll bottom cascade>Educated and Highly Trained</Roll></h2>
  </Col>
  <Col lg={6} className="mt-5 text-center"> 
- <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " />
+ <Fade left>
+ <img src="https://via.placeholder.com/435.png/000/fff C/O https://placeholder.com/ " />
+ </Fade>
  </Col>
  <Col lg={6} className="mt-5"> 
- Brian holds a Bachelor degree in computer science with a minor in informatics from Eastern Kentucky University.
+ <Bounce bottom cascade>
+ <p>
+ Brian holds a Bachelor degree in computer science with a minor in informatics from Eastern Kentucky University. He is high honors graduate cum laude, Brian worked hard and excelled during his time in school.
+ </p>
+ </Bounce>
  </Col>
  </Row>
+ 
  </Container>
  )
  }

widgets/portfolio/src/images/angry.jpg

@@ -11,8 +11,8 @@ h1 { color: white;}
  /* background: white; */
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  padding: 10px;
- animation: pulse-white 2s infinite;
- animation-iteration-count: .5;
+ /* animation: pulse-white 2s infinite;
+ animation-iteration-count: .5; */
 }
 .hero-container h2 {color:white;}
 #home-page p {