update timeline section

* rename "Timeline" label to "Experience" * add new experience chapter * run linters
YanivWein24 · Mar 24, 2024 · 3ffab3a · 3ffab3a
1 parent 892687c
commit 3ffab3a
Show file tree

Hide file tree

Showing 15 changed files with 77 additions and 58 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -16,7 +16,7 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
-  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "@typescript-eslint/quotes": [
       "error",

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -5,11 +5,10 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ["master"]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -18,11 +17,11 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build --if-present
diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
 # Portfolio:
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/742cc686-3052-432c-a678-70e0d7dae957/deploy-status)](https://app.netlify.com/sites/yaniv-weinshtein/deploys)
-![eslint-status](https://img.shields.io/badge/es--lint-Passing-bef9c6?logo=eslint&logoColor=whtie&badgeColor=white)  
-  
+![eslint-status](https://img.shields.io/badge/es--lint-Passing-bef9c6?logo=eslint&logoColor=whtie&badgeColor=white)
+
 <img align="center" src="https://user-images.githubusercontent.com/97472180/194753796-148c3e8a-6fe4-450a-9777-760785a85a3f.gif"
 alt="My Project GIF" width="600" height="323">  
 <br>

diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/assets/media/Productive.jpg b/src/assets/media/Productive.jpg
diff --git a/src/components/Cards/Cards.css b/src/components/Cards/Cards.css
@@ -7,14 +7,18 @@
   border-radius: 14px;
   transition: all 0.2s ease-in-out;
   margin: 1rem auto 3rem;
-  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5);
+  box-shadow:
+    2px 2px 10px rgba(0, 0, 0, 0.5),
+    -2px -2px 10px rgba(0, 0, 0, 0.5);
   background-color: rgb(240, 240, 240);
   min-height: 41rem;
 }
 
 .card:hover {
   transform: scale(1.03);
-  box-shadow: 6px 6px 13px rgba(0, 0, 0, 0.5), -6px -6px 13px rgba(0, 0, 0, 0.5);
+  box-shadow:
+    6px 6px 13px rgba(0, 0, 0, 0.5),
+    -6px -6px 13px rgba(0, 0, 0, 0.5);
 }
 
 .card-title {
@@ -160,6 +164,8 @@
 
   .card:hover {
     transform: none;
-    box-shadow: 6px 6px 13px #333, -6px -6px 13px #333;
+    box-shadow:
+      6px 6px 13px #333,
+      -6px -6px 13px #333;
   }
 }
diff --git a/src/components/Hamburger/Hamburger.css b/src/components/Hamburger/Hamburger.css
@@ -80,11 +80,13 @@
 }
 .hamburger--collapse .hamburger-inner::after {
   top: -20px;
-  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+  transition:
+    top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
     opacity 0.1s linear;
 }
 .hamburger--collapse .hamburger-inner::before {
-  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+  transition:
+    top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
     transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
 
@@ -96,13 +98,15 @@
 .hamburger--collapse.is-active .hamburger-inner::after {
   top: 0;
   opacity: 0;
-  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+  transition:
+    top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
     opacity 0.1s 0.22s linear;
 }
 .hamburger--collapse.is-active .hamburger-inner::before {
   top: 0;
   transform: rotate(-90deg);
-  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+  transition:
+    top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
     transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
@@ -118,11 +122,13 @@
 }
 .hamburger--collapse-r .hamburger-inner::after {
   top: -20px;
-  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+  transition:
+    top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
     opacity 0.1s linear;
 }
 .hamburger--collapse-r .hamburger-inner::before {
-  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
+  transition:
+    top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
     transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
 
@@ -134,12 +140,14 @@
 .hamburger--collapse-r.is-active .hamburger-inner::after {
   top: 0;
   opacity: 0;
-  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+  transition:
+    top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
     opacity 0.1s 0.22s linear;
 }
 .hamburger--collapse-r.is-active .hamburger-inner::before {
   top: 0;
   transform: rotate(90deg);
-  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+  transition:
+    top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
     transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -19,6 +19,10 @@
   padding: 0 10px;
 }
 
+.container {
+  max-width: 1150px;
+}
+
 .navbar-brand {
   font-weight: 500;
 }

diff --git a/src/components/Timeline/Timeline.css b/src/components/Timeline/Timeline.css
@@ -33,7 +33,7 @@
 }
 
 .timelineCurrentText {
-  color: var(--color-offWhite);
+  color: white;
 }
 
 .timelineHeader {
@@ -58,7 +58,6 @@
 
 .toolsContainer {
   margin: 1rem 0 1.5rem;
-  text-align: center;
 }
 
 .tool.socialo {

diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -13,12 +13,11 @@ export default function Timeline() {
   return (
     <div className="timeline-container">
       <h1 id="TimeLine" data-aos="fade-down" data-aos-once="true">
-        TimeLine
+        Experience
       </h1>
       <VerticalTimeline>
-        {TimelineChapters.map((chapter) => {
+        {TimelineChapters.map((chapter, index) => {
           const {
-            id,
             header,
             subHeader,
             text,
@@ -29,18 +28,18 @@ export default function Timeline() {
             image,
             scores,
           } = chapter;
-          const isActiveChapter = [0, 1].includes(id);
+          const isCurrentChapter = !index;
           return (
             <VerticalTimelineElement
-              key={id}
+              key={`${header} ${subHeader}`}
               className={`vertical-timeline-element--work ${
                 type === "school" ? "redBorder" : "blueBorder"
-              } ${isActiveChapter && "current"}`}
+              } ${isCurrentChapter && "current"}`}
               contentStyle={{
-                background: isActiveChapter ? "rgb(33, 150, 243)" : "",
+                background: isCurrentChapter ? "rgb(33, 150, 243)" : "",
               }}
               contentArrowStyle={{
-                borderRight: isActiveChapter
+                borderRight: isCurrentChapter
                   ? "7px solid  rgb(33, 150, 243)"
                   : "",
               }}
@@ -66,21 +65,21 @@ export default function Timeline() {
             >
               <h3
                 className={`vertical-timeline-element-title ${
-                  isActiveChapter ? "timelineCurrentHeader" : "timelineHeader"
+                  isCurrentChapter ? "timelineCurrentHeader" : "timelineHeader"
                 }`}
               >
                 {header}
               </h3>
               <h4
                 className={`vertical-timeline-element-subtitle ${
-                  isActiveChapter ? "timelineCurrentHeader" : "timelineHeader"
+                  isCurrentChapter ? "timelineCurrentHeader" : "timelineHeader"
                 }`}
               >
                 {subHeader}
               </h4>
               <p
                 className={
-                  isActiveChapter
+                  isCurrentChapter
                     ? "timelineText timelineCurrentText"
                     : "timelineText"
                 }
@@ -108,7 +107,7 @@ export default function Timeline() {
                   technologies.map((tool) => (
                     <div
                       key={tool}
-                      className={`tool ${isActiveChapter && "socialo"}`}
+                      className={`tool ${isCurrentChapter && "socialo"}`}
                     >
                       {tool}
                     </div>

diff --git a/src/data/HeaderLinks.ts b/src/data/HeaderLinks.ts
@@ -17,7 +17,7 @@ const HeaderLinks: HeaderLinkProps[] = [
   },
   {
     id: 2,
-    name: "TimeLine",
+    name: "Experience",
     icon: "fa-solid fa-clock-rotate-left",
     offset: -100,
     duration: 1000,

diff --git a/src/data/TimelineChapters.ts b/src/data/TimelineChapters.ts
@@ -1,10 +1,20 @@
 import TimelineChapter from "../types/TimelineChapters";
-import Socialo from "../assets/media/Socialo.png";
-import eBigay from "../assets/media/eBigay.png";
+import Socialo from "../assets/media/Socialo.jpg";
+import eBigay from "../assets/media/eBigay.jpg";
+import Productive from "../assets/media/Productive.jpg";
 
 const TimelineChapters: TimelineChapter[] = [
   {
-    id: 0,
+    header: "CRM Developer",
+    subHeader: "Productive Software",
+    text: "Building custom CRM systems tailored to diverse clients, ranging from small businesses to large companies. Utilizing platforms such as Salesforce and Monday.com for CRM functionalities, alongside Make (Integromat) for automation and API integrations. Leading the development process from the initial characterization stage through to production, and working in an agile environment.",
+    date: "Dec 2023 - Present",
+    type: "work",
+    link: "https://productive.co.il",
+    image: Productive,
+    technologies: ["Salesforce", "Monday", "Make", "Automation", "Jira"],
+  },
+  {
     header: "Front-End Developer",
     subHeader: "Fluffy Finder",
     text: "Joining the frontend team to continue a Work-In-Progress centralized system for reporting lost/found pets that use AI and algorithms to match between reports. Improving and refactoring the existing user interface, adding new features, integrating with the backend API and analytics providers, working alongside other development teams, designers, QA and a product manager.",
@@ -23,11 +33,10 @@ const TimelineChapters: TimelineChapter[] = [
     ],
   },
   {
-    id: 1,
     header: "Full-Stack Developer",
     subHeader: "Socialo",
     text: "Building an AI-based B2B SaaS digital-marketing platform for businesses and marketing agencies. Leading product development from planning to production. Working end-to-end, writing clean, reusable, and type-safe code, managing integrations (AI models, Social networks, Analytics, etc.), building CI/CD pipelines, working with SCRUM methodology.",
-    date: "Jan 2023 - Present",
+    date: "Jan 2023 - Sep 2023",
     type: "work",
     link: "https://www.socialo.app",
     image: Socialo,
@@ -45,7 +54,6 @@ const TimelineChapters: TimelineChapter[] = [
     ],
   },
   {
-    id: 2,
     header: "Front-End Developer",
     subHeader: "eBigay",
     text: "Working in the frontend team for a marketplace web app that connects donors with those in need. Developing responsive and user-friendly UI from scratch, according to the given design in Figma. Consuming the server API and working alongside the back-end team. Working with SCRUM methodology.",
@@ -64,23 +72,20 @@ const TimelineChapters: TimelineChapter[] = [
     ],
   },
   {
-    id: 3,
     header: "Full-Stack Development",
     subHeader: "Self study",
     text: "Learn Full-Stack web development using online courses and a lot of hands-on projects, mostly with React and Node.js.",
     date: "2022",
     type: "school",
   },
   {
-    id: 4,
     header: "Control Systems Technician",
     subHeader: "Israeli Navy",
     text: "Locating and solving complex problems on large-scale naval systems. Working in a team and working with tight schedules.",
     date: "2019 - 2022",
     type: "military",
   },
   {
-    id: 5,
     header: "Practical Engineering",
     subHeader: "Kziney-Yam Acre",
     text: "Electrical And Electronics Engineering.",
@@ -92,7 +97,6 @@ const TimelineChapters: TimelineChapter[] = [
     },
   },
   {
-    id: 6,
     header: "High-School",
     subHeader: "Kziney-Yam Acre",
     text: "Electrical And Electronics Engineering - 10 points",

diff --git a/src/service-worker.ts b/src/service-worker.ts
@@ -51,7 +51,7 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true;
   },
-  createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`)
+  createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`),
 );
 
 // An example runtime caching route for requests that aren't handled by the
@@ -68,7 +68,7 @@ registerRoute(
       // least-recently used images are removed.
       new ExpirationPlugin({ maxEntries: 50 }),
     ],
-  })
+  }),
 );
 
 // This allows the web app to trigger skipWaiting via

diff --git a/src/serviceWorkerRegistration.ts b/src/serviceWorkerRegistration.ts
@@ -18,8 +18,8 @@ const isLocalhost = Boolean(
     window.location.hostname === "[::1]" ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
 type Config = {
@@ -50,7 +50,7 @@ export function register(config?: Config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             "This web app is being served cache-first by a service " +
-              "worker. To learn more, visit https://cra.link/PWA"
+              "worker. To learn more, visit https://cra.link/PWA",
           );
         });
       } else {
@@ -78,7 +78,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // content until all client tabs are closed.
               console.log(
                 "New content is available and will be used when all " +
-                  "tabs for this page are closed. See https://cra.link/PWA."
+                  "tabs for this page are closed. See https://cra.link/PWA.",
               );
 
               // Execute callback
@@ -130,7 +130,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
     })
     .catch(() => {
       console.log(
-        "No internet connection found. App is running in offline mode."
+        "No internet connection found. App is running in offline mode.",
       );
     });
 }