add more changes

Author: carlosjorger

index.html

@@ -37,7 +37,7 @@
   <header>
     <nav>
       <ul class="menu">
-        <li id="home"> <a href="#"><i class="fa fa-house fa-lg"></i></a></li>
+        <li id="home"> <a href="#" class="icon-link"><i class="fa fa-house fa-lg"></i></a></li>
         <li>
           <a class="nav-link" href="#work">Work</a>
           <a class="nav-link" href="#contact">Contact</a>
@@ -48,10 +48,10 @@
   <section>
     <div class="presentation">
       <h1 id="presentation-title">Hi, I am <br class='br-show'>Carlos Jorge!</h1>
-      <h2 id="presentation-main-skill">I'm an <br class='br-show'>full-stack engineer</h2>
+      <h3 id="presentation-main-skill">I'm an <br class='br-show'>full-stack engineer</h3>
       <p id="presentation-description">
         I'm a cuban computer science from Havana University.
-        Currently, I'm working as full-stack engineer focused in building .net application, and angular applications.
+        Currently, I'm working as full-stack engineer focused in building .net application, and frontend applications in frameworks like angular, vue or react.
       </p>
     </div>
   </section>
@@ -91,7 +91,8 @@ <h2 class="subtitle reveal">These are my github repositories</h2>
     </article>
   </section>
   <footer>
-    <article>
+    <div class="footer">
+     
       <div id="contact" class="contacts reveal">
         <h1 class="subtitle contacts-item">Contact</h1>
         <div class="contacts-item">
@@ -101,18 +102,16 @@ <h1 class="subtitle contacts-item">Contact</h1>
           <a class="icon-link" href="https://twitter.com/CarlosJorgeRod3"><i class="fab fa-twitter fa-2xl"></i></a>
         </div>
       </div>
-    </article>
-    <article>
-      <div class="footer reveal">
-        <p class="footer-item">
+      <div class="footer-info reveal">
+        <p class="footer-info-item">
           © 2022 Carlos Jorge
           </br>
           <a class="work-link" href="https://github.com/CarlosJorgeR/carlosjorger.github.io">Published</a> in
           <a class="work-link" href="https://pages.github.com/">Github Page</a>
         </p>
-
       </div>
-    </article>
+    </div>
+    
   </footer>
 </body>
 

index.js

@@ -3,7 +3,10 @@ function reveal() {
   [...revealElements].forEach((element) => {
     var windowHeight = window.innerHeight;
     const elementTop = element.getBoundingClientRect().top;
-    if (elementTop < windowHeight - (element.getBoundingClientRect().height)) {
+    if ((elementTop < windowHeight - (element.getBoundingClientRect().height))) {
+      // if(element.id=='open-ecommerce'){
+      //   console.log(windowHeight,element.getBoundingClientRect())
+      // }
       element.classList.add("active");
     } else {
       element.classList.remove("active");

styles.css

@@ -29,15 +29,15 @@ h3 {
 }
 
 /* % always with the property width */
-
+footer ,
 section {
   /* for guide */
   /* border: solid 3px aqua; */
   width: 60%;
   margin: 0 auto;
   margin-top: 5em;
   margin-bottom: 5em;
-  height: 70vh;
+  height: 25em;
   z-index: 2;
 
 }
@@ -47,8 +47,8 @@ footer {
   /* border: solid 3px aqua; */
   width: 60%;
   margin: 0 auto;
+  margin-top: 5em;
   margin-bottom: 5em;
-  height: 25vh;
 }
 
 article {
@@ -99,8 +99,11 @@ nav {
 
 
 /* || SITEWIDE */
-
-.footer {
+.footer{
+  display: grid;
+  height: inherit;
+}
+.footer-info {
   color: var(--default-font-color);
   font-family: var(--default-font-family);
   display: flex;
@@ -109,7 +112,7 @@ nav {
 
 }
 
-.footer-item {
+.footer-info-item {
   margin: 0 auto;
   text-align: center;
 }
@@ -185,7 +188,7 @@ nav {
 }
 
 #presentation-main-skill {
-  font-size: 2.1rem;
+  font-size: 1.8rem;
   opacity: 0;
   animation-name: show-presentation-main-skill;
   animation-timing-function: ease;
@@ -297,7 +300,7 @@ nav {
 
 @media (max-width: 1100px) {
   :root {
-    font-size: 23px;
+    font-size: 25px;
 
 
   }
@@ -316,7 +319,7 @@ nav {
 
 @media (max-width: 885px) {
   :root {
-    font-size: 17px;
+    font-size: 20px;
 
   }
   .card-project{
@@ -329,12 +332,14 @@ nav {
   section,
   footer {
     width: 75%;
+    height: 30em;
+
   }
 }
 
 @media (max-width: 665px) {
   :root {
-    font-size: 13px;
+    font-size: 15px;
   }
   .card-project{
     width: 80%;
@@ -346,38 +351,29 @@ nav {
   section,
   footer {
     width: 80%;
+    height: 35em;
+
   }
 }
 
-@media (max-width: 450px) {
+@media (max-width: 510px) {
   :root {
-    font-size: 13px;
+    font-size: 17px;
+  }
+  .card-project{
+    width: 85%;
   }
-
   p {
-    max-width: 80%;
+    max-width: 85%;
   }
 
   section,
   footer {
-    width: 80%;
+    width: 83%;
+    height: 40em;
   }
 
   .br-show {
     display: inline;
   }
 }
-
-@media (min-height:700px) {
-
-  section {
-    height: 80vh;
-  }
-}
-
-@media (min-height:800px) {
-
-  section {
-    height: 90vh;
-  }
-}