summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorrealtradam <[email protected]>2022-02-19 13:54:08 -0500
committerrealtradam <[email protected]>2022-02-19 13:54:08 -0500
commit5ff43926a103b0a7a60ac64cef9a0d9d68700439 (patch)
tree65864e753d2c4c465058958476cbec00d40aa7a7
parentebcd458531256ba359687beff61e73c343ea78c4 (diff)
downloadportfolio-site-5ff43926a103b0a7a60ac64cef9a0d9d68700439.tar.gz
portfolio-site-5ff43926a103b0a7a60ac64cef9a0d9d68700439.zip
:)
Diffstat
-rw-r--r--index.html178
-rw-r--r--stylesheet/style.css31
2 files changed, 195 insertions, 14 deletions
diff --git a/index.html b/index.html
index 61abb93..1ed1446 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,31 @@
-<html><head><meta charset="utf-8"/><title>Portfolio thing</title><link rel="stylesheet" href="./stylesheet/style.css"/><script src="https://cdn.tailwindcss.com"></script><script src="https://unpkg.com/vue@3"></script><script defer src='./assets/fontawesome-free-6.0.0-web/js/all.js'></script></head><div class="flex justify-center"><div class="flex flex-col flex-auto justify-between max-w-5xl"><header class="m-10"><h1 class="text-6xl text-slate-200 w-auto">Portfolio - Tradam.dev</h1></header><body class="bg-gradient-to-b from-thunder-200 to-thunder-300 text-slate-100 font-semiserif"><div id='app' class='flex justify-center pb-12 pr-3 pl-3'><div class="flex flex-auto flex-col justify-between flex-nowrap relative pl-12 pb-12 border-solid border-0 rounded-2xl bg-slate-800 space-y-8 shadow-outset"><div class="sticky top-3 right-0 overflow-visible h-0 float-right"><div class="relative flex justify-end mt-8"><footer><footer class="no-select table text-right p-0.5 text-none border-0 rounded-xl"><div class="rounded-xl m-0 p-0.5 flex flex-col"><a href="https://github.com/realtradam"><i class="fab fa-github-alt icon-img-foot p-1 text-4xl text-thunder-thunder hover:text-white transition-colors"></i></a><a href="https://github.com/realtradam"><i class="fab fa-linkedin icon-img-foot p-1 text-4xl text-thunder-thunder hover:text-white transition-colors"></i></a></div></footer></footer></div></div><h1 class="text-center text-4xl">Yup this is my portfolio</h1><p class="pl-24 pr-24">this is a little blurb about myself</p><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1>Orc: Arena of Time</p>
+<html><head><meta charset="utf-8"/><title>Portfolio thing</title><link rel="stylesheet" href="./stylesheet/style.css"/><script src="https://cdn.tailwindcss.com"></script><script src="https://unpkg.com/vue@3"></script><script defer src='../assets/fontawesome-free-6.0.0-web/js/all.js'></script></head><div class="flex justify-center"><div class="flex flex-col flex-auto justify-between max-w-5xl"><header class="m-10"><h1 class="text-6xl text-slate-200 w-auto">Portfolio - Tradam.dev</h1></header><body class="bg-gradient-to-b from-thunder-200 to-thunder-300 text-slate-100 font-semiserif"><div id='app' class='flex justify-center pb-12 pr-3 pl-3'><div class="flex flex-auto flex-col justify-between flex-nowrap relative pl-12 pb-12 border-solid border-0 rounded-2xl bg-slate-800 space-y-8 shadow-outset"><div class="sticky top-3 right-0 overflow-visible h-0 float-right"><div class="relative flex justify-end mt-8"><footer><footer class="no-select table text-right p-0.5 text-none border-0 rounded-xl"><div class="rounded-xl m-0 p-0.5 flex flex-col"><a href="https://github.com/realtradam"><i class="fab fa-github-alt icon-img-foot p-1 text-4xl text-thunder-thunder hover:text-white transition-colors"></i></a></div></footer></footer></div></div><h1 class="text-center text-4xl">Email: Contact&lt;at&gt;Tradam.dev</h1><p class="pl-24 pr-24">this is a little blurb about myself</p><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/orc-arena-of-time">Orc: Arena of Time</a></p>
<div class="subheader">— Raylib/MRuby Game</div></h1><h2>January 2022</h2>
<p>Short game that won 1st place in the Raylib 5K gamejam.</p>
<p><button @click="orcarena = !orcarena" class="text-center mt-0.5 pt-1 rounded text-thunder-thunder hover:text-white transition-colors underline">
-<div v-show="!orcarena">
+<div v-if="!orcarena">
Play Game(Requires Keyboard and Mouse)
</div>
-<div v-show="orcarena">
+<div v-if="orcarena">
Close Game
</div>
</button>
<Transition name="fade">
-<iframe frameborder="0" v-if="orcarena" class="shadow-outset mt-1 bg-black mr-3 rounded-lg" style="aspect-ratio:900/675;" src="https://itch.io/embed-upload/5265023?color=000000" allowfullscreen="" width="100%"><a href="https://tradam.itch.io/orc-arena-of-time">Play Orc: Arena of Time on itch.io</a></iframe>
+<div v-if="orcarena" class="bg-gray-700 shadow-outset mt-1 mr-3 rounded-lg">
+<iframe frameborder="0" class="bg-black rounded-t-lg" style="aspect-ratio:900/675;" src="https://itch.io/embed-upload/5265023?color=000000" allowfullscreen="" width="100%"><a href="https://tradam.itch.io/orc-arena-of-time">Play Orc: Arena of Time on itch.io</a></iframe>
+<div class="pl-3 pt-2 pb-3"></p>
+
+<p>Controls:<br>
+All controls are fully explained in game.</p>
+
+<ul>
+<li>W/A/S/D - Move</li>
+<li>R - Reset Level</li>
+</ul>
+
+<p></div>
+</div>
</Transition></p>
<ul>
@@ -21,7 +34,7 @@ Close Game
<li>used custom tools like bindings + felECS</li>
<li>content</li>
</ul>
-</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1>FelECS</p>
+</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/FelECS">FelECS</a></p>
<div class="subheader">— Engine Agnostic Pure Ruby ECS</div></h1><h2>May 2021 -</h2>
<p>ECS implemented in Ruby with goals of being easy to incorporate/use in projects, reliable, and heavily documented.</p>
@@ -38,16 +51,159 @@ Close Game
<p>MRuby bindings which allow easy use of the C library Raylib.</p>
<ul>
-<li>To ensure reliability the test coverage goal is 100% coverage. This target is consistently maintained since the library&#39;s initial release in July 2021.</li>
-<li>To ensure ease of use the documentation coverage goal is 100% coverage. Using Yard documentation coverage is automatically reported as well as automatic generation of documentation.</li>
-<li>Is continuously being developed to this day to add new features as well as rework and optimize older ones.</li>
-<li>Built various games using this framework in order to stress test its usability(Orc: Arena of Time, Steelwings, Ruboids)</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+</ul>
+</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/SteelWings">Steelwings</a></p>
+<div class="subheader">— Raylib/MRuby Game</div></h1><h2>January 2022</h2>
+
+<p>Short game made for a university club gamejam.</p>
+
+<p><button @click="steelwings = !steelwings" class="text-center mt-0.5 pt-1 rounded text-thunder-thunder hover:text-white transition-colors underline">
+<div v-if="!steelwings">
+Play Game(Requires Mouse)
+</div>
+<div v-if="steelwings">
+Close Game
+</div>
+</button>
+<Transition name="fade">
+<div v-if="steelwings" class="bg-gray-700 shadow-outset mt-1 mr-3 rounded-lg">
+<iframe frameborder="0" class="bg-black mr-3 rounded-t-lg" style="aspect-ratio:1280/740;" src="https://itch.io/embed-upload/4992285?color=000000" allowfullscreen="" width="100%"><a href="https://argo.itch.io/steelwings">Play Steelwings on itch.io</a></iframe>
+<div class="pl-3 pt-2 pb-3"></p>
+
+<p>Controls: </p>
+
+<ul>
+<li>Mouse - Point to fly towards</li>
+<li>Left Click - Shoot</li>
+</ul>
+
+<p></div>
+</div>
+</Transition></p>
+
+<ul>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+</ul>
+</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/ruby2d-camera">Ruby2D Camera</a></p>
+<div class="subheader">— Fill this out</div></h1><h2>Start date - End date</h2>
+
+<p>Fill this out</p>
+
+<ul>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+</ul>
+</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/ruboids">Ruboids</a></p>
+<div class="subheader">— Fill this out</div></h1><h2>Start date - End date</h2>
+
+<p>Fill this out</p>
+
+<ul>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+</ul>
+</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/FelECS">Arbitrary Convex Polygon Collision</a></p>
+<div class="subheader">— Fill this out</div></h1><h2>Start date - End date</h2>
+
+<p>Fill this out</p>
+
+<ul>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+</ul>
+</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/winter-one">Winter One</a></p>
+<div class="subheader">— Godot Game</div></h1><h2>Start date - End date</h2>
+
+<p>Fill this out</p>
+
+<p><button @click="winterone = !winterone" class="text-center mt-0.5 pt-1 rounded text-thunder-thunder hover:text-white transition-colors underline">
+<div v-if="!winterone">
+Play Game(Requires Mouse or Keyboard)
+</div>
+<div v-if="winterone">
+Close Game
+</div>
+</button>
+<Transition name="fade">
+<div v-if="winterone" class="bg-gray-700 shadow-outset mt-1 mr-3 rounded-lg">
+<iframe frameborder="0" class="bg-black rounded-t-lg" style="aspect-ratio:900/660;" src="https://itch.io/embed-upload/5277533?color=000000" allowfullscreen="" width="100%"><a href="https://tradam.itch.io/winter-one">Play Winter One on itch.io</a></iframe>
+<div class="pl-3 pt-2 pb-3"></p>
+
+<p>Controls: </p>
+
+<ul>
+<li>Mouse - Point to move</li>
+<li>Left Click - Begin Shooting<br></li>
+</ul>
+
+<div></div>
+
+<ul>
+<li>W/A/S/D - Move</li>
+<li>Space - Toggle Shooting</li>
+</ul>
+
+<p></div>
+</div>
+</Transition></p>
+
+<ul>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+</ul>
+</article><article class="basis-1/3 bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl mr-12 pl-8 pr-8 pt-5 pb-5 shadow-inset"><h1><a href="https://github.com/realtradam/optimal-direction">Optimal Direction</a></p>
+<div class="subheader">— Godot Prototype</div></h1><h2>June 2019 - November 2020</h2>
+
+<p>An old prototype racing game.</p>
+
+<p><button @click="optimal = !optimal" class="text-center mt-0.5 pt-1 rounded text-thunder-thunder hover:text-white transition-colors underline">
+<div v-if="!optimal">
+Play Game(Requires Keyboard and Mouse)
+</div>
+<div v-if="optimal">
+Close Game
+</div>
+</button>
+<Transition name="fade">
+<div v-if="optimal" class="bg-gray-700 shadow-outset mt-1 mr-3 rounded-lg">
+<iframe frameborder="0" class="bg-black rounded-t-lg mb-1" style="aspect-ratio:900/675;" src="https://itch.io/embed-upload/5283100?color=000000" allowfullscreen="" width="100%"><a href="https://tradam.itch.io/optimal-direction">Play Orc: Arena of Time on itch.io</a></iframe>
+<div class="pl-3 pt-2 pb-3"></p>
+
+<p>Controls: </p>
+
+<ul>
+<li>W - Drive</li>
+<li>A/D - Steer</li>
+<li>Space - Brake</li>
+<li>Shift - Drift/Grip</li>
+</ul>
+
+<p></div>
+</div>
+</Transition></p>
+
+<ul>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
+<li>You need to fill out these bullet points</li>
</ul>
</article></div></div></body></div></div><script type="module">Vue.createApp({
data() {
return {
- orcarena: false
+ orcarena: false,
+ steelwings: false,
+ winterone: false,
+ optimal: false
}
}
}).mount('#app')
-</script></html>
+</script></html> \ No newline at end of file
diff --git a/stylesheet/style.css b/stylesheet/style.css
index 122c6ad..bf4a457 100644
--- a/stylesheet/style.css
+++ b/stylesheet/style.css
@@ -571,6 +571,10 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-right: 0.75rem;
}
+.mb-1 {
+ margin-bottom: 0.25rem;
+}
+
.flex {
display: flex;
}
@@ -671,6 +675,11 @@ Ensure the default browser behavior of the `hidden` attribute.
border-radius: 0.5rem;
}
+.rounded-t-lg {
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+}
+
.border-0 {
border-width: 0px;
}
@@ -692,6 +701,11 @@ Ensure the default browser behavior of the `hidden` attribute.
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
+.bg-gray-700 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -779,6 +793,14 @@ Ensure the default browser behavior of the `hidden` attribute.
padding-top: 0.25rem;
}
+.pt-2 {
+ padding-top: 0.5rem;
+}
+
+.pb-3 {
+ padding-bottom: 0.75rem;
+}
+
.text-center {
text-align: center;
}
@@ -867,22 +889,25 @@ Ensure the default browser behavior of the `hidden` attribute.
src: url('./assets/Asul-Regular.ttf') format('ttf');
}
-a {
+article h1 a {
--tw-text-opacity: 1;
color: rgb(255 215 0 / var(--tw-text-opacity));
}
-a:hover {
+article h1 a:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
-a {
+article h1 a {
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
+ -webkit-text-decoration-line: underline;
+ text-decoration-line: underline;
+ text-decoration-thickness: 1px;
}
article h1 {
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-18 15:15:19 +0000