5 files changed, 404 insertions, 0 deletions
diff --git a/front/src/components/carousel.css b/front/src/components/carousel.css
new file mode 100644
index 0000000..f311805
--- /dev/null
+++ b/front/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/front/src/components/carousel.tsx b/front/src/components/carousel.tsx
new file mode 100644
index 0000000..af9279b
--- /dev/null
+++ b/front/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/front/src/components/navbar-item.tsx b/front/src/components/navbar-item.tsx
new file mode 100644
index 0000000..c2f2306
--- /dev/null
+++ b/front/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/front/src/components/navbar.css b/front/src/components/navbar.css
new file mode 100644
index 0000000..466fdd6
--- /dev/null
+++ b/front/src/components/navbar.css
@@ -0,0 +1,277 @@
+/* on big screens, navbar is fixed to the top of the screen */
+.navbar-container {
+  position: fixed;
+  background-color: var(--color-bg);
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+  margin: auto;
+}
+
+/* on smaller ones, make it behave as a normal element laid out at the top of the page */
+@media (max-width: 1150px) {
+  .navbar-container {
+    position: static;
+  }
+}
+
+.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/front/src/components/navbar.tsx b/front/src/components/navbar.tsx
new file mode 100644
index 0000000..ba3d7d7
--- /dev/null
+++ b/front/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>
+  );
+}