Merge pull request #3 from CarlosJorgeR/feature/createAboutMeSection

Feature/create about me section

Author: carlosjorger

css/footer.css

@@ -1,12 +1,3 @@
-footer {
-    /* for guide */
-    /* border: solid 3px aqua; */
-    width: 60%;
-    margin: 0 auto;
-    margin-top: 5em;
-    margin-bottom: 5em;
-}
-
 .contacts {
     display: flex;
     flex-direction: column;

css/navbar.css

@@ -13,7 +13,7 @@
 
 .nav-link {
     padding: 1em;
-    color: white;
+    color: var(--default-font-color);
     text-decoration: none;
     /* background-image:none; */
     transition: all 0.5s ease-in-out;
@@ -22,11 +22,11 @@
 
 .nav-link:hover {
     background-color: rgb(36, 28, 45);
-    color: aqua !important
+    color: var(--default-secundary-font-color) !important
 }
 
 .nav-link:visited {
-    color: white;
+    color: var(--default-font-color);
     text-decoration: none;
     background-image: none;
 }

css/presentation-section.css

@@ -1,23 +1,28 @@
 .presentation {
-    color: rgb(148, 112, 220);
+    color: var(--default-font-color);
     font-family: var(--default-font-family);
     padding: 1em;
+  
 }
 
 #presentation-title {
     font-size: 2.6rem;
-    color: aqua;
+    color: var( --default-secundary-font-color);
     animation: 1s show-presentation ease;
+    margin-top: 0.7rem;
+    margin-bottom: 0.7rem;
 }
 
 #presentation-main-skill {
-    font-size: 1.8rem;
+    font-size: 2rem;
     opacity: 0;
     animation-name: show-presentation-main-skill;
     animation-timing-function: ease;
     animation-duration: 1s;
     animation-delay: 0.2s;
     animation-fill-mode: forwards;
+    margin-top: 0.7rem;
+    margin-bottom: 0.7rem;
 }
 
 #presentation-description {
@@ -27,5 +32,7 @@
     animation-duration: 1s;
     animation-delay: 0.4s;
     animation-fill-mode: forwards;
+    margin-top: 0.7rem;
+    margin-bottom: 0.7rem;
 }
 

css/project-section.css

@@ -5,7 +5,7 @@
 
 .card-project {
 
-    padding: 0.5em;
+    padding: 0.3em;
     margin: 1em;
     width: 60%;
     display: flex;
@@ -15,34 +15,34 @@
 
 .card-title {
     color: var(--default-font-color);
-    padding: 0.5em;
+    padding: 0.3em;
 
 
 }
 
 .card-description {
-    padding: 1em;
+    padding: 0.3em;
     color: rgb(153, 249, 249);
     font-size: 0.6em;
     background-color: rgb(25, 18, 33);
 }
 
 .card-links {
-    padding: 0.5em;
+    padding: 0.3em;
     display: flex;
 }
 
 #open-ecommerce {
-    border-right: groove 0.2rem aqua;
-    border-top: groove 0.2rem aqua;
-    border-bottom: groove 0.2rem aqua;
+    border-right: solid 0.1rem var(--default-secundary-font-color);
+    border-top: solid 0.1rem var(--default-secundary-font-color);
+    border-bottom: solid 0.1rem var(--default-secundary-font-color);
     align-self: flex-end;
 }
 
 #angular-portfolio {
-    border-left: groove 0.2rem aqua;
-    border-top: groove 0.2rem aqua;
-    border-bottom: groove 0.2rem aqua;
+    border-left: solid 0.1rem var(--default-secundary-font-color);
+    border-top: solid 0.1rem var(--default-secundary-font-color);
+    border-bottom: solid 0.1rem var(--default-secundary-font-color);
     align-self: flex-start;
 
 }

css/styles.css

@@ -1,6 +1,8 @@
 :root {
   --default-font-family: "Lato", sans-serif;
-  --default-font-color: rgb(148, 112, 220);
+  --default-font-color: rgb(217, 200, 255);
+  --default-secundary-font-color: rgb(6, 232, 232);
+
   background-color: rgb(9, 3, 15);
   font-size: 25px;
   scroll-behavior: smooth;
@@ -16,7 +18,8 @@ p {
   color: var(--default-font-color);
   font-family: var(--default-font-family);
   max-width: 650px;
-
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
 }
 
 h1,
@@ -35,9 +38,9 @@ section {
   /* border: solid 3px aqua; */
   width: 60%;
   margin: 0 auto;
-  margin-top: 2em;
-  margin-bottom: 2em;
-  height: calc(100vh - 4em);
+  margin-top: 2.5em;
+  margin-bottom: 2.5em;
+  height: calc(100vh - 5em);
   z-index: 2;
 
 }
@@ -61,7 +64,7 @@ a {
 i {
   color: rgb(148, 112, 220);
   margin: 0.2em 0.2em;
-  color: aqua;
+  color: var(--default-secundary-font-color);
 }
 
 nav {
@@ -97,12 +100,15 @@ nav {
   color: var(--default-font-color);
   font-family: var(--default-font-family);
   /* for font-size I use to avoid cascading problem*/
-  font-size: 1.7rem;
+  font-size: 2rem;
 
 }
-
-/* Ids */
-
+.centered-article{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 90%;
+}
 
 @keyframes show-presentation {
   0% {
@@ -127,9 +133,9 @@ nav {
 
 /* unvisited link */
 .work-link:link {
-  color: aqua;
-  text-decoration-color: aqua;
-  background-image: linear-gradient(aqua, aqua);
+  color: var(--default-secundary-font-color);
+  text-decoration-color: var(--default-secundary-font-color);
+  background-image: linear-gradient(var(--default-secundary-font-color), var(--default-secundary-font-color));
   background-size: 100% 0%;
   background-position: 0% 100%;
   background-repeat: no-repeat;
@@ -138,8 +144,8 @@ nav {
 }
 
 .work-link:visited {
-  color: aqua;
-  text-decoration-color: aqua;
+  color: var(--default-secundary-font-color);
+  text-decoration-color: var(--default-secundary-font-color);
 }
 
 /* mouse over link */
@@ -160,7 +166,7 @@ nav {
 
 .icon-link:hover>i {
   color: black;
-  text-shadow: 0px 0px 15px aqua;
+  text-shadow: 0rem 0rem 1rem aqua;
 }
 
 @media (max-width: 1100px) {
@@ -219,7 +225,7 @@ nav {
 
 @media (max-width: 510px) {
   :root {
-    font-size: 17px;
+    font-size: 15px;
   }
 
   p {
@@ -238,7 +244,7 @@ nav {
 
 @media (max-width: 350px) {
   :root {
-    font-size: 13px;
+    font-size: 10px;
   }
 
   p {

images/demo.jpg

@@ -45,54 +45,78 @@
       <ul class="navbar">
         <li id="home"> <a href="#" class="icon-link"><i class="fa fa-house fa-lg"></i></a></li>
         <li>
+          <a class="nav-link" href="#aboutMe">About me</a>
           <a class="nav-link" href="#work">Work</a>
           <a class="nav-link" href="#contact">Contact</a>
         </li>
       </ul>
     </nav>
   </header>
   <section>
-    <div class="presentation">
+    <div class="presentation centered-article">
       <h1 id="presentation-title">Hi, I am <br class='br-show'>Carlos Jorge!</h1>
       <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 frontend applications in frameworks like angular, vue or react.
+        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>
+  <section>
+    <article id="aboutMe" class="centered-article">
+      <h2 class="subtitle reveal">
+        About me
+      </h2>
+      <p class="reveal">
+        Hello, My name is Carlos Jorge. I'm a full-stack engineer that enjoy coding on and off the work.
+        I started working as a backend developer in 2020 using .net technologies and sql server.
+      </p>
+      <p class="reveal">
+        Currently, I'm also working on frontend technologies like angular, vue, html, css.
+      </p>
+      <p class="reveal">
+        In my free time I like listening to music, reading books or watching movies from favorite directors.
+      </p>
+    </article>
+  </section>
   <section>
     <article id="work">
-      <h2 class="subtitle reveal">These are my github repositories</h2>
-     <div class="card-projects">
-      <div id="open-ecommerce" class="card-project reveal">
-        <div class="card-title">
-          OpenEcommerce
-        </div>
-        <div class="card-description">
-          OpenEcommerce is an ecommerce builded with .net. Using a hexagonal architecture, cqrs pattern and more interesting patterns.
+      <h2 class="subtitle reveal">Some projects I've make</h2>
+      <div class="card-projects">
+        <div id="open-ecommerce" class="card-project reveal">
+          <div class="card-title">
+            OpenEcommerce
+          </div>
+          <div class="card-description">
+            <p>
+              OpenEcommerce is an ecommerce builded with .net. Using a hexagonal architecture, cqrs pattern and more
+              interesting patterns.
+            </p>
+          </div>
+          <div class="card-links">
+            <a class="icon-link" href="https://github.com/CarlosJorgeR/openEcommerce"><i
+                class="fab fa-github fa-gl"></i></a>
+          </div>
         </div>
-        <div class="card-links">
-          <a class="icon-link" href="https://github.com/CarlosJorgeR/openEcommerce"><i class="fab fa-github fa-gl"></i></a>
+        <div id="angular-portfolio" class="card-project reveal">
+          <div class="card-title">
+            Angular Portfolio
+          </div>
+          <div class="card-description">
+            <p>It is a personal portfolio builded with angular using really cool animation (Angular animations).</p>
+          </div>
+          <div class="card-links">
+            <a class="icon-link" href="https://github.com/CarlosJorgeR/portfolio"><i
+                class="fab fa-github fa-gl"></i></a>
+          </div>
         </div>
       </div>
-      <div id="angular-portfolio" class="card-project reveal">
-        <div class="card-title">
-          Angular Portfolio
-        </div>
-        <div class="card-description">
-          It is a personal portfolio builded with angular using really cool animation (Angular animations).
-        </div>
-        <div class="card-links">
-          <a class="icon-link" href="https://github.com/CarlosJorgeR/portfolio"><i class="fab fa-github fa-gl"></i></a>
-        </div>
-      </div>
-     </div>
     </article>
   </section>
   <footer>
     <div class="footer">
-     
+
       <div id="contact" class="contacts reveal">
         <h1 class="subtitle contacts-item">Contact</h1>
         <div class="contacts-item">
@@ -111,7 +135,7 @@ <h1 class="subtitle contacts-item">Contact</h1>
         </p>
       </div>
     </div>
-    
+
   </footer>
 </body>