Skip to content

Commit eb7c3c7

Browse files
BrinsleymBrinsleym
committed
+ lander page
1 parent 7524be9 commit eb7c3c7

File tree

2 files changed

+167
-0
lines changed

2 files changed

+167
-0
lines changed

particles.html renamed to content/particles.html

File renamed without changes.

‎index.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Haneul's Korean Learning Hub</title>
8+
<meta name="description" content="A collection of my personal notes and resources for learning the Korean language.">
9+
<style>
10+
:root {
11+
--primary-color: #005BBB; /* A calming blue */
12+
--secondary-color: #FFD500; /* A vibrant yellow */
13+
--text-color: #333;
14+
--bg-color: #f9f9f9;
15+
--card-bg: #ffffff;
16+
--shadow: 0 4px 8px rgba(0,0,0,0.1);
17+
}
18+
body {
19+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
20+
margin: 0;
21+
padding: 0;
22+
background-color: var(--bg-color);
23+
color: var(--text-color);
24+
line-height: 1.6;
25+
}
26+
.container {
27+
max-width: 800px;
28+
margin: 0 auto;
29+
padding: 2rem;
30+
}
31+
header {
32+
text-align: center;
33+
margin-bottom: 3rem;
34+
border-bottom: 2px solid var(--primary-color);
35+
padding-bottom: 1.5rem;
36+
}
37+
header h1 {
38+
font-size: 2.8rem;
39+
color: var(--primary-color);
40+
margin-bottom: 0.5rem;
41+
}
42+
header p {
43+
font-size: 1.1rem;
44+
color: #666;
45+
}
46+
main h2 {
47+
font-size: 1.8rem;
48+
color: var(--text-color);
49+
margin-bottom: 1.5rem;
50+
}
51+
#resource-list {
52+
list-style: none;
53+
padding: 0;
54+
}
55+
#resource-list li a {
56+
display: block;
57+
background-color: var(--card-bg);
58+
color: var(--text-color);
59+
padding: 1rem 1.5rem;
60+
margin-bottom: 1rem;
61+
border-radius: 8px;
62+
text-decoration: none;
63+
font-weight: 500;
64+
box-shadow: var(--shadow);
65+
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
66+
border-left: 5px solid var(--secondary-color);
67+
}
68+
#resource-list li a:hover {
69+
transform: translateY(-3px);
70+
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
71+
}
72+
.loader {
73+
text-align: center;
74+
font-style: italic;
75+
color: #888;
76+
}
77+
footer {
78+
text-align: center;
79+
margin-top: 4rem;
80+
padding-top: 1rem;
81+
border-top: 1px solid #eee;
82+
color: #999;
83+
font-size: 0.9rem;
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
89+
<div class="container">
90+
<header>
91+
<h1>Korean Learning Hub 🇰🇷</h1>
92+
<p>A personal collection of notes, guides, and resources on my journey to fluency.</p>
93+
</header>
94+
95+
<main>
96+
<h2>My Resources</h2>
97+
<ul id="resource-list">
98+
<li class="loader">Loading resources...</li>
99+
</ul>
100+
</main>
101+
102+
<footer>
103+
<p>&copy; 2025 Your Name Here</p>
104+
</footer>
105+
</div>
106+
107+
<script>
108+
document.addEventListener('DOMContentLoaded', () => {
109+
// This script automatically fetches the list of .html files from your /content/ directory.
110+
111+
// --- Configuration ---
112+
const contentPath = 'content'; // The path to your content directory
113+
114+
// --- No need to edit below this line ---
115+
116+
// Derive the repository name from the URL
117+
const pathParts = window.location.pathname.split('/').filter(part => part);
118+
const isProjectPage = pathParts.length > 0;
119+
const repoName = isProjectPage ? pathParts[0] : `${window.location.hostname.split('.')[0]}.github.io`;
120+
const userName = window.location.hostname.split('.')[0];
121+
122+
const apiUrl = `https://api.github.com/repos/${userName}/${repoName}/contents/${contentPath}`;
123+
const resourceList = document.getElementById('resource-list');
124+
125+
fetch(apiUrl)
126+
.then(response => {
127+
if (!response.ok) {
128+
throw new Error(`GitHub API error: ${response.status}`);
129+
}
130+
return response.json();
131+
})
132+
.then(files => {
133+
resourceList.innerHTML = ''; // Clear the "Loading..." message
134+
135+
const htmlFiles = files.filter(file => file.name.endsWith('.html'));
136+
137+
if (htmlFiles.length === 0) {
138+
resourceList.innerHTML = '<li>No resources found in the /content/ directory.</li>';
139+
return;
140+
}
141+
142+
htmlFiles.forEach(file => {
143+
const listItem = document.createElement('li');
144+
const link = document.createElement('a');
145+
146+
// Create a user-friendly name from the filename
147+
const displayName = file.name
148+
.replace(/\.html$/, '') // Remove .html extension
149+
.replace(/[-_]/g, ' ') // Replace hyphens and underscores with spaces
150+
.replace(/\b\w/g, l => l.toUpperCase()); // Capitalize first letter of each word
151+
152+
link.href = `${isProjectPage ? '/' + repoName : ''}/${file.path}`;
153+
link.textContent = displayName;
154+
155+
listItem.appendChild(link);
156+
resourceList.appendChild(listItem);
157+
});
158+
})
159+
.catch(error => {
160+
console.error('Error fetching resources:', error);
161+
resourceList.innerHTML = '<li>Could not load resources. Check the browser console for more details.</li>';
162+
});
163+
});
164+
</script>
165+
166+
</body>
167+
</html>

0 commit comments

Comments
 (0)