From 7c5906be293622dc747972bac4fad4bbe96a895d Mon Sep 17 00:00:00 2001 From: Reihan <60065071+reihan97@users.noreply.github.com> Date: Mon, 29 Jun 2020 19:44:52 +0300 Subject: [PATCH 1/5] Update index.html --- index.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index ccb2c375..2fad0046 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,14 @@
-
Hello, I'm Dinesh!
+
Hello, I'm + D + i + n + e + s + h! +
All-Star Dev | Code Fanatic | Linux Hacker | Bleh
From 0a1faef8dd4c1339765909d15a4c0a48e953b499 Mon Sep 17 00:00:00 2001 From: Reihan <60065071+reihan97@users.noreply.github.com> Date: Mon, 29 Jun 2020 19:48:37 +0300 Subject: [PATCH 2/5] Making it more interactive --- css/themes/yellow-black.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/css/themes/yellow-black.css b/css/themes/yellow-black.css index 309253bd..fb25155e 100644 --- a/css/themes/yellow-black.css +++ b/css/themes/yellow-black.css @@ -11,4 +11,24 @@ main { .icons-social a svg path{ fill: #1E1E1E; -} \ No newline at end of file +} + +i:hover{ + color:#691818;; +} + +.intro span{ + opacity: 0; + transform: rotate(-180deg) translate(150px, 0); + animation: twister .5s forwards; +} + +@keyframe twister{ + 10% { + opacity: 1; + } + 100% { + transform: rotate(0deg) translate(0); + opacity: 1; + } +} From cde2e67d8ffa2702034e809e98d0217a4b6f68e2 Mon Sep 17 00:00:00 2001 From: Reihan <60065071+reihan97@users.noreply.github.com> Date: Mon, 29 Jun 2020 20:26:58 +0300 Subject: [PATCH 3/5] Moving the charaters of h1 --- index.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 00000000..f0ff7507 --- /dev/null +++ b/index.js @@ -0,0 +1,60 @@ +var TxtRotate = function(el, toRotate, period) { + this.toRotate = toRotate; + this.el = el; + this.loopNum = 0; + this.period = parseInt(period, 10) || 2000; + this.txt = ''; + this.tick(); + this.isDeleting = false; + }; + + TxtRotate.prototype.tick = function() { + var i = this.loopNum % this.toRotate.length; + var fullTxt = this.toRotate[i]; + + if (this.isDeleting) { + this.txt = fullTxt.substring(0, this.txt.length - 1); + } else { + this.txt = fullTxt.substring(0, this.txt.length + 1); + } + + this.el.innerHTML = ''+this.txt+''; + + var that = this; + var delta = 300 - Math.random() * 100; + + if (this.isDeleting) { delta /= 2; } + + if (!this.isDeleting && this.txt === fullTxt) { + delta = this.period; + this.isDeleting = true; + } else if (this.isDeleting && this.txt === '') { + this.isDeleting = false; + this.loopNum++; + delta = 500; + } + + setTimeout(function() { + that.tick(); + }, delta); + }; + + window.onload = function() { + var elements = document.getElementsByClassName('txt-rotate'); + for (var i=0; i Date: Mon, 29 Jun 2020 20:27:41 +0300 Subject: [PATCH 4/5] Update index.html --- index.html | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 2fad0046..589bf8b0 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + @@ -21,17 +21,12 @@ - +
-
Hello, I'm - D - i - n - e - s - h! +
Hello, I'm
All-Star Dev | Code Fanatic | Linux Hacker | Bleh
@@ -47,5 +42,7 @@
+ + From 5388ed1e8c9bc084950fda35471c991ad63fb62e Mon Sep 17 00:00:00 2001 From: Reihan <60065071+reihan97@users.noreply.github.com> Date: Mon, 29 Jun 2020 20:30:04 +0300 Subject: [PATCH 5/5] Update yellow-black.css --- css/themes/yellow-black.css | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/css/themes/yellow-black.css b/css/themes/yellow-black.css index fb25155e..3627facc 100644 --- a/css/themes/yellow-black.css +++ b/css/themes/yellow-black.css @@ -17,18 +17,3 @@ i:hover{ color:#691818;; } -.intro span{ - opacity: 0; - transform: rotate(-180deg) translate(150px, 0); - animation: twister .5s forwards; -} - -@keyframe twister{ - 10% { - opacity: 1; - } - 100% { - transform: rotate(0deg) translate(0); - opacity: 1; - } -}