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

Major cleanup and update content

Browse Source
This commit is contained in:
Grayson Riffe 2023-08-27 21:54:54 -05:00
parent 2bc117d3b5
commit b74919bd39
5 changed files with 62 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
about/index.html
View File

@ -10,7 +10,6 @@
<meta name="description" content="Grayson Riffe's Portfolio Website"> <meta name="description" content="Grayson Riffe's Portfolio Website">
<meta name="theme-color" content="#ff3535"> <meta name="theme-color" content="#ff3535">
<meta name="og:image" content="/portrait.jpg"> <meta name="og:image" content="/portrait.jpg">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.png" type="image/png"> <link rel="icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
@ -25,11 +24,10 @@
<img src="/logo.png" alt="Grayson Riffe"> <img src="/logo.png" alt="Grayson Riffe">
</div> </div>
<nav> <nav>
<ul> <div><a href="/">Home</a></div>
<a href="/"><li>Home</li></a> <div><a href="/nf/">Nothin' Fancy</a></div>
<a href="/nf"><li>Nothin' Fancy</li></a> <div><a href="/resume/" class="notransition">Resume</a></div>
<a class="selectedpage" href="#"><li>About</li></a> <div class="selectedpage"><a href="#">About</a></div>
</ul>
</nav> </nav>
</header> </header>
@ -39,9 +37,6 @@
<div class="portrait"> <div class="portrait">
<img src="/portrait.jpg" alt="Portrait"> <img src="/portrait.jpg" alt="Portrait">
</div> </div>
<div class="centeredportrait">
<img src="/portrait.jpg" alt="Portrait">
</div>
<p> <p>
I'm from Kennedale, a little suburb in the DFW area of Texas. It's here where I grew up and found my home in computer science. I wrote my first Java games and discovered the magic that is Stack Overflow here. In 2022, I graduated from high school and spent my last semester in my hometown, and now I'm in College Station studying what I love. I'm from Kennedale, a little suburb in the DFW area of Texas. It's here where I grew up and found my home in computer science. I wrote my first Java games and discovered the magic that is Stack Overflow here. In 2022, I graduated from high school and spent my last semester in my hometown, and now I'm in College Station studying what I love.

19
index.html
View File

@ -24,11 +24,10 @@
<img src="logo.png" alt="Grayson Riffe"> <img src="logo.png" alt="Grayson Riffe">
</div> </div>
<nav> <nav>
<ul> <div class="selectedpage"><a href="#">Home</a></div>
<a class="selectedpage" href="#"><li>Home</li></a> <div><a href="/nf/">Nothin' Fancy</a></div>
<a href="nf"><li>Nothin' Fancy</li></a> <div><a href="/resume/" class="notransition">Resume</a></div>
<a href="about"><li>About</li></a> <div><a href="/about/">About</a></div>
</ul>
</nav> </nav>
</header> </header>
@ -36,12 +35,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 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. Hello! My name is Grayson Riffe, and I am an undergraduate 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). 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> </article>
<div class="space"></div>
<article>
<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 game engine I call Nothin' Fancy. At the top of this page, you can find links to a few of my past and present projects. I also have a link to my current resume as well as a short biography and contact information on the About page.
</p> </p>
</article> </article>
<footer> <footer>

22
nf/index.html
View File

@ -24,11 +24,10 @@
<img src="/logo.png" alt="Grayson Riffe"> <img src="/logo.png" alt="Grayson Riffe">
</div> </div>
<nav> <nav>
<ul> <div><a href="/">Home</a></div>
<a href="/"><li>Home</li></a> <div class="selectedpage"><a href="#">Nothin' Fancy</a></div>
<a class="selectedpage" href="#"><li>Nothin' Fancy</li></a> <div><a href="/resume/" class="notransition">Resume</a></div>
<a href="/about"><li>About</li></a> <div><a href="/about/">About</a></div>
</ul>
</nav> </nav>
</header> </header>
@ -39,22 +38,23 @@
<article> <article>
<h1>Nothin' Fancy</h1> <h1>Nothin' Fancy</h1>
<p> <p>
Nothin' Fancy (or NF) is a closed-source and in-development game engine / visualizer for Windows built with MSVC. It has two revisions. I ultimately want to use my engine to create a game I can release on Steam for free. Nothin' Fancy (or NF) is a closed-source and in-development game engine / visualizer for Windows built with MSVC. I ultimately want to use my engine to create a game I can release on Steam for free.
</p>
<div class="space"></div>
<h2>Revision 1</h2>
<p>
The first revision was developed in 2021 as an experimental project for learning. It has a number of cool features including an asset system complete with model cooking, an easy way to create a UI, material texture support including normal maps, and even a physics engine, but it is still missing a number of important features. The first revision was developed in 2021 as an experimental project for learning. It has a number of cool features including an asset system complete with model cooking, an easy way to create a UI, material texture support including normal maps, and even a physics engine, but it is still missing a number of important features.
I worked on this project during my senior year of high school, and it is the result of about 4 months of constant work. I worked on this project during my senior year of high school, and it is the result of about 4 months of constant work.
</p> </p>
<div class="space"></div> </article>
<div class="space"></div>
<article>
<h2>Revision 2</h2> <h2>Revision 2</h2>
<p> <p>
A second revision was needed after I realized how much I could improve my first revision using everything I had learned along the way. A second revision was needed after I realized how much I could improve my first revision using everything I had learned along the way.
This project is still in development, but I plan to include every feature present in the first revision along with other notable features such as networking and Steamworks API integration. It will also include major internal changes such as the switch from OpenGL to DirectX 11. This project is still in development, but I plan to include every feature present in the first revision along with other notable features such as networking and Steamworks API integration. It will also include major internal changes such as the switch from OpenGL to DirectX 11.
This project is still in development, and I plan to include notable features such as networking and Steam API integration. It runs with Direct3D 11 and 90% of everything is written by me.
This section will be updated when it is available to download. This section will be updated when it is available to download.
</p> </p>
</article> </article>

81
style.css
View File

@ -26,8 +26,8 @@ body {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
filter: blur(2px); filter: blur(2px);
height: 100vh;
width: 100%; width: 100%;
height: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -47,13 +47,13 @@ body {
header { header {
background-color: var(--headercolor); background-color: var(--headercolor);
color: white;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; left: 0;
right: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
z-index: 100; z-index: 100;
} }
@ -64,7 +64,6 @@ header.out {
.logo { .logo {
height: 100%; height: 100%;
aspect-ratio: 1;
position: absolute; position: absolute;
left: 1em; left: 1em;
} }
@ -77,41 +76,31 @@ img {
nav { nav {
background-color: #FFFFFF77; background-color: #FFFFFF77;
border-radius: 1em; border-radius: 1em;
width: max-content; margin: .5em 0;
margin: .5em;
color: black;
}
nav ul {
display: flex; display: flex;
justify-content: center;
} }
nav a { nav div {
color: inherit; margin: 0.5em;
text-decoration: none; border-radius: 0.5em;
}
nav div a {
display: block;
padding: 0.5em;
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-decoration: none;
margin: 0.5em 1em; white-space: nowrap;
display: flex; color: inherit;
align-items: center;
} }
nav li { nav div.selectedpage {
list-style: none;
padding: 10px;
pointer-events: none;
}
.selectedpage {
background-color: grey; background-color: grey;
border-radius: .5em;
} }
nav a:not(.selectedpage):hover { nav div:not(.selectedpage):hover {
background-color: #FFFFFF44; background-color: #FFFFFF44;
border-radius: 5px;
} }
main { main {
@ -122,8 +111,7 @@ main {
background-color: var(--maincolor); background-color: var(--maincolor);
padding: 1em; padding: 1em;
padding-bottom: 0; padding-bottom: 0;
border-radius: 10px; border-radius: 1em;
overflow: hidden;
opacity: 0; opacity: 0;
animation: main-animation 500ms ease-in-out 500ms; animation: main-animation 500ms ease-in-out 500ms;
@ -144,29 +132,19 @@ main.out {
.portrait { .portrait {
width: 300px; width: 300px;
float: right; float: right;
margin: 0.5em;
} }
.portrait img, .portrait img {
.centeredportrait img { border: 0.2em black solid;
box-sizing: border-box; border-radius: 1em;
border: 0.5em black solid;
border-radius: 10%;
}
.centeredportrait {
display: none;
width: 70%;
margin: 0 auto;
} }
article { article {
background-color: var(--articlecolor); background-color: var(--articlecolor);
border: 0.2em solid black; border: 0.2em solid black;
border-radius: 10px; border-radius: 1em;
padding: 1em; padding: 1em;
overflow: hidden; overflow: hidden;
position: relative;
} }
.space { .space {
@ -183,7 +161,6 @@ p {
} }
.contact { .contact {
width: max-content;
padding: 0 2em; padding: 0 2em;
font-size: 1.2em; font-size: 1.2em;
} }
@ -191,7 +168,7 @@ p {
footer { footer {
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
margin: 0.5em; padding: 0.5em;
} }
@keyframes main-animation { @keyframes main-animation {
@ -226,7 +203,7 @@ footer {
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
nav a { nav div a {
font-size: 3vw; font-size: 3vw;
} }
@ -240,10 +217,8 @@ footer {
} }
.portrait { .portrait {
display: none; float: none;
} width: 70%;
margin: 0 auto;
.centeredportrait {
display: block;
} }
} }

18
transitions.js
View File

@ -1,12 +1,10 @@
window.onload = () => { window.onload = () => {
const anchors = document.querySelectorAll('a'); const anchors = document.querySelectorAll('a');
const trans1 = document.querySelector('header'); const header = document.querySelector('header');
const trans2 = document.querySelector('.background'); const background = document.querySelector('.background');
const trans3 = document.querySelector('main'); const main = document.querySelector('main');
for (let i = 0; i < anchors.length; i++) {
const anchor = anchors[i];
anchors.forEach((anchor) => {
if (anchor.classList.contains("notransition")) if (anchor.classList.contains("notransition"))
return; return;
@ -26,13 +24,13 @@ window.onload = () => {
document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--indexheadercolor')) document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--indexheadercolor'))
} }
trans1.classList.add('out'); header.classList.add('out');
trans2.classList.add('out'); background.classList.add('out');
trans3.classList.add('out'); main.classList.add('out');
setTimeout(() => { setTimeout(() => {
window.location.href = target; window.location.href = target;
}, 500); }, 500);
}); });
} });
} }