core: redesign website #11
@ -15,6 +15,7 @@ RUN npm run build
|
||||
WORKDIR /usr/share/nginx/html
|
||||
COPY index.html .
|
||||
COPY default.css .
|
||||
COPY pages/ .
|
||||
|
||||
RUN mkdir -p /usr/share/nginx/html/public
|
||||
|
||||
|
||||
147
default.css
147
default.css
@ -1,75 +1,67 @@
|
||||
/*
|
||||
* base text: #06CDFF
|
||||
* important text: #8200FF
|
||||
* background: #03001C
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #cad3f5;
|
||||
color: #06CDFF;
|
||||
background: #03001C;
|
||||
line-height: 1.5;
|
||||
max-width: 1920px;
|
||||
margin-inline: auto;
|
||||
background: #24273a;
|
||||
margin: 0px auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.inside {
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
background: #181926;
|
||||
display: flex;
|
||||
border-bottom-left-radius: 18px;
|
||||
border-bottom-right-radius: 18px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
margin: 6px;
|
||||
margin-top: 0px;
|
||||
padding: 8px;
|
||||
line-height: 21px;
|
||||
.trianta {
|
||||
font-size: 3.5rem !important;
|
||||
color: #06CDFF !important;
|
||||
border: none !important;
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 60rem;
|
||||
vertical-align: bottom;
|
||||
border: solid 4px #06CDFF;
|
||||
}
|
||||
|
||||
#top {
|
||||
margin-bottom: 6px;
|
||||
border-radius: 16px;
|
||||
border-top-left-radius: 0px;
|
||||
margin: 4px auto;
|
||||
margin-top: 0px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
#main {
|
||||
/*background: #1e2030;*/
|
||||
}
|
||||
|
||||
.cardStats {
|
||||
.stats {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
width: 12rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 1.8rem;
|
||||
margin: 0px;
|
||||
padding: 8px;
|
||||
border-top-left-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
max-width: 650px;
|
||||
text-align: left;
|
||||
padding: 8px 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #6c6f85;
|
||||
font-size: 1.8rem;
|
||||
border: solid 2px #06CDFF;
|
||||
margin: auto;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #dc8a78;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #8c8fa1;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -79,67 +71,64 @@ p {
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-color: #03001C;
|
||||
border: solid 2px #06CDFF;
|
||||
border-radius: 12px;
|
||||
color: #06CDFF;
|
||||
display: inline-block;
|
||||
margin: 6px;
|
||||
margin-top: 0px;
|
||||
max-width: 8rem;
|
||||
padding: 8px;
|
||||
color: #8aadf4;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
border-radius: 9px;
|
||||
text-decoration: underline;
|
||||
text-shadow: 1px 1px 1px #333;
|
||||
animation: hover 3s linear infinite;
|
||||
}
|
||||
|
||||
a.button {
|
||||
margin: 14px 10%;
|
||||
padding: 4px 12px;
|
||||
border: 1px outset #494d64;
|
||||
border-radius: 9px;
|
||||
color: #8aadf4;
|
||||
display: inline-block;
|
||||
background-color: #363a4f;
|
||||
text-decoration: none;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
border: solid 2px #8200FF;
|
||||
color: #8200FF;
|
||||
}
|
||||
|
||||
@keyframes hover {
|
||||
0% { box-shadow: 0 0 8px 4px #24273a; }
|
||||
15% { box-shadow: 0 0 8px 4px #494d64; }
|
||||
50% { box-shadow: 0 0 8px 4px #b7bdf8; }
|
||||
85% { box-shadow: 0 0 8px 4px #494d64; }
|
||||
100% { box-shadow: 0 0 8px 4px #24273a; }
|
||||
0% { box-shadow: 0 0 8px 4px #eff1f5; }
|
||||
15% { box-shadow: 0 0 8px 4px #bcc0cc; }
|
||||
50% { box-shadow: 0 0 8px 4px #7287fd; }
|
||||
85% { box-shadow: 0 0 8px 4px #bcc0cc; }
|
||||
100% { box-shadow: 0 0 8px 4px #eff1f5; }
|
||||
}
|
||||
|
||||
@keyframes card {
|
||||
0% { box-shadow: 0 0 8px 4px #24273a; }
|
||||
50% { box-shadow: 0 0 8px 4px #df8e1d; }
|
||||
100% { box-shadow: 0 0 8px 4px #24273a; }
|
||||
0% { box-shadow: 0 0 8px 4px #eff1f5; }
|
||||
50% { box-shadow: 0 0 8px 4px #fe640b; }
|
||||
100% { box-shadow: 0 0 8px 4px #eff1f5; }
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #363a4f;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border-top-left-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
animation: card 3s linear infinite;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
margin: 0px auto;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.cardTop {
|
||||
background: #1e2030;
|
||||
border-top-left-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
.reserve {
|
||||
max-height: 800px;
|
||||
}
|
||||
|
||||
#pong {
|
||||
margin: 6px;
|
||||
border-radius: 9px;
|
||||
background: #494d64;
|
||||
background: #03001C;
|
||||
}
|
||||
|
||||
39
index.html
39
index.html
@ -3,36 +3,21 @@
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Trianta</title>
|
||||
<link rel="stylesheet" href="default.css" />
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="inside">
|
||||
<div>
|
||||
<a href="/" class="trianta">TRIANTA</a>
|
||||
<p>Function over form by design</p>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<a class="navItem" href="https://www.github.com/trimutex">GitHub</a>
|
||||
<a class="navItem" href="https://lab.trianta.dev/Trianta">Projects</a>
|
||||
<p class="navItem" style="text-align: right; flex-grow: 1;">Trianta</p>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="card">
|
||||
<h2 class="cardTop">Pong</h2>
|
||||
<canvas width="750" height="585" id="pong"></canvas>
|
||||
<script src="public/pong.js"></script>
|
||||
<div id="gameover" hidden="true">
|
||||
<h1>Game Over</h1>
|
||||
</div>
|
||||
<div id="restart" hidden="true">
|
||||
<button class="button" type="button" onclick = "restartGame()">Restart Game</a>
|
||||
</div>
|
||||
<p class="cardStats">Left Paddle Height: <span id="leftPaddle"></span></p>
|
||||
<p class="cardStats">Right Paddle Height: <span id="rightPaddle"></span></p>
|
||||
<a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/pong.js">View Code</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 class="cardTop">Snake</h2>
|
||||
<canvas width="625" height="375" id="snake"></canvas>
|
||||
<script src="public/snake.js"></script>
|
||||
<p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p>
|
||||
<p class="cardStats">Food Location: <span id="snakeFood"></span></p>
|
||||
<a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
|
||||
<a href="https://www.github.com/trimutex">GitHub</a>
|
||||
<a href="https://lab.trianta.dev/Trianta">Projects</a>
|
||||
<a href="/completed">Completed</a>
|
||||
<a href="/current">Current</a>
|
||||
<a href="/other">Other</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
1
pages/completed/.htaccess
Normal file
1
pages/completed/.htaccess
Normal file
@ -0,0 +1 @@
|
||||
DirectoryIndex index.html
|
||||
61
pages/completed/index.html
Normal file
61
pages/completed/index.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Trianta</title>
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="inside">
|
||||
<div>
|
||||
<a href="/" class="trianta">TRIANTA</a>
|
||||
<p>Function over form by design</p>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<a href="https://www.github.com/trimutex">GitHub</a>
|
||||
<a href="https://lab.trianta.dev/Trianta">Projects</a>
|
||||
<a href="/completed">Completed</a>
|
||||
<a href="/current">Current</a>
|
||||
<a href="/other">Other</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</div>
|
||||
<h2>Completed Projects</h2>
|
||||
<div class="card reserve">
|
||||
<div class="canvas">
|
||||
<canvas width="750" height="585" id="pong"></canvas>
|
||||
<script src="/public/pong.js"></script>
|
||||
<div id="gameover" hidden="true">
|
||||
<h3>Game Over</h3>
|
||||
</div>
|
||||
<div id="restart" hidden="true">
|
||||
<button class="button" type="button" onclick = "restartGame()">Restart Game</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<p style="font-size: 22px;">Pong</p>
|
||||
<p>Left Paddle Height: <span id="leftPaddle"></span></p>
|
||||
<p>Right Paddle Height: <span id="rightPaddle"></span></p>
|
||||
<a href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/pong.js">View Code</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card reserve">
|
||||
<div class="canvas">
|
||||
<canvas width="625" height="375" id="snake"></canvas>
|
||||
<script src="/public/snake.js"></script>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<p style="font-size: 22px;">Snake</p>
|
||||
<p>
|
||||
Adjust game size -- Width:
|
||||
<input id="snakeWidth" type="number" min="2" max="31" value="31">
|
||||
Height:
|
||||
<input id="snakeHeight" type="number" min="2" max="24" value="24">
|
||||
</p>
|
||||
<p>Snake Head Location: <span id="snakeHead"></span></p>
|
||||
<p>Food Location: <span id="snakeFood"></span></p>
|
||||
<a href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
pages/contact/.htaccess
Normal file
1
pages/contact/.htaccess
Normal file
@ -0,0 +1 @@
|
||||
DirectoryIndex index.html
|
||||
27
pages/contact/index.html
Normal file
27
pages/contact/index.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Trianta</title>
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="inside">
|
||||
<div>
|
||||
<a href="/" class="trianta">TRIANTA</a>
|
||||
<p>Function over form by design</p>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<a href="https://www.github.com/trimutex">GitHub</a>
|
||||
<a href="https://lab.trianta.dev/Trianta">Projects</a>
|
||||
<a href="/completed">Completed</a>
|
||||
<a href="/current">Current</a>
|
||||
<a href="/other">Other</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</div>
|
||||
<h2>Contact Methods</h2>
|
||||
<p>E-mail: gregcraw2001@gmail.com</p>
|
||||
<p>Discord: trianta</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
pages/current/.htaccess
Normal file
1
pages/current/.htaccess
Normal file
@ -0,0 +1 @@
|
||||
DirectoryIndex index.html
|
||||
38
pages/current/index.html
Normal file
38
pages/current/index.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Trianta</title>
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="inside">
|
||||
<div>
|
||||
<a href="/" class="trianta">TRIANTA</a>
|
||||
<p>Function over form by design</p>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<a href="https://www.github.com/trimutex">GitHub</a>
|
||||
<a href="https://lab.trianta.dev/Trianta">Projects</a>
|
||||
<a href="/completed">Completed</a>
|
||||
<a href="/current">Current</a>
|
||||
<a href="/other">Other</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</div>
|
||||
<h2>Current Personal Projects</h2>
|
||||
<div class="card">
|
||||
<h3>Wrench</h3>
|
||||
<p>Description: A simple application to handle all of your Linux configuration needs.</p>
|
||||
<p>Language: C++26</p>
|
||||
<p>Tools: CMake</p>
|
||||
<p>Frameworks: Qt6</p>
|
||||
<a href="https://github.com/Trimutex/wrench">View Repository</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Synopsis</h3>
|
||||
<p>Description: A markdown repository containing details and changes of servers I maintain.</p>
|
||||
<a href="https://github.com/Trimutex/synopsis">View Repository</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
pages/other/.htaccess
Normal file
1
pages/other/.htaccess
Normal file
@ -0,0 +1 @@
|
||||
DirectoryIndex index.html
|
||||
68
pages/other/index.html
Normal file
68
pages/other/index.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Trianta</title>
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="inside">
|
||||
<div>
|
||||
<a href="/" class="trianta">TRIANTA</a>
|
||||
<p>Function over form by design</p>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<a href="https://www.github.com/trimutex">GitHub</a>
|
||||
<a href="https://lab.trianta.dev/Trianta">Projects</a>
|
||||
<a href="/completed">Completed</a>
|
||||
<a href="/current">Current</a>
|
||||
<a href="/other">Other</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</div>
|
||||
<h2>Other Projects</h2>
|
||||
<div class="card">
|
||||
<h3>Hyprland</h3>
|
||||
<p>Description: An independent, highly customizable, dynamic tiling Wayland compositor that doesn't sacrifice on its looks. </p>
|
||||
<a href="https://github.com/hyprwm/Hyprland">View Repository</a>
|
||||
<p>Language: C++26</p>
|
||||
<p>Tools: CMake</p>
|
||||
<p>and various libraries.</p>
|
||||
<p>Contributions (newest first)</p>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/8323">hyprwm/Hyprland#8323</a>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/8044">hyprwm/Hyprland#8044</a>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/7959">hyprwm/Hyprland#7959</a>
|
||||
<br>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/7755">hyprwm/Hyprland#7755</a>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/7683">hyprwm/Hyprland#7683</a>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/7633">hyprwm/Hyprland#7633</a>
|
||||
<br>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/7575">hyprwm/Hyprland#7575</a>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/7458">hyprwm/Hyprland#7458</a>
|
||||
<a href="https://github.com/hyprwm/Hyprland/pull/6652">hyprwm/Hyprland#6652</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Proxy</h3>
|
||||
<p>Description: A program written in C++ to act as a proxy for another server.</p>
|
||||
<a href="https://lab.trianta.dev/Trianta/proxy-network">View Repository</a>
|
||||
<p>Language: C++11</p>
|
||||
<p>Tools: CMake</p>
|
||||
<p>Testing Frameworks: <a href="https://github.com/ThrowTheSwitch/Unity">Unity Test (ThrowTheSwitch)</a></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Cloudcare</h3>
|
||||
<p>Description: A sample repository that uses downloaded .bed files to train a model on DNA using PyTorch.</p>
|
||||
<a href="https://github.com/Trimutex/cloudcare">View Repository</a>
|
||||
<p>Languages: Python, Bash</p>
|
||||
<p>Libraries: PyTorch</p>
|
||||
<p>Tools: Conda</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>N-Queens</h3>
|
||||
<p>Description: The N-Queens problem recreated in C++ which gets solved using a Genetic Algorithm.</p>
|
||||
<a href="https://lab.trianta.dev/Trianta/n-queens">View Repository</a>
|
||||
<p>Language: C++11</p>
|
||||
<p>Tools: CMake</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
19
src/snake.ts
19
src/snake.ts
@ -158,7 +158,7 @@ class SnakeCore {
|
||||
else if (isBitSet(g_snake.board[i][j], BoardState.FOOD))
|
||||
g_snake.context.fillStyle = "red";
|
||||
else
|
||||
g_snake.context.fillStyle = "black";
|
||||
continue;
|
||||
g_snake.context.fillRect(j * g_snake.grid, i * g_snake.grid, g_snake.grid, g_snake.grid);
|
||||
}
|
||||
}
|
||||
@ -169,6 +169,21 @@ class SnakeCore {
|
||||
document.getElementById("snakeHead").innerHTML = "x: " + this.body[this.body.length - 1].x + " y: " + this.body[this.body.length - 1].y;
|
||||
document.getElementById("snakeFood").innerHTML = "x: " + this.food.x + " y: " + this.food.y ;
|
||||
}
|
||||
|
||||
// Update width and height from page to match game
|
||||
getPageNumbers() {
|
||||
let specifiedWidth = parseInt((document.getElementById("snakeWidth") as HTMLInputElement).value);
|
||||
let specifiedHeight = parseInt((document.getElementById("snakeHeight") as HTMLInputElement).value);
|
||||
if (this.width == specifiedWidth && this.height == specifiedHeight)
|
||||
return false;
|
||||
this.width = specifiedWidth;
|
||||
this.height = specifiedHeight;
|
||||
while (this.height > this.board.length)
|
||||
this.board.push(new Array(this.width));
|
||||
this.canvas.setAttribute("width", String(specifiedWidth * this.grid));
|
||||
this.canvas.setAttribute("height", String(specifiedHeight * this.grid));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
class Bot {
|
||||
@ -270,7 +285,7 @@ const g_snakebot: Bot = new Bot();
|
||||
// game loop
|
||||
function snakeloop() {
|
||||
// Reset of needed
|
||||
if (g_snake.gameover)
|
||||
if (g_snake.gameover || g_snake.getPageNumbers())
|
||||
g_snake.reset();
|
||||
|
||||
// Simulate movement of snake
|
||||
|
||||
Loading…
Reference in New Issue
Block a user