feat: #94 - add footer section with recommendations and companies worked

src/App/App.js

@@ -4,6 +4,7 @@ import { hot } from 'react-hot-loader/root';
 import AboutMe from 'components/AboutMe';
 import Roles from 'components/Roles';
 import Work from 'components/Work';
+import Recommendations from 'components/Recommendations';
 
 import css from './App.css';
 
@@ -40,6 +41,7 @@ function App() {
       <AboutMe />
       <Roles />
       <Work />
+      <Recommendations />
     </div>
   );
 }

src/components/Recommendations/Recommendations.css

@@ -0,0 +1,56 @@
+.root {
+}
+
+.container {
+  width: 720px;
+  margin: 0 auto;
+  padding: 8rem 2.4rem;
+
+  @media screen and (max-width: 540px) {
+    width: 100%;
+  }
+}
+
+.header {
+  font-family: 'Abel', sans-serif;
+  font-weight: 800;
+  font-size: 3.2rem;
+  margin-bottom: 2.4rem;
+  text-align: center;
+}
+
+.description {
+  font-weight: 300;
+  line-height: 1.5;
+  font-size: 1.6rem;
+  text-align: center;
+}
+
+.list {
+  margin-top: 2rem;
+}
+
+.recommendation {
+  font-size: 1.4rem;
+  display: flex;
+  margin-bottom: 2rem;
+  border: 1px solid #1111111f;
+  padding: 10px;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.name {
+  font-size: 1.6rem;
+  text-align: center;
+}
+
+.text {
+  flex: 1;
+  margin-left: 2rem;
+}

src/components/Recommendations/Recommendations.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import ScrollAnimation from 'react-animate-on-scroll';
+
+import YuryImage from './images/yury.jpeg';
+import MarkImage from './images/mark.jpeg';
+import ChintanImage from './images/chintan.jpeg';
+import VamsiImage from './images/vamsi.jpeg';
+
+import css from './Recommendations.css';
+
+const Recommendations = ({ className }) => {
+  const recommendations = [
+    {
+      name: 'Yury',
+      image: YuryImage,
+      text: `I worked with Manikanta for almost two years 
+      and he shown himself to be a capable and productive developer. 
+      He's a quick learner, inquisitive and resourceful. 
+      He can start a new package and get it live, he can independently develop a new infrastructure tool, 
+      and is always on the lookout for new challenges.`
+    },
+    {
+      name: 'Mark',
+      image: MarkImage,
+      text: `Manikanta is a talented developer. He is an adventurer and not afraid to venture new technologies. 
+        He thinks fast and provide valuable insights for the team. He is a guy that gets the job done.`
+    },
+    {
+      name: 'Chintan',
+      image: ChintanImage,
+      text:
+        'Highly skilled developer. Codes very well and of high quality. He was our go to guy when he was in Sirius.'
+    },
+    {
+      name: 'Vamsi',
+      image: VamsiImage,
+      text: `I have worked with Manikanta, for several different projects ranging 
+        from windows mobile apps to android to angular and node.js. 
+        He is an excellent problem solver, he has no fear for diving into the code bases written by others, 
+        regardless of complexity. Hacker by nature, he quickly gives you the prototype of your app 
+        and iterate over it by taking the feedback. He has a good visual sense like a designer, 
+        and he also know sketch, posts random things in behance and things like that.
+         He has passion to complete the product with in the stipulated time, with the best of the quality code and UI. 
+         I look forward to work with him for the multiple projects in the days to come.`
+    }
+  ];
+  return (
+    <section className={classNames(css.root, className)}>
+      <ScrollAnimation animateIn="fadeIn" delay={100} initiallyVisible={false}>
+        <div className={css.container}>
+          <h3 className={css.header}>Testimonials I received!</h3>
+          <p className={css.description}>
+            All recommendations/Testimonials are fetched from my{' '}
+            <a href="https://www.linkedin.com/in/manikantatankala/">LinkedIn</a> profile.
+          </p>
+          <div className={css.list}>
+            {recommendations.map((r) => {
+              return (
+                <div className={css.recommendation} key={r.name}>
+                  <div>
+                    <img className={css.avatar} src={r.image} alt={r.name} />
+                    <h5 className={css.name}>{r.name}</h5>
+                  </div>
+                  <p className={css.text}>{r.text}</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </ScrollAnimation>
+    </section>
+  );
+};
+
+Recommendations.defaultProps = {
+  className: undefined
+};
+
+Recommendations.propTypes = {
+  className: PropTypes.string
+};
+
+export default Recommendations;

src/components/Recommendations/Recommendations.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Recommendations from './Recommendations';
+
+const renderRecommendations = (props) => {
+  const defaultProps = {
+    className: 'my-classname'
+  };
+
+  return <Recommendations {...defaultProps} {...props} />;
+};
+
+const shallowRenderRecommendations = (props) => shallow(renderRecommendations(props));
+
+describe('Test Recommendations', () => {
+  it('render app', () => {
+    const actual = shallowRenderRecommendations();
+    expect(actual).toMatchSnapshot();
+  });
+});

src/components/Recommendations/index.js

@@ -0,0 +1 @@
+export default from './Recommendations';

src/components/Roles/Roles.css

@@ -1,7 +1,7 @@
 .root {
   margin: 0 auto;
   margin-top: -12rem;
-  padding: 0.8rem 2.4rem 2.4rem;
+  padding: 8rem 2.4rem;
 }
 
 .container {

src/components/Work/Work.css

@@ -4,7 +4,7 @@
 .container {
   width: 720px;
   margin: 0 auto;
-  padding: 8rem 2.4rem 16rem 2.4rem;
+  padding: 8rem 2.4rem;
 
   @media screen and (max-width: 540px) {
     width: 100%;