From 166d64fa73e6aa51ff4c94df1423504f7a6201d9 Mon Sep 17 00:00:00 2001
From: Aaditya Mishra <aadityamishra216@gmail.com>
Date: Mon, 10 Oct 2022 18:48:35 +0530
Subject: [PATCH] major changes in ui and animations

---
 CSS/social.css  |  9 ++++++---
 CSS/style.css   | 15 +++++++++------
 CSS/timline.css | 43 ++++++++++++++++++++-----------------------
 index.html      | 32 +++++++++++++++-----------------
 4 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/CSS/social.css b/CSS/social.css
index b159324..1c7ff3c 100644
--- a/CSS/social.css
+++ b/CSS/social.css
@@ -1,4 +1,5 @@
 .social {
+  margin-bottom: 2rem;
   height: 90px;
   width: 100%;
   display: flex;
@@ -25,8 +26,8 @@
   text-decoration: none;
   margin: 18px 2px;
   margin: 18px 1rem;
-  box-shadow: 6px 5px 3px 2px black;
-  box-shadow: -5px 1px 6px -1px rgb(90 90 90);
+  /* box-shadow: 6px 5px 3px 2px black; */
+  
 }
   
 .fa-linkedin {
@@ -49,5 +50,7 @@
 }
 
 .fa:hover {
-  transform: translateY(-1rem);
+  transform: translateY(-.2rem);
+  transition: transform .2s ease-in;
+  box-shadow: -5px 1px 6px -1px rgb(90 90 90);
 }
diff --git a/CSS/style.css b/CSS/style.css
index 343c6ff..3f12545 100644
--- a/CSS/style.css
+++ b/CSS/style.css
@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: sans-serif;
 }
 
 body {
@@ -46,15 +47,10 @@ h1.card {
   text-align: center;
   box-shadow: rgba(0, 0, 0, 0.1) 0 0 1px 2px, rgba(0, 0, 0, 0.2) 0 2px 5px 0;
 }
-.name {
-  font-family: sans-serif;
-  /* box-shadow: 10px 10px 91px 0px rgb(191, 193, 79); */
 
-  font-size: 37px;
-  padding-top: 20px;
-}
 
 .quote {
+  font-family:'Times New Roman', Times, serif;
   font-size: 16px;
   color: #999999;
   font-weight: 50;
@@ -158,3 +154,10 @@ h1.card {
 .type-cursor {
   color: black;
 }
+
+.title {
+  font-weight: bold;
+  font-size: 37px;
+  padding-top: 20px;
+  margin-bottom: 1.5rem;
+}
\ No newline at end of file
diff --git a/CSS/timline.css b/CSS/timline.css
index d72f4ca..2cc74be 100644
--- a/CSS/timline.css
+++ b/CSS/timline.css
@@ -3,6 +3,13 @@ body .edu {
   height: 100%;
   background: #f2f4f8;
 }
+.qual{
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .gallery {
   width: 100%;
   height: 100px;
@@ -15,12 +22,13 @@ body .edu {
   margin: 30px;
   background: transparent;
 }
+
 .edu-card > .logo {
   grid-area: logo;
 }
 
 .edu-details {
-  padding: 36px;
+  padding: 10px;
   grid-area: details;
   font-family: sans-serif;
 }
@@ -34,19 +42,21 @@ body .edu {
 .edu-card {
   background: #fff;
   display: grid;
-  width: 90%;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  width: 80%;
   height: 160px;
   text-align: left;
-  margin: 49px;
   border-radius: 8px;
   grid-template-areas: "logo details";
   grid-template-columns: 166px 1fr;
-  box-shadow: 10px 10px 25px rgb(61, 61, 61);
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
 }
 
 .edu-card:hover {
+  cursor: pointer;
   animation: none;
-  animation: float 3s ease-in-out infinite;
+  animation: float 2s ease-in-out infinite;
 }
 
 .edu-card:hover ~ .edu {
@@ -72,20 +82,7 @@ body .edu {
   line-height: 1.6;
 }
 
-@keyframes float {
-  0% {
-    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.6);
-    /* transform: translatey(0px); */
-  }
-  50% {
-    box-shadow: 0px 25px 15px rgba(0, 0, 0, 0.2);
-    transform: translatey(-20px);
-  }
-  100% {
-    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.6);
-    /* transform: translatey(0px); */
-  }
-}
+
 
 .proj1 {
   grid-area: proj1;
@@ -164,17 +161,17 @@ body .edu {
 
 @keyframes float {
   0% {
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
+    transform: translatey(0px);
   }
   50% {
     box-shadow: 0px 25px 15px rgba(0, 0, 0, 0.2);
-    transform: translatey(-10px);
+    transform: translatey(-6px);
   }
   100% {
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
-    /* transform: translatey(0px); */
+    transform: translatey(0px);
   }
 }
+
 .mywork span {
   /* transform: translatey(0px); */
   padding: 40px;
diff --git a/index.html b/index.html
index 5f23b94..eb11847 100644
--- a/index.html
+++ b/index.html
@@ -26,17 +26,15 @@
                 <div class="column items">
                     <h1 class="card" onclick="openTab('tab','about')">About</h1>
                     <h1 class="card" onclick="openTab('tab','edu')">Education<h1>
-                            <h1 class="card" onclick="openTab('tab','mywork')">MY Work</h1>
+                            <h1 class="card" onclick="openTab('tab','mywork')">My Work</h1>
                             <h1 class="card" onclick="openTab('tab','contact')">Contact</h1>
                 </div>
 
                 <div class="container">
 
-                    <section class="column  tab about">
+                    <section class="column tab about">
 
-                        <h1 class="name">Mohit Kumar
-
-                        </h1>
+                        <div class="title">Mohit Kumar</div>
                         <h1>
                             <a href="" class="subtitle typewriter typewrite" data-period="2000"
                                 data-type='[ "A Developer", "A Tech Enthusiast","A Free Soul" ]'>
@@ -57,17 +55,17 @@ <h4 class="profile_heading">Profile Info</h4>
                         <div>
                             <div class="person">
                                 <div>
-                                    <h6>Name </h6>
-                                    <h6>Birthday </h6>
-                                    <h6>Country </h6>
-                                    <h6>City </h6>
+                                    <h6 align="right" style="line-height:30px;">Name<br> 
+                                    Birthday<br> 
+                                    Country<br> 
+                                    City </h6>
                                 </div>
 
                                 <div>
-                                    <h6>: Mohit Kumar</h6>
-                                    <h6>: 1Jan 2001</h6>
-                                    <h6>: India</h6>
-                                    <h6>: Ambala</h6>
+                                    <h6 style="line-height:30px;"> &nbsp;: Mohit Kumar<br>
+                                     &nbsp;: 1Jan 2001<br>
+                                     &nbsp;: India<br>
+                                     &nbsp;: Ambala</h6>
 
 
                                 </div>
@@ -94,8 +92,8 @@ <h4 class="profile_heading">Contact Info</h4>
                     <!-- ==================================================================================== -->
 
                     <section class="column tab edu hide">
-                        <div class="heading">Education</div>
-                        <quote class="subtitle">"The ultimate purpose of education is to learn how to find and see the
+                        <div class="title">Education</div>
+                        <quote class="quote">"The ultimate purpose of education is to learn how to find and see<br> the
                             beauty of creation so that you may feel the joy of life."</quote>
                         <div class="qual">
                             <div class="edu-card">
@@ -147,8 +145,8 @@ <h1 class="sub"> 10th Board | CBSE | 10 CGPA
 
 
                         <div class="project-head">
-                            <h1 class="proj-title">Projects that I worked on and working
-                            </h1>
+                            <div class="title">Projects that I worked on and working
+                            </div>
                             <h1 class="proj-sub">CRAZY FULL STACK DEVELOPER WHO WANT TO EXPLORE EVERY TECH STACK
 
                             </h1>