From bdc6052aae5443b43ca762291c7b3dc78538170f Mon Sep 17 00:00:00 2001 From: diksha Date: Mon, 18 Oct 2021 12:38:02 +0530 Subject: [PATCH] diksha's landing page --- dikshatakyar/index.html | 42 ++++++++++++++++++ dikshatakyar/script.js | 95 +++++++++++++++++++++++++++++++++++++++++ dikshatakyar/style.css | 77 +++++++++++++++++++++++++++++++++ 3 files changed, 214 insertions(+) create mode 100644 dikshatakyar/index.html create mode 100644 dikshatakyar/script.js create mode 100644 dikshatakyar/style.css diff --git a/dikshatakyar/index.html b/dikshatakyar/index.html new file mode 100644 index 0000000..d4bcaf2 --- /dev/null +++ b/dikshatakyar/index.html @@ -0,0 +1,42 @@ + + + + + + + Diksha Takyar | Portfolio + + + + + + + + + + + + + +

Hi There !

+

I am Diksha Takyar

+

+ + +
+ Github   + LinkedIn   +
+
+ + + \ No newline at end of file diff --git a/dikshatakyar/script.js b/dikshatakyar/script.js new file mode 100644 index 0000000..018b144 --- /dev/null +++ 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(indexanitext.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 new file mode 100644 index 0000000..5897fd3 --- /dev/null +++ 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); +} +