Skip to content

Commit d8f28ce

Browse files
unchunksunchunks
committed
最低限の体裁を整えた
1 parent c21bb02 commit d8f28ce

File tree

9 files changed

+653
-73
lines changed

9 files changed

+653
-73
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.vscode/

‎images/github_icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/x_icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 42 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,63 @@
11
<!DOCTYPE html>
22
<html lang="ja">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>unchunks - オフィシャルサイト</title>
7-
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
line-height: 1.6;
11-
margin: 0;
12-
padding: 0;
13-
background-color: #f4f4f4;
14-
}
15-
header {
16-
background-color: #333;
17-
color: #fff;
18-
text-align: center;
19-
padding: 1rem;
20-
}
21-
nav {
22-
background-color: #444;
23-
color: #fff;
24-
padding: 0.5rem;
25-
}
26-
nav ul {
27-
list-style-type: none;
28-
padding: 0;
29-
}
30-
nav ul li {
31-
display: inline;
32-
margin-right: 10px;
33-
}
34-
nav ul li a {
35-
color: #fff;
36-
text-decoration: none;
37-
}
38-
main {
39-
padding: 20px;
40-
max-width: 800px;
41-
margin: auto;
42-
}
43-
.project {
44-
background-color: #fff;
45-
margin-bottom: 20px;
46-
padding: 20px;
47-
border-radius: 5px;
48-
}
49-
footer {
50-
background-color: #333;
51-
color: #fff;
52-
text-align: center;
53-
padding: 1rem;
54-
position: fixed;
55-
bottom: 0;
56-
width: 100%;
57-
}
58-
</style>
8+
<link rel="stylesheet" href="style.css">
599
</head>
10+
6011
<body>
61-
<header>
62-
<h1>unchunks</h1>
63-
<p>ゲーム&アプリ開発者</p>
64-
</header>
65-
<nav>
66-
<ul>
67-
<li><a href="#about">自己紹介</a></li>
68-
<li><a href="#projects">プロジェクト</a></li>
69-
<li><a href="#contact">お問い合わせ</a></li>
70-
</ul>
71-
</nav>
12+
<header id="site-header"></header>
7213
<main>
14+
<section id="hero">
15+
<h1>ゲームの世界へようこそ</h1>
16+
<p>unchunksが創造する新しい体験</p>
17+
<a href="#projects" class="btn">プロジェクトを見てみる</a> <!-- CTAボタンの追加 -->
18+
</section>
7319
<section id="about">
7420
<h2>自己紹介</h2>
75-
<p>こんにちは、unchunksです。私はゲーム開発を中心に活動している個人開発者です。新しい技術に常に興味を持ち、ユーザーに楽しんでもらえる製品を作ることを目指しています。</p>
21+
<p>こんにちは、unchunks（アンチャンクス）と申します。私はゲーム中心に開発している個人開発者です。技術はまだまだ未熟ですが、心の底から楽しいと思っていただけるゲームを開発することを目指しています。</p>
7622
</section>
7723
<section id="projects">
7824
<h2>プロジェクト</h2>
79-
<div class="project">
80-
<h3>敵視点ローグライク「えねMe」</h3>
81-
<p>現在開発中</p>
25+
<div class="project-filter">
26+
<button class="filter-btn active" data-filter="all">全て</button>
27+
<button class="filter-btn" data-filter="rogue-like">ローグライク</button>
28+
<button class="filter-btn" data-filter="new">新規プロジェクト</button>
29+
</div> <!-- プロジェクトのフィルタリング機能 -->
30+
<div class="project-grid">
31+
<div class="project-card" data-category="rogue-like new">
32+
<!-- <img src="/api/placeholder/300/200" alt="えねMe ゲーム画像"> -->
33+
<h3>敵視点ローグライク「えねMe」</h3>
34+
<p>プレイヤーが敵の視点でダンジョンを探索する新感覚ローグライク</p>
35+
<a href="projects/Eneme.html" class="btn">詳細を見る</a>
36+
</div>
37+
<!-- 他のプロジェクトカードをここに追加 -->
8238
</div>
8339
</section>
40+
<section id="news">
41+
<h2>ニュース</h2>
42+
<ul class="news-list">
43+
<li>
44+
<span class="date">2024.08.01</span>
45+
<a href="news/2024_09_29.html">新プロジェクト始動のお知らせ</a>
46+
</li>
47+
</ul>
48+
</section>
8449
<section id="contact">
50+
<!-- REVIEW: formspreeを使わず、直接送れないか -->
8551
<h2>お問い合わせ</h2>
86-
<p>お問い合わせは以下のメールアドレスまでお願いします：</p>
87-
<p>[email protected]</p>
52+
<form action="https://formspree.io/f/mzzpnvqw" method="POST">
53+
<input type="email" name="email" placeholder="あなたのメールアドレス" required>
54+
<textarea name="message" placeholder="メッセージ" required></textarea>
55+
<button type="submit" class="btn">送信</button>
56+
</form>
8857
</section>
8958
</main>
90-
<footer>
91-
<p>&copy; 2024 unchunks. All rights reserved.</p>
92-
</footer>
59+
<footer id="site-footer"></footer>
60+
<script src="../script.js"></script>
9361
</body>
94-
</html>
62+
63+
</html>

‎news/2024_09_29.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>新プロジェクト始動のお知らせ - unchunks</title>
7+
<link rel="stylesheet" href="../style.css">
8+
</head>
9+
<body>
10+
<header id="site-header"></header>
11+
<main>
12+
<article>
13+
<h1>新プロジェクト始動のお知らせ</h1>
14+
<p class="date">2024年9月29日</p>
15+
<div class="news-content">
16+
<p>unchunksは、新しいゲームプロジェクトの始動を発表いたします。このプロジェクトは、私が数年間温めてきた構想の実現を目標にしています。</p>
17+
18+
<h2>プロジェクトのページ</h2>
19+
<div class="project-grid">
20+
<div class="project-card" data-category="rogue-like new">
21+
<!-- <img src="/api/placeholder/300/200" alt="えねMe ゲーム画像"> -->
22+
<h3>敵視点ローグライク「えねMe」</h3>
23+
<p>プレイヤーが敵の視点でダンジョンを探索する新感覚ローグライク</p>
24+
<a href="/projects/Eneme.html" class="btn">詳細を見る</a>
25+
</div>
26+
<!-- 他のプロジェクトカードをここに追加 -->
27+
</div>
28+
</div><br>
29+
<a href="../index.html#news" class="btn">ニュース一覧に戻る</a>
30+
</article>
31+
</main>
32+
<footer id="site-footer"></footer>
33+
<script src="../script.js"></script>
34+
</body>
35+
</html>

‎projects/Eneme.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>えねMe - unchunks</title>
7+
<link rel="stylesheet" href="../style.css">
8+
</head>
9+
<body>
10+
<header id="site-header"></header>
11+
<main>
12+
<article>
13+
<h1>新規プロジェクト「えねMe」について</h1>
14+
<p class="date">2024年9月29日</p>
15+
<div class="news-content">
16+
<p>このページは、「えねMe」についての情報を発信するものです。
17+
</p>
18+
19+
<h2>プロジェクトの概要</h2>
20+
<p>新プロジェクトは、プレイヤーの創造性と戦略的思考を融合させた新しいジャンルのゲームを目指しています。現時点で以下の特徴を予定しています：</p>
21+
<ul>
22+
<li>プレイヤーがモンスターとして冒険者からダンジョンを守るユニークなゲームプレイ</li>
23+
<li>プレイヤーの戦略によって成長するモンスターと冒険者</li>
24+
</ul>
25+
26+
<h2>開発スケジュール</h2>
27+
<p>現在、プロジェクトは企画段階にあり、今後1年間で基本的なゲームシステムの開発を進める予定です。ベータテストは2025年夏頃を予定しており、正式リリースは2026年を目指しています。</p>
28+
29+
<h2>まだ見ぬファンの皆様へ</h2>
30+
<p>このプロジェクトは私が初めて発表するものです。当然ファンなどいるはずもないのですが、今後の私の活動を見て、楽しみにしていただければと思います。</p>
31+
</div>
32+
<a href="../index.html#projects" class="btn">プロジェクト一覧に戻る</a>
33+
</article>
34+
</main>
35+
<footer id="site-footer"></footer>
36+
<script src="../script.js"></script>
37+
</body>
38+
</html>

‎script.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
function loadCommonElements() {
2+
const header = document.getElementById('site-header');
3+
const footer = document.getElementById('site-footer');
4+
5+
header.innerHTML = `
6+
<div class="logo">unchunks</div>
7+
<nav>
8+
<div class="hamburger-menu">
9+
<span class="line"></span>
10+
<span class="line"></span>
11+
<span class="line"></span>
12+
</div>
13+
<ul>
14+
<li><a href="/index.html#about">自己紹介</a></li>
15+
<li><a href="/index.html#projects">プロジェクト</a></li>
16+
<li><a href="/index.html#news">ニュース</a></li>
17+
<li><a href="/index.html#contact">お問い合わせ</a></li>
18+
</ul>
19+
</nav>
20+
`;
21+
22+
footer.innerHTML = `
23+
<div class="social-links">
24+
<a href="https://x.com/unchunks_dev" target="_blank" rel="noopener noreferrer" style="padding-right: 10px;">
25+
<img src="/images/x_icon.svg" alt="X (旧Twitter)" width="24" height="24">
26+
</a>
27+
<a href="https://github.com/unchunks" target="_blank" rel="noopener noreferrer" style="padding-left: 10px;">
28+
<img src="/images/github_icon.svg" alt="GitHub" width="24" height="24">
29+
</a>
30+
</div>
31+
<p>&copy; ${new Date().getFullYear()} unchunks. All rights reserved.</p>
32+
`;
33+
}
34+
35+
document.addEventListener('DOMContentLoaded', (event) => {
36+
loadCommonElements();
37+
// スムーズスクロール
38+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
39+
anchor.addEventListener('click', function (e) {
40+
e.preventDefault();
41+
document.querySelector(this.getAttribute('href')).scrollIntoView({
42+
behavior: 'smooth'
43+
});
44+
});
45+
});
46+
47+
// プロジェクトカードのホバーエフェクト
48+
const projectCards = document.querySelectorAll('.project-card');
49+
projectCards.forEach(card => {
50+
card.addEventListener('mouseenter', () => {
51+
card.style.transform = 'scale(1.05)';
52+
});
53+
card.addEventListener('mouseleave', () => {
54+
card.style.transform = 'scale(1)';
55+
});
56+
});
57+
58+
// REVIEW: コンタクトフォームの送信処理
59+
const contactForm = document.getElementById('contact-form');
60+
contactForm.addEventListener('submit', (e) => {
61+
e.preventDefault();
62+
const email = document.getElementById('email').value;
63+
const message = document.getElementById('message').value;
64+
65+
// メール送信処理
66+
const mailtoLink = `mailto:[email protected]?subject=お問い合わせ&body=${encodeURIComponent(message)}%0A%0A送信者のメールアドレス: ${email}`;
67+
window.location.href = mailtoLink;
68+
69+
alert('お問い合わせありがとうございます。メッセージが送信されました。');
70+
contactForm.reset();
71+
});
72+
73+
// ハンバーガーメニューの開閉
74+
const hamburgerMenu = document.querySelector('.hamburger-menu');
75+
const navMenu = document.querySelector('nav ul');
76+
hamburgerMenu.addEventListener('click', () => {
77+
navMenu.classList.toggle('active');
78+
});
79+
80+
// プロジェクトフィルタリング
81+
const filterButtons = document.querySelectorAll('.filter-btn');
82+
filterButtons.forEach(button => {
83+
button.addEventListener('click', () => {
84+
// 全てのボタンからアクティブクラスを削除
85+
filterButtons.forEach(btn => btn.classList.remove('active'));
86+
// クリックされたボタンにアクティブクラスを追加
87+
button.classList.add('active');
88+
89+
const category = button.getAttribute('data-filter');
90+
projectCards.forEach(card => {
91+
const cardCategories = card.dataset.category.split(' ');
92+
if (category === 'all' || cardCategories.includes(category)) {
93+
card.style.display = 'block';
94+
} else {
95+
card.style.display = 'none';
96+
}
97+
});
98+
});
99+
});
100+
});

0 commit comments

Comments
 (0)