work experience

Author: IsaDash

src/App.js

@@ -5,7 +5,7 @@ import Isa from './components/Isa'
 import About from './components/About'
 import NavigationBar from './components/NavigationBar'
 import Skills from './components/Skills';
-import Projects from './components/Projects';
+import Work from './components/Work';
 // import Background from "./seattle2.jpg";
 
 
@@ -16,7 +16,7 @@ function App() {
       <Isa></Isa>
       <About></About>
       <Skills></Skills>
-      <Projects></Projects>
+      <Work></Work>
     </div>
   );
 }

src/components/About.css

@@ -4,7 +4,7 @@
     background-repeat: no-repeat;
     background-position: left;
 
-    min-height: 70vh;
+    min-height: 60vh;
     display: flex;
     flex-direction: column;
     /* align-items: center; */
@@ -30,17 +30,17 @@
     margin-right: 15%;
     margin-left: 35%;
     margin-bottom: 0%;
-    margin-top: 5%;
+    margin-top: 0%;
 
     padding-right: 2.5%;
     padding-left: 2.5%;
     padding-top: 1%;
-    padding-bottom: 5%;
+    padding-bottom: 2.5%;
 
   }
 
   .about-text {
-    text-align: left;
+    text-align: justify;
     font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", Monaco, monospace;
     font-size: medium;
     font-weight: lighter;
@@ -51,7 +51,7 @@
     color:rgb(255, 66, 123);
   }
 
-.header {
+.about-header {
     text-align: right;
     font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", Monaco, monospace;
     font-size: 1.5em;

src/components/About.js

@@ -15,7 +15,7 @@ function About() {
         <ScrollableAnchor id="about">
         <header className="about">
             <div data-aos="fade-up" data-aos-duration="1000">
-                <h1 className="about-container header">
+                <h1 className="about-container about-header">
                     1. about
                     <p className="about-text">
                         Hello! My name is Isa Dash and I'm from San Jose, CA.

src/components/Isa.js

@@ -47,11 +47,11 @@ function Isa() {
                     <a className="navigation-text" href="#skills">
                         2. skills
                     </a>
-                    <a className="navigation-text" href="#projects">
-                        3. featured work
+                    <a className="navigation-text" href="#work">
+                        3. work experience
                     </a>
                     <a className="navigation-text" href="https://github.com/IsaDash" target="_blank">
-                        4. other
+                        4. projects
                     </a>
                 </div>
 

src/components/Projects.js

@@ -4,7 +4,7 @@
     background-repeat: no-repeat;
     background-position: left;
 
-    min-height: 80vh;
+    min-height: 70vh;
     display: flex;
     flex-direction: column;
     /* align-items: center; */
@@ -17,7 +17,7 @@
     clear: right;
     display: grid;
     height: auto;
-    
+
     border-left: 2.5px solid rgb(255, 66, 123);
     border-bottom: 2.5px solid rgb(255, 66, 123);
 

src/components/Skills.css

@@ -14,7 +14,7 @@ function Skills() {
     return (
         <ScrollableAnchor id="skills">
             <header className="skills">
-                <div data-aos="fade-up" data-aos-duration="1000">
+                <div data-aos="fade-up" data-aos-duration="1000" data-aos-offset="200">
                     <h1 className="skills-container header">
                         2. skills
                     <div> 

src/components/Skills.js

@@ -1,18 +1,20 @@
-.projects {
+.work {
     background-color: rgb(18, 0, 53);
     /* background-image: url(/seattle1.jpeg);  */
     background-repeat: no-repeat;
     background-position: left;
 
-    min-height: 80vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
     /* align-items: center; */
-    /* justify-content: center; */
+    /* justify-content: stretch;  */
 
   }
 
-.projects-container {
+.work-container {
+    height: auto;
+
     border-right: 2.5px solid rgb(255, 66, 123);
     border-top: 2.5px solid rgb(255, 66, 123);
 
@@ -24,11 +26,19 @@
     padding-right: 2.5%;
     padding-left: 2.5%;
     padding-top: 1%;
-    padding-bottom: 5%;
+    padding-bottom: 2.5%;
 
   }
+  
+  .work-text {
+    clear: both;
+    display: grid;
+    height: auto;
+    
+    border: 1px solid rgb(255, 66, 123);
+    margin: 5%;
+    padding: 1%;
 
-  .projects-text {
     text-align: left;
     font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", Monaco, monospace;
     font-size: medium;
@@ -38,9 +48,20 @@
 
   .highlight {
     color:rgb(255, 66, 123);
+    text-decoration: none;
+  }
+
+  .left-align {
+    float: left;
+    text-align: left;
+  }
+
+  .right-align {
+    float: right;
+    text-align: right;
   }
 
-.projects-header {
+.work-header {
     text-align: right;
     font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", Monaco, monospace;
     font-size: 1.5em;

src/components/Projects.css renamed to src/components/Work.css

@@ -0,0 +1,60 @@
+import React from 'react';
+import './Work.css';
+import Image from './Image'
+import ScrollableAnchor from 'react-scrollable-anchor'
+import { configureAnchors } from 'react-scrollable-anchor'
+
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+AOS.init();
+
+configureAnchors({ offset: -60, scrollDuration: 800 })
+
+function Work() {
+    return (
+        <ScrollableAnchor id="work">
+            <header className="work">
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <h1 className="work-container work-header">
+                        3. work experience
+
+                    <div className="work-text">
+                            <div>
+                                <div className="left-align">
+                                    <a className="highlight" href="https://www.jpmorgan.com/country/US/en/jpmorgan" target="_blank">JP Morgan Chase: </a> Software Engineer Intern
+                        </div>
+
+                                <span className="right-align">June 2020 - Current</span>
+                            </div>
+
+                        </div>
+
+                        <div className="work-text">
+                            <div>
+                                <div className="left-align">
+                                    <a className="highlight" href="https://weavr.ai/" target="_blank">Weavr: </a> Software Engineer Intern
+                            </div>
+                                <span className="right-align">June 2019 - Aug 2019</span>
+                            </div>
+
+
+                        </div>
+
+                        <div className="work-text">
+                            <div>
+                                <div className="left-align">
+                                    <a className="highlight" href="https://scryanalytics.ai/" target="_blank">Scry Analytics: </a> Research Intern
+                            </div>
+                                <span className="right-align">June 2018 - Aug 2018</span>
+                            </div>
+
+                        </div>
+                    </h1>
+
+                </div>
+            </header>
+        </ScrollableAnchor>
+    );
+}
+
+export default Work;