Update Expreience and Resume

erlisakulla · Sep 23, 2021 · 16bae16 · 16bae16
1 parent f200dcd
commit 16bae16
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 24 deletions.
diff --git a/public/index.html b/public/index.html
@@ -33,6 +33,30 @@
 
       gtag('config', '%REACT_APP_MEASUREMENT_ID%');
     </script>
+
+    <script>
+      const sections = document.querySelectorAll("section");
+      const navLi = document.querySelectorAll(".nav a .nav-link");
+      window.addEventListener("scroll", () => {
+        let current = "";
+        sections.forEach((section) => {
+          const sectionTop = section.offsetTop;
+          const sectionHeight = section.clientHeight;
+          if (pageYOffset >= sectionTop - sectionHeight / 3) {
+            current = section.getAttribute("id");
+          }
+        });
+
+        navLi.forEach((li) => {
+          li.classList.remove("active");
+          if (li.classList.contains(current)) {
+            li.classList.add("active");
+            console.log(li);
+          }
+        });
+      });
+
+    </script>
 
     <title>Erlisa Kulla</title>
   </head>

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -7,19 +7,19 @@
   font-weight: 300;
 }
 
-.nav-link:after {
+.nav-link:after, .nav-link.active:after {
   display:block;
   content: '';
   border-bottom: solid 3px rgb(38 38 38);  
   transform: scaleX(0);  
   transition: transform 250ms ease-in-out;
 }
 
-.nav-link:not(#resume-btn, .wrapper .nav-link):hover:after { 
+.nav-link:not(#resume-btn, .wrapper .nav-link):hover:after, .nav-link.active:after { 
   transform: scaleX(1); 
 }
 
-.nav-link:hover { 
+.nav-link:hover, .nav-link.active { 
   color: rgb(38 38 38);  
 }
 

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -3,7 +3,7 @@ import './Navbar.css';
 import { FiDownload, FiMenu, FiX } from 'react-icons/fi';
 import { Button } from 'antd';
 import { Nav } from 'react-bootstrap';
-import Resume from '../../resume/ErlisaKullaCV.pdf';
+import Resume from '../../resume/ErlisaKullaCV-Sep2021.pdf';
 
 function Navbar() {
   const closeNav = () => {

diff --git a/src/main/Home/HomePage.js b/src/main/Home/HomePage.js
@@ -66,7 +66,7 @@ class Home extends React.Component {
             </Grid>
           </div>
 
-          <div id="skills">
+          <section id="skills">
             <h1>Skills</h1>
 
             <div id="can-do">
@@ -78,9 +78,9 @@ class Home extends React.Component {
               <h3 style={{paddingBottom:30}}>What I am learning</h3>
               <LearningList/>
             </div>
-          </div>
+          </section>
 
-          <div id="about">
+          <section id="about">
             <h1>About Me</h1>
             <p style={{fontSize:'16px'}} id="about-text">
               I am from Albania, currently located in 📍 Bremen, Germany. 
@@ -97,9 +97,9 @@ class Home extends React.Component {
               <h3 style={{padding:30}}>Education</h3>
               <Education/>
             </div>
-          </div>
+          </section>
 
-          <div id="projects">
+          <section id="projects">
             <h1 style={{paddingBottom:30}}>Projects</h1>
             <Projects/>
             <a href="https://github.com/erlisakulla?tab=repositories" target="_blank" rel="noreferrer">
@@ -114,7 +114,7 @@ class Home extends React.Component {
                 More
               </Button>
             </a>
-          </div>
+          </section>
 
           <div id="contact">
             <h1 style={{fontWeight:700}}>Let's get in touch!</h1>

diff --git a/src/main/sections/Experience.js b/src/main/sections/Experience.js
@@ -9,7 +9,7 @@ import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
 import { Paper, Grid, Collapse } from '@material-ui/core';
 import bmw from '../../img/bmw-logo.png';
-// import allianz from '../../img/allianz-logo.jpg';
+import allianz from '../../img/allianz-logo.jpg';
 import jsc from '../../img/jsc-logo.jpg';
 import idmc from '../../img/idmc-logo.jpg';
 import { FiGlobe } from 'react-icons/fi';
@@ -27,10 +27,15 @@ const useStyles = makeStyles((theme) => ({
 export default function CustomizedTimeline() {
   const classes = useStyles();
 
+  const [expandAllianz, setAllianzExpand] = useState(false);
   const [expandBMW, setBMWExpand] = useState(false);
   const [expandJSC, setJSCExpand] = useState(false);
   const [expandIDMC, setIDMCxpand] = useState(false);
 
+  const handleExpandClick4 = () => {
+    setAllianzExpand(!expandAllianz);
+  };
+
   const handleExpandClick1 = () => {
     setBMWExpand(!expandBMW);
   };
@@ -45,10 +50,10 @@ export default function CustomizedTimeline() {
 
   return (
     <Timeline align="alternate">
-      {/* <div className="time">August 2020 - Present</div>
+      <div className="time">August 2020 - Present</div>
       <TimelineItem>
         <TimelineOppositeContent>
-          <Paper elevation={3} className={classes.paper} id="bmw-paper" onClick={handleExpandClick2}>
+          <Paper elevation={3} className={classes.paper} id="bmw-paper" onClick={handleExpandClick4}>
             <Grid container spacing={3}>
               <Grid item xs={9}>
                 <h5>AI-driven User Interfaces Developer - Working Student</h5>
@@ -61,20 +66,20 @@ export default function CustomizedTimeline() {
               <Grid item xs={3}>
                 <img id="jsc-logo" src={allianz} alt="allianz-logo"/>
               </Grid>
-            </Grid> */}
+            </Grid>
 
-            {/* <Collapse in={expandJSC} timeout="auto" unmountOnExit id="ui-ux-skills">
+            {/* <Collapse in={expandAllianz} timeout="auto" unmountOnExit id="ui-ux-skills">
               
-            </Collapse> */}
+            </Collapse>
 
-            {/* <div style={{textAlign:'center', color:'none'}}>
+            <div style={{textAlign:'center', color:'none'}}>
               {
-                (expandJSC === false) ?
+                (expandAllianz === false) ?
                 <FiChevronDown size={25} id="backend-expand-arrow"/> :
                 <FiChevronUp size={25} id="backend-expand-arrow"/>
               }
             </div> */}
-          {/* </Paper>
+          </Paper>
           <br/>
         </TimelineOppositeContent>
         <TimelineSeparator id="disappear">
@@ -84,7 +89,7 @@ export default function CustomizedTimeline() {
         <TimelineContent id="disappear">
         September 2020 - Present
         </TimelineContent>
-      </TimelineItem> */}
+      </TimelineItem>
 
       <div className="time">June - July 2021</div>
       <TimelineItem>
@@ -102,17 +107,35 @@ export default function CustomizedTimeline() {
                 <img id="bmw-logo" src={bmw} alt="bmw-logo"/>
               </Grid>
               <Grid item xs={9}>
-                <h5>Software Developer - Intern</h5>
+                <h5>DevOps Engineer - Internship</h5>
                 <p>
                   <i style={{fontSize:'14px'}}>Munich, Germany</i><br/>
                   <a className="weblink" target="_blank" rel="noreferrer" href="http://www.bmwgroup.de"><FiGlobe/></a> BMW Group 
                 </p>
               </Grid>
             </Grid>
 
-            {/* <Collapse in={expandBMW} timeout="auto" unmountOnExit  id="ui-ux-skills">
-              Hello
-            </Collapse> */}
+            <Collapse in={expandBMW} timeout="auto" unmountOnExit  id="ui-ux-skills">
+              <ul style={{listStyle:'circle', fontSize:'13px', lineHeight:'1.5', paddingTop:'10px', paddingRight:'10px', paddingBottom:'15px'}}>
+                <li>
+                  Worked in an agile environment as part of the Financial Services Team (Credit Risk Rating)
+                </li>
+                <li>
+                  Fixed issues of Test Automation tasks using SoapUI and Guardean 4
+                </li>
+                <li>
+                  Migrated several jobs from an old Jenkins platform to a new one using Jenkinsfiles
+                </li>
+              </ul>
+            </Collapse>
+
+            <div style={{textAlign:'center', color:'none'}}>
+              {
+                (expandBMW === false) ?
+                <FiChevronDown size={25} id="backend-expand-arrow"/> :
+                <FiChevronUp size={25} id="backend-expand-arrow"/>
+              }
+            </div>
           </Paper>
           <br/>
         </TimelineContent>

diff --git a/src/resume/ErlisaKullaCV.pdf → src/resume/ErlisaKullaCV-Mar2021.pdf b/src/resume/ErlisaKullaCV.pdf → src/resume/ErlisaKullaCV-Mar2021.pdf
diff --git a/src/resume/ErlisaKullaCV-Sep2021.pdf b/src/resume/ErlisaKullaCV-Sep2021.pdf
diff --git a/src/utils/activenav.js b/src/utils/activenav.js
@@ -0,0 +1,19 @@
+const sections = document.querySelectorAll("section");
+const navLi = document.querySelectorAll(".nav-link");
+window.addEventListener("scroll", () => {
+  let current = "";
+  sections.forEach((section) => {
+    const sectionTop = section.offsetTop;
+    const sectionHeight = section.clientHeight;
+    if (pageYOffset >= sectionTop - sectionHeight / 3) {
+      current = section.getAttribute("id");
+    }
+  });
+
+  navLi.forEach((li) => {
+    li.classList.remove("active");
+    if (li.classList.contains(current)) {
+      li.classList.add("active");
+    }
+  });
+});