feat: images in logs cards.

fezcode · fezcode · commit acaa45dee0cb · 2025-12-12T11:28:48.000+03:00
diff --git a/public/logs/game/game.piml b/public/logs/game/game.piml
@@ -9,6 +9,7 @@
     (title) Age of Wonders 4
     (image) /images/defaults/age-of-wonders-4.webp
     (description) Age of Wonders 4 is a captivating 4X turn-based strategy game that immerses players in a vibrant high fantasy universe. As a ruler of a customizable fantasy realm, you embark on an epic journey to explore new magical realms, expand your empire, and engage in thrilling turn-based tactical combat.
+
   > (item)
     (category) Game
     (date) 2025-10-28
@@ -23,6 +24,7 @@
     (title) Vampire: The Masquerade - Bloodlines 2
     (image) /images/defaults/adrianna-geo-1rBg5YSi00c-unsplash.jpg
     (description) "Vampire: The Masquerade - Bloodlines 2" is an RPG praised for its good story, captivating environment, and well-developed characters, despite initial combat flaws and optimization issues. The reviewer highlights Ronan Summers' performance as Fabien and the intriguing plot twists, emphasizing the game's resilience in development and its overall engaging experience within the vampire lore.
+
   > (item)
     (category) Game
     (date) 2025-10-12
@@ -33,6 +35,7 @@
     (title) The Legend of Zelda: Breath of the Wild
     (image) /images/defaults/adrianna-geo-1rBg5YSi00c-unsplash.jpg
     (description) "The Legend of Zelda: Breath of the Wild" is a highly-rated Nintendo Switch game.
+
   > (item)
     (category) Game
     (date) 2025-09-20
@@ -46,6 +49,7 @@
     (title) OpenFront.io
     (image) /images/defaults/adrianna-geo-1rBg5YSi00c-unsplash.jpg
     (description) "OpenFront.io" is a web-based, open-source real-time strategy game where players expand influence by building structures, forming alliances, trading, and conquering opponents. Known for its engaging gameplay that often leads to late-game "armageddon" and expected betrayals, it's currently in alpha, inviting community contributions. It offers various customization options for private lobbies and is praised as a great strategy game comparable to AAA titles.
+
   > (item)
     (category) Game
     (date) 2025-01-13
@@ -56,6 +60,7 @@
     (title) Prey (2017)
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Prey (2017) is a first-person shooter action RPG by Arkane Studios, a spiritual successor to immersive sims. Set aboard the Talos I space station overrun by aliens (Typhon), players embody Morgan Yu, navigating a psychological sci-fi thriller with emphasis on player choice, emergent gameplay, and multiple endings.
+
   > (item)
     (category) Game
     (date) 2024-08-29
@@ -66,6 +71,7 @@
     (title) Max Payne Trilogy
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) The Max Payne Trilogy comprises three highly influential third-person shooter games, renowned for their neo-noir storytelling, 'bullet time' mechanic, and gritty atmosphere. It follows detective Max Payne through his brutal quest for revenge and later his struggles in São Paulo, blending innovative gameplay with a dark, psychological narrative.
+
   > (item)
     (category) Game
     (date) 2023-11-11
@@ -76,6 +82,7 @@
     (title) Resident Evil 4: Remake
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Resident Evil 4: Remake is a survival horror game by Capcom, a reimagined version of the 2005 original. It modernizes the classic with updated graphics, refined gameplay, and expanded storytelling, following Leon S. Kennedy's mission to rescue the President's daughter from a cult infected by Las Plagas.
+
   > (item)
     (category) Game
     (date) 2023-05-05
@@ -86,6 +93,7 @@
     (title) Fallout 4
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Fallout 4 is an action RPG by Bethesda Game Studios, set in a post-apocalyptic Boston after a nuclear war. Players emerge from Vault 111 to find their son, exploring a vast open world, building settlements, and engaging in real-time combat with the VATS system. It emphasizes exploration, crafting, and player choice.
+
   > (item)
     (category) Game
     (date) 2023-02-18
@@ -96,6 +104,7 @@
     (title) Dying Light
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Dying Light is a first-person survival horror game known for its parkour mechanics, intense zombie combat, and a dynamic day-night cycle. Players navigate an infected city, adapting strategies as gameplay drastically shifts between day and night.
+
   > (item)
     (category) Game
     (date) 2022-09-30
@@ -106,6 +115,7 @@
     (title) Kingdoms of Amalur: Reckoning
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Kingdoms of Amalur: Reckoning is a single-player action role-playing video game developed by 38 Studios and Big Huge Games. It features a high fantasy world, action-oriented combat, and extensive character customization. Players take on the role of the 'Fateless One,' a resurrected hero immune to destiny, tasked with stopping a plot to conquer the Faelands.
+
   > (item)
     (category) Game
     (date) 2022-05-04
@@ -116,6 +126,7 @@
     (title) Resident Evil 3: Remake
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Resident Evil 3: Remake is a survival horror game by Capcom, a reimagining of the 1999 original. It modernizes the game with updated graphics and controls, focusing on Jill Valentine's escape from Raccoon City while pursued by Nemesis. Praised for its action and visuals, it received some criticism for its shorter campaign and linearity.
+
   > (item)
     (category) Game
     (date) 2022-04-28
@@ -126,6 +137,7 @@
     (title) Nier Automata & Nier Replicant
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) The Nier series, particularly Nier Automata and Nier Replicant, are action role-playing games known for their profound philosophical narratives, unique gameplay structures, and emotionally impactful storytelling, often exploring themes of existentialism, humanity, and sacrifice. Both offer multiple playthroughs revealing different perspectives and true endings.
+
   > (item)
     (category) Game
     (date) 2021-08-20
@@ -136,6 +148,7 @@
     (title) The Outer Worlds
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) The Outer Worlds is a single-player action RPG by Obsidian Entertainment, set in a corporate-controlled future. Players awaken on a lost colony ship and become embroiled in a conspiracy, exploring planets, recruiting companions, and making choices that shape the Halcyon colony's fate. Known for its satirical humor and player agency.
+
   > (item)
     (category) Game
     (date) 2021-12-07
@@ -146,6 +159,7 @@
     (title) Loop Hero
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Loop Hero is a roguelike deck-building game where players indirectly control a hero traversing an endless loop. Strategic card placement to build terrain and spawn enemies is key to progression, resource gathering, and camp upgrades. The game features minimalist pixel art, deep strategy, and a cryptic narrative about rebuilding a world consumed by chaos.
+
   > (item)
     (category) Game
     (date) 2021-11-23
@@ -156,6 +170,7 @@
     (title) Deus Ex: Mankind Divided
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Deus Ex: Mankind Divided is a cyberpunk action role-playing game featuring augmented covert operative Adam Jensen in a world of 'mechanical apartheid.' It offers freedom in stealth, combat, and RPG elements, exploring themes of transhumanism and social inequality. Praised for immersive atmosphere and intricate level design.
+
   > (item)
     (category) Game
     (date) 2020-05-06
@@ -166,6 +181,7 @@
     (title) Resident Evil 2: Remake
     (image) /images/defaults/games/carl-raw-m3hn2Kn5Bns-unsplash.jpg
     (description) Resident Evil 2: Remake is a survival horror game by Capcom, a complete remake of the 1998 classic. It features stunning graphics, modernized controls, and a terrifying experience set in Raccoon City, with players navigating as Leon S. Kennedy or Claire Redfield while being hunted by the relentless Tyrant (Mr. X).
+
   > (item)
     (category) Game
     (date) 2016-12-09
@@ -176,6 +192,7 @@
     (title) XCOM: Enemy Unknown
     (image) /images/defaults/games/leo_visions-F_-Yrr_WzBY-unsplash.jpg
     (description) XCOM: Enemy Unknown is a turn-based tactical game by Firaxis Games, a reboot of the X-COM series. Players lead XCOM, an elite paramilitary organization, defending Earth from an alien invasion through strategic base management and intense turn-based combat with customizable soldiers and permadeath.
+
   > (item)
     (category) Game
     (date) 2016-06-28
@@ -186,6 +203,7 @@
     (title) Hotline Miami
     (image) /images/defaults/games/ryan-spencer-Um9AkOiIDcU-unsplash.jpg
     (description) Hotline Miami is a high-octane, top-down 2D action game renowned for its psychedelic visuals, pulsating synth-wave soundtrack, brutal difficulty, and disturbing narrative. Players engage in ultraviolent combat, clearing buildings of enemies while unraveling a surreal story exploring themes of violence and morality.
+
   > (item)
     (category) Game
     (date) 2015-09-21
diff --git a/public/logs/music/music.piml b/public/logs/music/music.piml
@@ -8,8 +8,8 @@
     (slug) johnny-ps-caddy
     (title) Johnny P's Caddy
     (album) Tana Talk 4
-    (image) /images/defaults/placeholder-log.svg
     (description) Benny the Butcher & J. Cole's "Johnny P's Caddy" is a lyrical masterclass from 'Tana Talk 4', featuring raw storytelling and J. Cole's acclaimed verse, produced by The Alchemist.
+
   > (item)
     (artist) EA Sports ft. Various Artist
     (category) Music
@@ -21,6 +21,7 @@
     (album) FIFA 99 (Soundtrack)
     (image) /images/defaults/fifa99.jpg
     (description) Songs from my favorite FIFA game, including Raincry by God Within, Rockafella Skank by Fatboy Slim, Gotta Learn by Danmass. Also a quick memorial, about John Motson... John Motson (1945-2023) was a renowned English football commentator for the BBC, easily recognizable by his distinctive voice and his iconic sheepskin coat. Over his extensive career, he commented on more than 2000 games, which included 10 FIFA World Cups and 29 FA Cup finals. He retired from the BBC in 2018 and was honored with an OBE in 2001 for his outstanding services to sports broadcasting.
+
   > (item)
     (artist) Kärtsy Hatakka & Kimmo Kajasto
     (category) Music
@@ -32,6 +33,7 @@
     (album) Max Payne 2: The Fall of Max Payne (Soundtrack)
     (image) /images/defaults/marcela-laskoski-YrtFlrLo2DQ-unsplash.jpg
     (description) A powerful theme song from Max Payne 2 by Finnish composers Kärtsy Hatakka and Kimmo Kajasto. It masterfully evokes the game's dark, noir atmosphere with its melancholic cello, haunting piano, and electronic elements, creating a lasting sense of dread and despair.
+
   > (item)
     (artist) Dhanush
     (category) Music
@@ -44,6 +46,7 @@
     (releaseDate) 2011-11-16
     (image) /images/defaults/adrianna-geo-1rBg5YSi00c-unsplash.jpg
     (description) "Why This Kolaveri Di" is a Tamil-English (Tanglish) song by Dhanush about a heartbroken man's unrequited love. It became an internet sensation due2 to its catchy tune, relatable lyrics, and viral spread through social media, with Dhanush's unpolished vocals adding to its charm.
+
   > (item)
     (artist) Yoo Se Yoon
     (category) Music
@@ -56,6 +59,7 @@
     (releaseDate) 2025-08-29
     (image) /images/logs/dont-skip-the-interlude.png
     (description) "Don't Skip the Interlude" by Yoo Se Yoon is a comedic musical track that cleverly contrasts heartfelt lyrics about love with a deliberately long and humorous instrumental interlude. Known for its comedic intent and visual gags during performances, the song's prolonged interlude is central to its entertaining and funny experience.
+
   > (item)
     (artist) frederic
     (category) Music
@@ -68,6 +72,7 @@
     (releaseDate) 2014-09-23
     (image) /images/defaults/adrianna-geo-1rBg5YSi00c-unsplash.jpg
     (description) "Oddloop" is a popular song by Japanese rock band frederic, formed by twin brothers Kenji and Koji Mihara. Known for its upbeat, disco-funk inspired style and a music video with over 100 million views, the song's title combines "dance" (odoru) with "odd loop." It was released as an EP in 2014, marking their major debut, and was featured as the ending theme for the *Yamada-kun and the Seven Witches* OVA.
+
   > (item)
     (artist) Morcheeba
     (category) Music
@@ -78,6 +83,7 @@
     (title) Easier Said Than Done
     (image) /images/defaults/adrianna-geo-1rBg5YSi00c-unsplash.jpg
     (description) "Easier Said Than Done" is a song by British electronic band Morcheeba, featuring the return of lead singer Skye Edwards. From their commercially successful album "Blood Like Lemonade," the track explores the common human struggle of knowing what to do but finding it difficult to act upon it.
+
   > (item)
     (artist) Neutral Milk Hotel
     (category) Music
@@ -88,6 +94,7 @@
     (title) In the Aeroplane Over the Sea
     (image) /images/defaults/adrianna-geo-1rBg5YSi00c-unsplash.jpg
     (description) "In the Aeroplane Over the Sea" is a highly-rated song by Neutral Milk Hotel.
+
   > (item)
     (artist) Special Ed
     (category) Music
@@ -99,6 +106,7 @@
     (album) Revelations
     (image) /images/defaults/marcela-laskoski-YrtFlrLo2DQ-unsplash.jpg
     (description) "Neva Go Back" by Special Ed is a hip-hop track from the album "Revelations," known for its evocative lyrics and classic East Coast sound. The song reflects on past experiences and personal growth, urging listeners to move forward and not dwell on previous mistakes or hardships.
+
   > (item)
     (artist) De La Soul
     (category) Music
diff --git a/src/components/LogCard.js b/src/components/LogCard.js
@@ -59,6 +59,7 @@ const LogCard = ({ log, index, totalLogs }) => {
     updated,
     album,
     releaseDate,
+    image,
   } = log;
 
   const accentColor = categoryColors[category] || colors.primary[400];
@@ -115,6 +116,12 @@ const LogCard = ({ log, index, totalLogs }) => {
           }}
         ></div>
 
+        {image && (
+          <div className="absolute bottom-0 right-0 w-28 h-28 overflow-hidden translate-x-4 translate-y-5 rotate-12 z-10 opacity-60 border-0 rounded-xl">
+            <img src={image} alt="log overlay" className="w-full h-full object-cover opacity-30 grayscale" />
+          </div>
+        )}
+
         <div className="p-5 flex flex-col h-full ml-1">
           {' '}
           {/* ml-1 to account for border */}
