Skip to content

Commit 83f469d

Browse files
unchunksunchunks
committed
Feat: Fix placeholder links and add blog archive page
1 parent 642e31c commit 83f469d

File tree

4 files changed

+166
-3
lines changed

4 files changed

+166
-3
lines changed

‎src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
33
import Home from './pages/Home';
44
import ProjectDetail from './pages/ProjectDetail';
5+
import Blog from './pages/Blog';
56
import './index.css';
67

78
const App = () => {
@@ -10,6 +11,7 @@ const App = () => {
1011
<Routes>
1112
<Route path="/" element={<Home />} />
1213
<Route path="/projects/:id" element={<ProjectDetail />} />
14+
<Route path="/blog" element={<Blog />} />
1315
</Routes>
1416
</Router>
1517
);

‎src/data.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export const SITE_DATA = {
1515
role: "Game Developer / Technical Artist",
1616
bio: "「コードで世界を描く」をモットーに、UnityとUnreal Engineでアクションゲームを中心に開発しています。シェーダー魔法使いを目指して修行中。",
1717
social: {
18-
github: "https://github.com",
19-
twitter: "https://twitter.com",
18+
github: "https://github.com/unchunks",
19+
twitter: "https://x.com/unchunks",
2020
}
2121
},
2222
// プロジェクト（ゲーム）リスト

‎src/pages/Blog.jsx‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import React, { useState } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { SITE_DATA } from '../data';
4+
import { Gamepad2, Github, Twitter, Menu, X, Calendar, Code, ArrowLeft } from 'lucide-react';
5+
6+
const Navigation = () => {
7+
const [isOpen, setIsOpen] = useState(false);
8+
9+
return (
10+
<nav className="fixed top-0 left-0 right-0 z-50 bg-slate-900/90 backdrop-blur-md border-b border-slate-800">
11+
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
12+
<div className="flex items-center justify-between h-16">
13+
<div className="flex items-center gap-2">
14+
<Link to="/" className="flex items-center gap-2">
15+
<Gamepad2 className="w-6 h-6 text-emerald-400" />
16+
<span className="font-bold text-xl text-white tracking-wider font-mono">
17+
{SITE_DATA.profile.name}
18+
</span>
19+
</Link>
20+
</div>
21+
22+
<div className="hidden md:block">
23+
<div className="ml-10 flex items-baseline space-x-8">
24+
<Link to="/#projects" className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Projects</Link>
25+
<Link to="/blog" className="text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">DevLog</Link>
26+
<Link to="/#contact" className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</Link>
27+
</div>
28+
</div>
29+
30+
<div className="md:hidden">
31+
<button onClick={() => setIsOpen(!isOpen)} className="text-slate-300 hover:text-white p-2">
32+
{isOpen ? <X /> : <Menu />}
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
38+
{/* Mobile Menu */}
39+
{isOpen && (
40+
<div className="md:hidden bg-slate-900 border-b border-slate-800">
41+
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
42+
<Link to="/#projects" className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</Link>
43+
<Link to="/blog" className="text-emerald-400 block px-3 py-2 rounded-md text-base font-medium">DevLog</Link>
44+
<Link to="/#contact" className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</Link>
45+
</div>
46+
</div>
47+
)}
48+
</nav>
49+
);
50+
};
51+
52+
const Footer = () => {
53+
return (
54+
<footer id="contact" className="bg-slate-950 border-t border-slate-900 py-12 mt-20">
55+
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
56+
<div className="text-center md:text-left">
57+
<div className="flex items-center justify-center md:justify-start gap-2 mb-2">
58+
<Gamepad2 className="w-5 h-5 text-emerald-500" />
59+
<span className="font-bold text-white text-lg">{SITE_DATA.profile.name}</span>
60+
</div>
61+
<p className="text-slate-500 text-sm">Building worlds, debugging reality.</p>
62+
</div>
63+
64+
<div className="flex gap-6">
65+
<a href={SITE_DATA.profile.social.github} className="text-slate-400 hover:text-white transition-colors">
66+
<Github size={20} />
67+
</a>
68+
<a href={SITE_DATA.profile.social.twitter} className="text-slate-400 hover:text-blue-400 transition-colors">
69+
<Twitter size={20} />
70+
</a>
71+
</div>
72+
73+
<div className="text-slate-600 text-sm">
74+
&copy; {new Date().getFullYear()} {SITE_DATA.profile.name}
75+
</div>
76+
</div>
77+
</footer>
78+
);
79+
};
80+
81+
const Blog = () => {
82+
const [selectedCategory, setSelectedCategory] = useState('All');
83+
84+
// Get unique categories
85+
const categories = ['All', ...new Set(SITE_DATA.posts.map(post => post.category))];
86+
87+
// Filter posts by category
88+
const filteredPosts = selectedCategory === 'All'
89+
? SITE_DATA.posts
90+
: SITE_DATA.posts.filter(post => post.category === selectedCategory);
91+
92+
return (
93+
<div className="min-h-screen bg-slate-900 text-slate-200 selection:bg-emerald-500/30 selection:text-emerald-200">
94+
<Navigation />
95+
96+
<main className="pt-32 pb-16 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
97+
<Link to="/#blog" className="inline-flex items-center gap-2 text-slate-400 hover:text-white mb-8 transition-colors">
98+
<ArrowLeft size={20} /> Back to Home
99+
</Link>
100+
101+
<div className="mb-12">
102+
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4 flex items-center gap-3">
103+
<Code className="text-emerald-500" /> DevLog Archive
104+
</h1>
105+
<p className="text-slate-400 text-lg">開発の記録とテクニカルな学びを共有しています。</p>
106+
</div>
107+
108+
{/* Category Filter */}
109+
{categories.length > 1 && (
110+
<div className="flex flex-wrap gap-3 mb-8">
111+
{categories.map(category => (
112+
<button
113+
key={category}
114+
onClick={() => setSelectedCategory(category)}
115+
className={`px-4 py-2 rounded-lg font-medium transition-all ${selectedCategory === category
116+
? 'bg-emerald-500 text-white'
117+
: 'bg-slate-800 text-slate-300 hover:bg-slate-700'
118+
}`}
119+
>
120+
{category}
121+
</button>
122+
))}
123+
</div>
124+
)}
125+
126+
{/* Posts List */}
127+
{filteredPosts.length > 0 ? (
128+
<div className="space-y-6">
129+
{filteredPosts.map((post) => (
130+
<article key={post.id} className="group p-6 rounded-xl bg-slate-800 border border-slate-700 hover:border-emerald-500/50 transition-all">
131+
<div className="flex flex-col sm:flex-row sm:items-center gap-4 mb-3">
132+
<div className="flex items-center gap-2 text-sm font-mono text-slate-400">
133+
<Calendar size={16} /> {post.date}
134+
</div>
135+
<span className="text-sm font-medium px-3 py-1 rounded bg-slate-900 text-cyan-400 border border-slate-600 w-fit">
136+
{post.category}
137+
</span>
138+
</div>
139+
<h2 className="text-2xl font-bold text-white group-hover:text-emerald-400 transition-colors mb-3">
140+
{post.title}
141+
</h2>
142+
<p className="text-slate-300 leading-relaxed">
143+
{post.content}
144+
</p>
145+
</article>
146+
))}
147+
</div>
148+
) : (
149+
<div className="text-center py-20">
150+
<p className="text-slate-400 text-lg">まだ記事がありません。</p>
151+
<p className="text-slate-500 mt-2">新しい記事は <code className="bg-slate-800 px-2 py-1 rounded">src/content/posts/</code> で追加できます。</p>
152+
</div>
153+
)}
154+
</main>
155+
156+
<Footer />
157+
</div>
158+
);
159+
};
160+
161+
export default Blog;

‎src/pages/Home.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const Blog = () => {
185185
<h2 className="text-3xl font-bold text-white flex items-center gap-3">
186186
<Code className="text-emerald-500" /> DevLog
187187
</h2>
188-
<a href="#" className="text-sm text-slate-400 hover:text-white transition-colors">View All Logs &rarr;</a>
188+
<Link to="/blog" className="text-sm text-slate-400 hover:text-white transition-colors">View All Logs &rarr;</Link>
189189
</div>
190190

191191
<div className="space-y-4">

0 commit comments

Comments
 (0)