Skip to content

Commit 37fe8d1

Browse files
unchunksunchunks
committed
Feat: Add projects list page with tag filtering
1 parent 83f469d commit 37fe8d1

File tree

3 files changed

+192
-10
lines changed

3 files changed

+192
-10
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 Projects from './pages/Projects';
56
import Blog from './pages/Blog';
67
import './index.css';
78

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

‎src/pages/Home.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ const Navigation = () => {
2121

2222
<div className="hidden md:block">
2323
<div className="ml-10 flex items-baseline space-x-8">
24-
<a href="/#projects"
25-
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Projects</a>
26-
<a href="/#blog"
27-
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">DevLog</a>
24+
<Link to="/projects"
25+
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Projects</Link>
26+
<Link to="/blog"
27+
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">DevLog</Link>
2828
<a href="/#contact"
2929
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
3030
</div>
@@ -44,10 +44,10 @@ const Navigation = () => {
4444
{isOpen && (
4545
<div className="md:hidden bg-slate-900 border-b border-slate-800">
4646
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
47-
<a href="/#projects"
48-
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
49-
<a href="/#blog"
50-
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">DevLog</a>
47+
<Link to="/projects"
48+
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</Link>
49+
<Link to="/blog"
50+
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">DevLog</Link>
5151
<a href="/#contact"
5252
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
5353
</div>
@@ -77,11 +77,11 @@ const Hero = () => {
7777
{SITE_DATA.profile.bio}
7878
</p>
7979
<div className="flex gap-4">
80-
<a href="#projects"
80+
<Link to="/projects"
8181
className="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-3 rounded-lg font-medium transition-all hover:translate-y-[-2px] flex items-center gap-2">
8282
View Projects
8383
<ChevronRight size={18} />
84-
</a>
84+
</Link>
8585
<a href={SITE_DATA.profile.social.github} target="_blank" rel="noopener noreferrer"
8686
className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg font-medium transition-all border border-slate-700 flex items-center gap-2">
8787
<Github size={18} /> GitHub

‎src/pages/Projects.jsx‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
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, ArrowLeft, ExternalLink } 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-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Projects</Link>
25+
<Link to="/blog" className="text-slate-300 hover: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-emerald-400 block px-3 py-2 rounded-md text-base font-medium">Projects</Link>
43+
<Link to="/blog" className="text-slate-300 hover:text-white 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 Projects = () => {
82+
const [selectedTag, setSelectedTag] = useState('All');
83+
84+
// Get unique tags
85+
const allTags = ['All', ...new Set(SITE_DATA.projects.flatMap(project => project.tags))];
86+
87+
// Filter projects by tag
88+
const filteredProjects = selectedTag === 'All'
89+
? SITE_DATA.projects
90+
: SITE_DATA.projects.filter(project => project.tags.includes(selectedTag));
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-6xl mx-auto">
97+
<Link to="/" 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+
<Gamepad2 className="text-emerald-500" /> All Projects
104+
</h1>
105+
<p className="text-slate-400 text-lg">ゲーム開発プロジェクトとテクニカルアートの作品集</p>
106+
</div>
107+
108+
{/* Tag Filter */}
109+
{allTags.length > 1 && (
110+
<div className="flex flex-wrap gap-3 mb-12">
111+
{allTags.map(tag => (
112+
<button
113+
key={tag}
114+
onClick={() => setSelectedTag(tag)}
115+
className={`px-4 py-2 rounded-lg font-medium transition-all ${selectedTag === tag
116+
? 'bg-emerald-500 text-white'
117+
: 'bg-slate-800 text-slate-300 hover:bg-slate-700'
118+
}`}
119+
>
120+
{tag}
121+
</button>
122+
))}
123+
</div>
124+
)}
125+
126+
{/* Projects Grid */}
127+
{filteredProjects.length > 0 ? (
128+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
129+
{filteredProjects.map((project) => (
130+
<div key={project.id}
131+
className="group bg-slate-900 rounded-xl overflow-hidden border border-slate-800 hover:border-emerald-500/50 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-emerald-500/10">
132+
<div className={`h-48 bg-gradient-to-br ${project.imageColor} flex items-center justify-center relative overflow-hidden`}>
133+
<Gamepad2
134+
className="text-white/20 w-32 h-32 absolute transform -rotate-12 group-hover:scale-110 transition-transform duration-500" />
135+
<div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
136+
</div>
137+
<div className="p-6">
138+
<div className="flex flex-wrap gap-2 mb-3">
139+
{project.tags.map((tag, i) => (
140+
<span key={i}
141+
className="text-xs font-mono bg-slate-800 text-emerald-400 px-2 py-1 rounded border border-slate-700">
142+
{tag}
143+
</span>
144+
))}
145+
</div>
146+
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-emerald-400 transition-colors">
147+
{project.title}</h3>
148+
<p className="text-slate-400 text-sm leading-relaxed mb-4">
149+
{project.description}
150+
</p>
151+
{project.link.startsWith('/') ? (
152+
<Link to={project.link}
153+
className="inline-flex items-center gap-1 text-sm font-medium text-white hover:text-emerald-400 transition-colors">
154+
View Details
155+
<ExternalLink size={14} />
156+
</Link>
157+
) : (
158+
<a href={project.link}
159+
className="inline-flex items-center gap-1 text-sm font-medium text-white hover:text-emerald-400 transition-colors">
160+
View Details
161+
<ExternalLink size={14} />
162+
</a>
163+
)}
164+
</div>
165+
</div>
166+
))}
167+
</div>
168+
) : (
169+
<div className="text-center py-20">
170+
<p className="text-slate-400 text-lg">このカテゴリーにはプロジェクトがありません。</p>
171+
</div>
172+
)}
173+
</main>
174+
175+
<Footer />
176+
</div>
177+
);
178+
};
179+
180+
export default Projects;

0 commit comments

Comments
 (0)