diff --git a/JoshHeaps.Net/Pages/Index.cshtml b/JoshHeaps.Net/Pages/Index.cshtml index bac922e..9f6b029 100644 --- a/JoshHeaps.Net/Pages/Index.cshtml +++ b/JoshHeaps.Net/Pages/Index.cshtml @@ -14,14 +14,22 @@ + + +
- +
- + + +

Chess

@@ -29,9 +37,9 @@ As someone who loves chess, I wanted to create a chess game that I could play with my friends and family. This project is a work in progress, as currently it can only be played locally. It was built in C# on .NET 8.0, using winforms, because I like a challenge. I plan to add online multiplayer functionality in the future.

- +
- +

Compiler

@@ -39,8 +47,32 @@

- + + +
+
+
+ +
+ + + + + + + +
diff --git a/JoshHeaps.Net/wwwroot/css/footer.css b/JoshHeaps.Net/wwwroot/css/footer.css new file mode 100644 index 0000000..0cbe86c --- /dev/null +++ b/JoshHeaps.Net/wwwroot/css/footer.css @@ -0,0 +1,17 @@ +#Contacts { + margin-top: 20vw; +} + +.social-icon { + height: auto; + width: 3.5vw; + margin-bottom: 5vw; + margin-left: 3vw; + fill: rgb(212, 212, 212); + transition: fill 0.5s; +} + +.social-icon:hover { + fill: white; + transition: fill 0.5s; +} \ No newline at end of file diff --git a/JoshHeaps.Net/wwwroot/css/imageLeftProject.css b/JoshHeaps.Net/wwwroot/css/imageLeftProject.css index f6482ca..e3ed5da 100644 --- a/JoshHeaps.Net/wwwroot/css/imageLeftProject.css +++ b/JoshHeaps.Net/wwwroot/css/imageLeftProject.css @@ -2,12 +2,18 @@ position: absolute; clip-path: polygon(0 0, 85vw 0, 60vw 100%, 0 100%); background-color: rgb(104, 255, 0, 0.39); + transition: clip-path 0.5s ease; +} + +.diagonal-section-left:has(.projectImage:hover) { + clip-path: polygon(0 0, 87vw 0, 58vw 100%, 0 100%); + transition: clip-path 0.5s ease; } .projectImageLeft { width: 33vw; height: auto; - padding: 3vw; + margin: 3vw; } .projectTextRight { @@ -27,4 +33,4 @@ color: rgb(212, 212, 212); font-size: 2vw; width: 40vw; -} +} \ No newline at end of file diff --git a/JoshHeaps.Net/wwwroot/css/imageRightProject.css b/JoshHeaps.Net/wwwroot/css/imageRightProject.css index 0afe65a..93b354d 100644 --- a/JoshHeaps.Net/wwwroot/css/imageRightProject.css +++ b/JoshHeaps.Net/wwwroot/css/imageRightProject.css @@ -2,12 +2,18 @@ position: absolute; clip-path: polygon(40vw 0, 100% 0, 100% 100%, 15vw 100%); background-color: rgb(104, 255, 0, 0.39); + transition: clip-path 0.5s ease; +} + +.diagonal-section-right:has(.projectImage:hover) { + clip-path: polygon(42vw 0, 100% 0, 100% 100%, 13vw 100%); + transition: clip-path 0.5s ease; } .projectImageRight { width: 33vw; height: auto; - padding: 3vw; + margin: 3vw; float: right; } @@ -20,7 +26,7 @@ margin: 0; color: rgb(212, 212, 212); font-size: 4vw; - padding-left: 10vw; + margin-left: 10vw; } .projectDescriptionLeft { @@ -28,5 +34,5 @@ color: rgb(212, 212, 212); font-size: 2vw; width: 40vw; - padding-left: 10vw; + margin-left: 10vw; } diff --git a/JoshHeaps.Net/wwwroot/css/project.css b/JoshHeaps.Net/wwwroot/css/project.css index 01b4cc8..d7dbaec 100644 --- a/JoshHeaps.Net/wwwroot/css/project.css +++ b/JoshHeaps.Net/wwwroot/css/project.css @@ -15,6 +15,15 @@ height: auto; } -a { +a.projectContainer { text-decoration: none; } + +.projectImage { + transition: width 0.5s ease; +} + +.projectImage:hover { + width: 40vw; + transition: width 0.5s ease; +} \ No newline at end of file diff --git a/JoshHeaps.Net/wwwroot/css/site.css b/JoshHeaps.Net/wwwroot/css/site.css index 97d5cb7..cb6c1be 100644 --- a/JoshHeaps.Net/wwwroot/css/site.css +++ b/JoshHeaps.Net/wwwroot/css/site.css @@ -3,14 +3,32 @@ background-color: #2b2c30; color: #09ff00; overflow-x: hidden; + cursor: default; +} + +#Header { + margin-top: 2vw; +} + +.headerOption { + font: bold 2vw arial; + display: inline; + margin-left: 10vw; + cursor: pointer; + transition: color 0.5s ease, font 0.5s ease; +} + +.headerOption:hover { + font: bold 2.3vw arial; + transition: color 0.5s ease, font 0.5s ease; } #WelcomeMessage { font: 3vw arial; width: auto; height: 40vw; - padding-top: 20vw; - text-align: center; + margin-top: 15vw; + text-align: left; padding-left: 10vw; padding-right: 10vw; } \ No newline at end of file diff --git a/JoshHeaps.Net/wwwroot/js/utils.js b/JoshHeaps.Net/wwwroot/js/utils.js index 89ed2e4..ef8ca00 100644 --- a/JoshHeaps.Net/wwwroot/js/utils.js +++ b/JoshHeaps.Net/wwwroot/js/utils.js @@ -9,18 +9,52 @@ simulateTyping(element, content); } -function simulateTyping(element, text) { - let index = 0; - let speed = 50; - let currentText = ""; +let intervalId; +let index = 0; +const punctuation = ['.', '!', '?']; - const interval = setInterval(() => { +let currentText = ""; + +function changeIntervalTime(element, text) { + if (punctuation.includes(text.charAt(index))) { + clearInterval(intervalId); + simulateTyping(element, text, 200); + } + else { + clearInterval(intervalId); + simulateTyping(element, text); + } +} + +function simulateTyping(element, text, speed = 50) { + intervalId = setInterval(() => { if (index < text.length) { currentText += text.charAt(index); + changeIntervalTime(element, text); index++; element.textContent = currentText; } else { - clearInterval(interval); + clearInterval(intervalId); } }, speed); +} + +function showClickedContents(option) { + if (option === 'projects') { + document.querySelector("#ChessProject > div.diagonal-section-left").scrollIntoView({ + behavior: "smooth", + block: "center", + inline: "nearest" + }); + } + else if (option === 'contact') { + navigator.clipboard.writeText('435-890-2957').then(() => { + console.log('copied'); + }); + document.querySelector("#Contacts").scrollIntoView({ + behavior: "smooth", + block: "start", + inline: "nearest" + }); + } } \ No newline at end of file