Remove keywords, update year, change animations
This commit is contained in:
parent
8e2bcc7a35
commit
2bc117d3b5
@ -17,7 +17,7 @@
|
||||
|
||||
<script src="/transitions.js" defer></script>
|
||||
</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>
|
||||
|
||||
<header>
|
||||
@ -28,7 +28,7 @@
|
||||
<ul>
|
||||
<a href="/"><li>Home</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>
|
||||
</nav>
|
||||
</header>
|
||||
@ -59,7 +59,7 @@
|
||||
</ul>
|
||||
</article>
|
||||
<footer>
|
||||
Copyright 2022 Grayson Riffe
|
||||
Copyright 2023 Grayson Riffe
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
10
index.html
10
index.html
@ -16,7 +16,7 @@
|
||||
|
||||
<script src="transitions.js" defer></script>
|
||||
</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>
|
||||
|
||||
<header>
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<nav>
|
||||
<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="about"><li>About</li></a>
|
||||
</ul>
|
||||
@ -36,16 +36,16 @@
|
||||
<article>
|
||||
<h1>Grayson Riffe</h1>
|
||||
<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>
|
||||
<div class="space"></div>
|
||||
<h2>What's on this website?</h2>
|
||||
<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>
|
||||
</article>
|
||||
<footer>
|
||||
Copyright 2022 Grayson Riffe
|
||||
Copyright 2023 Grayson Riffe
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<script src="/transitions.js" defer></script>
|
||||
</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>
|
||||
|
||||
<header>
|
||||
@ -26,7 +26,7 @@
|
||||
<nav>
|
||||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -59,7 +59,7 @@
|
||||
</p>
|
||||
</article>
|
||||
<footer>
|
||||
Copyright 2022 Grayson Riffe
|
||||
Copyright 2023 Grayson Riffe
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
57
style.css
57
style.css
@ -1,3 +1,11 @@
|
||||
:root {
|
||||
--indexheadercolor: #7595ff;
|
||||
--nfheadercolor: #d0c000;
|
||||
--aboutheadercolor: #ff3535;
|
||||
|
||||
--targetheadercolor: #ffffff;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -10,7 +18,7 @@
|
||||
|
||||
body {
|
||||
font-family: "Consolas Custom";
|
||||
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.background {
|
||||
@ -46,15 +54,10 @@ header {
|
||||
display: flex;
|
||||
justify-content: 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;
|
||||
}
|
||||
|
||||
header.out {
|
||||
transform: translateY(0%);
|
||||
animation: nav-animation-out 500ms ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@ -101,16 +104,16 @@ nav li {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
nav li:not(.selectedpage):hover {
|
||||
background-color: #FFFFFF44;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.selectedpage {
|
||||
background-color: grey;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
nav a:not(.selectedpage):hover {
|
||||
background-color: #FFFFFF44;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 auto;
|
||||
margin-top: 7em;
|
||||
@ -148,7 +151,7 @@ main.out {
|
||||
.centeredportrait img {
|
||||
box-sizing: border-box;
|
||||
border: 0.5em black solid;
|
||||
border-radius: 10% 30%;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.centeredportrait {
|
||||
@ -172,7 +175,6 @@ article {
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -186,37 +188,12 @@ p {
|
||||
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 {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
@keyframes nav-animation {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes main-animation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@ -229,11 +206,11 @@ footer {
|
||||
|
||||
@keyframes nav-animation-out {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
background-color: var(--headercolor)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
background-color: var(--targetheadercolor)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ window.onload = () => {
|
||||
for (let i = 0; i < anchors.length; i++) {
|
||||
const anchor = anchors[i];
|
||||
|
||||
if(anchor.classList.contains("notransition"))
|
||||
if (anchor.classList.contains("notransition"))
|
||||
return;
|
||||
|
||||
anchor.addEventListener('click', e => {
|
||||
@ -16,6 +16,16 @@ window.onload = () => {
|
||||
if (target[target.length - 1] == '#')
|
||||
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');
|
||||
trans2.classList.add('out');
|
||||
trans3.classList.add('out');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user