Update

7Kushal · Jan 19, 2021 · cc47859 · cc47859
1 parent cae1b25
commit cc47859
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 18 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -3,7 +3,8 @@ body {
   text-align: center;
   color: white;
   margin: 0;
-  font-family: 'Open Sans', sans-serif;
+  font-family: sans-serif;
+  /* cursor: none; */
 }
 
 .top-container {
@@ -43,20 +44,52 @@ body {
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
   outline: 0;
-  cursor: pointer;
+  /* cursor: pointer; */
 }
 .night-mode1{
   color: #333333;
   background-color: black;
 }
 .cursor {
   border-radius: 50%;
-  border: 2px solid white;
-  height: 30px;
-  width: 30px;
+  border: 2px solid rgb(255, 240, 106);
+  height:40px;
+  width: 40px;
+  position: absolute;
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+  animation: cursorAnim .5s infinite alternate;
+  pointer-events: none;
+}
+.cursor::after {
+  content: "";
+  width: 40px;
+  height:40px;
   position: absolute;
-  transition-duration: 50ms;
+  border: 8px solid rgb(56, 93, 253);
+  border-radius: 50%;
+  opacity: .7;
+  top: -2.3px;
+  left: -2.3px;
+  transition-duration: 1ms;
   transition-timing-function: ease-out;
+  animation: cursorAnim2 .5s infinite alternate;
+}
+@keyframes cursorAnim {
+  from {
+      transform: scale(1);
+  }
+  to {
+      transform: scale(.7);
+  }
+}
+@keyframes cursorAnim2 {
+  from {
+      transform: scale(1);
+  }
+  to {
+      transform: scale(.5);
+  }
 }
 .dark {
   /* font-size: 2rem; */
@@ -180,7 +213,7 @@ h4 {
   width: 100%;
   margin: 0px;
   position: relative;
-  z-index: -1;
+  /* z-index: -1; */
   /* background: url(../images/P2.jpeg) no-repeat center center fixed; */
 
   -webkit-background-size: cover;
@@ -199,7 +232,7 @@ h4 {
 }
 
 .bottom-container {
-  font-size: 2rem;
+  font-size: 4rem;
   /* background-color: black; */
   /* color:#e6d5b8; */
   margin: 0 0 0 0;
@@ -243,6 +276,7 @@ h1 {
 }
 
 h2 {
+  border-left: 10px solid grey;
   font-weight: normal;
   /* color: #696969; */
   line-height: 2;
@@ -283,7 +317,8 @@ h2 {
 }
 
 h3 {
-  color: #696969;
+  color: white;
+  border-left: 10px solid grey;
 }
 
 .footer-link {
@@ -323,6 +358,7 @@ p {
     /* color: #fff; */
     padding-top: 110px;
     min-height: 350px;
+    margin: 0;
   }
 
   h1 {
@@ -333,6 +369,7 @@ p {
   }
 
   h2 {
+    border-left: 10px solid grey;
     font-weight: normal;
     color: #696969;
     line-height: 2;
@@ -373,3 +410,51 @@ p {
     text-align: center;
   }
 }
+.projects{
+  /* border: 2px solid white; */
+  margin-top: 100px;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+.boo{
+  border-bottom: 2px solid white;
+  padding: 10px;
+}
+table {
+
+  /* color: white; */
+  width: 100%;
+  text-align: center;
+  padding: 7%;
+  /* margin: 5px; */
+  margin: 0;
+  margin-top: 70px;
+}
+
+td {
+  padding-left: 10%;
+  padding-right: 10%;
+}
+h4{
+  /* border: 2px solid white; */
+  font-size: 2rem;
+}
+.works{
+  border-left: 10px solid grey;
+
+}
+h2 {
+  border-left: 10px solid grey;
+  /* color: #bc6ff1; */
+  width: 100%;
+  text-align: center;
+  margin-top: 10px;
+  font-size: 3.4rem;
+}
+.row1 {
+  margin: 20px;
+}
+.ac {
+  text-align: center;
+  width: 50%;
+}
diff --git a/index.html b/index.html
@@ -49,17 +49,54 @@ <h1>Kushal jangir</h1>
     </div>
 
   </section>
+  <div class="projects">
+    <h2 class="works">Works</h2>
+        <table>
+            <tr class="row1">
+                <td class="ac">
+                    <h1 class="boo"> Web app </h1>
+                    <br>
+                    <h4>Develop a web application for a local business to present their services online.
+                        Tech stack - HTML CSS, JavaScript, Bootstrap, Node.js. </h4>
+                </td>
+                <td class="ac"><h1 class="boo">Voice-Assistant / Chatbot</h1>
+                    <br>
+                    <h4>Python based app similar to 
+                        that of google assistant it 
+                        can understand many voice 
+                        commands and can complete 
+                        tasks.</h4></td>
+            </tr>
+            <tr class="row1">
+                <td class="ac">
+                    <h1 class="boo">Image-Recognition using DL</h1>
+                    <br>
+                    <h4>Designed a deep neural network for image recognition.
+                        Worked on techniques of Convolutional Neural Network to train the model.
+                        Used Google Cloud Vision API to recognize objects from photographs and to extract text from images.
+                        Keras, TensorFlow backend in python</h4>
+                </td>
+                <!-- <td class="ac"><h1 class="boo">Voice-Assistant / Chatbot</h1>
+                    <br>
+                    <h4>Python based app similar to 
+                        that of google assistant it 
+                        can understand many voice 
+                        commands and can complete 
+                        tasks.</h4></td> -->
+            </tr>
+       </table>
+</div>
 
   <div class="middle-container">
 
     <div class="skills">
       <div class="skill-row">
-        <img class="static" id="gip" src="images/giphy.gif" alt="code_img">
+        <!-- <img class="static" id="gip" src="images/giphy.gif" alt="code_img"> -->
       </div>
 
 
 
-  <section id="features">
+  <!-- <section id="features">
     <h3>PROJECTS</h3>
     <div class="row row-icons">
       <div class="easy col-sm-4">
@@ -106,12 +143,12 @@ <h4>Designed a deep neural network for image recognition.
         </div>
       </div>
     </div>
-  </section>
+  </section> -->
   </div>
 </div>
   <div class="skill-row">
     <!-- <img class="animated" src="images/200w2.webp" alt="animated"> -->
-    <h3>Core Skills</h3>
+    <h2>Core Skills</h2>
     <ul>
 
     </ul>
@@ -126,7 +163,7 @@ <h3>Core Skills</h3>
 
   <!-- <hr> -->
 
-    <h2>FIND ME ON</h2>
+    <h2>Contact Me</h2>
 
 
   <div class="bottom-container">
@@ -136,16 +173,19 @@ <h2>FIND ME ON</h2>
     <a class="footer-link" href="https://twitter.com/kushal__21"><i class="footer fab fa-twitter"></i></a>
     <a class="footer-link" href="https://github.com/7kushal"><i class="footer fab fa-github"></i></a>
     <a class="footer-link" href="mailto:[email protected]"><i class="footer far fa-envelope"></i></a>
-    <p>Kushal jangir</p>
+    <!-- <p></p> -->
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
 <script>
   const x = document.querySelector(".cursor");
-    document.addEventListener('mouseover',function(e){
-       x.setAttribute("style","top:"+(e.pageY -10)+"px; left:"+(e.pageX-10)+"px;");
-      console.log(e);
+    document.addEventListener('mousemove',function(e){
+       x.setAttribute("style","top:"+(e.pageY-18)+"px; left:"+(e.pageX-19)+"px;");
+
+ });
+ document.addEventListener('wheel',function(e){
+       x.setAttribute("style","top:"+(e.pageY-19)+"px; left:"+(e.pageX-19)+"px;");
 
  });
        function myFunction() {