diff --git a/default.css b/default.css
index fbd13b4..688a73f 100644
--- a/default.css
+++ b/default.css
@@ -2,26 +2,29 @@ body {
font-family: Arial, sans-serif;
color: #4c4f69;
line-height: 1.5;
- max-width: 80rem;
margin-inline: auto;
- background: #eff1f5;
margin: 0px auto;
- padding-top: 80px;
}
canvas {
margin: auto;
}
+.inside {
+ max-width: 80rem;
+ margin: 0px auto;
+}
+
+.first {
+ background: #eff1f5;
+}
+
+.second {
+ background: #fe640b;
+}
+
#navigation {
- background: #dce0e8;
- position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
text-align: right;
- border-bottom-left-radius: 12px;
- border-bottom-right-radius: 12px;
padding: 6px;
max-width: inherit;
margin: auto;
@@ -51,10 +54,6 @@ canvas {
height: 55px;
}
-#main {
- margin: 0px auto;
-}
-
.canvas {
width: 780px;
height: 600px;
@@ -66,8 +65,9 @@ canvas {
}
h1 {
- text-align: right;
- padding: 8px;
+ max-width: 650px;
+ text-align: left;
+ padding: 8px 1.5rem;
color: rgba(254, 100, 11, 0.7);
}
@@ -101,7 +101,6 @@ a {
}
a:hover, a:active {
- color: #fe640b;
border-radius: 9px;
text-decoration: underline;
}
diff --git a/index.html b/index.html
index dbffedd..169531b 100644
--- a/index.html
+++ b/index.html
@@ -6,101 +6,113 @@
<link rel="stylesheet" href="default.css" />
</head>
<body>
- <div id="navigation">
- <p id="navBarLeft">Trianta</p>
- <a class="navItem" href="https://www.github.com/trimutex">GitHub</a>
- <a class="navItem" href="https://lab.trianta.dev/Trianta">Projects</a>
+ <div class="first" id="introduction">
+ <div id="navigation">
+ <p id="navBarLeft">Trianta</p>
+ <a class="navItem" href="https://www.github.com/trimutex">GitHub</a>
+ <a class="navItem" href="https://lab.trianta.dev/Trianta">Projects</a>
+ </div>
+ <h1>An engineer creating solutions on current problems that enhance the future.</h1>
</div>
- <div id="main">
- <h1>An engineer creating solutions on current problems that enhance the future.</h1>
- <h2>Completed Projects</h2>
- <div class="card">
- <h3 class="cardTop">Pong</h3>
- <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 class="second">
+ <div class="inside">
+ <h2>Completed Projects</h2>
+ <div class="card">
+ <h3 class="cardTop">Pong</h3>
+ <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 id="restart" hidden="true">
- <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
+ <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">
+ <h3 class="cardTop">Snake</h3>
+ <div class="canvas">
+ <canvas width="625" height="375" id="snake"></canvas>
+ <script src="public/snake.js"></script>
</div>
+ <p class="cardStats">
+ Adjust game size -- Width:
+ <input class="cardStats" id="snakeWidth" type="number" min="2" max="31" value="31">
+ Height:
+ <input class="cardStats" id="snakeHeight" type="number" min="2" max="24" value="24">
+ </p>
+ <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>
</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">
- <h3 class="cardTop">Snake</h3>
- <div class="canvas">
- <canvas width="625" height="375" id="snake"></canvas>
- <script src="public/snake.js"></script>
+ </div>
+ <div class="first">
+ <div class="inside">
+ <h2>Current Personal Projects</h2>
+ <div class="card">
+ <h3 class="cardTop">Wrench</h3>
+ <p class="cardStats">Description: A simple application to handle all of your Linux configuration needs.</p>
+ <p class="cardStats">Language: C++26</p>
+ <p class="cardStats">Tools: CMake</p>
+ <p class="cardStats">Frameworks: Qt6</p>
+ <a class="navItem" href="https://github.com/Trimutex/wrench">View Repository</a>
+ </div>
+ <div class="card">
+ <h3 class="cardTop">Synopsis</h3>
+ <p class="cardStats">Description: A markdown repository containing details and changes of servers I maintain.</p>
+ <a class="navItem" href="https://github.com/Trimutex/synopsis">View Repository</a>
</div>
- <p class="cardStats">
- Adjust game size -- Width:
- <input class="cardStats" id="snakeWidth" type="number" min="2" max="31" value="31">
- Height:
- <input class="cardStats" id="snakeHeight" type="number" min="2" max="24" value="24">
- </p>
- <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>
</div>
- <h2>Current Personal Projects</h2>
- <div class="card">
- <h3 class="cardTop">Wrench</h3>
- <p class="cardStats">Description: A simple application to handle all of your Linux configuration needs.</p>
- <p class="cardStats">Language: C++26</p>
- <p class="cardStats">Tools: CMake</p>
- <p class="cardStats">Frameworks: Qt6</p>
- <a class="navItem" href="https://github.com/Trimutex/wrench">View Repository</a>
- </div>
- <div class="card">
- <h3 class="cardTop">Synopsis</h3>
- <p class="cardStats">Description: A markdown repository containing details and changes of servers I maintain.</p>
- <a class="navItem" href="https://github.com/Trimutex/synopsis">View Repository</a>
- </div>
- <h2>Other Projects</h2>
- <div class="card">
- <h3 class="cardTop">Hyprland</h3>
- <p class="cardStats">Description: An independent, highly customizable, dynamic tiling Wayland compositor that doesn't sacrifice on its looks. </p>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland">View Repository</a>
- <p class="cardStats">Language: C++26</p>
- <p class="cardStats">Tools: CMake</p>
- <p class="cardStats">and various libraries.</p>
- <p class="cardStats">Contributions (newest first)</p>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/8323">hyprwm/Hyprland#8323</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/8044">hyprwm/Hyprland#8044</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7959">hyprwm/Hyprland#7959</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7755">hyprwm/Hyprland#7755</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7683">hyprwm/Hyprland#7683</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7633">hyprwm/Hyprland#7633</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7575">hyprwm/Hyprland#7575</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7458">hyprwm/Hyprland#7458</a>
- <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/6652">hyprwm/Hyprland#6652</a>
- </div>
- <div class="card">
- <h3 class="cardTop">Proxy</h3>
- <p class="cardStats">Description: A program written in C++ to act as a proxy for another server.</p>
- <a class="navItem" href="https://lab.trianta.dev/Trianta/proxy-network">View Repository</a>
- <p class="cardStats">Language: C++11</p>
- <p class="cardStats">Tools: CMake</p>
- <p class="cardStats">Testing Frameworks: <a href="https://github.com/ThrowTheSwitch/Unity">Unity Test (ThrowTheSwitch)</a></p>
- </div>
- <div class="card">
- <h3 class="cardTop">Cloudcare</h3>
- <p class="cardStats">Description: A sample repository that uses downloaded .bed files to train a model on DNA using PyTorch.</p>
- <a class="navItem" href="https://github.com/Trimutex/cloudcare">View Repository</a>
- <p class="cardStats">Languages: Python, Bash</p>
- <p class="cardStats">Libraries: PyTorch</p>
- <p class="cardStats">Tools: Conda</p>
- </div>
- <div class="card">
- <h3 class="cardTop">N-Queens</h3>
- <p class="cardStats">Description: The N-Queens problem recreated in C++ which gets solved using a Genetic Algorithm.</p>
- <a class="navItem" href="https://lab.trianta.dev/Trianta/n-queens">View Repository</a>
- <p class="cardStats">Language: C++11</p>
- <p class="cardStats">Tools: CMake</p>
+ </div>
+ <div class="second">
+ <div class="inside">
+ <h2>Other Projects</h2>
+ <div class="card">
+ <h3 class="cardTop">Hyprland</h3>
+ <p class="cardStats">Description: An independent, highly customizable, dynamic tiling Wayland compositor that doesn't sacrifice on its looks. </p>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland">View Repository</a>
+ <p class="cardStats">Language: C++26</p>
+ <p class="cardStats">Tools: CMake</p>
+ <p class="cardStats">and various libraries.</p>
+ <p class="cardStats">Contributions (newest first)</p>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/8323">hyprwm/Hyprland#8323</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/8044">hyprwm/Hyprland#8044</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7959">hyprwm/Hyprland#7959</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7755">hyprwm/Hyprland#7755</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7683">hyprwm/Hyprland#7683</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7633">hyprwm/Hyprland#7633</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7575">hyprwm/Hyprland#7575</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/7458">hyprwm/Hyprland#7458</a>
+ <a class="navItem" href="https://github.com/hyprwm/Hyprland/pull/6652">hyprwm/Hyprland#6652</a>
+ </div>
+ <div class="card">
+ <h3 class="cardTop">Proxy</h3>
+ <p class="cardStats">Description: A program written in C++ to act as a proxy for another server.</p>
+ <a class="navItem" href="https://lab.trianta.dev/Trianta/proxy-network">View Repository</a>
+ <p class="cardStats">Language: C++11</p>
+ <p class="cardStats">Tools: CMake</p>
+ <p class="cardStats">Testing Frameworks: <a href="https://github.com/ThrowTheSwitch/Unity">Unity Test (ThrowTheSwitch)</a></p>
+ </div>
+ <div class="card">
+ <h3 class="cardTop">Cloudcare</h3>
+ <p class="cardStats">Description: A sample repository that uses downloaded .bed files to train a model on DNA using PyTorch.</p>
+ <a class="navItem" href="https://github.com/Trimutex/cloudcare">View Repository</a>
+ <p class="cardStats">Languages: Python, Bash</p>
+ <p class="cardStats">Libraries: PyTorch</p>
+ <p class="cardStats">Tools: Conda</p>
+ </div>
+ <div class="card">
+ <h3 class="cardTop">N-Queens</h3>
+ <p class="cardStats">Description: The N-Queens problem recreated in C++ which gets solved using a Genetic Algorithm.</p>
+ <a class="navItem" href="https://lab.trianta.dev/Trianta/n-queens">View Repository</a>
+ <p class="cardStats">Language: C++11</p>
+ <p class="cardStats">Tools: CMake</p>
+ </div>
</div>
</div>
</body>