Added experience and updated info

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

src/App.css

@@ -7,6 +7,7 @@
         left: 0px;
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         color: azure;
+        overflow: hidden
     }
     
     .App-logo {

src/App.js

@@ -1,11 +1,9 @@
-import logo from "./logo.svg";
 import "./App.css";
 import Header from "./components/Header";
 import About from "./components/About";
-import Publication from "./components/Publication";
-import publicationData from "./components/publications.json"
 import { getByTitle } from "@testing-library/react";
 import SimpleSlider from "./components/publicationSlider";
+import Experience from "./components/Experience";
 
 function App() {
   return (
@@ -16,8 +14,12 @@ function App() {
       <div className="publications" id="Publications">
         <h2 style={{color:"salmon", fontSize:"50px"}}><b>Publications</b></h2>
         <SimpleSlider/>
-
       </div>
+      <div className="Experience" id="Experience">
+        <h2 style={{color:"salmon", fontSize:"50px", marginTop:"110px"}}><b>Experience</b></h2>
+        <Experience/>
+      </div>
+      
     </div>
   );
 }

src/components/About.js

@@ -4,8 +4,13 @@ import { Grid, Row, Col } from "react-bootstrap";
 import "./about.css";
 import AmanTahilianiPortfolio from "../media/AmanTahilianiPortfolio.png";
 import { Button } from "bootstrap";
-import resume from "../media/AmanTahilianiResumeMay22.pdf"
+import resume from "../media/AmanTahilianiResume.pdf"
 // const img = '../media/AmanTahilianiPortfolio.png'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFileDownload } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+library.add(faFileDownload)
 
 class About extends Component {
   render() {
@@ -25,13 +30,12 @@ class About extends Component {
             <Row className="Info">
               <ul>
                 <li>
-                  I am a final Year BTech CSE student at Jaypee Institute of
-                  Information Technology in Noida, India.{" "}
+                  I will be starting a Master's in Computer Science program at Georgia Institute of Technology, Atlanta in Fall 22 with a specialization in Computing Systems. (#GoJackets) {" "}
                 </li>{" "}
                 <li>
-                  Currently working as an SDE Intern(Backend) at{" "}
+                  Worked as an SDE Intern(Backend) at{" "}
                   <a href="https://innovaccer.com/"> Innovaccer </a> as part of
-                  the DAP(Data Activation Platform).{" "}
+                  the DAP(Data Activation Platform) alongside my undergraduate BTech. in Computer Science program at Jaypee Institute of Information Technology.{" "}
                 </li>{" "}
                 <li>
                   I enjoy designing and creating the backend logic for projects
@@ -39,7 +43,7 @@ class About extends Component {
                 </li>{" "}
               </ul>{" "}
             </Row>{" "}
-              <button style={{borderRadius:"0.8em", width:"auto",height:"40px", fontSize:"larger", backgroundColor:"rgb(5, 255, 180)"}}><a href={resume} style= {{color: "black", textDecoration: "none"}} download="AmanTahilianiResume.pdf">My Resume</a></button>
+              <button style={{borderRadius:"0.8em", width:"auto",height:"40px", fontSize:"larger", backgroundColor:"rgb(5, 255, 180)"}}><FontAwesomeIcon icon="file-download"/> <a href={resume} style= {{color: "black", textDecoration:"none"}} download="AmanTahilianiResume.pdf">Resume</a></button>
           </Col>{" "}
         </Row>{" "}
       </div>

src/components/Experience.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import "bootstrap/dist/css/bootstrap.css";
+import { Row, Col} from "react-bootstrap";
+import "./experience.css";
+import ExperienceCard from "./experienceCard";
+import experienceData from "./experience.json"
+import InnovaccerLogo from "../media/innovaccerLogo.png";
+import Medsupervision from "../media/Medsupervision.png"
+
+const logos = {Innovaccer:InnovaccerLogo,Medsupervision:Medsupervision}
+
+class Experience extends Component {
+    render() {
+      return (
+        <div className="ExperienceComponent">
+          {experienceData.map(({company,title, points, term}) =>(
+          <div>
+          <ExperienceCard company={company} title={title} points={points} photo={logos[company]} term={term}/>
+          <hr/>
+          </div>
+        ))}
+        </div>
+      );
+    }
+  }
+  
+  export default Experience;

src/components/Header.js

@@ -29,13 +29,13 @@ class Header extends Component {
               <Col xs={12} md={5}>
                 <Row className="navRow nonNameCol">
                   <Col>
-                    <a>Experience</a>
+                    <a href="#Experience">Experience</a>
                   </Col>
                   <Col>
                     <a>Devtools</a>
                   </Col>
                   <Col>
-                    <a>Contact Me!</a>
+                    <a href="https://www.linkedin.com/in/amantahiliani/">Contact Me!</a>
                   </Col>
                 </Row>
               </Col>

src/components/experience.css

@@ -0,0 +1,47 @@
+.ExperienceComponent {
+    opacity: 5;
+    margin-top: 60px;
+    padding-top: 20px;
+    padding-bottom: 3%;
+    margin-left: 4%;
+    margin-right: 4%;
+}
+
+.Company-Image {
+    width: 65%;
+    border: 3px solid hotpink;
+    border-radius: 10px;
+}
+
+.Company {
+    font-size: 50px;
+    font-weight: bold;
+    font-style: normal;
+    color: lightyellow;
+    margin-bottom: 5%;
+    margin-top: 10%;
+}
+
+li {
+    list-style-position: outside;
+    margin-bottom: 10px;
+}
+
+.Company1 {
+    margin-bottom: 20px;
+}
+
+.experience-details {
+    padding-left: 3%;
+    padding-top: 2%;
+    padding-right: 3%;
+    width: 90%;
+    border: 2px solid white;
+    border-radius: 15px;
+}
+
+.JobTitle {
+    color: #baffc9;
+    font-weight: bold;
+    font-size: 30px;
+}

src/components/experience.json

@@ -0,0 +1,31 @@
+[{
+        "company": "Innovaccer",
+        "title": "Software Development Engineer Intern (Data Platform)",
+        "points": [
+            "Worked as part of the Data Activation Platform team to create and maintain microservices responsible for parsing and standardizing healthcare data from different sources spanning different data formats such as HL7, CCLF, CCDA etc.",
+            "Developed the Aggregator Metrics microservice to collect metadata of time taken by DAP microservices to process data for each customer and source type and aggregating them into Snowflake tables in order to represent them in graphical manner.",
+            "Created a framework for reporting of success and failure metrics of Merge and Split jobs in EMPI (Enterprise Master Patient Index) service."
+        ],
+        "term": "Feb 2022 - July 2022"
+    },
+    {
+        "company": "Innovaccer",
+        "title": "Summer Intern SDE (Backend- License Management)",
+        "points": [
+            "Created and maintained the backend for two platform level services, License Management and Platform Configuration, as one of three Backend engineers in a team of 9.",
+            "Maintained over 25 API endpoints using Django RestFramework and ported existing MongoDB collections to PostgreSQL.",
+            "Optimized a critical API endpoint by reducing the response time from 16 seconds down to under 3 using Redis Caching and bulk creation/updation."
+        ],
+        "term": "May 2021 - August 2021"
+    },
+    {
+        "company": "Medsupervision",
+        "title": "Web Development Intern",
+        "points": [
+            "Created frontend views and components for the MEDSupervision healthcare platform as per design, using ReactJs framework",
+            "Designed the frontend as well as backend for a Medicine Comparison tool, which suggests alternate medicines containing same or similar salts, using Flask and React.",
+            "Optimized website load times."
+        ],
+        "term": "Oct 2020 - April 2021"
+    }
+]

src/components/experienceCard.js

@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+import "bootstrap/dist/css/bootstrap.css";
+import { Row, Col, TabContainer } from "react-bootstrap";
+import "./experience.css";
+
+class ExperienceCard extends Component {
+  render() {
+    return (
+        <div className="experience-detail" style={{marginTop:"30px", marginBottom:"30px"}}>
+            <Row>
+                <Col xs={12} md={5} className="Company1">
+                    <h3 className="Company">{this.props.company}</h3>
+                    <img src={this.props.photo} className="Company-Image"/>
+                </Col>
+                <Col xs={12} md={7} >
+                    <div className="experience-details">
+                    <h3 className="JobTitle">{this.props.title}</h3>
+                    <h4>({this.props.term})</h4>
+                    <hr/>
+                    <div>
+                        <ul>
+                        {this.props.points.map((item,i) =>(
+                            <li>{item}</li>
+                            ))}
+                        </ul>
+                    </div>
+                    </div>
+                </Col>
+            </Row>
+            
+        </div>
+
+
+
+
+    //   <div className="experience-detail">
+    //     <h3>{this.props.title}</h3>
+    //     <Row>
+    //       <Col>Authors: {this.props.authors}</Col>
+    //     </Row>
+    //     <Row>
+    //       <div>Publish Date: {this.props.publish_date}</div>
+    //     </Row>
+    //     <div>
+    //       Link: <a href={this.props.link}>{this.props.link}</a>
+    //     </div>
+    //     <br />
+    //     <div style={{ fontWeight: "bolder" }}>Abstract:</div>
+    //     <div>{this.props.abstract}</div>
+    //   </div>
+    );
+  }
+}
+
+export default ExperienceCard;

yarn.lock

@@ -1154,6 +1154,32 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz#7dc996042d21fc1ae850e3173b5c67b0549f9105"
+  integrity sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==
+
+"@fortawesome/fontawesome-svg-core@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz#3424ec6182515951816be9b11665d67efdce5b5f"
+  integrity sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.1.1"
+
+"@fortawesome/free-solid-svg-icons@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz#3369e673f8fe8be2fba30b1ec274d47490a830a6"
+  integrity sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.1.1"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"