Initial commit
This commit is contained in:
commit
f2bac5667b
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
manual/
|
||||
*.zip
|
||||
BIN
about/aboutbackground.jpg
Normal file
BIN
about/aboutbackground.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
65
about/index.html
Normal file
65
about/index.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Grayson Riffe</title>
|
||||
<meta name="author" content="Grayson Riffe">
|
||||
<meta name="description" content="Grayson Riffe's Portfolio Website">
|
||||
<meta name="theme-color" content="#ff3535">
|
||||
<meta name="og:image" content="/portrait.jpg">
|
||||
|
||||
<link rel="icon" href="/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
|
||||
<script src="/transitions.js" defer></script>
|
||||
</head>
|
||||
<body style="--headercolor: #ff3535; --maincolor: #c41818aa; --articlecolor: #c0252599;">
|
||||
<div class="background" style="--background: url(/about/aboutbackground.jpg);"></div>
|
||||
|
||||
<header>
|
||||
<div class="logo">
|
||||
<img src="/logo.png" alt="Grayson Riffe">
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<a href="/"><li>Home</li></a>
|
||||
<a href="/nf"><li>Nothin' Fancy</li></a>
|
||||
<a href="#"><li class="selectedpage">About</li></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>About</h1>
|
||||
<div class="portrait">
|
||||
<img src="/portrait.jpg" alt="Portrait">
|
||||
</div>
|
||||
<div class="centeredportrait">
|
||||
<img src="/portrait.jpg" alt="Portrait">
|
||||
</div>
|
||||
<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.
|
||||
|
||||
My favorite music genre is hard rock/metal, and my all-time favorite band is Red. As a textbook 21st century young adult, my hobbies include playing video games such as Call of Duty, Paper Mario, and The Last of Us. They also include reading Wikipedia pages, eating Chick-fil-a and spending time with my girlfriend.
|
||||
</p>
|
||||
<div class="space"></div>
|
||||
<h2>Contact</h2>
|
||||
<p>
|
||||
If you wish to get in touch with me, the best way to do that would be to either send an me email or send a SMS to my number. Either way, I should be able to respond within 24 hours or so.
|
||||
</p>
|
||||
<div class="space"></div>
|
||||
<ul class="contact">
|
||||
<li>Email - grayson@graysonriffe.com</td>
|
||||
<li>Phone Number - (817)-687-8255</td>
|
||||
</ul>
|
||||
</article>
|
||||
<footer>
|
||||
Copyright 2022 Grayson Riffe
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
BIN
background.png
Normal file
BIN
background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
BIN
consola.ttf
Normal file
BIN
consola.ttf
Normal file
Binary file not shown.
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
52
index.html
Normal file
52
index.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Grayson Riffe</title>
|
||||
<meta name="author" content="Grayson Riffe">
|
||||
<meta name="description" content="Grayson Riffe's Portfolio Website">
|
||||
<meta name="theme-color" content="#7595ff">
|
||||
<meta name="og:image" content="/portrait.jpg">
|
||||
|
||||
<link rel="icon" href="favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script src="transitions.js" defer></script>
|
||||
</head>
|
||||
<body style="--headercolor: #7595ff; --maincolor: #a1cdffaa; --articlecolor: #558bc999;">
|
||||
<div class="background" style="--background: url('/background.png');"></div>
|
||||
|
||||
<header>
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Grayson Riffe">
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<a href="#"><li class="selectedpage">Home</li></a>
|
||||
<a href="nf"><li>Nothin' Fancy</li></a>
|
||||
<a href="about"><li>About</li></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<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 and programs 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>.
|
||||
</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>.
|
||||
</p>
|
||||
</article>
|
||||
<footer>
|
||||
Copyright 2022 Grayson Riffe
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
BIN
nf/favicon.png
Normal file
BIN
nf/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
66
nf/index.html
Normal file
66
nf/index.html
Normal file
@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Nothin' Fancy</title>
|
||||
<meta name="author" content="Grayson Riffe">
|
||||
<meta name="description" content="Grayson Riffe's Portfolio Website">
|
||||
<meta name="theme-color" content="#d0c000">
|
||||
<meta name="og:image" content="nflogo.png">
|
||||
|
||||
<link rel="icon" href="favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
|
||||
<script src="/transitions.js" defer></script>
|
||||
</head>
|
||||
<body style="--headercolor: #d0c000; --maincolor: #ebdd4daa; --articlecolor: #c2b52999;">
|
||||
<div class="background" style="--background: url('/nf/nfbackground.png');"></div>
|
||||
|
||||
<header>
|
||||
<div class="logo">
|
||||
<img src="/logo.png" alt="Grayson Riffe">
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<a href="/"><li>Home</li></a>
|
||||
<a href="#"><li class="selectedpage">Nothin' Fancy</li></a>
|
||||
<a href="/about"><li>About</li></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="centeredimage">
|
||||
<img src="nflogo.png" alt="Engine Logo">
|
||||
</div>
|
||||
<article>
|
||||
<h1>Nothin' Fancy</h1>
|
||||
<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.
|
||||
</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.
|
||||
|
||||
I worked on this project during my senior year of high school, and it is the result of about 4 months of constant work. You can download the last version <a class="notransition" href="rev1/nf.zip">here</a> and read the manual online <a href="rev1/manual">here</a>.
|
||||
</p>
|
||||
<div class="space"></div>
|
||||
<h2>Revision 2</h2>
|
||||
<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.
|
||||
|
||||
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 section will be updated when it is available to download.
|
||||
</p>
|
||||
</article>
|
||||
<footer>
|
||||
Copyright 2022 Grayson Riffe
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
BIN
nf/nfbackground.png
Normal file
BIN
nf/nfbackground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
nf/nflogo.png
Normal file
BIN
nf/nflogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 937 KiB |
BIN
portrait.jpg
Normal file
BIN
portrait.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 727 KiB |
272
style.css
Normal file
272
style.css
Normal file
@ -0,0 +1,272 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Consolas Custom";
|
||||
src: url('consola.ttf') format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Consolas Custom";
|
||||
|
||||
}
|
||||
|
||||
.background {
|
||||
background-image: var(--background);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(2px);
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
opacity: 0;
|
||||
animation: main-animation 500ms ease-in-out 300ms;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background.out {
|
||||
opacity: 1;
|
||||
animation: main-animation-out 500ms ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--headercolor);
|
||||
color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #FFFFFF77;
|
||||
border-radius: 1em;
|
||||
width: max-content;
|
||||
margin: .5em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
margin: 0.5em 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav li {
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
nav li:not(.selectedpage):hover {
|
||||
background-color: #FFFFFF44;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.selectedpage {
|
||||
background-color: grey;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 auto;
|
||||
margin-top: 7em;
|
||||
margin-bottom: 3em;
|
||||
width: 80%;
|
||||
background-color: var(--maincolor);
|
||||
padding: 1em;
|
||||
padding-bottom: 0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0;
|
||||
animation: main-animation 500ms ease-in-out 500ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
main.out {
|
||||
opacity: 1;
|
||||
animation: main-animation-out 500ms ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.centeredimage {
|
||||
margin: auto;
|
||||
width: clamp(100px, 300px, 70%);
|
||||
}
|
||||
|
||||
.portrait {
|
||||
width: 300px;
|
||||
float: right;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.portrait img,
|
||||
.centeredportrait img {
|
||||
box-sizing: border-box;
|
||||
border: 0.5em black solid;
|
||||
border-radius: 10% 30%;
|
||||
}
|
||||
|
||||
.centeredportrait {
|
||||
display: none;
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
article {
|
||||
background-color: var(--articlecolor);
|
||||
border: 0.2em solid black;
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.space {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2em;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.contact {
|
||||
width: max-content;
|
||||
padding: 0 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nav-animation-out {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes main-animation-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
|
||||
nav a {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 6em;
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.portrait {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.centeredportrait {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
28
transitions.js
Normal file
28
transitions.js
Normal file
@ -0,0 +1,28 @@
|
||||
window.onload = () => {
|
||||
const anchors = document.querySelectorAll('a');
|
||||
const trans1 = document.querySelector('header');
|
||||
const trans2 = document.querySelector('.background');
|
||||
const trans3 = document.querySelector('main');
|
||||
|
||||
for (let i = 0; i < anchors.length; i++) {
|
||||
const anchor = anchors[i];
|
||||
|
||||
if(anchor.classList.contains("notransition"))
|
||||
return;
|
||||
|
||||
anchor.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
let target = e.target.href;
|
||||
if (target[target.length - 1] == '#')
|
||||
return;
|
||||
|
||||
trans1.classList.add('out');
|
||||
trans2.classList.add('out');
|
||||
trans3.classList.add('out');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = target;
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user