Fixed projects slide and began careers slide

vaaranan-y · Dec 21, 2022 · 0dc6f9b · 0dc6f9b
1 parent be4bb0c
commit 0dc6f9b
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-reveal": "^1.2.2",
     "react-scripts": "5.0.1",
     "react-scroll": "^1.8.8",
+    "react-vertical-timeline-component": "^3.6.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/pages/Slides/careerslide.js b/src/pages/Slides/careerslide.js
@@ -0,0 +1,132 @@
+import {
+  VerticalTimeline,
+  VerticalTimelineElement,
+} from "react-vertical-timeline-component";
+import "react-vertical-timeline-component/style.min.css";
+import react, { useState } from "react";
+import "../styles.css";
+
+export default function CareerSlide() {
+  return (
+    <div
+      style={{
+        padding: 50,
+        height: "50px",
+        backgroundColor: "#FFFFFF",
+        minHeight: "2500px",
+      }}
+    >
+      <h1 style={{ fontFamily: "Avenir" }}>EXPERIENCE</h1>
+      <VerticalTimeline lineColor={"#1F1F1F"}>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+          contentArrowStyle={{ borderRight: "7px solid  rgb(33, 150, 243)" }}
+          date="September 2022 - December 2022"
+          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+        >
+          <h3 className="vertical-timeline-element-title">
+            Software Devloper and Design Intern @ YuJa Inc.
+          </h3>
+          <h4 className="vertical-timeline-element-subtitle">Toronto, ON</h4>
+          <p>
+            Developed student response system applicaiton called Engage, to
+            allow educational instructors to provision quizzes and polls to
+            students during lecture/class time.
+          </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+          date="January 2022 - May 2022"
+          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+        >
+          <h3 className="vertical-timeline-element-title">
+            Full Stack Developer @ The CEMC
+          </h3>
+          <h4 className="vertical-timeline-element-subtitle">Waterloo, ON</h4>
+          <p>
+            Developed contest proctoring web application using MySQL and PHP
+            backend, and vanilla JavaScript frontend. Also created in-house
+            software to eliminate manual processes for customer service team
+            (i.e. participant archival system) and the contest creation team
+            (LaTeX to HTML conversion script).
+          </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+          date="July 2021 - October 2021"
+          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+        >
+          <h3 className="vertical-timeline-element-title">
+            Volunteer Frontend Developer @ InclusionUI
+          </h3>
+          <h4 className="vertical-timeline-element-subtitle">Lambeth, UK</h4>
+          <p>
+            Volunteered to work virtually with 5 other developers from the US
+            and UK to develop a digital calendar/schedule tracker to help a
+            client with Autism organize his week, and gain digital and personal
+            independence. I developed the first iteration of the front end of
+            the app in Vanilla JavaScript, HTML and CSS. It was fulfilling
+            experience, as I got to see my work actually help someone, and I
+            learned a lot about the software development cycle in the process.
+            To learn more about this initiative, please visit:
+            https://inclusion-ui.com/activity-calendar/.
+          </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+          date="July 2021 - August 2021"
+          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+        >
+          <h3 className="vertical-timeline-element-title">
+            Junior Machine Learning Developer @ AltaML
+          </h3>
+          <h4 className="vertical-timeline-element-subtitle">Calgary, AB</h4>
+          <p>
+            Partnered with Rogers Media Team to develop a computer vision model,
+            using Microsoft Azure Computer Vision Services, to analyze hockey
+            game footage to track players and pucks, for statistical analysis of
+            players and game strategies.
+          </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+          date="July 2021 - August 2021"
+          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+        >
+          <h3 className="vertical-timeline-element-title">
+            Junior Machine Learning Developer @ AltaML
+          </h3>
+          <h4 className="vertical-timeline-element-subtitle">Calgary, AB</h4>
+          <p>
+            Partnered with Rogers Media Team to develop a computer vision model
+            to analyze hockey game footage to track players and pucks, for
+            statistical analysis of players and game strategies.
+          </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+          date="June 2021 - April 2022"
+          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+        >
+          <h3 className="vertical-timeline-element-title">
+            Firmware Team Member @ UW Midnight Sun Solar Car Design Team
+          </h3>
+          <h4 className="vertical-timeline-element-subtitle">Waterloo, ON</h4>
+          <p>
+            Developed firmware in C and ARM Assembly for various parts of a
+            Solar Powered Car, including the Battery Management System, the
+            Bootloader, temperature monitors, and more. Worked with and flashed
+            my code onto STM 32 Microcontrollers, one of my first experiences
+            with Microcontrollers.
+          </p>
+        </VerticalTimelineElement>
+      </VerticalTimeline>
+    </div>
+  );
+}
diff --git a/src/pages/Slides/introslide.js b/src/pages/Slides/introslide.js
@@ -10,25 +10,25 @@ export default function IntroSlide() {
   return (
     <div
       id="home"
-      style={{ backgroundColor: "#eaf2fa", height: window.innerHeight }}
+      style={{ backgroundColor: "#116466", height: window.innerHeight }}
     >
       <div style={{ marginTop: "2.5%", marginLeft: "5%" }}>
         <Typewriter
           options={{
             wrapperClassName: "typewriter_title",
             delay: 25,
+            cursorClassName: "cursorClass",
           }}
           onInit={(typewriter) => {
             typewriter
               .typeString(
-                'intro(name={"<span id="name_tag">Vaaranan</span>"});'
+                '<span id="titleText">intro(name={"<span id="name_tag">Vaaranan</span>"});<span>'
               )
               .callFunction(() => {
                 setVisible(true);
               })
               .start();
           }}
-          style={{ fontFamily: "Courier" }}
         />
       </div>
       <div
@@ -38,6 +38,7 @@ export default function IntroSlide() {
           fontFamily: "Avenir",
           fontWeight: "100",
           marginLeft: "5%",
+          color: "#FFCB9A",
         }}
       >
         {introBlurb}

diff --git a/src/pages/Slides/projectslide.js b/src/pages/Slides/projectslide.js
@@ -34,6 +34,13 @@ export default function ProjectSlide() {
               fontFamily: "Avenir",
               fontSize: 20,
               fontWeight: 200,
+              backgroundColor: "#EEEADE",
+              color: "#6A6A6A",
+              boxShadow: 0.2,
+              padding: 20,
+              borderRadius: 10,
+              borderColor: "#6A6A6A",
+              boxShadow: "0 0 10px #9ecaed",
             }}
           >
             This was one of the first projects I developed, made from pure Java,

diff --git a/src/pages/styles.css b/src/pages/styles.css
@@ -16,6 +16,12 @@
     background: #eaf2fa;
   }
 
+  #career {
+    height: 5000px;
+  }
+
+
+
   .nav {
     display: flex;
     align-items: center;
@@ -25,7 +31,6 @@
     z-index: 2;
     height: 70px;
     min-height: 70px;
-    width: calc(100% - 1.5rem);
     background-color: #fff;
     padding: 0 1rem;
     box-shadow: 0 0.125rem 0.25rem 0 rgb(0 0 0 / 11%);
@@ -42,13 +47,6 @@
     position: relative;
   }
 
-  .nav__container__actions {
-    display: inline-flex;
-    flex-flow: row nowrap;
-    padding-left: 50px;
-    flex: 1;
-  }
-
   .active {
     font-weight: bold;
   }
@@ -90,8 +88,18 @@
   }
 
   #name_tag{
-    background-color: #000;
-    color: #fff;
+    background-color: #FFCB9A;
+    color: #116466;
+
+  }
+
+  #titleText{
+    color: #FFCB9A;
+  }
+
+  .cursorClass{
+    color: #FFCB9A;
+    font-size: 75px;
   }
 
   .fadeOut{