update navbar and responsiveness

erlisakulla · Apr 19, 2021 · b4e3c97 · b4e3c97
1 parent efe7b48
commit b4e3c97
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,6 @@
 
 ## TODO
 - [ ] Update CV
-- [ ] Fix responsive issues: projects and about padding
 - [ ] Colorful navs on hover
 - [X] Make the website content responsive
 - [X] Make navbar responsive
@@ -22,7 +21,7 @@
 - [ ] Illustration hover animations
 - [ ] Create logo animation when page is loaded 
 - [ ] Add sticky social media icons to the side
-- [ ] Add close icon to responsive navbar
+- [X] Add close icon to responsive navbar
 - [ ] Add dark mode option
 - [ ] Fix work and education images on responsive site
 - [ ] Add images to Projects - add icons of frameworks

diff --git a/public/index.html b/public/index.html
@@ -23,6 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
     <!-- <script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101311867);</script>
     <script async src="//static.getclicky.com/js"></script> -->
 

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -15,7 +15,7 @@
   transition: transform 250ms ease-in-out;
 }
 
-.nav-link:not(#resume-btn):hover:after { 
+.nav-link:not(#resume-btn, .wrapper .nav-link):hover:after { 
   transform: scaleX(1); 
 }
 
@@ -50,7 +50,7 @@
   display: none;
 }
 
-.wrapper{
+.wrapper {
   position: fixed;
   z-index: 150;
   top: 0;
@@ -62,11 +62,11 @@
   transition: all 0.3s ease-in-out;
 }
 
-#active:checked ~ .wrapper{
+#active:checked ~ .wrapper {
   clip-path: circle(75%);
 }
 
-.menu-btn{
+.menu-btn {
   position: fixed;
   z-index: 200;
   right: 20px;
@@ -83,15 +83,38 @@
   transition: all 0.3s ease-in-out;
 }
 
-#active:checked ~ .menu-btn{
+#active:checked ~ .menu-btn {
   background: #fff;
 }
 
-#active:checked ~ .menu-btn i:before{
-  content: "\f00d";
+#close-nav {
+  display: none;
+}
+
+#active:checked ~ .menu-btn #open-nav {
+  display: none;
 }
 
-.wrapper ul{
+#active:checked ~ .menu-btn #close-nav {
+  display: inline-block ;
+  animation: rotateIcon 0.7s
+}
+
+#open-nav {
+  animation: rotateIcon2 0.7s;
+}
+
+@keyframes rotateIcon {
+  0% {transform: rotate(0deg);}
+  100% {transform: rotate(360deg);}
+}
+
+@keyframes rotateIcon2 {
+  0% {transform: rotate(0deg);}
+  100% {transform: rotate(-360deg);}
+}
+
+.wrapper ul {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -100,11 +123,11 @@
   text-align: center;
 }
 
-.wrapper ul li{
+.wrapper ul li {
   margin: 15px 0;
 }
 
-.wrapper ul li a{
+.wrapper ul li a {
   text-decoration: none;
   font-size: 20px;
   font-weight: 400;
@@ -113,11 +136,11 @@
   transition: all 0.3s ease;
 }
 
-.wrapper ul li a:hover{
-  color: #4158d0;
+.wrapper ul li a:hover {
+  color: #3f51b5;
 }
 
-input[type="checkbox"]{
+input[type="checkbox"] {
   display: none;
 }
 

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import './Navbar.css';
-import { FiDownload, FiMenu } from 'react-icons/fi';
+import { FiDownload, FiMenu, FiX } from 'react-icons/fi';
 import { Button } from 'antd';
 import { Nav } from 'react-bootstrap';
 import Resume from '../../resume/ErlisaKullaCV.pdf';
@@ -62,7 +62,8 @@ function Navbar() {
       <div id="collapsed-navbar">
         <input type="checkbox" id="active"/>
         <label htmlFor="active" className="menu-btn">
-          <FiMenu style={{marginRight:'5px'}}/>
+          <FiMenu size={25} id="open-nav"/>
+          <FiX size={25} id="close-nav"/>
         </label>
 
         <div className="wrapper">
@@ -110,6 +111,7 @@ function Navbar() {
                 <Button 
                   type="secondary" 
                   shape="round" 
+                  id="resume-btn2"
                   icon={<FiDownload style={{marginRight:'5px'}}/>} 
                   size="default"
                 >

diff --git a/src/main/Home/HomePage.css b/src/main/Home/HomePage.css
@@ -203,6 +203,10 @@ h3 {
     padding: 0px;
     font-size: 14px;
   }
+
+  .time {
+    display: block !important;
+  }
 }
 
 @media (max-width:960px) {
@@ -233,6 +237,10 @@ h3 {
     padding-left: 10;
     padding-right: 10;
   }
+
+  #section-1 {
+    height: 100% !important;
+  }
 }
 
 .project-card:hover {
@@ -246,21 +254,29 @@ h3 {
 }
 
 @media (max-width:600px) {
-  p {
+  p:not(#text) {
     font-size: 14px !important;
   }
 
   h5 {
     font-size: 18px !important;
   }
 
-  #jacobs-logo, #emis-logo, #bmw-logo, #idmc-logo, #jsc-logo {
-    width: 30%;
-  }
-
   .MuiTimeline-root {
     padding: 0 !important;
   }
+
+  #projects {
+    padding:10% !important;
+  }
+
+  #home-img {
+    padding-top: 50px;
+  }
+
+  #skills {
+    padding-top: 150px !important;
+  }
 }
 
 @media (max-width:361px) {
@@ -270,7 +286,6 @@ h3 {
 
   #about, #projects, #contact  {
     padding: 0;
-
   }
 
   #about-text {
@@ -342,7 +357,7 @@ h3 {
 
 #ui-ux-skills svg {
   color: #3f51b5;
-  transform: scale(0.8);
+  /* transform: scale(0.8); */
 }
 
 #frontend-skills svg {
@@ -381,6 +396,38 @@ h3 {
 
 @media (max-width:600px) {
   #contact-form-cont {
-    padding: 30px !important;
+    padding: 0 !important;
   }
+
+  #timeline-content {
+    width: 100% !important;
+    margin: 0;
+  }
+
+  #about {
+    margin: 0;
+    padding: 1%;
+  }
+
+  #about-text {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+}
+
+.time {
+  text-align: center;
+  font-size: 13px;
+  display: none;
+  background-color: #3f51b5;
+  opacity: 0.7;
+  color: white;
+  width: fit-content;
+  left: 0;
+  right: 0;
+  margin: auto;
+  padding: 0 10px;
+  padding-bottom: 10px;
+  transform: translateY(15px);
+  border-radius: 4px;
 }
diff --git a/src/main/sections/Education.js b/src/main/sections/Education.js
@@ -27,19 +27,20 @@ export default function CustomizedTimeline() {
   const classes = useStyles();
 
   return (
-    <Timeline align="alternate">
+    <Timeline align="alternate" id="education-timeline">
+      <div className="time">2019 - 2022</div>
       <TimelineItem>
-        <TimelineOppositeContent>
+        <TimelineOppositeContent id="timeline-content">
           <Paper elevation={3} className={classes.paper} id="jacobs-paper">
             <Grid container spacing={3}>
-              <Grid item xs={12} sm={9}>
+              <Grid item xs={9}>
                 <h5>Jacobs University Bremen</h5>
                 <p>
                   <i style={{fontSize:'14px'}}>Bremen, Germany</i><br/>
                   BSc. Computer Science
                 </p>
               </Grid>
-              <Grid item xs={12} sm={3}>
+              <Grid item xs={3}>
                 <img id="jacobs-logo" src={jacobs} alt="jacobs-logo"/>
               </Grid>
             </Grid>
@@ -54,15 +55,22 @@ export default function CustomizedTimeline() {
           2019 - 2022
         </TimelineContent>
       </TimelineItem>
-
+
+      <div className="time">2017 - 2019</div>
       <TimelineItem>
-        <TimelineOppositeContent>
+        <TimelineOppositeContent id="disappear">
+        2017 - 2019
+        </TimelineOppositeContent>
+        <TimelineSeparator id="disappear">
+          <TimelineDot color="primary" id="disappear"/>
+        </TimelineSeparator>
+        <TimelineContent>
           <Paper elevation={3} className={classes.paper} id="emis-paper">
             <Grid container spacing={3}>
-              <Grid item  xs={12} sm={3}>
+              <Grid item xs={3}>
                 <img id="emis-logo" src={emis} alt="emis-logo"/>
               </Grid>
-              <Grid item xs={12} sm={9}>
+              <Grid item xs={9}>
                 <h5>Eastern Mediterranean International School</h5>
                 <p>
                 <i style={{fontSize:'14px'}}>Tel Aviv, Israel</i><br/>
@@ -72,12 +80,6 @@ export default function CustomizedTimeline() {
             </Grid>
           </Paper>
           <br/>
-        </TimelineOppositeContent>
-        <TimelineSeparator id="disappear">
-          <TimelineDot color="primary" id="disappear"/>
-        </TimelineSeparator>
-        <TimelineContent id="disappear">
-          2017 - 2019
         </TimelineContent>
       </TimelineItem>
     </Timeline>