Skip to content

Commit 509d91f

Browse files
authored
Merge pull request #1 from dot4msc/dev
added: archive page + new blog post
2 parents 1ebcb8a + 45f4cc3 commit 509d91f

File tree

5 files changed

+102
-0
lines changed

5 files changed

+102
-0
lines changed

archive/archive.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
<title>dot4: ARCHIVE</title>
7+
<link rel="stylesheet" href="../css/reset.css">
8+
<link rel="stylesheet" href="../css/index.css">
9+
</head>
10+
<body>
11+
<nav style="margin: 20px; margin-top: 20px; color: white">
12+
<a href="../index.html" class="hero-link archive-link">&larr; BACK TO HOME</a>
13+
</nav>
14+
<div id="blog">
15+
16+
</div>
17+
<script src="./js/archive.js"></script>
18+
</body>
19+
</html>

archive/js/archive.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
let blogDocument = document.getElementById('blog');
2+
3+
fetch('../blog-posts/posts.json').then(response => {
4+
if(!response.ok) {
5+
throw new Error('Network response was not ok');
6+
}
7+
return response.json();
8+
}).then(data => {
9+
let blogPosts = data.posts;
10+
console.log(blogPosts);
11+
let followingPosts = blogPosts.slice(1);
12+
13+
followingPosts.forEach(post => {
14+
15+
let blogPost = document.createElement('div');
16+
let blogContent = document.createElement('div');
17+
let blogTitle = document.createElement('h2');
18+
let blogDate = document.createElement('p');
19+
let blogText = document.createElement('div');
20+
let blogSong = document.createElement('div');
21+
22+
blogPost.className = 'blog-post';
23+
blogContent.className = 'blog-content';
24+
blogTitle.className = 'blog-title';
25+
blogDate.className = 'blog-date';
26+
blogText.className = 'blog-text';
27+
blogSong.className = 'blog-song';
28+
29+
blogText.innerHTML = post["text"];
30+
blogTitle.innerText = post["title"];
31+
blogDate.innerText = post["date"];
32+
blogSong.innerHTML = post["song"];
33+
34+
blogContent.appendChild(blogTitle);
35+
blogContent.appendChild(blogDate);
36+
blogContent.appendChild(blogText);
37+
blogContent.appendChild(blogSong);
38+
39+
blogPost.appendChild(blogContent);
40+
blogDocument.appendChild(blogPost);
41+
});
42+
})
43+

blog-posts/posts.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
{
22
"posts":
33
[
4+
{
5+
"title":"Where to begin? Part 2",
6+
"date":"September 11, 2025",
7+
"text":"<p>Hey! Welcome back to the blog. If this is your first time reading, let me officially welcome you to the weird and fun world of dot4 (pronounced either \"dot four\" or \"dota\"—I still haven’t decided, so take your pick). Here, I share absurd stories and experiences I’ve had over my 28 years of life on Earth. I also just added an \"archive\" page where you can check out older posts—follow this <strong><a href=\"./archive/archive.html\">link</a></strong> right here! If you’ve already read my last two posts, congratulations and thank you for keeping up with my chaos. For me, the most important thing is that you have fun while reading, because trust me—these stories only get crazier. So, without further ado, let’s continue...</p>\n\n<p>I remember standing up from my bed and moving closer to the TV when I first met Teacup, Gamma, and Lambda. For me, changing positions felt like trying to make sense of what was happening. I needed a physical object, something to ground me, to “translate” these voices that were coming out of my own mouth. Almost like I had to simulate talking to someone. Anyway, as I said in the last post, when Lambda introduced herself, she had this shy energy—kind of like Hinata whenever she tried to talk to Naruto. I said, \"Hi Lambda. Are you going to be one of my best friends too?\" My tone was curious. She replied, \"Yes… well, kind of… I like you… maybe later on you could be my boyfriend.\"</p>\n\n<p>Looking back, I was shocked. It’s not that I don’t think I’m handsome enough to get a girlfriend, but in school—elementary, middle, and high school—I never saw myself as someone who instantly attracted girls. Yet, at that moment, I barely reacted. I think I smiled a little, but that was it. I said, \"Wow… but I don’t know you, and you don’t know me.\" She just smiled and said, \"I know you—through <em>The Girls of Han</em>.\" <em><strong>The Girls of Han</strong></em> were some close friends of mine. Then Lambda added, \"But they call me Polly,\" with this mysterious tone. I just looked at the floor and said, \"Okay...\" In hindsight, I probably should have asked, \"Why do you like me?\" because honestly, it’s wild to think this \"Lambda\" supposedly had a crush on me for 20 years. I’ve never been the most confident or the kind of guy women fall for. Heck, I even get anxious ordering food at a restaurant. Maybe I’m exaggerating, but back then, before trying to rebrand myself as an artist, I couldn’t even stand taking pictures of myself. If it were up to me, I’d only share graphics, drawings, and screen recordings of my sessions—because honestly, I’ve always hated the camera.</p>\n\n<p>Those were the last words Lambda and I exchanged… at least for a while. Then Teacup chimed in suddenly: \"Your father is still alive.\" I said, \"That’s not true, he passed away last year… I went to his funeral, mass, everything.\" But without hesitation, Teacup replied, \"No, he isn’t. But he’s not a man anymore… she’s a woman.\" Then this woman spoke: \"Hey Nano, it’s me… I’m The Patriot.\" (That’s just a pseudonym—I don’t want to reveal too much here.) \"Dad?\" I asked. She responded flatly, \"No. Your dad died of a heart attack last year. I’m not your dad. You don’t know me yet, but you will later.\" The way she said it felt hypnotic. My vision blurred, and green spots appeared everywhere. If you want a visual, Google \"Giygas Earthbound\"—those ghostly, terrifying faces moving around the screen. That’s exactly what it felt like. Then she ordered, \"Go to the bathroom and look in the mirror.\"</p>\n\n<p>I stood up, shivering, terrified of what might happen. Slowly, a black frame closed in around my vision—like when a camera focuses and the borders darken. She said, \"Don’t be afraid Nano! Calm down, okay? Nothing’s going to happen. I’m just going to erase this memory from your head.\" She even said it jokingly, like it was a prank. And honestly, looking back, it kind of was. It reminded me of those spy movies where a random phrase activates a sleeper agent. That’s what \"Teacup\" felt like—an activation word. Simple, strange, and kind of funny.</p>\n\n<p>I laughed nervously and said, \"Okay.\" She asked, \"You don’t want to remember any of this, right?\" I answered, \"I actually don’t mind.\" There was this comedic pause, then The Patriot said, \"I know, but I don’t want to scare your mother. You don’t want her worrying about silly things, right?\" \"Yeah, I guess not,\" I replied. In the bathroom mirror, she instructed me to repeat after her. I agreed and said the words firmly, staring at my own reflection: \"Look into my eyes. Nothing is happening right now. You haven’t met anyone. You didn’t talk to anyone. Everything was just your imagination. Teacup, Gamma, Lambda, and The Patriot don’t exist. You’re going to fall asleep, and none of this ever happened.\"</p>\n\n<p>After that, I went back to bed. I started to drift off, hearing only faint mumbles—like whispers from a distant speaker. Then, nothing. I guess I just fell asleep.</p>\n\n<p>So yeah! Could you keep up? Pretty wild, right? That spy-movie vibe still blows my mind. I debated whether I should just dismiss this whole experience, but in the end, this is how I express feelings about things I still don’t understand—but that once felt so real. Maybe I rambled too much or confused you a bit. One day, I might make an abridged version of this story so it lands more clearly. Anyway, thanks again for sticking with me to the end. This one ran a little long, but I’ll keep things lighter in future posts. I know I said at the start that I wouldn’t share these private matters, but if you have feedback—or just want to let something out—hit me up on <a href=\"https://www.instagram.com/dot4music\">Instagram</a> DMs. I’d be glad to hear from you. Thanks again, and I’ll catch you tomorrow.</p>\n\n<p>- Nano</p>",
8+
"song":"<iframe data-testid=\"embed-iframe\" style=\"border-radius:12px\" src=\"https://open.spotify.com/embed/track/5dZ8PeKKZJLIQAWNTdp8WX?utm_source=generator\" width=\"50%\" height=\"152\" frameBorder=\"0\" allowfullscreen=\"\" allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\" loading=\"lazy\"></iframe>"
9+
},
410
{
511
"title": "Where to begin?",
612
"date": "September 10, 2025",

css/index.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,38 @@ html {
2424
line-height: 1.2;
2525
}
2626

27+
.hero-link {
28+
text-align: center;
29+
font-weight: 600;
30+
font-size: 2rem;
31+
color: #181818;
32+
display: block;
33+
cursor: pointer;
34+
box-sizing: border-box;
35+
margin: 20px 500px;
36+
padding: 10px;
37+
background-color: #E0E0E0;
38+
border: solid 3px #E0E0E0;
39+
}
40+
41+
.archive-link {
42+
text-align: center;
43+
font-weight: 600;
44+
font-size: 2rem;
45+
color: #181818;
46+
display: block;
47+
cursor: pointer;
48+
box-sizing: border-box;
49+
margin: 20px 400px;
50+
padding: 10px;
51+
background-color: #E0E0E0;
52+
border: solid 3px #E0E0E0;
53+
}
54+
.hero-link:hover {
55+
background-color: transparent;
56+
color: #A93226;
57+
border: solid 3px #E0E0E0;
58+
}
2759
.about-header {
2860
font-size: 3rem;
2961
}

index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ <h2 class="about-header">About</h2>
2525
</div>
2626
</div>
2727
</div>
28+
29+
<a href="./archive/archive.html" class="hero-link">ARCHIVE</a>
2830
<div id="blog">
2931

3032
</div>

0 commit comments

Comments
 (0)