log entries

fezcode · fezcode · commit 84f166146a7a · 2025-10-16T14:32:42.000+03:00
diff --git a/public/data/logs.json b/public/data/logs.json
@@ -5,47 +5,53 @@
     "author": "Douglas Adams",
     "date": "2025-10-15",
     "rating": 5,
-    "link": "https://www.goodreads.com/book/show/386162.The_Hitchhiker_s_Guide_to_the_Galaxy"
+    "link": "https://www.goodreads.com/book/show/386162.The_Hitchhiker_s_Guide_to_the_Galaxy",
+    "slug": "the-hitchhikers-guide-to-the-galaxy"
   },
   {
     "title": "The Matrix",
     "category": "Movie",
     "director": "The Wachowskis",
     "date": "2025-10-14",
     "rating": 5,
-    "link": "https://www.imdb.com/title/tt0133093/"
+    "link": "https://www.imdb.com/title/tt0133093/",
+    "slug": "the-matrix"
   },
   {
     "title": "The Legend of Zelda: Breath of the Wild",
     "category": "Game",
     "platform": "Nintendo Switch",
     "date": "2025-10-12",
     "rating": 5,
-    "link": "https://www.zelda.com/breath-of-the-wild/"
+    "link": "https://www.zelda.com/breath-of-the-wild/",
+    "slug": "the-legend-of-zelda-breath-of-the-wild"
   },
   {
     "title": "The Go Programming Language",
     "category": "Book",
     "author": "Alan A. A. Donovan & Brian W. Kernighan",
     "date": "2025-10-10",
     "rating": 5,
-    "link": "https://www.gopl.io/"
+    "link": "https://www.gopl.io/",
+    "slug": "the-go-programming-language"
   },
   {
     "title": "How to build a mechanical keyboard",
     "category": "Article",
     "source": "PC Gamer",
     "date": "2025-10-08",
     "rating": 4,
-    "link": "https://www.pcgamer.com/how-to-build-a-mechanical-keyboard/"
+    "link": "https://www.pcgamer.com/how-to-build-a-mechanical-keyboard/",
+    "slug": "how-to-build-a-mechanical-keyboard"
   },
   {
     "title": "In the Aeroplane Over the Sea",
     "category": "Music",
     "artist": "Neutral Milk Hotel",
     "date": "2025-10-06",
     "rating": 5,
-    "link": "https://www.youtube.com/watch?v=hD6_q5d4v-w"
+    "link": "https://www.youtube.com/watch?v=hD6_q5d4v-w",
+    "slug": "in-the-aeroplane-over-the-sea"
   },
   {
     "title": "Breaking Bad",
@@ -54,6 +60,7 @@
     "year": "2008-2013",
     "date": "2025-10-04",
     "rating": 5,
-    "link": "https://www.imdb.com/title/tt0903747/"
+    "link": "https://www.imdb.com/title/tt0903747/",
+    "slug": "breaking-bad"
   }
 ]
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/logs/breaking-bad.txt b/public/logs/breaking-bad.txt
@@ -0,0 +1,8 @@
+# Breaking Bad
+
+- **Category:** Series
+- **Creator:** Vince Gilligan
+- **Year:** 2008-2013
+- **Date:** 2025-10-04
+- **Rating:** 5/5
+- **Link:** [IMDb](https://www.imdb.com/title/tt0903747/)
diff --git a/public/logs/how-to-build-a-mechanical-keyboard.txt b/public/logs/how-to-build-a-mechanical-keyboard.txt
@@ -0,0 +1,7 @@
+# How to build a mechanical keyboard
+
+- **Category:** Article
+- **Source:** PC Gamer
+- **Date:** 2025-10-08
+- **Rating:** 4/5
+- **Link:** [PC Gamer](https://www.pcgamer.com/how-to-build-a-mechanical-keyboard/)
diff --git a/public/logs/in-the-aeroplane-over-the-sea.txt b/public/logs/in-the-aeroplane-over-the-sea.txt
@@ -0,0 +1,7 @@
+# In the Aeroplane Over the Sea
+
+- **Category:** Music
+- **Artist:** Neutral Milk Hotel
+- **Date:** 2025-10-06
+- **Rating:** 5/5
+- **Link:** [YouTube](https://www.youtube.com/watch?v=hD6_q5d4v-w)
diff --git a/public/logs/the-go-programming-language.txt b/public/logs/the-go-programming-language.txt
@@ -0,0 +1,7 @@
+# The Go Programming Language
+
+- **Category:** Book
+- **Author:** Alan A. A. Donovan & Brian W. Kernighan
+- **Date:** 2025-10-10
+- **Rating:** 5/5
+- **Link:** [gopl.io](https://www.gopl.io/)
diff --git a/public/logs/the-hitchhikers-guide-to-the-galaxy.txt b/public/logs/the-hitchhikers-guide-to-the-galaxy.txt
@@ -0,0 +1,7 @@
+# The Hitchhiker's Guide to the Galaxy
+
+- **Category:** Book
+- **Author:** Douglas Adams
+- **Date:** 2025-10-15
+- **Rating:** 5/5
+- **Link:** [Goodreads](https://www.goodreads.com/book/show/386162.The_Hitchhiker_s_Guide_to_the_Galaxy)
diff --git a/public/logs/the-legend-of-zelda-breath-of-the-wild.txt b/public/logs/the-legend-of-zelda-breath-of-the-wild.txt
@@ -0,0 +1,7 @@
+# The Legend of Zelda: Breath of the Wild
+
+- **Category:** Game
+- **Platform:** Nintendo Switch
+- **Date:** 2025-10-12
+- **Rating:** 5/5
+- **Link:** [Zelda.com](https://www.zelda.com/breath-of-the-wild/)
diff --git a/public/logs/the-matrix.txt b/public/logs/the-matrix.txt
@@ -0,0 +1,7 @@
+# The Matrix
+
+- **Category:** Movie
+- **Director:** The Wachowskis
+- **Date:** 2025-10-14
+- **Rating:** 5/5
+- **Link:** [IMDb](https://www.imdb.com/title/tt0133093/)
diff --git a/src/components/AnimatedRoutes.js b/src/components/AnimatedRoutes.js
@@ -8,6 +8,7 @@ import ProjectsPage from '../pages/ProjectsPage';
 import ProjectPage from '../pages/ProjectPage';
 import AboutPage from '../pages/AboutPage';
 import LogsPage from '../pages/LogsPage';
+import LogDetailPage from '../pages/LogDetailPage';
 import NotFoundPage from '../pages/NotFoundPage';
 
 const pageVariants = {
@@ -41,6 +42,7 @@ function AnimatedRoutes() {
         <Route path="/projects/:slug" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><ProjectPage /></motion.div>} />
         <Route path="/about" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><AboutPage /></motion.div>} />
         <Route path="/logs" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><LogsPage /></motion.div>} />
+        <Route path="/logs/:slug" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><LogDetailPage /></motion.div>} />
         <Route path="*" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><NotFoundPage /></motion.div>} />
       </Routes>
     </AnimatePresence>
diff --git a/src/components/LogCard.js b/src/components/LogCard.js
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { BookOpen, FilmStrip, GameController, Article, MusicNote, Television, ArrowRight } from '@phosphor-icons/react';
 
 const categoryIcons = {
@@ -37,54 +38,51 @@ const categoryStyles = {
 };
 
 const LogCard = ({ log, index, totalLogs }) => {
-  const { title, category, author, director, platform, source, artist, year, creator, link, date, rating } = log;
+  const { title, category, author, director, platform, source, artist, year, creator, link, date, rating, slug } = log;
 
   const cardStyle = categoryStyles[category] || {};
 
   return (
-    <div
-      className="group bg-transparent border rounded-lg shadow-lg p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-2xl overflow-hidden"
-      style={cardStyle}
-    >
-      <div className="absolute top-2 right-2 text-gray-400 text-lg font-semibold">#{totalLogs - index}</div>
+    <Link to={`/logs/${slug}`} className="block">
       <div
-        className="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-10 transition-opacity duration-500 ease-in-out"
-        style={{ backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)', backgroundSize: '10px 10px' }}
-      ></div>
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center">
-            <div className="text-2xl mr-4">{categoryIcons[category]}</div>
-            <h2 className={`text-xl font-normal group-hover:text-${category.toLowerCase()}`}>{title}</h2>
+        className="group bg-transparent border rounded-lg shadow-lg p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-2xl overflow-hidden h-full"
+        style={cardStyle}
+      >
+        <div className="absolute top-2 right-2 text-gray-400 text-lg font-semibold">#{totalLogs - index}</div>
+        <div
+          className="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-10 transition-opacity duration-500 ease-in-out"
+          style={{ backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)', backgroundSize: '10px 10px' }}
+        ></div>
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center">
+              <div className="text-2xl mr-4">{categoryIcons[category]}</div>
+              <h2 className={`text-xl font-normal group-hover:text-${category.toLowerCase()}`}>{title}</h2>
+            </div>
+          </div>
+          <div className="text-sm text-gray-400 mb-4">
+            {author && <div>Author: {author}</div>}
+            {director && <div>Director: {director}</div>}
+            {platform && <div>Platform: {platform}</div>}
+            {source && <div>Source: {source}</div>}
+            {artist && <div>Artist: {artist}</div>}
+            {year && <div>Year: {year}</div>}
+            {creator && <div>Creator: {creator}</div>}
           </div>
         </div>
-        <div className="text-sm text-gray-400 mb-4">
-          {author && <div>Author: {author}</div>}
-          {director && <div>Director: {director}</div>}
-          {platform && <div>Platform: {platform}</div>}
-          {source && <div>Source: {source}</div>}
-          {artist && <div>Artist: {artist}</div>}
-          {year && <div>Year: {year}</div>}
-          {creator && <div>Creator: {creator}</div>}
-        </div>
-      </div>
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          <div className="text-yellow-400">
-            {[...Array(rating)].map((_, i) => (
-              <span key={i}>★</span>
-            ))}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <div className="text-yellow-400">
+              {[...Array(rating)].map((_, i) => (
+                <span key={i}>★</span>
+              ))}
+            </div>
+            <div className="text-gray-400 ml-2">({rating}/5)</div>
           </div>
-          <div className="text-gray-400 ml-2">({rating}/5)</div>
+          <div className="text-sm text-blue-400">{date}</div>
         </div>
-        {link && (
-          <a href={link} target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:underline flex items-center">
-            Visit <ArrowRight className="ml-2" />
-          </a>
-        )}
-        <div className="text-sm text-blue-400">{date}</div>
       </div>
-    </div>
+    </Link>
   );
 };
 
diff --git a/src/components/LogMetadata.js b/src/components/LogMetadata.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import Label from './Label';
+
+const LogMetadata = ({ metadata }) => {
+  if (!metadata) {
+    return null;
+  }
+
+  return (
+    <aside className="sticky top-24">
+      <div className="p-6 bg-gray-800/50 rounded-lg border border-gray-700/50">
+        <h3 className="text-lg font-semibold text-gray-100 mb-4 border-b pb-2 border-gray-500">About Log</h3>
+        <div className="space-y-4">
+          <div>
+            <Label>Title</Label>
+            <p className="text-gray-300">{metadata.title}</p>
+          </div>
+          <div>
+            <Label>Category</Label>
+            <p className="text-gray-300">{metadata.category}</p>
+          </div>
+          {metadata.author && (
+            <div>
+              <Label>Author</Label>
+              <p className="text-gray-300">{metadata.author}</p>
+            </div>
+          )}
+          {metadata.director && (
+            <div>
+              <Label>Director</Label>
+              <p className="text-gray-300">{metadata.director}</p>
+            </div>
+          )}
+          {metadata.platform && (
+            <div>
+              <Label>Platform</Label>
+              <p className="text-gray-300">{metadata.platform}</p>
+            </div>
+          )}
+          {metadata.source && (
+            <div>
+              <Label>Source</Label>
+              <p className="text-gray-300">{metadata.source}</p>
+            </div>
+          )}
+          {metadata.artist && (
+            <div>
+              <Label>Artist</Label>
+              <p className="text-gray-300">{metadata.artist}</p>
+            </div>
+          )}
+          {metadata.year && (
+            <div>
+              <Label>Year</Label>
+              <p className="text-gray-300">{metadata.year}</p>
+            </div>
+          )}
+          {metadata.creator && (
+            <div>
+              <Label>Creator</Label>
+              <p className="text-gray-300">{metadata.creator}</p>
+            </div>
+          )}
+          <div>
+            <Label>Date</Label>
+            <p className="text-gray-300">{metadata.date}</p>
+          </div>
+          <div>
+            <Label>Rating</Label>
+            <p className="text-gray-300">{metadata.rating}/5</p>
+          </div>
+          {metadata.link && (
+            <div>
+              <Label>Link</Label>
+              <p className="text-gray-300"><a href={metadata.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View</a></p>
+            </div>
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+export default LogMetadata;
diff --git a/src/pages/LogDetailPage.js b/src/pages/LogDetailPage.js
