Anniversary page <3
This commit is contained in:
jheaps
@@ -1,7 +1,8 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(dotnet test:*)"
|
||||
"Bash(dotnet test:*)",
|
||||
"Bash(dotnet build)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
||||
@@ -1,90 +1,270 @@
|
||||
@page
|
||||
@model JoshHeaps.Net.Pages.IndexModel
|
||||
@{
|
||||
ViewData["Title"] = "JoshHeaps.Net";
|
||||
ViewData["Title"] = "Happy 5th Anniversary, Morgan!";
|
||||
Layout = "_Layout";
|
||||
}
|
||||
|
||||
<header id="Header">
|
||||
<a class="headerOption" onclick="showClickedContents('projects')">./ Projects</a>
|
||||
<a class="headerOption" onclick="showClickedContents('demos')">./ Demos</a>
|
||||
<a class="headerOption" onclick="showClickedContents('contact')">./ Contact me</a>
|
||||
</header>
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
<div id="WelcomeMessage"></div>
|
||||
.anniversary-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
<div id="ProjectsBox">
|
||||
<div id="ChessProject" class="projectContainer">
|
||||
<div class="displayBox diagonal-section-left">
|
||||
<a target="_blank" href="https://github.com/JoshHeaps/OnlineChess">
|
||||
<img id="ChessImage" class="projectImage projectImageLeft" src="/images/Chess.jpg" title="Chessboard"/>
|
||||
</a>
|
||||
.anniversary-header {
|
||||
color: white;
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
animation: fadeInDown 1s ease-out;
|
||||
}
|
||||
|
||||
#WelcomeMessage {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 2rem 2.5rem;
|
||||
margin: 0 auto 2rem;
|
||||
max-width: 900px;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
animation: fadeIn 2s ease-out;
|
||||
}
|
||||
|
||||
.hearts {
|
||||
font-size: 2.5rem;
|
||||
margin: 1.5rem 0;
|
||||
animation: heartbeat 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.photo-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 10% auto;
|
||||
max-width: 1200px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.photo-frame {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
animation: fadeInUp 1.5s ease-out;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photo-frame:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.photo-wrapper {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.photo-frame img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.photo-frame:nth-child(2) img {
|
||||
object-position: center 30%;
|
||||
}
|
||||
|
||||
.photo-caption {
|
||||
margin-top: 1rem;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.love-message {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem 3rem;
|
||||
margin: 2rem auto;
|
||||
max-width: 1000px;
|
||||
color: #444;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
animation: fadeIn 2.5s ease-out;
|
||||
}
|
||||
|
||||
.love-message h2 {
|
||||
color: #764ba2;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.love-message p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 1.2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.love-message p:last-of-type {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@keyframes heartbeat {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@@media (max-width: 900px) {
|
||||
.photo-gallery {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.photo-wrapper {
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.anniversary-container {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.anniversary-header {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
#WelcomeMessage {
|
||||
font-size: 1.1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.photo-wrapper {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.love-message {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.love-message h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.love-message p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hearts {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="anniversary-container">
|
||||
<h1 class="anniversary-header">Happy 5th Anniversary, Morgan!</h1>
|
||||
|
||||
<div id="WelcomeMessage"></div>
|
||||
|
||||
<div class="hearts">💖 💕 💗</div>
|
||||
|
||||
<div class="photo-gallery">
|
||||
<div class="photo-frame">
|
||||
<div class="photo-wrapper">
|
||||
<img src="/images/Wife Images/45053.jpeg" alt="Morgan with our beautiful baby">
|
||||
</div>
|
||||
<div id="ChessText" class="projectTextRight">
|
||||
<h2 id="ChessTitle" class="projectHeaderRight projectHeader">Chess</h2>
|
||||
<p id="ChessDescription" class="projectDescriptionRight projectDescription">
|
||||
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.
|
||||
<div class="photo-caption">The most amazing mother to our precious child</div>
|
||||
</div>
|
||||
|
||||
<div class="photo-frame">
|
||||
<div class="photo-wrapper">
|
||||
<img src="/images/Wife Images/45054.jpeg" alt="Josh and Morgan together">
|
||||
</div>
|
||||
<div class="photo-caption">My best friend and eternal companion</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="love-message">
|
||||
<h2>Five Years of Forever</h2>
|
||||
<p>
|
||||
Five years ago today, on October 2nd, 2020, I knelt across the altar from you in the temple
|
||||
and we were sealed for time and all eternity. It was the best decision I ever made.
|
||||
</p>
|
||||
<p>
|
||||
Morgan, you are everything I could have ever hoped for and so much more. You're not just
|
||||
my wife—you're my best friend, my partner in every adventure, and the love of my life.
|
||||
</p>
|
||||
<p>
|
||||
You make me laugh every single day. Your kindness touches everyone around you. Your
|
||||
strength amazes me. Your beauty, inside and out, takes my breath away. Watching you
|
||||
become a mother has shown me depths of love and dedication I never knew existed.
|
||||
</p>
|
||||
<p>
|
||||
Thank you for five incredible years of love, laughter, growth, and joy. Thank you for
|
||||
choosing me, for believing in me, and for building this beautiful life with me.
|
||||
</p>
|
||||
<p>
|
||||
Here's to five years down and an eternity to go. I love you more today than yesterday,
|
||||
and I'll love you even more tomorrow.
|
||||
</p>
|
||||
<p style="font-size: 1.5rem; margin-top: 2rem; color: #764ba2;">
|
||||
<strong>I love you, Morgan. Forever and always. 💖</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="CompilerProject" class="projectContainer">
|
||||
<div id="CompilerText" class="projectTextLeft">
|
||||
<h2 id="CompilerTitle" class="projectHeaderLeft projectHeader">Compiler</h2>
|
||||
<p id="CompilerDescription" class="projectDescriptionLeft projectDescription">
|
||||
I love solving problems, and figuring out how things work. What better way to do both than writing a compiler myself? This project is a compiler that I wrote in C# on .NET 8.0. It takes in a simple language that I created, outputs the corresponding common intermediate language (CIL), and executes it. I plan to add more features in the future.
|
||||
</p>
|
||||
</div>
|
||||
<div class="displayBox diagonal-section-right">
|
||||
<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 class="hearts">💝 💞 💓</div>
|
||||
</div>
|
||||
|
||||
<div id="DemosBox" class="displayBox">
|
||||
<h2 id="DemoHeader">Demos</h2>
|
||||
<div id="buttonWrapper">
|
||||
<button id="ChessDemo" class="demoButton" onclick="window.location.href='/chess'">
|
||||
Play Chess
|
||||
</button>
|
||||
<button id="ChessDemo" class="demoButton" onclick="window.location.href='/particles'">
|
||||
Particle Simulator
|
||||
</button>
|
||||
<button id="MoreFiller" class="demoButton">
|
||||
More coming soon...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer id="Contacts">
|
||||
<svg viewBox="0 0 16 16" class="social-icon">
|
||||
<a id="GithubLink" class="social-link" href="https://github.com/JoshHeaps" target="_blank">
|
||||
<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>
|
||||
<rect width="100%" height="100%" fill="transparent" />
|
||||
</a>
|
||||
</svg>
|
||||
|
||||
<svg viewBox="0 0 24 24" class="social-icon">
|
||||
<a id="LinkedinLink" class="social-link" href="https://www.linkedin.com/in/josh-heaps/" target="_blank">
|
||||
<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>
|
||||
<rect width="100%" height="100%" fill="transparent" />
|
||||
</a>
|
||||
</svg>
|
||||
|
||||
<svg viewBox="0 -4 31 31" class="social-icon" preserveAspectRatio="none">
|
||||
<a id="GmailLink" class="social-link" href="mailto:[email protected]">
|
||||
<path d="m0 3.23863636v2.72727273l3.12784091 3.02727273 3.69034091 2.08636368.68181818-4.59034095-.68181818-4.27329546-1.90909091-1.43181818c-2.02329546-1.51704546-4.90909091-.07329545-4.90909091 2.45454545"/>
|
||||
<path d="m23.1818182 2.21590909-.6818182 4.32954546.6818182 4.53409095 3.3494318-1.65852277 3.46875-3.45511364v-2.72727273c0-2.5278409-2.8857955-3.97159091-4.9090909-2.45454545z"/>
|
||||
<path d="m2.04545455 22.6704545h4.77272727v-11.590909l-6.81818182-5.11363641v14.65909091c0 1.1301136.91534091 2.0454545 2.04545455 2.0454545"/>
|
||||
<path d="m23.1818182 22.6704545h4.7727273c1.1301136 0 2.0454545-.9153409 2.0454545-2.0454545v-14.65909091l-6.8181818 5.11363641z"/>
|
||||
<path d="m15 8.35227273-8.18181818-6.13636364v8.86363641l8.18181818 6.1363636 8.1818182-6.1363636v-8.86363641z"/>
|
||||
<rect width="100%" height="100%" fill="transparent" />
|
||||
</a>
|
||||
</svg>
|
||||
</footer>
|
||||
|
||||
@section Styles {
|
||||
<link href="/css/home/site.css?v=@ViewData["cssVersion"]" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/home/project.css?v=@ViewData["cssVersion"]" rel="stylesheet" type="text/css" />
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
transition: color 0.5s ease, font 0.5s ease;
|
||||
}
|
||||
|
||||
#WelcomeMessage {
|
||||
/*#WelcomeMessage {
|
||||
font: 3vw arial;
|
||||
width: auto;
|
||||
height: 40vw;
|
||||
@@ -31,7 +31,7 @@
|
||||
text-align: left;
|
||||
padding-left: 10vw;
|
||||
padding-right: 10vw;
|
||||
}
|
||||
}*/
|
||||
|
||||
#DemosBox {
|
||||
margin: 10vw;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
@@ -3,5 +3,5 @@
|
||||
element.style.display = "none"; // Trigger reflow
|
||||
element.offsetHeight; // Force reflow
|
||||
element.style.display = ""; // Restore the original display
|
||||
typeText("#WelcomeMessage", "Hey! You found me! Since I have your attention, why don't I tell you about myself?");
|
||||
typeText("#WelcomeMessage", "Today, October 2nd, marks the 5th anniversary of the day I was sealed for time and all eternity to my wonderful wife. She's the kindest, sweetest, funniest, most beautiful woman I've ever met. I love you Morgan 💖");
|
||||
}
|
||||
Reference in New Issue
Block a user