diff --git a/index.html b/index.html index 995f2f5..13f8e09 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ +
+ diff --git a/index_style.css b/index_style.css index ac18d86..e3bd9d4 100644 --- a/index_style.css +++ b/index_style.css @@ -99,4 +99,18 @@ body { width: 60%; margin: 0 18%; } -} \ No newline at end of file +} +#cursorCircle { + width: 20px; + height: 20px; + fill: black; + background-color:#9193ff; + opacity: 50%; + border-radius: 50%; + position: fixed; + pointer-events: none; + transform: translate(-50%, -50%); + transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease; + z-index: 9999; + display: none; +} diff --git a/resume.html b/resume.html index 996055e..8b04145 100644 --- a/resume.html +++ b/resume.html @@ -1,6 +1,9 @@ + + +
recently... diff --git a/resume_style.css b/resume_style.css index 5373230..ab7134d 100644 --- a/resume_style.css +++ b/resume_style.css @@ -56,4 +56,17 @@ body { font-size: 50px; margin-top: -6vh; margin-left: -32%; + } + #cursorCircle { + width: 20px; + height: 20px; + background-color:#9193ff; + opacity: 50%; + border-radius: 50%; + position: fixed; + pointer-events: none; + transform: translate(-50%, -50%); + transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease; + z-index: 9999; + display: none; } \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4a71faf --- /dev/null +++ b/script.js @@ -0,0 +1,26 @@ +document.addEventListener('DOMContentLoaded', function() { + const cursorCircle = document.getElementById('cursorCircle'); + document.addEventListener('mousemove', function(e) { + cursorCircle.style.left = e.pageX + 'px'; + cursorCircle.style.top = e.pageY + 'px'; + cursorCircle.style.display = 'block'; + }); + + const links = document.querySelectorAll('a'); + document.addEventListener('mousemove', function(e) { + let closestDistance = Infinity; + links.forEach(link => { + const rect = link.getBoundingClientRect(); + const linkX = rect.left + rect.width / 2; + const linkY = rect.top + rect.height / 2; + const distance = Math.sqrt(Math.pow(linkX - e.pageX, 2) + Math.pow(linkY - e.pageY, 2)); + if (distance < closestDistance) { + closestDistance = distance; + } + }); + const size = Math.max(20, Math.min(100, 100 - closestDistance)); + cursorCircle.style.width = size + 'px'; + cursorCircle.style.height = size + 'px'; + }); + }); + \ No newline at end of file