Added Animations, updated udemy and AISG into edu/exp section, solved…

… exchange picture problem
BenjaminChua · May 29, 2020 · 0692449 · 0692449
1 parent 55217f6
commit 0692449
Show file tree

Hide file tree

Showing 18 changed files with 83 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "bootstrap": "^4.5.0",
     "gh-pages": "^2.2.0",
     "react": "^16.13.1",
+    "react-animate-on-scroll": "^2.1.5",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

diff --git a/public/index.html b/public/index.html
@@ -4,9 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <title>React App</title>
+    <title> Benjamin's Portfolio </title>
     <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/assets/redditAnalyzer.png b/src/assets/redditAnalyzer.png
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,12 +1,12 @@
 import React  from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
-import pathContext from './contexts/pathContext';
+import pathContext from '../contexts/pathContext';
 import NavBar from './headerFooter/NavBar';
 import LandingPage from './landing/LandingPage';
 import ResumePage from './resume/ResumePage';
 import ExchangePage from './exchange/ExchangePage';
-import ProjectPage from './Project/ProjectPage';
+import ProjectPage from './project/ProjectPage';
 import Footer from './headerFooter/Footer';
 
 class App extends React.Component {

diff --git a/src/components/headerFooter/NavBar.js b/src/components/headerFooter/NavBar.js
@@ -3,7 +3,7 @@ import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import { NavHashLink as NavLink } from 'react-router-hash-link';
 import Container from 'react-bootstrap/Container';
-import pathContext from '../contexts/pathContext';
+import pathContext from '../../contexts/pathContext';
 
 import './headerFooter.css'
 
@@ -20,7 +20,7 @@ class NavBar extends React.Component {
                             <Nav className="ml-auto">
                                 <NavLink className="nav-link" to={this.context.mainPath} exact> Home </NavLink>
                                 <NavLink className="nav-link" to={this.context.resumePath}> Resume </NavLink>
-                                {/*<NavLink className="nav-link" to={this.context.projectPath}> Project </NavLink>*/}
+                                {/*<NavLink className="nav-link" to={this.context.projectPath}> project </NavLink>*/}
                                 <NavLink className="nav-link" to={this.context.exchangePath}> Exchange </NavLink>
                             </Nav>
                         </Navbar.Collapse>

diff --git a/src/components/landing/ContactIcon.js b/src/components/landing/ContactIcon.js
@@ -2,9 +2,9 @@ import React from 'react';
 
 const ContactIcon = (props) => {
     return (
-        <a href={props.link}>
-            <button className={`ui ${props.icon} button`}>
-                <i className={`${props.icon} big middle aligned fitted icon`} aria-hidden/>
+        <a href={props.link} className="pr-2">
+            <button className={`ui ${props.iconStyle} button circular icon`}>
+                <i className={`${props.icon} big middle aligned icon`} aria-hidden/>
             </button>
         </a>
     );

diff --git a/src/components/landing/EduExpCard.js b/src/components/landing/EduExpCard.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Card from 'react-bootstrap/Card';
 import Col from 'react-bootstrap/Col';
 import { HashLink as Link } from 'react-router-hash-link';
-import pathContext from '../contexts/pathContext';
+import pathContext from '../../contexts/pathContext';
 
 import './EduExpCard.css'
 

diff --git a/src/components/landing/Exchange.css b/src/components/landing/Exchange.css
@@ -10,13 +10,21 @@
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 4.5em;
-    opacity: 0;
+    opacity: 1;
 }
 
 .exchange-sect:hover .exchange-img{
-    opacity: 40%;
+    opacity: 1;
 }
 
 .exchange-sect:hover h1{
-    opacity: 1;
+    opacity: 0;
+}
+
+.exchange-img {
+    opacity: 50%;
+    max-width: 100%;
+    height: 80vh;
+    object-fit: cover;
+    object-position: 80% 0;
 }
diff --git a/src/components/landing/Exchange.js b/src/components/landing/Exchange.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Image from 'react-bootstrap/Image';
 import exchange from '../../assets/exchange.jpg';
 import { HashLink as Link } from 'react-router-hash-link';
-import pathContext from '../contexts/pathContext';
+import pathContext from '../../contexts/pathContext';
 
 import './Exchange.css';
 
@@ -14,7 +14,7 @@ class Exchange extends React.Component {
         return (
             <Link to={`${this.context.exchangePath}/#top`}>
                 <div className="exchange-sect mb-3">
-                    <Image className="exchange-img" src={exchange} fluid/>
+                    <Image className="exchange-img" src={exchange}/>
                     <h1> Exchange </h1>
                 </div>
             </Link>

diff --git a/src/components/landing/HomeHero.js b/src/components/landing/HomeHero.js
@@ -29,9 +29,9 @@ const HomeHero = () => {
                             through data science and analytics.
                         </p>
                         <div className="pt-2">
-                            <ContactIcon link={linkedin} icon="linkedin"/>
-                            <ContactIcon link={github} icon="github"/>
-                            <ContactIcon link={mail} icon="mail"/>
+                            <ContactIcon link={linkedin} icon="linkedin" iconStyle="primary" iconText="LinkedIn"/>
+                            <ContactIcon link={github} icon="github" iconStyle="secondary" iconText="GitHub"/>
+                            <ContactIcon link={mail} icon="mail" iconStyle="teal" iconText="Email"/>
                         </div>
                     </Col>
                 </Row>

diff --git a/src/components/landing/LandingPage.js b/src/components/landing/LandingPage.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Container from 'react-bootstrap/Container';
+import ScrollAnimation from 'react-animate-on-scroll';
 
 import HomeHero from './HomeHero';
 import Education from './Education';
@@ -10,11 +11,21 @@ import Exchange from './Exchange';
 const LandingPage = () => {
     return (
         <Container className="p-0" fluid>
-            <HomeHero/>
-            <Education/>
-            <Experience/>
-            <ProjectSect />
-            <Exchange />
+            <ScrollAnimation animateIn="fadeIn" animateOut="fadeOut">
+                <HomeHero/>
+            </ScrollAnimation>
+            <ScrollAnimation animateIn="fadeIn" animateOut="fadeOut">
+                <Education/>
+            </ScrollAnimation>
+            <ScrollAnimation animateIn="fadeIn" animateOut="fadeOut">
+                <Experience/>
+            </ScrollAnimation>
+            <ScrollAnimation animateIn="fadeIn" animateOut="fadeOut">
+                <ProjectSect />
+            </ScrollAnimation>
+            <ScrollAnimation animateIn="fadeIn" animateOut="fadeOut">
+                <Exchange />
+            </ScrollAnimation>
         </Container>
     );
 }

diff --git a/src/components/landing/ProjectDet.js b/src/components/landing/ProjectDet.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
-import pathContext from '../contexts/pathContext';
+import pathContext from '../../contexts/pathContext';
 
 class ProjectDesc extends React.Component {
     static contextType = pathContext;
@@ -45,8 +45,8 @@ class ProjectDesc extends React.Component {
                     <div>
                         <i className={`${this.state.icon} massive middle aligned icon`} />
                         <h2 className="pt-3 pb-2"> {this.state.name} </h2>
-                        <p className="px-5"> {this.state.desc} </p>
-                        <p className="px-5"> {this.renderSkill()} </p>
+                        <p className="px-5" style={{ fontSize: "16px"}}> {this.state.desc} </p>
+                        <p className="px-5" style={{ fontStyle: "italic"}}> {this.renderSkill()} </p>
                         {this.renderButton()}
                     </div>
                 </Container>

diff --git a/src/components/landing/ProjectSect.js b/src/components/landing/ProjectSect.js
@@ -7,7 +7,7 @@ class ProjectSect extends React.Component {
     state = {
         redditAnalyser: {
             icon: "reddit square",
-            name: "Reddit Apparecium",
+            name: "Reddit Aparecium",
             desc: "Clusters comments in a Reddit post by their main discussion topic, creating an interactive visualisation",
             skills: ["LDA", "Sentiment Analysis", "Python", "Flask", "Vue.js"],
             backgroundColor: "#F2F2F2",

diff --git a/src/components/Project/ProjectPage.js → src/components/project/ProjectPage.js b/src/components/Project/ProjectPage.js → src/components/project/ProjectPage.js
diff --git a/src/components/resume/EducationSection.js b/src/components/resume/EducationSection.js
@@ -22,7 +22,7 @@ class EducationSection extends Component {
                 Economics: ["Time value of Money", "Replacement Analysis", "Stochastic Dominance", "Risk Analysis"],
                 Logistics: ["Demand Forecasting", "Production Scheduling", "Inventory Decisions"],
                 Business: ["Marketing", "Financial Accounting", "Managerial Economics"],
-                "Soft Skills": ["Report Writing", "Oral Presentation", "Project Work", "Leadership"]
+                "Soft Skills": ["Report Writing", "Oral Presentation", "project Work", "Leadership"]
             },
             id: "nus",
         },
@@ -45,13 +45,23 @@ class EducationSection extends Component {
                 "of Technology"],
             },
             id: "gatech",
+        },
+        udemy: {
+            degree: "Modern React with Redux",
+            period: "May 20 - May 20",
+            name: "Udemy, Inc.",
+            curriculum: {
+                ReactJs: ["React.js", "React Router", "Webpack", "Context", "Hooks", "Redux", "Redux Thunk", "Axios"],
+            },
+            id: "udemy",
         }
     }
     render() {
         return (
             <div className="py-3">
                 <EducationTemplate edu={this.state.nus}/>
                 <EducationTemplate edu={this.state.gatech}/>
+                <EducationTemplate edu={this.state.udemy}/>
             </div>
         );
     }

diff --git a/src/components/resume/ExperienceSection.js b/src/components/resume/ExperienceSection.js
@@ -19,17 +19,24 @@ class ExperienceSection extends Component {
             period: "May 18 - Aug 18",
             company: "KPMG Services (Lighthouse)",
             det1: "Worked with work mentor in performing data cleaning and wrangling using Pandas (Python) " +
-                     "for a Purchase Order Audit Project",
+                     "for a Purchase Order Audit project",
             det2: "Designed data visuals for internal presentations using Tableau",
-            det3: "Created Excel Macros (VBA) for a Financial Report Automation Project",
+            det3: "Created Excel Macros (VBA) for a Financial Report Automation project",
             id: "kpmg"
+        },
+        aisg: {
+            name: "AI Engineer",
+            period: "Start Jun 2020",
+            company: "AI Singapore",
+            id: "aisg"
         }
     }
     render() {
         return (
             <div className="py-3">
                 <ExperienceTemplate exp={this.state.experian}/>
                 <ExperienceTemplate exp={this.state.kpmg}/>
+                <ExperienceTemplate exp={this.state.aisg}/>
             </div>
         );
     }

diff --git a/src/components/contexts/pathContext.js → src/contexts/pathContext.js b/src/components/contexts/pathContext.js → src/contexts/pathContext.js