praveenscience · dikshatakyar · Oct 18, 2021
diff --git a/dikshatakyar/index.html b/dikshatakyar/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diksha Takyar | Portfolio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"
+    integrity="sha512-3J8teBiHrSyaaRBajZyIEtpDsXdPq1gsznKWIVb5CnorQuFhjWGhWe54z8YNnHHr7MZuExb9m5kvf964HiT1Sw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+    <h1 class="shadow">Hi There ! <img src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif" width="70px"> </h1>
+    <h2>I am Diksha Takyar</h2>
+    <p class="autotype"></p>
+    <ul>
+        <!-- <li class="autotype"></li> -->
+        <li>I am <span class="typing"></span></li>
+        <!-- <li>Front end Developer. </li>
+        <li>Currently,learning DSA !</li>
+        <li>Part of Microsoft Student Community as beta-MLSA.</li>
+        <li>Looking for open-source opportunities in Frontend.</li> -->
+    </ul>
+
+    <div class="handles">
+        <a class="github" href="https://github.com/dikshatakyar" target="_blank"> <i class="fa fa-github fa-lg" aria-hidden="true"></i> Github</a>&nbsp;&nbsp;
+        <a class="linkedIn" href="https://www.linkedin.com/in/diksha-takyar-3a50721b9/" target="_blank"> <i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i> LinkedIn</a>&nbsp;&nbsp;
+        <br>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/dikshatakyar/script.js b/dikshatakyar/script.js
@@ -0,0 +1,95 @@
+const hero=document.querySelector('.shadow');
+const text=document.querySelector('h1');
+const walk=100; //100px at most to be stretched
+const anitext="Second year CS undergrad from University of Delhi.";
+
+let index=0;
+
+function writetext(){
+    if(index<anitext.length){
+    document.querySelector('.autotype').innerHTML=anitext.slice(0,index);
+    index++;
+    setTimeout(writetext,100);
+
+    }
+    // if(index>anitext.length){
+    //     index=0;
+    // }
+}
+
+writetext();
+
+
+
+
+function shadow(e){
+//  console.log(e);
+//get the width and the height where we have hovered over
+const width=hero.offsetWidth;
+const height=hero.offsetHeight;
+// const {offsetWidth : width ,offsetHeight : height} = hero;
+//to get the cursor position
+let x=e.offsetX;
+let y=e.offsetY;
+// let { offsetX : x,offsetY : y}=e;
+// console.log(x,y); //small value as only hovering on h2--so modifying the x and y values
+// console.log(this,e.target);
+//this=thing that you listened on(hero),target=thing that actually triggerred on
+if(this!==e.target){
+    x=x+e.target.offsetLeft;
+    y=y+e.target.offsetTop;
+}
+
+const xWalk= Math.round((x/width * walk)-(walk/2));
+/* 100  = walk
+50=as high as we go
+-50 = as low as we go */
+const yWalk=Math.round((y/height * walk)-(walk/2));
+
+
+text.style.textShadow = `
+${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
+${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
+${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
+${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+`;
+
+
+}
+
+
+
+
+
+
+
+hero.addEventListener('mousemove',shadow);
+// hero.addEventListener('touchmove', function(e){
+//     var width=hero.offsetWidth;
+//     var height=hero.offsetHeight;
+//   let x=  e.offsetX = e.targetTouches[0].clientX;
+//   let y=  e.offsetY = e.targetTouches[0].clientY;
+
+// const xWalk= Math.round((x/width * walk)-(walk/2));
+// /* 100  = walk
+// 50=as high as we go
+// -50 = as low as we go */
+// const yWalk=Math.round((y/height * walk)-(walk/2));
+
+
+// text.style.textShadow = `
+// ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
+// ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
+// ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
+// ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+// `;
+// console.log('touchmove func');
+// });
+
+var typed = new Typed(".typing", {
+    strings: ["a Front End Developer.", " Beta-Microsoft Learn Student Ambassador.", "Currently learning DSA ! "],
+    typeSpeed: 40,
+    backSpeed: 30,
+    loop: true
+});
+
diff --git a/dikshatakyar/style.css b/dikshatakyar/style.css
@@ -0,0 +1,77 @@
+*{
+    box-sizing: border-box;
+}
+
+body{
+    color: aliceblue;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: #000000 center no-repeat;
+    background-size:cover;
+    flex-direction: column;
+    font-size: 2rem;
+}
+
+h1,h2{
+    font-family: 'Finger Paint', cursive;
+}
+
+/* .shadow{
+    position: absolute; 
+     top:10px;
+} */
+
+h1:hover{
+    cursor: pointer;
+    transform: scale(1.1);
+}
+
+ul{
+    list-style-type: none;
+
+}
+li{
+    padding: 20px;
+    background-color: #6b0f1a;
+background-image: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%);
+clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
+padding: 80px;
+}
+
+li,p{
+    font-family: 'Crimson Text', serif;
+}
+
+p{
+    background-color: #7f5a83;
+    background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
+    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
+    padding: 30px;    
+}
+
+.linkedIn{
+    color:#0077b5;
+}
+
+.github{
+   color: #333;
+}
+
+.handles a{
+    text-decoration: none;
+    background-color: beige;
+    padding: 15px;
+    margin: 50px;
+    font-weight: 900;
+    background-color:rgb(216, 176, 255);
+    font-size: large;
+    border-radius: 50px;
+
+}
+
+.handles a:hover{
+  box-shadow: 7px 7px 2px 1px rgba(222, 152, 255, 0.2);
+}
+