diff options
Diffstat (limited to 'front/src')
| -rw-r--r-- | front/src/components/project.css (renamed from front/src/pages/projects.css) | 0 | ||||
| -rw-r--r-- | front/src/components/project.tsx | 93 | ||||
| -rw-r--r-- | front/src/data/games.json | 207 | ||||
| -rw-r--r-- | front/src/data/projects.json | 22 | ||||
| -rw-r--r-- | front/src/pages/games.tsx | 410 | ||||
| -rw-r--r-- | front/src/pages/projects.tsx | 41 |
6 files changed, 353 insertions, 420 deletions
diff --git a/front/src/pages/projects.css b/front/src/components/project.css index f9cc07f..f9cc07f 100644 --- a/front/src/pages/projects.css +++ b/front/src/components/project.css diff --git a/front/src/components/project.tsx b/front/src/components/project.tsx new file mode 100644 index 0000000..cb9496d --- /dev/null +++ b/front/src/components/project.tsx @@ -0,0 +1,93 @@ +import Carousel from "./carousel"; +import './project.css'; + +enum ProjectType { + GAME = "game", + PROJECT = "project", +} + +export enum ProjectTech { + CSHARP = "csharp", + RUST = "rust", + C = "c", + CPP = "cpp", + JAVASCRIPT = "javascript", + TYPESCRIPT = "typescript", + HTML = "html", + CSS = "css", + + PREACT = "preact", + UNITY = "unity", + GODOT = "godot", + MONOGAME = "monogame", +} + +export enum ProjectTarget { + WEB = "html5", + WINDOWS = "windows", + LINUX = "linux", + MACOS = "macos", + ANDROID = "android", + HYPRLAND = "hyprland", +} + +export interface ProjectDescriptor { + name: string; + name_normalized: string; + type: ProjectType; + link: string; + tech: ProjectTech[]; + targets: ProjectTarget[]; + images: string[]; + description: string; +} + +function getProjectImageLink(project: ProjectDescriptor, image: string) { + return `assets/${project.type}s/${project.name_normalized}/${image}`; +} + +function getProjectTechIconLink(tech: ProjectTech) { + return `assets/images/${tech}.png`; +} + +function getProjectTargetIconLink(target: ProjectTarget) { + return `assets/images/${target}.png`; +} + +export function Project(props: ProjectDescriptor) { + return ( + <div class="project"> + <div class="project-title"><a href={props.link}>{props.name}</a></div> + <div class="project-info"> + <div class="icon-row"> + <div class="icon-text">Made using</div> + <div class="icon-container"> + {props.tech.map((tech) => ( + <img class="grow icon" src={getProjectTechIconLink(tech)} /> + ))} + </div> + </div> + <div class="icon-row"> + <div class="icon-text">Available on</div> + <div class="icon-container"> + {props.targets.map((target) => ( + <img class="grow icon" src={getProjectTargetIconLink(target)} /> + ))} + </div> + </div> + <hr /> + <div class="project-description"> + { + // use description as html + <div dangerouslySetInnerHTML={{ __html: props.description }} /> + } + </div> + </div> + <Carousel> + {props.images.map((image) => ( + <img class="project-image" src={getProjectImageLink(props, image)} /> + ))} + </Carousel> + </div> + ); +} diff --git a/front/src/data/games.json b/front/src/data/games.json new file mode 100644 index 0000000..fddbe35 --- /dev/null +++ b/front/src/data/games.json @@ -0,0 +1,207 @@ +[ + { + "name": "Mr Final Boss", + "name_normalized": "mr-final-boss", + "type": "game", + "link": "https://jellingfish-games.itch.io/mr-final-boss", + "tech": [ + "unity", + "csharp" + ], + "targets": [ + "windows", + "html5" + ], + "images": [ + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png", + "screenshot4.png" + ], + "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\"." + }, + { + "name": "BUMBLING BUILDERS", + "name_normalized": "bumbling-builders", + "type": "game", + "link": "https://oroshibu.itch.io/bumbling-builders", + "tech": [ + "unity", + "csharp" + ], + "targets": [ + "windows", + "html5" + ], + "images": [ + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + ], + "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\"." + }, + { + "name": "WUZMAG", + "name_normalized": "wuzmag", + "type": "game", + "link": "https://duckonaut.itch.io/wuzmag", + "tech": [ + "unity", + "csharp" + ], + "targets": [ + "windows", + "html5" + ], + "images": [ + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + ], + "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." + }, + { + "name": "Miro", + "name_normalized": "miro", + "type": "game", + "link": "https://duckonaut.itch.io/miro", + "tech": [ + "monogame", + "csharp" + ], + "targets": [ + "windows" + ], + "images": [ + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + ], + "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." + }, + { + "name": "Thermal Trail", + "name_normalized": "thermal-trail", + "type": "game", + "link": "https://duckonaut.itch.io/thermal-trail", + "tech": [ + "godot", + "csharp" + ], + "targets": [ + "windows", + "html5" + ], + "images": [ + "gameart.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png", + "screenshot4.png" + ], + "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\"." + }, + { + "name": "Greachers", + "name_normalized": "greachers", + "type": "game", + "link": "https://duckonaut.itch.io/greachers", + "tech": [ + "monogame", + "csharp" + ], + "targets": [ + "windows" + ], + "images": [ + "title.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png", + "screenshot4.png" + ], + "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\"." + }, + { + "name": "Third Party", + "name_normalized": "third-party", + "type": "game", + "link": "https://duckonaut.itch.io/third-party", + "tech": [ + "godot" + ], + "targets": [ + "windows", + "html5" + ], + "images": [ + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png", + "screenshot4.png" + ], + "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\"." + }, + { + "name": "Your Left", + "name_normalized": "your-left", + "type": "game", + "link": "https://xatriv.itch.io/your-left", + "tech": [ + "unity", + "csharp" + ], + "targets": [ + "windows" + ], + "images": [ + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + ], + "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\"." + }, + { + "name": "Riff n' Rage", + "name_normalized": "riff-n-rage", + "type": "game", + "link": "https://duckonaut.itch.io/riff-n-rage", + "tech": [ + "monogame", + "csharp" + ], + "targets": [ + "windows" + ], + "images": [ + "thumbnail.png", + "screenshot1.png", + "screenshot2.png" + ], + "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\"." + }, + { + "name": "Survive the Temple", + "name_normalized": "survive-the-temple", + "type": "game", + "link": "https://duckonaut.itch.io/survive-the-temple", + "tech": [ + "godot" + ], + "targets": [ + "windows", + "html5" + ], + "images": [ + "cover.png", + "screenshot.png" + ], + "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\"." + } +] diff --git a/front/src/data/projects.json b/front/src/data/projects.json new file mode 100644 index 0000000..0a63c62 --- /dev/null +++ b/front/src/data/projects.json @@ -0,0 +1,22 @@ +[ + { + "name": "Spirit Mod", + "name_normalized": "spirit-mod", + "type": "project", + "link": "https://spiritmod.fandom.com/wiki/Spirit_Mod_Wiki", + "tech": [ + "csharp" + ], + "targets": [ + "windows", + "linux", + "macos" + ], + "images": [ + "thumbnail.png", + "demo1.gif", + "demo2.gif" + ], + "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." + } +] diff --git a/front/src/pages/games.tsx b/front/src/pages/games.tsx index 314813d..2ff4eff 100644 --- a/front/src/pages/games.tsx +++ b/front/src/pages/games.tsx @@ -1,393 +1,27 @@ -import Carousel from '../components/carousel'; -import './projects.css'; +import { Project, ProjectDescriptor } from '../components/project'; +import projectsJson from '../data/games.json'; -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> +const projects: ProjectDescriptor[] = projectsJson as ProjectDescriptor[]; - <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". +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 class="projects-container"> + { + projects.map((project) => ( + Project(project) + )) + } + </div> </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/front/src/pages/projects.tsx b/front/src/pages/projects.tsx index 4e64704..ed68529 100644 --- a/front/src/pages/projects.tsx +++ b/front/src/pages/projects.tsx @@ -1,5 +1,7 @@ -import './projects.css'; -import Carousel from '../components/carousel'; +import { Project, ProjectDescriptor } from '../components/project'; +import projectsJson from '../data/projects.json'; + +const projects: ProjectDescriptor[] = projectsJson as ProjectDescriptor[]; export default function Projects() { return ( @@ -14,36 +16,11 @@ export default function Projects() { </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> + { + projects.map((project) => ( + Project(project) + )) + } </div> </> ); |