grayson/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove keywords, update year, change animations

Browse Source
This commit is contained in:
Grayson Riffe 2023-08-22 21:54:12 -05:00
parent 8e2bcc7a35
commit 2bc117d3b5
5 changed files with 39 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
about/index.html
View File

@ -17,7 +17,7 @@
<script src="/transitions.js" defer></script> <script src="/transitions.js" defer></script>
</head> </head>
<body style="--headercolor: #ff3535; --maincolor: #c41818aa; --articlecolor: #c0252599;"> <body style="--headercolor: var(--aboutheadercolor); --maincolor: #c41818aa; --articlecolor: #c0252599;">
<div class="background" style="--background: url(/about/aboutbackground.jpg);"></div> <div class="background" style="--background: url(/about/aboutbackground.jpg);"></div>
<header> <header>
@ -28,7 +28,7 @@
<ul> <ul>
<a href="/"><li>Home</li></a> <a href="/"><li>Home</li></a>
<a href="/nf"><li>Nothin' Fancy</li></a> <a href="/nf"><li>Nothin' Fancy</li></a>
<a href="#"><li class="selectedpage">About</li></a> <a class="selectedpage" href="#"><li>About</li></a>
</ul> </ul>
</nav> </nav>
</header> </header>
@ -59,7 +59,7 @@
</ul> </ul>
</article> </article>
<footer> <footer>
Copyright 2022 Grayson Riffe Copyright 2023 Grayson Riffe
</footer> </footer>
</main> </main>
</body> </body>

10
index.html
View File

@ -16,7 +16,7 @@
<script src="transitions.js" defer></script> <script src="transitions.js" defer></script>
</head> </head>
<body style="--headercolor: #7595ff; --maincolor: #a1cdffaa; --articlecolor: #558bc999;"> <body style="--headercolor: var(--indexheadercolor); --maincolor: #a1cdffaa; --articlecolor: #558bc999;">
<div class="background" style="--background: url('/background.png');"></div> <div class="background" style="--background: url('/background.png');"></div>
<header> <header>
@ -25,7 +25,7 @@
</div> </div>
<nav> <nav>
<ul> <ul>
<a href="#"><li class="selectedpage">Home</li></a> <a class="selectedpage" href="#"><li>Home</li></a>
<a href="nf"><li>Nothin' Fancy</li></a> <a href="nf"><li>Nothin' Fancy</li></a>
<a href="about"><li>About</li></a> <a href="about"><li>About</li></a>
</ul> </ul>
@ -36,16 +36,16 @@
<article> <article>
<h1>Grayson Riffe</h1> <h1>Grayson Riffe</h1>
<p> <p>
Hello! My name is Grayson Riffe, and I am an engineering student at Texas A&M studying <mark class="keyword1">Computer Science</mark>. Ever since I can remember, I've been interested in computers and how to tell them what to do. I started my programming journey in 5th grade with <mark class="keyword2">Java</mark>, writing tiny games such as tic-tac-toe, a number guessing game, and "Button Clicker" (a very bad knockoff of Cookie Clicker with only two buyable things). As I started to get more competent, I then started looking into <mark class="keyword2">C++</mark> on Windows and quickly fell in love with <mark class="keyword3">MSVC</mark> and <mark class="keyword3">Visual Studio</mark>. I'm mainly interested in <mark class="keyword1">compiled application development</mark>. Hello! My name is Grayson Riffe, and I am an engineering student at Texas A&M studying Computer Science. Ever since I can remember, I've been interested in computers and how to tell them what to do. I started my programming journey in 5th grade with Java, writing tiny games such as tic-tac-toe, a number guessing game, and "Button Clicker" (a very bad knockoff of Cookie Clicker with only two buyable things). As I started to get more competent, I then started looking into C++ on Windows and quickly fell in love with MSVC and Visual Studio. I'm mainly interested in compiled application development.
</p> </p>
<div class="space"></div> <div class="space"></div>
<h2>What's on this website?</h2> <h2>What's on this website?</h2>
<p> <p>
Mostly words, but it will eventually contain a portfolio which includes an in-development project of mine, a <mark class="keyword1">game engine</mark> I call <mark class="keyword2">Nothin' Fancy</mark>. Mostly words, but it will eventually contain a portfolio which includes an in-development project of mine, a game engine I call Nothin' Fancy.
</p> </p>
</article> </article>
<footer> <footer>
Copyright 2022 Grayson Riffe Copyright 2023 Grayson Riffe
</footer> </footer>
</main> </main>
</body> </body>

6
nf/index.html
View File

@ -16,7 +16,7 @@
<script src="/transitions.js" defer></script> <script src="/transitions.js" defer></script>
</head> </head>
<body style="--headercolor: #d0c000; --maincolor: #ebdd4daa; --articlecolor: #c2b52999;"> <body style="--headercolor: var(--nfheadercolor); --maincolor: #ebdd4daa; --articlecolor: #c2b52999;">
<div class="background" style="--background: url('/nf/nfbackground.png');"></div> <div class="background" style="--background: url('/nf/nfbackground.png');"></div>
<header> <header>
@ -26,7 +26,7 @@
<nav> <nav>
<ul> <ul>
<a href="/"><li>Home</li></a> <a href="/"><li>Home</li></a>
<a href="#"><li class="selectedpage">Nothin' Fancy</li></a> <a class="selectedpage" href="#"><li>Nothin' Fancy</li></a>
<a href="/about"><li>About</li></a> <a href="/about"><li>About</li></a>
</ul> </ul>
</nav> </nav>
@ -59,7 +59,7 @@
</p> </p>
</article> </article>
<footer> <footer>
Copyright 2022 Grayson Riffe Copyright 2023 Grayson Riffe
</footer> </footer>
</main> </main>
</body> </body>

57
style.css
View File

@ -1,3 +1,11 @@
:root {
--indexheadercolor: #7595ff;
--nfheadercolor: #d0c000;
--aboutheadercolor: #ff3535;
--targetheadercolor: #ffffff;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -10,7 +18,7 @@
body { body {
font-family: "Consolas Custom"; font-family: "Consolas Custom";
overflow-y: scroll;
} }
.background { .background {
@ -46,15 +54,10 @@ header {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform: translateY(-100%);
animation: nav-animation 500ms cubic-bezier(0.42, 0, 0.13, 1.04);
animation-fill-mode: forwards;
z-index: 100; z-index: 100;
} }
header.out { header.out {
transform: translateY(0%);
animation: nav-animation-out 500ms ease-in-out; animation: nav-animation-out 500ms ease-in-out;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@ -101,16 +104,16 @@ nav li {
pointer-events: none; pointer-events: none;
} }
nav li:not(.selectedpage):hover {
background-color: #FFFFFF44;
border-radius: 5px;
}
.selectedpage { .selectedpage {
background-color: grey; background-color: grey;
border-radius: .5em; border-radius: .5em;
} }
nav a:not(.selectedpage):hover {
background-color: #FFFFFF44;
border-radius: 5px;
}
main { main {
margin: 0 auto; margin: 0 auto;
margin-top: 7em; margin-top: 7em;
@ -148,7 +151,7 @@ main.out {
.centeredportrait img { .centeredportrait img {
box-sizing: border-box; box-sizing: border-box;
border: 0.5em black solid; border: 0.5em black solid;
border-radius: 10% 30%; border-radius: 10%;
} }
.centeredportrait { .centeredportrait {
@ -172,7 +175,6 @@ article {
h1 { h1 {
font-size: 3em; font-size: 3em;
margin-bottom: 0.2em;
} }
p { p {
@ -186,37 +188,12 @@ p {
font-size: 1.2em; font-size: 1.2em;
} }
.keyword1 {
color: orange;
background: none;
}
.keyword2 {
color: rgb(255, 234, 43);
background: none;
}
.keyword3 {
color: rgb(155, 230, 126);
background: none;
}
footer { footer {
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
margin: 0.5em; margin: 0.5em;
} }
@keyframes nav-animation {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes main-animation { @keyframes main-animation {
0% { 0% {
opacity: 0; opacity: 0;
@ -229,11 +206,11 @@ footer {
@keyframes nav-animation-out { @keyframes nav-animation-out {
0% { 0% {
transform: translateY(0); background-color: var(--headercolor)
} }
100% { 100% {
transform: translateY(-100%); background-color: var(--targetheadercolor)
} }
} }

10
transitions.js
View File

@ -16,6 +16,16 @@ window.onload = () => {
if (target[target.length - 1] == '#') if (target[target.length - 1] == '#')
return; return;
let dest = `${target}`
if (dest.includes('nf')) {
document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--nfheadercolor'))
} else if (dest.includes('about')) {
document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--aboutheadercolor'))
} else {
document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--indexheadercolor'))
}
trans1.classList.add('out'); trans1.classList.add('out');
trans2.classList.add('out'); trans2.classList.add('out');
trans3.classList.add('out'); trans3.classList.add('out');