From dfa93f039a8191bd88d6f39f75730803e4bfba8d Mon Sep 17 00:00:00 2001 From: Stanisław Zagórowski Date: Wed, 30 Aug 2023 21:58:20 +0200 Subject: front: pull project data from JSON --- front/src/pages/games.tsx | 412 +++---------------------------------------- front/src/pages/projects.css | 137 -------------- front/src/pages/projects.tsx | 41 +---- 3 files changed, 32 insertions(+), 558 deletions(-) delete mode 100644 front/src/pages/projects.css (limited to 'front/src/pages') 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 ( - <> -
-
- Game Projects -
-
- my game projects, mostly from game jams -
-
-
-
-
Mr. Final Boss -
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- - -
-
-
-
- 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! -
- Game made in 72 hours for Ludum Dare 50, with - the theme "Delay the Inevitable". -
-
- - - - - - - -
+const projects: ProjectDescriptor[] = projectsJson as ProjectDescriptor[]; -
-
BUMBLING BUILDERS
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- - -
-
-
-
- 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. -
- Game made in 72 hours for Ludum Dare 49, with - the theme "Unstable". -
-
- - - - - - -
- -
-
Dicemask -
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- -
-
-
-
- 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. -
- Game made in under 50 hours for GMTK Game Jam 2022, - with - the theme "Roll of the dice". -
-
- - - -
- -
-
WUZMAG -
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- - -
-
-
-
- Turn based arcade survival game. - Survive as long as you can by freezing enemies and using them to defeat more enemies. -
- Game made in roughly 8 hours for a private game jam with friends. -
-
- - - - - - -
- -
-
Miro -
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- -
-
-
-
- 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. -
- Game made in roughly 8 hours for a private game jam with friends. -
-
- - - - - - -
- -
-
Thermal Trail
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- - -
-
-
-
- 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. -
- Game made in a week for Newgrounds July - Jam 2021, with the theme "Egg". -
-
- - - - - - - -
- -
-
Greachers
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- -
-
-
-
- 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. -
- Game made in 2 weeks for LOWREZJAM 2021, with the - theme "Minibeasts". -
-
- - - - - - -
- -
-
Third Party
-
-
-
Made using
-
- -
-
-
-
Available on
-
- - -
-
-
-
- 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. -
- Game made in 72 hours for Ludum Dare 48, with - the theme "Deeper and deeper". -
-
- - - - - - - -
-
-
Your Left
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- -
-
-
-
- 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. -
- Game made in 8 hours for Jam Jam, a local - in-person event organized by KNTG Polygon, with - the theme "One Click". -
-
- - - - - - -
-
-
Riff n' Rage
-
-
-
Made using
-
- - -
-
-
-
Available on
-
- -
-
-
-
- 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. -
- Game made in 48 hours for a special solo game jam among friends. My theme was "Power at a price". -
-
- - - - - -
-
-
Survive the Temple -
-
-
-
Made using
-
- -
-
-
-
Available on
-
- - -
-
-
-
- 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! -
- Game made in 48 hours for Ludum Dare Compo 47 - with the theme "Stuck in a loop". -
-
- - - - -
-
- - ); +export default function Games() { + return ( + <> +
+
+ Game Projects +
+
+ my game projects, mostly from game jams +
+
+ { + projects.map((project) => ( + Project(project) + )) + } +
+
+ + ); } diff --git a/front/src/pages/projects.css b/front/src/pages/projects.css deleted file mode 100644 index f9cc07f..0000000 --- a/front/src/pages/projects.css +++ /dev/null @@ -1,137 +0,0 @@ -.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/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() {
- -
-
Spirit Mod
-
-
-
Made using
-
- -
-
-
-
Available on
-
- -
-
-
-
- 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. -
- I had the privilege of contributing some system code, mainly the "Stargoop" system. -
-
- - - - - -
+ { + projects.map((project) => ( + Project(project) + )) + }
); -- cgit v1.3.1