-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (132 loc) · 6.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tabs">
<button class="tablink" onclick="openSection(event, 'about-me')">About Me</button>
<button class="tablink" onclick="openSection(event, 'deep-dark-zone')">Deep Dark Zone</button>
<button class="tablink" onclick="openSection(event, 'blog-things')">Blog Things</button>
</div>
<div id="about-me" class="tab-content active">
<div id="about-me-section"></div>
</div>
<div id="deep-dark-zone" class="tab-content">
<div id="deep-dark-zone">
<div class="hidden-pixel"></div>
<div class="hidden-pixel"></div>
<div class="hidden-message">You've found something hidden!</div>
</div>
</div>
<div id="blog-things" class="tab-content">
<div id="blog-things">
<!-- Articles will be dynamically loaded here -->
</div>
</div>
<!-- Modal for Project Details -->
<div id="project-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h2 id="modal-title"></h2>
<p id="modal-description"></p>
</div>
</div>
<script>
function openSection(evt, sectionName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(sectionName).classList.add("active");
evt.currentTarget.classList.add("active");
}
const projects = [
{ title: "Project Alpha", description: "An innovative solution for problem A." },
{ title: "Project Beta", description: "A comprehensive study on topic B." },
{ title: "Project Gamma", description: "A cutting-edge application for task C." },
{ title: "Project Delta", description: "An experimental approach to challenge D." },
{ title: "Project Epsilon", description: "A tool for enhancing productivity in area E." },
{ title: "Project Zeta", description: "A research project focused on subject F." },
{ title: "Project Eta", description: "A prototype for a product related to G." },
{ title: "Project Theta", description: "An analysis of data concerning issue H." },
{ title: "Project Iota", description: "A creative project exploring concept I." },
{ title: "Project Kappa", description: "A software development project on topic J." },
{ title: "Project Lambda", description: "A project aimed at improving process K." },
{ title: "Project Mu", description: "An initiative to tackle problem L." },
{ title: "Project Nu", description: "A collaborative project addressing issue M." },
{ title: "Project Xi", description: "A venture into the realms of topic N." },
{ title: "Project Omicron", description: "An exploration of idea O." },
{ title: "Project Pi", description: "A product design for application Q." },
{ title: "Project Rho", description: "A solution aimed at enhancing experience R." },
{ title: "Project Sigma", description: "A comprehensive guide on subject S." },
{ title: "Project Tau", description: "A case study regarding issue T." },
{ title: "Project Upsilon", description: "A campaign focused on awareness for topic U." },
{ title: "Project Phi", description: "An innovative approach to problem V." },
];
// Function to open the modal
function openModal(title, description) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-description').textContent = description;
document.getElementById('project-modal').style.display = "block";
}
// Function to close the modal
function closeModal() {
document.getElementById('project-modal').style.display = "none";
}
function spawnBubble() {
const bubble = document.createElement('div');
bubble.classList.add('bubble');
// Randomly select a project
const randomProject = projects[Math.floor(Math.random() * projects.length)];
// Set the bubble text and dataset attributes
bubble.textContent = randomProject.title; // Set bubble text to project title
bubble.dataset.projectTitle = randomProject.title; // Set title for modal
bubble.dataset.projectDescription = randomProject.description; // Set description for modal
// Randomize the x position for bubble spawn
const xPosition = Math.random() * (window.innerWidth - 100); // 100 is the bubble width
bubble.style.left = `${xPosition}px`;
bubble.style.transform = 'translateY(0)'; // Reset position before animation
document.getElementById('about-me-section').appendChild(bubble);
// Trigger the animation
setTimeout(() => {
bubble.style.animation = 'floatUp 5s forwards'; // Start the floating animation
}, 10);
bubble.addEventListener('click', function() {
// Stop the bubble from floating
bubble.style.animation = 'none'; // Stop the animation
// Open the modal with project details
openModal(this.dataset.projectTitle, this.dataset.projectDescription);
});
bubble.addEventListener('animationend', function() {
this.classList.add('burst'); // Trigger burst effect
setTimeout(() => {
this.remove(); // Remove bubble from the DOM after bursting
}, 500); // After burst effect
});
}
// Spawn a bubble every 2 seconds
setInterval(spawnBubble, 200);
// Load articles dynamically (dummy data for now)
const articles = [
{ title: "Article 1", tags: ["neural networks", "AI"], content: "Content of article 1..." },
{ title: "Article 2", tags: ["AI", "learning"], content: "Content of article 2..." },
{ title: "Article 3", tags: ["neural networks", "data"], content: "Content of article 3..." }
];
const blogContainer = document.getElementById('blog-things');
articles.forEach(article => {
const articleDiv = document.createElement('div');
articleDiv.innerHTML = `<h3>${article.title}</h3><p>${article.content}</p>`;
blogContainer.appendChild(articleDiv);
});
</script>
</body>
</html>