Skip to content

Commit f64f0d6

Browse files
fezcodefezcode
committed
Logs page.
1 parent 6d51b1c commit f64f0d6

File tree

6 files changed

+219
-0
lines changed

6 files changed

+219
-0
lines changed

‎public/data/logs.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
[
2+
{
3+
"title": "The Hitchhiker's Guide to the Galaxy",
4+
"category": "Book",
5+
"author": "Douglas Adams",
6+
"date": "2025-10-15",
7+
"rating": 5,
8+
"link": "https://www.goodreads.com/book/show/386162.The_Hitchhiker_s_Guide_to_the_Galaxy"
9+
},
10+
{
11+
"title": "The Matrix",
12+
"category": "Movie",
13+
"director": "The Wachowskis",
14+
"date": "2025-10-14",
15+
"rating": 5,
16+
"link": "https://www.imdb.com/title/tt0133093/"
17+
},
18+
{
19+
"title": "The Legend of Zelda: Breath of the Wild",
20+
"category": "Game",
21+
"platform": "Nintendo Switch",
22+
"date": "2025-10-12",
23+
"rating": 5,
24+
"link": "https://www.zelda.com/breath-of-the-wild/"
25+
},
26+
{
27+
"title": "The Go Programming Language",
28+
"category": "Book",
29+
"author": "Alan A. A. Donovan & Brian W. Kernighan",
30+
"date": "2025-10-10",
31+
"rating": 5,
32+
"link": "https://www.gopl.io/"
33+
},
34+
{
35+
"title": "How to build a mechanical keyboard",
36+
"category": "Article",
37+
"source": "PC Gamer",
38+
"date": "2025-10-08",
39+
"rating": 4,
40+
"link": "https://www.pcgamer.com/how-to-build-a-mechanical-keyboard/"
41+
},
42+
{
43+
"title": "In the Aeroplane Over the Sea",
44+
"category": "Music",
45+
"artist": "Neutral Milk Hotel",
46+
"date": "2025-10-06",
47+
"rating": 5,
48+
"link": "https://www.youtube.com/watch?v=hD6_q5d4v-w"
49+
}
50+
]

‎src/components/AnimatedRoutes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import BlogPostPage from '../pages/BlogPostPage';
77
import ProjectsPage from '../pages/ProjectsPage';
88
import ProjectPage from '../pages/ProjectPage';
99
import AboutPage from '../pages/AboutPage';
10+
import LogsPage from '../pages/LogsPage';
1011
import NotFoundPage from '../pages/NotFoundPage';
1112

1213
const pageVariants = {
@@ -39,6 +40,7 @@ function AnimatedRoutes() {
3940
<Route path="/projects" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><ProjectsPage /></motion.div>} />
4041
<Route path="/projects/:slug" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><ProjectPage /></motion.div>} />
4142
<Route path="/about" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><AboutPage /></motion.div>} />
43+
<Route path="/logs" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><LogsPage /></motion.div>} />
4244
<Route path="*" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><NotFoundPage /></motion.div>} />
4345
</Routes>
4446
</AnimatePresence>

‎src/components/ColorLegends.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
3+
const categoryStyles = {
4+
Book: {
5+
backgroundColor: 'rgba(59, 130, 246, 0.1)',
6+
borderColor: 'rgba(59, 130, 246, 0.5)',
7+
},
8+
Movie: {
9+
backgroundColor: 'rgba(239, 68, 68, 0.1)',
10+
borderColor: 'rgba(239, 68, 68, 0.5)',
11+
},
12+
Game: {
13+
backgroundColor: 'rgba(34, 197, 94, 0.1)',
14+
borderColor: 'rgba(34, 197, 94, 0.5)',
15+
},
16+
Article: {
17+
backgroundColor: 'rgba(249, 115, 22, 0.1)',
18+
borderColor: 'rgba(249, 115, 22, 0.5)',
19+
},
20+
Music: {
21+
backgroundColor: 'rgba(168, 85, 247, 0.1)',
22+
borderColor: 'rgba(168, 85, 247, 0.5)',
23+
},
24+
};
25+
26+
const ColorLegends = () => {
27+
return (
28+
<div className="flex justify-center mt-8">
29+
<div className="flex items-center space-x-4">
30+
{Object.keys(categoryStyles).map((category) => (
31+
<div key={category} className="flex items-center">
32+
<div
33+
className="w-4 h-4 rounded-full mr-2"
34+
style={{ backgroundColor: categoryStyles[category].backgroundColor, border: `1px solid ${categoryStyles[category].borderColor}` }}
35+
></div>
36+
<span>{category}</span>
37+
</div>
38+
))}
39+
</div>
40+
</div>
41+
);
42+
};
43+
44+
export default ColorLegends;

‎src/components/LogCard.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import { FaBook, FaGamepad, FaFilm, FaNewspaper, FaArrowRight, FaMusic } from 'react-icons/fa';
3+
4+
const categoryIcons = {
5+
Book: <FaBook />,
6+
Game: <FaGamepad />,
7+
Movie: <FaFilm />,
8+
Article: <FaNewspaper />,
9+
Music: <FaMusic />,
10+
};
11+
12+
const categoryStyles = {
13+
Book: {
14+
backgroundColor: 'rgba(59, 130, 246, 0.1)',
15+
borderColor: 'rgba(59, 130, 246, 0.5)',
16+
},
17+
Movie: {
18+
backgroundColor: 'rgba(239, 68, 68, 0.1)',
19+
borderColor: 'rgba(239, 68, 68, 0.5)',
20+
},
21+
Game: {
22+
backgroundColor: 'rgba(34, 197, 94, 0.1)',
23+
borderColor: 'rgba(34, 197, 94, 0.5)',
24+
},
25+
Article: {
26+
backgroundColor: 'rgba(249, 115, 22, 0.1)',
27+
borderColor: 'rgba(249, 115, 22, 0.5)',
28+
},
29+
Music: {
30+
backgroundColor: 'rgba(168, 85, 247, 0.1)',
31+
borderColor: 'rgba(168, 85, 247, 0.5)',
32+
},
33+
};
34+
35+
const LogCard = ({ log }) => {
36+
const { title, category, author, director, platform, source, artist, link, date, rating } = log;
37+
38+
const cardStyle = categoryStyles[category] || {};
39+
40+
return (
41+
<div
42+
className="bg-transparent border rounded-lg shadow-lg p-6 flex flex-col justify-between"
43+
style={cardStyle}
44+
>
45+
<div>
46+
<div className="flex items-center justify-between mb-4">
47+
<div className="flex items-center">
48+
<div className="text-2xl mr-4">{categoryIcons[category]}</div>
49+
<h2 className="text-xl font-bold">{title}</h2>
50+
</div>
51+
</div>
52+
<div className="text-sm text-gray-400 mb-4">
53+
{author && <div>Author: {author}</div>}
54+
{director && <div>Director: {director}</div>}
55+
{platform && <div>Platform: {platform}</div>}
56+
{source && <div>Source: {source}</div>}
57+
{artist && <div>Artist: {artist}</div>}
58+
</div>
59+
</div>
60+
<div className="flex items-center justify-between">
61+
<div className="flex items-center">
62+
<div className="text-yellow-400">
63+
{[...Array(rating)].map((_, i) => (
64+
<span key={i}>★</span>
65+
))}
66+
</div>
67+
<div className="text-gray-400 ml-2">({rating}/5)</div>
68+
</div>
69+
{link && (
70+
<a href={link} target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:underline flex items-center">
71+
Visit <FaArrowRight className="ml-2" />
72+
</a>
73+
)}
74+
<div className="text-sm text-blue-400">{date}</div>
75+
</div>
76+
</div>
77+
);
78+
};
79+
80+
export default LogCard;

‎src/components/Navbar.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const Navbar = () => {
3333
<Link to="/about" className="text-sm font-medium hover:text-gray-300 transition-colors">About</Link>
3434
<Link to="/blog" className="text-sm font-medium hover:text-gray-300 transition-colors">Blog</Link>
3535
<Link to="/projects" className="text-sm font-medium hover:text-gray-300 transition-colors">Projects</Link>
36+
<Link to="/logs" className="text-sm font-medium hover:text-gray-300 transition-colors">Logs</Link>
3637
<a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-full transition-colors">
3738
Play Wordle
3839
</a>
@@ -50,6 +51,7 @@ const Navbar = () => {
5051
<Link to="/about" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>About</Link>
5152
<Link to="/blog" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Blog</Link>
5253
<Link to="/projects" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Projects</Link>
54+
<Link to="/logs" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Logs</Link>
5355
<a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-full transition-colors" onClick={toggleMenu}>
5456
Play Wordle
5557
</a>

‎src/pages/LogsPage.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { useState, useEffect } from 'react';
2+
import LogCard from '../components/LogCard';
3+
4+
import ColorLegends from '../components/ColorLegends';
5+
6+
const LogsPage = () => {
7+
const [logs, setLogs] = useState([]);
8+
9+
useEffect(() => {
10+
const fetchLogs = async () => {
11+
try {
12+
const response = await fetch('/data/logs.json');
13+
const data = await response.json();
14+
setLogs(data);
15+
} catch (err) {
16+
console.error("Error fetching logs:", err);
17+
}
18+
};
19+
20+
fetchLogs();
21+
}, []);
22+
23+
return (
24+
<div className="py-16 sm:py-24">
25+
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
26+
<h1 className="text-4xl font-bold tracking-tight text-primary-400 sm:text-6xl mb-8 flex items-center">
27+
<div className="bg-primary-400 h-12 w-1 mr-4"></div> Logs
28+
</h1>
29+
<hr className="border-gray-700 mb-8" />
30+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
31+
{logs.map((log, index) => (
32+
<LogCard key={index} log={log} />
33+
))}
34+
</div>
35+
<ColorLegends />
36+
</div>
37+
</div>
38+
);
39+
};
40+
41+
export default LogsPage;

0 commit comments

Comments
 (0)