Initial commit

17 files changed, 1326 insertions, 0 deletions

diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..4cd5008
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,114 @@
+#app-main {
+  font-family: 'Hack', monospace;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem 2rem 2rem 2rem;
+  text-align: center;
+}
+
+#app {
+  margin: 0 auto;
+  display: flex;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.main-info {
+  margin-top: 80px;
+  text-align: center;
+}
+
+.main-info-image {
+  width: 128px;
+  height: 128px;
+  border-radius: 100%;
+  margin: 6px 6px 6px 6px;
+}
+
+.main-info-title {
+  font-size: 42pt;
+}
+
+.main-info-subtitle {
+  font-size: 26pt;
+  font-style: italic;
+  color: #5c6370;
+}
+
+.quiet {
+  color: var(--color-gray);
+  font-style: italic;
+}
+
+.section {
+  font-size: 22pt;
+}
+
+.highlight {
+    color: #e5c07b;
+}
+
+@media (max-width: 480px) {
+  .main-info-title {
+    font-size: 32pt;
+  }
+
+  .main-info-subtitle {
+    font-size: 18pt;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .main-info-title {
+    font-size: 42pt;
+  }
+
+  .main-info-subtitle {
+    font-size: 26pt;
+  }
+}
+
+@media (min-width: 1150px) {
+  .main-info-title {
+    font-size: 42pt;
+  }
+
+  .main-info-subtitle {
+    font-size: 26pt;
+  }
+}
+
+
+@media (max-width: 480px) {
+  .about-paragraph {
+      margin: auto;
+      font-size: 16pt;
+      max-width: 90%;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .about-paragraph {
+      margin: auto;
+      font-size: 18pt;
+      max-width: 80%;
+  }
+}
+
+@media (min-width: 1150px) {
+  .about-paragraph {
+      margin: auto;
+      font-size: 18pt;
+      max-width: 60%;
+  }
+}
diff --git a/src/app.tsx b/src/app.tsx
new file mode 100644
index 0000000..771b84a
--- /dev/null
+++ b/src/app.tsx
@@ -0,0 +1,23 @@
+import './app.css'
+import { Navbar } from './components/navbar'
+import Contact from './pages/contact';
+import Games from './pages/games';
+import Home from './pages/home'
+import { Router, Route } from 'preact-router';
+import Projects from './pages/projects';
+
+export function App() {
+  return (
+    <>
+      <Navbar />
+      <div id="app-main">
+        <Router>
+          <Route path="/" component={Home} />
+          <Route path="/contact" component={Contact} />
+          <Route path="/games" component={Games} />
+          <Route path="/projects" component={Projects} />
+        </Router>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/carousel.css b/src/components/carousel.css
new file mode 100644
index 0000000..f311805
--- /dev/null
+++ b/src/components/carousel.css
@@ -0,0 +1,68 @@
+.carousel-content {
+  align-self: center;
+  max-height: 100%;
+  white-space: nowrap;
+  -ms-overflow-style: none;  /* hide scrollbar in IE and Edge */
+  scrollbar-width: none;  /* hide scrollbar in Firefox */
+}
+
+.carousel-item {
+  width: 100%;
+  flex-shrink: 0;
+  height: auto;
+  float: left;
+  text-align: center;
+  transition: all 250ms linear;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.slick-slider {
+  margin: 24px;
+}
+
+.slick-slide {
+  margin: 0 auto;
+  border-radius: 10px;
+  text-align: center;
+  float: none !important;
+  display: inline-block !important;
+  vertical-align: middle;
+  min-height: 1px;
+}
+
+.carousel-item > * {
+  border-radius: 10px;
+  vertical-align: middle;
+  width: 100%;
+  height: auto;
+}
+
+.slick-dots li button::before {
+  color: var(--color-fg) !important;
+}
+
+@media (max-width: 1150px) {
+  .carousel-wrapper {
+    margin: 60px auto;
+    width: 330px;
+    height: 220px;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .carousel-wrapper {
+    margin: 60px auto;
+    width: 480px;
+    height: 360px;
+  }
+}
+
+@media (min-width: 1150px) {
+  .carousel-wrapper {
+    float: right;
+    width: 480px;
+    height: 360px;
+  }
+}
+
diff --git a/src/components/carousel.tsx b/src/components/carousel.tsx
new file mode 100644
index 0000000..af9279b
--- /dev/null
+++ b/src/components/carousel.tsx
@@ -0,0 +1,31 @@
+import './carousel.css';
+import Slider, { Settings } from 'react-slick';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+export default function Carousel(props: { children: any }) {
+  const settings: Settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  };
+
+  return (
+    <div class="carousel-wrapper">
+      <Slider {...settings}>
+        {
+          props.children instanceof Array ?
+            props.children.map((child: any) => {
+              return (
+                <div class="carousel-item">{child}</div>
+              );
+            })
+            :
+            <div class="carousel-item">{props.children}</div>
+        }
+      </Slider>
+    </div>
+  );
+}
diff --git a/src/components/navbar-item.tsx b/src/components/navbar-item.tsx
new file mode 100644
index 0000000..c2f2306
--- /dev/null
+++ b/src/components/navbar-item.tsx
@@ -0,0 +1,8 @@
+import * as preact from "preact";
+
+export function NavbarItem(props: any) {
+  const { name, href, children, rel } = props;
+
+  return (preact.createElement("div", { className: "navbar-item" },
+    preact.createElement("a", { className: "navbar-item-" + name, href: href, rel: rel }, children)));
+}
diff --git a/src/components/navbar.css b/src/components/navbar.css
new file mode 100644
index 0000000..18390bb
--- /dev/null
+++ b/src/components/navbar.css
@@ -0,0 +1,270 @@
+.navbar-container {
+  position: fixed;
+  background-color: var(--color-bg);
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+  margin: auto;
+  width: 100%;
+}
+
+.navbar {
+  margin-top: 20pt;
+  margin-bottom: 12pt;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.navbar-icon {
+  font-family: Hack, monospace;
+  font-weight: 500;
+  color: #646cff;
+  font-size: 1.5em;
+  padding: 0.5em;
+  margin: 0.5em;
+}
+
+.navbar {
+  align-self: center;
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+.navbar-item {
+  font-family: Hack, monospace;
+  font-size: 18pt;
+  text-align: center;
+  float: none;
+  clear: left;
+  display: inline-block;
+  margin: 0 0.25em;
+  transition: all 0.2s ease-in-out;
+}
+
+.navbar-item:hover {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  transition: all 0.2s ease-in-out;
+}
+
+.navbar-current {
+  font-weight: bold;
+}
+
+/* home */
+
+.navbar-item-home:link {
+  color: #98C379;
+  text-decoration: none;
+}
+
+.navbar-item-home:visited {
+  color: #98C379;
+  text-decoration: none;
+}
+
+.navbar-item-home:hover {
+  color: #afd088;
+  text-decoration: underline;
+}
+
+.navbar-item-home:active {
+  color: #afd088;
+  text-decoration: underline;
+}
+
+/* games */
+
+.navbar-item-games:link {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-games:visited {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-games:hover {
+  color: #ef7a80;
+  text-decoration: underline;
+}
+
+.navbar-item-games:active {
+  color: #ef7a90;
+  text-decoration: underline;
+}
+
+/* projects */ 
+
+.navbar-item-projects:link {
+  color: #d19a66;
+  text-decoration: none;
+}
+
+.navbar-item-projects:visited {
+  color: #d19a66;
+  text-decoration: none;
+}
+
+.navbar-item-projects:hover {
+  color: #dfa873;
+  text-decoration: underline;
+}
+
+.navbar-item-projects:active {
+  color: #dffa73;
+  text-decoration: underline;
+}
+
+/* github */ 
+
+.navbar-item-github:link {
+  color: #c678dd;
+  text-decoration: none;
+}
+
+.navbar-item-github:visited {
+  color: #c678dd;
+  text-decoration: none;
+}
+
+.navbar-item-github:hover {
+  color: #d286eb;
+  text-decoration: underline;
+}
+
+.navbar-item-github:active {
+  color: #d286eb;
+  text-decoration: underline;
+}
+
+/* itch */ 
+
+.navbar-item-itch:link {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-itch:visited {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-itch:hover {
+  color: #ef7a80;
+  text-decoration: underline;
+}
+
+.navbar-item-itch:active {
+  color: #ef7a90;
+  text-decoration: underline;
+}
+
+/* twitter */ 
+
+.navbar-item-twitter:link {
+  text-decoration: none;
+}
+
+.navbar-item-twitter:visited {
+  text-decoration: none;
+}
+
+.navbar-item-twitter:hover {
+  text-decoration: underline;
+}
+
+.navbar-item-twitter:active {
+  text-decoration: underline;
+}
+
+/* mastodon */
+
+.navbar-item-mastodon:link {
+  color: #6a4ae0;
+  text-decoration: none;
+}
+
+.navbar-item-mastodon:visited {
+  color: #6a4ae0;
+  text-decoration: none;
+}
+
+.navbar-item-mastodon:hover {
+  color: #7a55e8;
+  text-decoration: underline;
+}
+
+.navbar-item-mastodon:active {
+  color: #7a55e8;
+  text-decoration: underline;
+}
+
+/* cohost */
+
+.navbar-item-cohost:link {
+  color: #b63b73;
+  text-decoration: none;
+}
+
+.navbar-item-cohost:visited {
+  color: #b63b73;
+  text-decoration: none;
+}
+
+.navbar-item-cohost:hover {
+  color: #c54a7f;
+  text-decoration: underline;
+}
+
+.navbar-item-cohost:active {
+  color: #c54a7f;
+  text-decoration: underline;
+}
+
+/* tumblr */
+
+.navbar-item-tumblr:link {
+  color: #00b8ff;
+  text-decoration: none;
+}
+
+.navbar-item-tumblr:visited {
+  color: #00b8ff;
+  text-decoration: none;
+}
+
+.navbar-item-tumblr:hover {
+  color: #00c5ff;
+  text-decoration: underline;
+}
+
+.navbar-item-tumblr:active {
+  color: #00c5ff;
+  text-decoration: underline;
+}
+
+/* contact */ 
+
+.navbar-item-contact:link {
+  color: #e5c07b;
+  text-decoration: none;
+}
+
+.navbar-item-contact:visited {
+  color: #e5c07b;
+  text-decoration: none;
+}
+
+.navbar-item-contact:hover {
+  color: #f2ce89;
+  text-decoration: underline;
+}
+
+.navbar-item-contact:active {
+  color: #f2ce89;
+  text-decoration: underline;
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..ba3d7d7
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,20 @@
+import './navbar.css';
+
+import { NavbarItem } from './navbar-item';
+
+export function Navbar() {
+  return (
+    <div class="navbar-container">
+      <div class="navbar">
+        <NavbarItem name="home" href="/">[Home]</NavbarItem>
+        <NavbarItem name="games" href="/games">[Games]</NavbarItem>
+        <NavbarItem name="projects" href="/projects">[Other Projects]</NavbarItem>
+        <NavbarItem name="github" href="https://github.com/Duckonaut">[GitHub]</NavbarItem>
+        <NavbarItem name="itch" href="https://duckonaut.itch.io/">[Itch.io]</NavbarItem>
+        <NavbarItem name="twitter" href="https://twitter.com/duckonaut">[Twitter]</NavbarItem>
+        <NavbarItem name="mastodon" href="https://mastodon.gamedev.place/@duckonaut" rel="me">[Mastodon]</NavbarItem>
+        <NavbarItem name="contact" href="/contact">[Contact]</NavbarItem>
+      </div>
+    </div>
+  );
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..cf6f743
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,121 @@
+:root {
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: var(--color-fg);
+  background-color: var(--color-bg);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  /* variables */
+  --color-bg: #161f30;
+  --color-fg: #a3b3d9;
+  --color-search-blue: #083C5A;
+  --color-white: #a3b3d9;
+  --color-gray: #647089;
+  --color-dark-gray: #3e4451;
+  --color-context: #6b737f;
+  --color-light-gray: #c8ccd4;
+  --color-tree-gray: #1b1f27;
+  --color-blue: #6080dd;
+  --color-vivid-blue: #61afef;
+  --color-dark-blue: #223E55;
+  --color-folder-blue: #61afef;
+  --color-light-blue: #a3b3d9;
+  --color-green: #449871;
+  --color-cyan: #56b6c2;
+  --color-light-green: #98c379;
+  --color-red: #c13251;
+  --color-orange: #c18a56;
+  --color-light-red: #e06c75;
+  --color-yellow: #e5c07b;
+  --color-purple: #604bd8;
+  --color-magenta: #b071fc;
+}
+
+a:link {
+  font-weight: 500;
+  color: #4fc1ff;
+  text-decoration: inherit;
+}
+
+a:visited {
+  color: #4fc1ff;
+}
+
+a:hover {
+  color: #60d2ff;
+}
+
+a:active {
+  color: #66d8ff;
+}
+
+
+body {
+  margin: 0;
+  /* display: flex; */
+  /* place-items: center; */
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+span {
+  display: inline;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+.hack {
+  font-family: Hack, monospace;
+  font-weight: 500;
+}
+
+.grow {
+    transition: all .2s ease-in-out;
+    transform: scale(1);
+}
+
+.grow:hover {
+  transition: all .2s ease-in-out;
+  transform: scale(1.1);
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..846cd1e
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,5 @@
+import { render } from 'preact'
+import { App } from './app.tsx'
+import './index.css'
+
+render(<App />, document.getElementById('app')!)
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>
+    </>
+  );
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />