Skip to content

Commit e76e894

Browse files
unchunksunchunks
committed
Contactのページを作成
1 parent 8922349 commit e76e894

File tree

9 files changed

+447
-161
lines changed

9 files changed

+447
-161
lines changed

‎package-lock.json‎

Lines changed: 259 additions & 134 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@
2626
"eslint-plugin-react-refresh": "^0.4.5",
2727
"postcss": "^8.4.35",
2828
"tailwindcss": "^3.4.1",
29-
"vite": "^5.1.6"
29+
"vite": "^7.2.4"
3030
}
3131
}

‎src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Home from './pages/Home';
44
import ProjectDetail from './pages/ProjectDetail';
55
import Projects from './pages/Projects';
66
import Blog from './pages/Blog';
7+
import Contact from './pages/Contact';
78
import './index.css';
89

910
const App = () => {
@@ -14,6 +15,7 @@ const App = () => {
1415
<Route path="/projects" element={<Projects />} />
1516
<Route path="/projects/:id" element={<ProjectDetail />} />
1617
<Route path="/blog" element={<Blog />} />
18+
<Route path="/contact" element={<Contact />} />
1719
</Routes>
1820
</Router>
1921
);

‎src/data.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,13 @@ export const SITE_DATA = {
1616
bio: "ストレスフリーに楽しく遊べるゲームを目指して、Unity、UnrealEngineなどで開発しています。ゲーム会社に就職することを目標に奮闘中。",
1717
social: {
1818
github: "https://github.com/unchunks",
19-
twitter: "https://x.com/unchunks",
19+
twitter: "https://x.com/unchunks_dev",
20+
},
21+
stores: {
22+
steam: "https://store.steampowered.com/developer/unchunks", // Placeholder
23+
itchio: "https://unchunks.itch.io", // Placeholder
24+
googleplay: "",
25+
appstore: "",
2026
}
2127
},
2228
// プロジェクト（ゲーム）リスト

‎src/pages/Blog.jsx‎

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

2222
<div className="hidden md:block">
2323
<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>
24+
<Link to="/projects" className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">All Projects</Link>
2525
<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>
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>
2727
</div>
2828
</div>
2929

@@ -39,9 +39,9 @@ const Navigation = () => {
3939
{isOpen && (
4040
<div className="md:hidden bg-slate-900 border-b border-slate-800">
4141
<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>
42+
<Link to="/projects" className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">All Projects</Link>
4343
<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>
44+
<Link to="/contact" className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</Link>
4545
</div>
4646
</div>
4747
)}
@@ -148,7 +148,7 @@ const Blog = () => {
148148
) : (
149149
<div className="text-center py-20">
150150
<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>
151+
{/* <p className="text-slate-500 mt-2">新しい記事は <code className="bg-slate-800 px-2 py-1 rounded">src/content/posts/</code> で追加できます。</p> */}
152152
</div>
153153
)}
154154
</main>

‎src/pages/Contact.jsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
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, Mail, ShoppingBag, 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-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">All 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-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">All 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-emerald-400 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 Contact = () => {
82+
return (
83+
<div className="min-h-screen bg-slate-900 text-slate-200 selection:bg-emerald-500/30 selection:text-emerald-200">
84+
<Navigation />
85+
86+
<main className="pt-32 pb-16 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
87+
<div className="mb-12">
88+
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4 flex items-center gap-3">
89+
<Mail className="text-emerald-500" /> Contact & Links
90+
</h1>
91+
<p className="text-slate-400 text-lg">SNSやストアへのリンク一覧です。</p>
92+
</div>
93+
94+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
95+
{/* Socials */}
96+
<div className="bg-slate-800 rounded-xl p-8 border border-slate-700">
97+
<h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
98+
<Github className="text-emerald-400" /> Socials
99+
</h2>
100+
<div className="space-y-4">
101+
<a href={SITE_DATA.profile.social.github} target="_blank" rel="noopener noreferrer"
102+
className="flex items-center justify-between p-4 bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors group">
103+
<span className="flex items-center gap-3 font-medium text-slate-200">
104+
<Github size={20} /> GitHub
105+
</span>
106+
<ExternalLink size={16} className="text-slate-500 group-hover:text-emerald-400" />
107+
</a>
108+
<a href={SITE_DATA.profile.social.twitter} target="_blank" rel="noopener noreferrer"
109+
className="flex items-center justify-between p-4 bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors group">
110+
<span className="flex items-center gap-3 font-medium text-slate-200">
111+
<Twitter size={20} /> Twitter (X)
112+
</span>
113+
<ExternalLink size={16} className="text-slate-500 group-hover:text-emerald-400" />
114+
</a>
115+
</div>
116+
</div>
117+
118+
{/* Stores */}
119+
<div className="bg-slate-800 rounded-xl p-8 border border-slate-700">
120+
<h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
121+
<ShoppingBag className="text-emerald-400" /> Stores
122+
</h2>
123+
<div className="space-y-4">
124+
{SITE_DATA.profile.stores?.steam && (
125+
<a href={SITE_DATA.profile.stores.steam} target="_blank" rel="noopener noreferrer"
126+
className="flex items-center justify-between p-4 bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors group">
127+
<span className="flex items-center gap-3 font-medium text-slate-200">
128+
<Gamepad2 size={20} /> Steam
129+
</span>
130+
<ExternalLink size={16} className="text-slate-500 group-hover:text-emerald-400" />
131+
</a>
132+
)}
133+
{SITE_DATA.profile.stores?.itchio && (
134+
<a href={SITE_DATA.profile.stores.itchio} target="_blank" rel="noopener noreferrer"
135+
className="flex items-center justify-between p-4 bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors group">
136+
<span className="flex items-center gap-3 font-medium text-slate-200">
137+
<Gamepad2 size={20} /> Itch.io
138+
</span>
139+
<ExternalLink size={16} className="text-slate-500 group-hover:text-emerald-400" />
140+
</a>
141+
)}
142+
{/* Add more stores as needed */}
143+
</div>
144+
</div>
145+
</div>
146+
</main>
147+
148+
<Footer />
149+
</div>
150+
);
151+
};
152+
153+
export default Contact;

‎src/pages/Home.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ const Navigation = () => {
2222
<div className="hidden md:block">
2323
<div className="ml-10 flex items-baseline space-x-8">
2424
<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>
25+
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">All Projects</Link>
2626
<Link to="/blog"
2727
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">DevLog</Link>
28-
<a href="/#contact"
29-
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
28+
<Link to="/contact"
29+
className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</Link>
3030
</div>
3131
</div>
3232

@@ -45,11 +45,11 @@ const Navigation = () => {
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">
4747
<Link to="/projects"
48-
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</Link>
48+
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">All Projects</Link>
4949
<Link to="/blog"
5050
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">DevLog</Link>
51-
<a href="/#contact"
52-
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
51+
<Link to="/contact"
52+
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</Link>
5353
</div>
5454
</div>
5555
)}
@@ -79,7 +79,7 @@ const Hero = () => {
7979
<div className="flex gap-4">
8080
<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">
82-
View Projects
82+
View All Projects
8383
<ChevronRight size={18} />
8484
</Link>
8585
<a href={SITE_DATA.profile.social.github} target="_blank" rel="noopener noreferrer"
@@ -126,13 +126,13 @@ const Hero = () => {
126126
const Projects = () => {
127127
return (
128128
<section id="projects" className="py-20 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
129-
<div className="flex items-center gap-4 mb-12">
129+
<div className="flex items-center justify-between mb-12">
130130
<h2 className="text-3xl font-bold text-white">Selected Projects</h2>
131-
<div className="h-px bg-slate-800 flex-grow"></div>
131+
<Link to="/projects" className="text-sm text-slate-400 hover:text-white transition-colors">View All Projects &rarr;</Link>
132132
</div>
133133

134134
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
135-
{SITE_DATA.projects.map((project) => (
135+
{SITE_DATA.projects.slice(0, 3).map((project) => (
136136
<div key={project.id}
137137
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-1">
138138
<div className={`h-48 bg-gradient-to-br ${project.imageColor} flex items-center justify-center relative

‎src/pages/ProjectDetail.jsx‎

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

2222
<div className="hidden md:block">
2323
<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>
24+
<Link to="/projects" className="text-slate-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">All Projects</Link>
2525
<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>
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>
2727
</div>
2828
</div>
2929

@@ -39,9 +39,9 @@ const Navigation = () => {
3939
{isOpen && (
4040
<div className="md:hidden bg-slate-900 border-b border-slate-800">
4141
<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>
42+
<Link to="/projects" className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">All Projects</Link>
4343
<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>
44+
<Link to="/contact" className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</Link>
4545
</div>
4646
</div>
4747
)}
@@ -98,8 +98,8 @@ const ProjectDetail = () => {
9898
<Navigation />
9999

100100
<main className="pt-32 pb-16 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
101-
<Link to="/#projects" className="inline-flex items-center gap-2 text-slate-400 hover:text-white mb-8 transition-colors">
102-
<ArrowLeft size={20} /> Back to Projects
101+
<Link to="/projects" className="inline-flex items-center gap-2 text-slate-400 hover:text-white mb-8 transition-colors">
102+
<ArrowLeft size={20} /> Back to All Projects
103103
</Link>
104104

105105
<article>

0 commit comments

Comments
 (0)