jheaps/JoshHeaps.Net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

major updates

Browse Source
This commit is contained in:
jheaps
2024-11-25 12:05:03 -07:00
parent e203e1a6b8
commit 35cb2a22f9
7 changed files with 141 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
JoshHeaps.Net/Pages/Index.cshtml
+37 -5
View File
@@ -14,14 +14,22 @@
<link href="/css/project.css" rel="stylesheet" type="text/css"/> <link href="/css/project.css" rel="stylesheet" type="text/css"/>
<link href="/css/imageLeftProject.css" rel="stylesheet" type="text/css"/> <link href="/css/imageLeftProject.css" rel="stylesheet" type="text/css"/>
<link href="/css/imageRightProject.css" rel="stylesheet" type="text/css"/> <link href="/css/imageRightProject.css" rel="stylesheet" type="text/css"/>
<link href="/css/footer.css" rel="stylesheet" type="text/css"/>
</head> </head>
<body> <body>
<div id="Header">
<a class="headerOption" onclick="showClickedContents('projects')">./ Projects</a>
<a class="headerOption" onclick="showClickedContents('contact')">./ Contact me</a>
</div>
<div id="WelcomeMessage"></div> <div id="WelcomeMessage"></div>
<div id="ProjectsBox"> <div id="ProjectsBox">
<a id="ChessProject" class="projectContainer" target="_blank" href="https://github.com/JoshHeaps/OnlineChess"> <div id="ChessProject" class="projectContainer">
<div class="displayBox diagonal-section-left"> <div class="displayBox diagonal-section-left">
<img id="ChessImage" class="projectImage projectImageLeft" src="/images/Chess.jpg" title="Chessboard"/> <a target="_blank" href="https://github.com/JoshHeaps/OnlineChess">
<img id="ChessImage" class="projectImage projectImageLeft" src="/images/Chess.jpg" title="Chessboard"/>
</a>
</div> </div>
<div id="ChessText" class="projectTextRight"> <div id="ChessText" class="projectTextRight">
<h2 id="ChessTitle" class="projectHeaderRight projectHeader">Chess</h2> <h2 id="ChessTitle" class="projectHeaderRight projectHeader">Chess</h2>
@@ -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. 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.
</p> </p>
</div> </div>
</a> </div>
<a id="CompilerProject" class="projectContainer" target="_blank" href="https://github.com/JoshHeaps/CILCompiler"> <div id="CompilerProject" class="projectContainer">
<div id="CompilerText" class="projectTextLeft"> <div id="CompilerText" class="projectTextLeft">
<h2 id="CompilerTitle" class="projectHeaderLeft projectHeader">Compiler</h2> <h2 id="CompilerTitle" class="projectHeaderLeft projectHeader">Compiler</h2>
<p id="CompilerDescription" class="projectDescriptionLeft projectDescription"> <p id="CompilerDescription" class="projectDescriptionLeft projectDescription">
@@ -39,8 +47,32 @@
</p> </p>
</div> </div>
<div class="displayBox diagonal-section-right"> <div class="displayBox diagonal-section-right">
<img id="CompilerImage" class="projectImage projectImageRight" src="/images/CompilerDemo.png" title="Compiler Input and Output"/> <a target="_blank" href="https://github.com/JoshHeaps/CILCompiler">
<img id="CompilerImage" class="projectImage projectImageRight" src="/images/CompilerDemo.png" title="Compiler Input and Output"/>
</a>
</div> </div>
</div>
</div>
<div id="Contacts">
<a id="GithubLink" class="social-link" href="https://github.com/JoshHeaps" target="_blank">
<svg viewBox="0 0 16 16" class="social-icon">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
<a id="LinkedinLink" class="social-link" href="https://www.linkedin.com/in/josh-heaps/" target="_blank">
<svg viewBox="0 0 24 24" class="social-icon">
<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path>
</svg>
</a>
<a id="GmailLink" class="social-link" href="mailto:[email protected]">
<svg viewBox="52 42 88 66" class="social-icon">
<path d="M58 108h14V74L52 59v43c0 3.32 2.69 6 6 6" />
<path d="M120 108h14c3.32 0 6-2.69 6-6V59l-20 15" />
<path d="M120 48v26l20-15v-8c0-7.42-8.47-11.65-14.4-7.2" />
<path d="M72 74V48l24 18 24-18v26L96 92" />
<path d="M52 51v8l20 15V48l-5.6-4.2c-5.94-4.45-14.4-.22-14.4 7.2" />
</svg>
</a> </a>
</div> </div>
</body> </body>
JoshHeaps.Net/wwwroot/css/footer.css
+17
View File
@@ -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;
}
JoshHeaps.Net/wwwroot/css/imageLeftProject.css
+7 -1
View File
@@ -2,12 +2,18 @@
position: absolute; position: absolute;
clip-path: polygon(0 0, 85vw 0, 60vw 100%, 0 100%); clip-path: polygon(0 0, 85vw 0, 60vw 100%, 0 100%);
background-color: rgb(104, 255, 0, 0.39); 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 { .projectImageLeft {
width: 33vw; width: 33vw;
height: auto; height: auto;
padding: 3vw; margin: 3vw;
} }
.projectTextRight { .projectTextRight {
JoshHeaps.Net/wwwroot/css/imageRightProject.css
+9 -3
View File
@@ -2,12 +2,18 @@
position: absolute; position: absolute;
clip-path: polygon(40vw 0, 100% 0, 100% 100%, 15vw 100%); clip-path: polygon(40vw 0, 100% 0, 100% 100%, 15vw 100%);
background-color: rgb(104, 255, 0, 0.39); 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 { .projectImageRight {
width: 33vw; width: 33vw;
height: auto; height: auto;
padding: 3vw; margin: 3vw;
float: right; float: right;
} }
@@ -20,7 +26,7 @@
margin: 0; margin: 0;
color: rgb(212, 212, 212); color: rgb(212, 212, 212);
font-size: 4vw; font-size: 4vw;
padding-left: 10vw; margin-left: 10vw;
} }
.projectDescriptionLeft { .projectDescriptionLeft {
@@ -28,5 +34,5 @@
color: rgb(212, 212, 212); color: rgb(212, 212, 212);
font-size: 2vw; font-size: 2vw;
width: 40vw; width: 40vw;
padding-left: 10vw; margin-left: 10vw;
} }
JoshHeaps.Net/wwwroot/css/project.css
+10 -1
View File
@@ -15,6 +15,15 @@
height: auto; height: auto;
} }
a { a.projectContainer {
text-decoration: none; text-decoration: none;
} }
.projectImage {
transition: width 0.5s ease;
}
.projectImage:hover {
width: 40vw;
transition: width 0.5s ease;
}
JoshHeaps.Net/wwwroot/css/site.css
+20 -2
View File
@@ -3,14 +3,32 @@
background-color: #2b2c30; background-color: #2b2c30;
color: #09ff00; color: #09ff00;
overflow-x: hidden; 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 { #WelcomeMessage {
font: 3vw arial; font: 3vw arial;
width: auto; width: auto;
height: 40vw; height: 40vw;
padding-top: 20vw; margin-top: 15vw;
text-align: center; text-align: left;
padding-left: 10vw; padding-left: 10vw;
padding-right: 10vw; padding-right: 10vw;
} }
JoshHeaps.Net/wwwroot/js/utils.js
+40 -6
View File
@@ -9,18 +9,52 @@
simulateTyping(element, content); simulateTyping(element, content);
} }
function simulateTyping(element, text) { let intervalId;
let index = 0; let index = 0;
let speed = 50; const punctuation = ['.', '!', '?'];
let currentText = "";
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) { if (index < text.length) {
currentText += text.charAt(index); currentText += text.charAt(index);
changeIntervalTime(element, text);
index++; index++;
element.textContent = currentText; element.textContent = currentText;
} else { } else {
clearInterval(interval); clearInterval(intervalId);
} }
}, speed); }, 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"
});
}
}