Initial commit

7 files changed, 665 insertions, 0 deletions

diff --git a/src/pages/contact.css b/src/pages/contact.css
new file mode 100644
index 0000000..93b63bd
--- /dev/null
+++ b/src/pages/contact.css
@@ -0,0 +1,22 @@
+.contact-container {
+  width: 100%;
+  max-width: 1120px;
+  margin: auto;
+  margin-top: 24pt;
+  margin-bottom: 48pt;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  font-size: 18pt;
+}
+
+.contact {
+  margin-top: 24pt;
+  margin-bottom: 8pt;
+  font-size: 20pt;
+  color: #98C379;
+}
+
+.highlight {
+  color:  #e5c07b;
+}
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
new file mode 100644
index 0000000..efc9eba
--- /dev/null
+++ b/src/pages/contact.tsx
@@ -0,0 +1,34 @@
+import './contact.css';
+
+export default function Contact() {
+  return (
+    <div class="main-info">
+      <div class="main-info-title">
+        Contact
+      </div>
+      <div class="contact-container">
+        <div class="contact">
+          Discord
+        </div>
+
+        <span class="quiet">usually the fastest way to reach me</span>
+        <br />
+        <span class="highlight">EchoDuck</span>#7866
+
+        <div class="contact">
+          Matrix
+        </div>
+        <span class="quiet">for the FOSS folks</span>
+        <br />
+        <span class="highlight">@echoduck</span>:matrix.org
+
+        <div class="contact">
+          Email
+        </div>
+        <span class="quiet">I check my email daily</span>
+        <br />
+        <span class="highlight">duckonaut</span>@gmail.com
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/games.css b/src/pages/games.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/games.css
diff --git a/src/pages/games.tsx b/src/pages/games.tsx
new file mode 100644
index 0000000..314813d
--- /dev/null
+++ b/src/pages/games.tsx
@@ -0,0 +1,393 @@
+import Carousel from '../components/carousel';
+import './projects.css';
+
+export default function Games() {
+  return (
+    <>
+      <div class="main-info">
+        <div class="main-info-title">
+          Game Projects
+        </div>
+        <div class="main-info-subtitle">
+          my game projects, mostly from game jams
+        </div>
+      </div>
+      <div class="projects-container">
+        <div class="project">
+          <div class="project-title"><a href="https://jellingfish-games.itch.io/mr-final-boss">Mr. Final Boss</a>
+          </div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/unity.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+                <img class="grow icon" src="./assets/images/html5.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              The legends say that one day, brave Heroes will slay the evil and malicious Ignatius, the Chaos
+              Bringer... But YOU won't go down without a fight! Be the bossfight everyone is dreading and hunt
+              down as many Heroes as you can in your last stand using a variety of abilities you can choose from!
+              <br />
+              Game made in 72 hours for <a href="https://ldjam.com/events/ludum-dare/50">Ludum Dare 50</a>, with
+              the theme "Delay the Inevitable".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/mr-final-boss/thumbnail.png" />
+            <img src="assets/games/mr-final-boss/screenshot1.png" />
+            <img src="assets/games/mr-final-boss/screenshot2.png" />
+            <img src="assets/games/mr-final-boss/screenshot3.png" />
+            <img src="assets/games/mr-final-boss/screenshot4.png" />
+          </Carousel>
+        </div>
+
+        <div class="project">
+          <div class="project-title"><a href="https://oroshibu.itch.io/bumbling-builders">BUMBLING BUILDERS</a></div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/unity.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+                <img class="grow icon" src="./assets/images/html5.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              A physics puzzle game in which you need to protect little creatures from danger that could come from
+              any direction. Build forts with tetris-style blocks. The game features 30+ levels, multiple distinct
+              enemies and a star rating system.
+              <br />
+              Game made in 72 hours for <a href="https://ldjam.com/events/ludum-dare/49">Ludum Dare 49</a>, with
+              the theme "Unstable".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/bumbling-builders/thumbnail.png" />
+            <img src="assets/games/bumbling-builders/screenshot1.png" />
+            <img src="assets/games/bumbling-builders/screenshot2.png" />
+            <img src="assets/games/bumbling-builders/screenshot3.png" />
+          </Carousel>
+        </div>
+
+        <div class="project">
+          <div class="project-title"><a href="https://www.newgrounds.com/portal/view/850576">Dicemask</a>
+          </div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/unity.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/html5.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              Adventure through a dungeon of gambling themed enemies!
+              Craft your perfect dice from many powerful spells,
+              combo them to destroy everything in your path, and descend deeper.
+              <br />
+              Game made in under 50 hours for <a href="https://itch.io/jam/gmtk-jam-2022">GMTK Game Jam 2022</a>,
+              with
+              the theme "Roll of the dice".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/dicemask/thumbnail.png" />
+          </Carousel>
+        </div>
+
+        <div class="project">
+          <div class="project-title"><a href="https://duckonaut.itch.io/wuzmag">WUZMAG</a>
+          </div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/unity.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+                <img class="grow icon" src="./assets/images/html5.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              Turn based arcade survival game.
+              Survive as long as you can by freezing enemies and using them to defeat more enemies.
+              <br />
+              Game made in roughly 8 hours for a private game jam with friends.
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/wuzmag/thumbnail.png" />
+            <img src="assets/games/wuzmag/screenshot1.png" />
+            <img src="assets/games/wuzmag/screenshot2.png" />
+            <img src="assets/games/wuzmag/screenshot3.png" />
+          </Carousel>
+        </div>
+
+        <div class="project">
+          <div class="project-title"><a href="https://duckonaut.itch.io/miro">Miro</a>
+          </div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/monogame.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              Small chill game made mostly as an experiment for a nice 2D renderer mechanic.
+              Infect the world around you, breaking it down into its simplest components.
+              <br />
+              Game made in roughly 8 hours for a private game jam with friends.
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/miro/thumbnail.png" />
+            <img src="assets/games/miro/screenshot1.png" />
+            <img src="assets/games/miro/screenshot2.png" />
+            <img src="assets/games/miro/screenshot3.png" />
+          </Carousel>
+        </div>
+
+        <div class="project">
+          <div class="project-title"><a href="https://duckonaut.itch.io/thermal-trail">Thermal Trail</a></div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/godot.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+                <img class="grow icon" src="./assets/images/html5.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              Play as Yolka, a mountain goat who found an unknown egg. Keep the egg warm as you navigate the 3
+              distinct worlds, and bring it to the hottest place you know: the depths of a volcano.
+              <br />
+              Game made in a week for <a
+                href="https://www.newgrounds.com/bbs/topic/1476469#bbspost26906541_post_text">Newgrounds July
+                Jam 2021</a>, with the theme "Egg".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/thermal-trail/gameart.png" />
+            <img src="assets/games/thermal-trail/screenshot1.png" />
+            <img src="assets/games/thermal-trail/screenshot2.png" />
+            <img src="assets/games/thermal-trail/screenshot3.png" />
+            <img src="assets/games/thermal-trail/screenshot4.png" />
+          </Carousel>
+        </div>
+
+        <div class="project">
+          <div class="project-title"><a href="https://duckonaut.itch.io/greachers">Greachers</a></div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/monogame.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              Tiny idle simulation game where you manage a team of randomly generated little fellas as they fight
+              other greachers in a sidescrolling world with beautiful procedurally generated graphics.
+              <br />
+              Game made in 2 weeks for <a href="https://itch.io/jam/lowrezjam-2021">LOWREZJAM 2021</a>, with the
+              theme "Minibeasts".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/greachers/title.png" />
+            <img src="assets/games/greachers/screenshot1.png" />
+            <img src="assets/games/greachers/screenshot2.png" />
+            <img src="assets/games/greachers/screenshot3.png" />
+          </Carousel>
+        </div>
+
+        <div class="project">
+          <div class="project-title"><a href="https://duckonaut.itch.io/third-party">Third Party</a></div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/godot.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+                <img class="grow icon" src="./assets/images/html5.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              A top-down stealth game where you play as a spy tasked with stealing important data from a rivaling
+              government. Your task would be easy enough if your objective wasn’t in a underground top-secret
+              facility handling an alien outbreak. Without access to conventional stealth techniques, use corpses
+              of your enemies to sneak through the battlefield.
+              <br />
+              Game made in 72 hours for <a href="https://ldjam.com/events/ludum-dare/48/">Ludum Dare 48</a>, with
+              the theme "Deeper and deeper".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/third-party/thumbnail.png" />
+            <img src="assets/games/third-party/screenshot1.jpg" />
+            <img src="assets/games/third-party/screenshot2.jpg" />
+            <img src="assets/games/third-party/screenshot3.jpg" />
+            <img src="assets/games/third-party/screenshot4.jpg" />
+          </Carousel>
+        </div>
+        <div class="project">
+          <div class="project-title"><a href="https://xatriv.itch.io/your-left">Your Left</a></div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/unity.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              A simple pacman-inspired arcade game. Try to grab all the stars in a randomly generated maze before
+              the time expires, while your controls are scattered all over the screen. Get as far as you can to
+              get the highest score.
+              <br />
+              Game made in 8 hours for <a href="https://itch.io/jam/jamjam-bhl-kntg-polygon">Jam Jam</a>, a local
+              in-person event organized by <a href="https://www.kntgpolygon.pl/">KNTG Polygon</a>, with
+              the theme "One Click".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/your-left/thumbnail.png" />
+            <img src="assets/games/your-left/screenshot1.jpg" />
+            <img src="assets/games/your-left/screenshot2.jpg" />
+            <img src="assets/games/your-left/screenshot3.jpg" />
+          </Carousel>
+        </div>
+        <div class="project">
+          <div class="project-title"><a href="https://duckonaut.itch.io/riff-n-rage">Riff n' Rage</a></div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+                <img class="grow icon" src="./assets/images/monogame.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              You just got your first guitar, and through sheer luck managed to land in the king's throne room,
+              trying to entertain him. Sadly, his subjects aren't huge fans of your music. Dodge them while trying
+              to play the best you can, or the king won't be merciful.
+              <br />
+              Game made in 48 hours for a special solo game jam among friends. My theme was "Power at a price".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/riff-n-rage/thumbnail.png" />
+            <img src="assets/games/riff-n-rage/screenshot1.png" />
+            <img src="assets/games/riff-n-rage/screenshot2.png" />
+          </Carousel>
+        </div>
+        <div class="project">
+          <div class="project-title"><a href="https://duckonaut.itch.io/survive-the-temple">Survive the Temple</a>
+          </div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/godot.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+                <img class="grow icon" src="./assets/images/html5.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              A quick movement focused platformer that tests your short term memory. Survive the trap system of an
+              ancient temple! Dash through the lanterns in the correct order before the time runs out, or face
+              certain death!
+              <br />
+              Game made in 48 hours for <a href="https://ldjam.com/events/ludum-dare/47">Ludum Dare Compo 47</a>
+              with the theme "Stuck in a loop".
+            </div>
+          </div>
+          <Carousel>
+            <img src="assets/games/survive-the-temple/cover.png" />
+            <img src="assets/games/survive-the-temple/screenshot.png" />
+          </Carousel>
+        </div>
+      </div>
+    </>
+  );
+}
+
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
new file mode 100644
index 0000000..a47e997
--- /dev/null
+++ b/src/pages/home.tsx
@@ -0,0 +1,29 @@
+export default function Home() {
+  return (
+    <>
+      <div class="main-info">
+        <div class="main-info-title">
+          Stanisław Zagórowski
+        </div>
+        <div class="main-info-subtitle">
+          aka Duckonaut, EchoDuck
+        </div>
+        <img src="assets/images/duckpfp.png" class="main-info-image logo grow" />
+      </div>
+
+      <div class="about-paragraph">
+        <p>
+          Hello! I'm a programmer, game designer, and artist. I'm currently a student at the Warsaw University of
+          Technology, studying Computer Science. A list of the games I've worked on is in the <a class="games-link"
+            href="games.html">games</a> section. Other projects I've been a part of are available in the <a class="projects-link"
+              href="projects.html">projects</a> section.
+          I also enjoy some lower-level programming and learning about the inner workings of various systems. The main
+          technologies I use are <span class="highlight">C#</span>, <span class="highlight">Unity</span>
+          , <span class="highlight">Python</span>, <span class="highlight">Rust</span> and <span class="highlight">C</span>,
+          although I'm also familiar with <span class="highlight">Godot</span>, <span class="highlight">C++</span>
+          , <span class="highlight">Java</span> and some <span class="highlight">JavaScript</span> and <span class="highlight">TypeScript</span>.
+        </p>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/projects.css b/src/pages/projects.css
new file mode 100644
index 0000000..f9cc07f
--- /dev/null
+++ b/src/pages/projects.css
@@ -0,0 +1,137 @@
+.icon {
+  display: inline;
+  width: 32px;
+  height: 32px;
+  transition: 0.3s;
+  transform-origin: center;
+  filter: brightness(70%)
+}
+
+.icon:hover {
+  filter: brightness(80%);
+}
+
+.icon-row {
+  width: 240px;
+  height: 36px;
+}
+
+.icon-container {
+  height: 36px;
+  float: right;
+}
+
+.icon-text {
+  width: auto;
+  height: 36px;
+  line-height: 36px;
+  float: left;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #5c6370;
+}
+
+.projects-container {
+  width: 100%;
+  max-width: 1120px;
+  margin: auto;
+  margin-top: 24pt;
+  margin-bottom: 48pt;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.project {
+  display: table;
+  align-self: center;
+  clear: both;
+  margin-bottom: 24pt;
+}
+
+.project-info {
+  font-size: 14pt;
+}
+
+.project-description {
+  font-size: 16pt;
+  text-align: justify;
+}
+
+.project-image-gallery {
+  margin-left: 24px;
+  margin-right: 10px;
+}
+
+@media (max-width: 1150px) {
+  .project-title {
+    text-align: center;
+    font-size: 24pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+
+  .project-image-gallery {
+    margin: 60px auto;
+    width: 330px;
+    height: 220px;
+  }
+  
+  .project-info {
+    float: none;
+    width: 90%;
+    margin: auto;
+  }
+
+  .project-description {
+    font-size: 14pt;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .project-title {
+    text-align: center;
+    font-size: 24pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+  .project-image-gallery {
+    margin: 60px auto;
+    width: 480px;
+    height: 360px;
+  }
+
+  .project-info {
+    float: none;
+    width: 90%;
+    margin: auto;
+  }
+
+  .project-description {
+    font-size: 14pt;
+  }
+}
+
+@media (min-width: 1150px) {
+  .project-title {
+    text-align: left;
+    font-size: 32pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+  .project-image-gallery {
+    float: right;
+    width: 480px;
+    height: 360px;
+  }
+  .project-info {
+    float: left;
+    max-width: 600px;
+  }
+
+  .project-description {
+     font-size: 16pt;
+  }
+}
+
+
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
new file mode 100644
index 0000000..4e64704
--- /dev/null
+++ b/src/pages/projects.tsx
@@ -0,0 +1,50 @@
+import './projects.css';
+import Carousel from '../components/carousel';
+
+export default function Projects() {
+  return (
+    <>
+      <div class="main-info">
+        <div class="main-info-title">
+          Other Projects
+        </div>
+        <div class="main-info-subtitle">
+          projects that are not games
+        </div>
+      </div>
+
+      <div class="projects-container">
+
+        <div class="project">
+          <div class="project-title"><a href="https://spiritmod.fandom.com/wiki/Spirit_Mod_Wiki">Spirit Mod</a></div>
+          <div class="project-info">
+            <div class="icon-row">
+              <div class="icon-text">Made using</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/csharp.png" />
+              </div>
+            </div>
+            <div class="icon-row">
+              <div class="icon-text">Available on</div>
+              <div class="icon-container">
+                <img class="grow icon" src="./assets/images/windows.png" />
+              </div>
+            </div>
+            <hr />
+            <div class="project-description">
+              The Spirit Mod is one of the largest mods for Terraria: with more than 1300 items, 8 bosses, and
+              hundreds of enemies, as well as 3 new events and 3 brand new biomes, the mod has a lot to offer.
+              <br />
+              I had the privilege of contributing some system code, mainly the "Stargoop" system.
+            </div>
+          </div>
+          <Carousel>
+            <img class="project-image-gallery-item" src="assets/projects/spirit-mod/Thumbnail.png" />
+            <img class="project-image-gallery-item" src="assets/projects/spirit-mod/Demo1.gif" />
+            <img class="project-image-gallery-item" src="assets/projects/spirit-mod/Demo2.gif" />
+          </Carousel>
+        </div>
+      </div>
+    </>
+  );
+}