Add projects

(boom!)

src/components/content/projects.astro

@@ -1,10 +1,44 @@
-<div>
-    <h1>Random Project</h1>
-    <p>Coming soon...</p>
+---
+import ProjectPreview from "../project-preview.astro";
+
+import projects from "../../data/projects";
+const projects_sorted = projects.sort(() => Math.random() - 0.5);
 
-    <h1>Highlights</h1>
-    <p>Coming soon...</p>
+const random_project = projects[Math.floor(Math.random() * projects.length)];
+---
+
+<div>
+    <div id="random-project">
+        <h1>Random Project</h1>
+        <p>This project was picked just for you to check out!</p>
+        <ProjectPreview project={random_project} />
+    </div>
 
-    <h1>Projects</h1>
-    <p>Coming soon...</p>
+    <h1>All Projects</h1>
+    <div class="projects">
+        {
+            projects_sorted.map((project) => (
+                <ProjectPreview project={project} />
+            ))
+        }
+    </div>
 </div>
+
+<style>
+    #random-project p {
+        margin-bottom: 0.8rem;
+    }
+
+    .projects {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+        gap: 1rem;
+        margin-top: 1rem;
+    }
+
+    @media (max-width: 500px) {
+        .projects {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>

src/components/project-preview.astro

@@ -0,0 +1,80 @@
+---
+const { project } = Astro.props;
+---
+
+<figure class="container">
+    <a href={project.website ?? project.github ?? "#"} target="_blank">
+        <div class="info">
+            <img src={project.image} alt="" />
+            <figcaption>
+                <h3>{project.title}</h3>
+                <p>{project.description}</p>
+            </figcaption>
+        </div>
+    </a>
+    <div class="links">
+        {project.github && <a href={project.github} target="_blank"><i class="fab fa-github"></i></a>}
+        {project.website && <a href={project.website} target="_blank"><i class="fas fa-link"></i></a>}
+    </div>
+</figure>
+
+<style>
+    figure {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 20px;
+        align-items: center;
+        padding: 0.7rem 1.3rem 0.7rem 1rem;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    .info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.9rem;
+    }
+
+    img {
+        max-height: 70px;
+        max-width: 100px;
+    }
+
+    img[src=""] {
+        display: none;
+    }
+
+    figcaption {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .links {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+    }
+
+    i {
+        font-size: 1.5rem;
+    }
+
+    @media (max-width: 500px) {
+        figure {
+            flex-direction: column;
+            gap: 1rem;
+            text-align: center;
+        }
+
+        .info {
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+        }
+    }
+</style>

src/data/projects.js

@@ -0,0 +1,141 @@
+export default [
+    {
+        title: "kubgus.github.io",
+        description: "My personal portfolio website made with Astro.",
+        website: "https://gustafik.com/",
+        github: "https://github.com/kubgus/kubgus.github.io",
+        image: "images/thumbnails/kubgus.github.io.png",
+    },
+    {
+        title: "heystack",
+        description: "Social media platform made with Nuxt.js and Supabase.",
+        website: "https://heystak.netlify.app/",
+        github: "https://github.com/kubgus/heystack",
+    },
+    {
+        title: "bloodline",
+        description: "SDL2 game engine written in C#.",
+        github: "https://github.com/kubgus/bloodline",
+        image: "images/thumbnails/bloodline.png",
+    },
+    {
+        title: "omniroom",
+        description: "Online social game utilizing Socket.io and Express.js.",
+        website: "https://play.gustafik.com/",
+        github: "https://github.com/kubgus/omniroom",
+        image: "images/thumbnails/omniroom.png",
+    },
+    {
+        title: "filefly",
+        description: "Direct file sharing platform made with Express.js.",
+        github: "https://github.com/kubgus/filefly",
+        website: "https://host.gustafik.com/",
+        image: "images/thumbnails/filefly.png",
+    },
+    {
+        title: "super tic-tac-toe",
+        description: "Tic-Tac-Toe game with a bigger board made with Vanilla JavaScript.",
+        github: "https://github.com/kubgus/super-tic-tac-toe",
+        website: "https://gustafik.com/super-tic-tac-toe",
+        image: "images/thumbnails/super-tic-tac-toe.png",
+    },
+    {
+        title: "tick oat two",
+        description: "Tic-Tac-Toe game with a twist made with Vanilla JavaScript.",
+        github: "https://github.com/kubgus/tick-oat-two",
+        website: "https://gustafik.com/tick-oat-two",
+        image: "images/thumbnails/tick-oat-two.png",
+    },
+    {
+        title: "magnet.io",
+        description: "Fake .io game made for a collaborative game jam in Unity.",
+        github: "https://github.com/kubgus/magnet.io",
+        website: "https://laiq.itch.io/magnet-io",
+    },
+    {
+        title: "copycat",
+        description: "Relaxing puzzle game made for a collaborative game jam in Unity.",
+        website: "https://laiq.itch.io/copycat",
+        image: "images/thumbnails/copycat.png",
+    },
+    {
+        title: "discord tts bot",
+        description: "Discord bot for text-to-speech made with Node.js and Discord.js.",
+        github: "https://github.com/kubgus/discord-tts-bot",
+    },
+    {
+        title: "flashcards",
+        description: "Flashcards app made with Vanilla JavaScript.",
+        github: "https://github.com/kubgus/flashcards",
+        website: "https://gustafik.com/flashcards",
+        image: "images/thumbnails/flashcards.png",
+    },
+    {
+        title: "stratus",
+        description: "Port forwarding service made with Express.js and Supabase.",
+        github: "https://github.com/kubgus/stratus",
+        website: "https://mrkd.dev/",
+    },
+    {
+        title: "stratus cli",
+        description: "CLI for stratus made with Node.js.",
+        github: "https://github.com/kubgus/stratus-cli",
+    },
+    {
+        title: "untitled-game-engine",
+        description: "SDL2 game engine made with C++.",
+        github: "https://github.com/kubgus/untitled-game-engine",
+    },
+    {
+        title: "slidar",
+        description: "Slideshow presentation tool for markdown made with Node.js.",
+        github: "https://github.com/kubgus/slidar",
+    },
+    {
+        title: "texemble",
+        description: "Terminal game engine made with C++.",
+        github: "https://github.com/kubgus/texemble",
+    },
+    {
+        title: "kudo",
+        description: "My first 2D game engine made with C#.",
+        github: "https://github.com/kubgus/kudo",
+        image: "images/thumbnails/kudo.png",
+    },
+    {
+        title: "frisk",
+        description: "Advanced ls tool for Linux made with C++.",
+        github: "https://github.com/kubgus/frisk",
+    },
+    {
+        title: "hotpot",
+        description: "Hot reload tool for any language made with C++.",
+        github: "https://github.com/kubgus/hotpot",
+    },
+    {
+        title: "c++ cheatsheet",
+        description: "Collection of advanced C++ concepts and snippets.",
+        github: "https://github.com/kubgus/cpp-cheatsheet",
+    },
+    {
+        title: "overwork",
+        description: "Chrome extension that reminds you to take breaks.",
+        github: "https://github.com/kubgus/overwork",
+        website: "https://chromewebstore.google.com/detail/overwork/jhpbphonlhcgjieobohcpamgejbbkkcj",
+        image: "images/thumbnails/overwork.png",
+    },
+    {
+        title: "faux",
+        description: "Chrome extension that generates fake user data and working temporary emails.",
+        github: "https://github.com/kubgus/faux",
+        website: "https://chromewebstore.google.com/detail/faux/kffcggckolacihcclnifefneifapjcdl",
+        image: "images/thumbnails/faux.png",
+    },
+    {
+        title: "instant",
+        description: "Secure chatboard website made with Express.js and Socket.io.",
+        github: "https://github.com/kubgus/instant",
+        website: "https://instant.gustafik.com/",
+        image: "images/thumbnails/instant.png",
+    },
+];