-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
252 lines (214 loc) · 11.3 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic HTML Metadata -->
<title>Riasaat Bin Raihan </title>
<meta name="description" content="Welcome to the portfolio of Riasaat Bin Raihan, a developer and cybersecurity enthusiast. Explore my projects, blogs, and contact info.">
<meta name="keywords" content="Riasaat, Riasaat Bin Raihan, portfolio, developer, cybersecurity, programming, technology, software, open source">
<meta name="author" content="Riasaat Bin Raihan">
<!-- Open Graph Metadata for Social Media Sharing -->
<meta property="og:title" content="Riasaat Bin Raihan">
<meta property="og:description" content="Explore the professional portfolio of Riasaat Bin Raihan, a passionate developer and cybersecurity enthusiast.">
<meta property="og:image" content="URL.jpg">
<meta property="og:url" content="https://0xriasaat.github.io">
<meta property="og:type" content="website">
<!-- Twitter Card Metadata -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Riasaat Bin Raihan ">
<meta name="twitter:description" content="Explore the professional portfolio of Riasaat Bin Raihan, showcasing my skills, projects, and interests in cybersecurity and programming.">
<meta name="twitter:image" content="https://pbs.twimg.com/profile_images/1803689362372304896/wTxyCd_X_400x400.jpg">
<meta name="x:card" content="summary_large_image">
<meta name="x:title" content="Riasaat Bin Raihan ">
<meta name="x:description" content="Explore the professional portfolio of Riasaat Bin Raihan, showcasing my skills, projects, and interests in cybersecurity and programming.">
<meta name="x:image" content="https://pbs.twimg.com/profile_images/1803689362372304896/wTxyCd_X_400x400.jpg">
<!-- Robots Meta Tag for Indexing and Following -->
<meta name="robots" content="index, follow">
<!-- Viewport for Mobile Responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #1a1a1a;
color: #d4d4d4;
font-family: "Courier New", Courier, monospace;
padding-top: 50px;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
}
/* Header and Navigation */
header {
text-align: center;
padding: 50px 0;
padding-bottom: 10px;
}
header h1 {
color: #0ff;
font-size: 4rem;
font-weight: bold;
}
nav {
display: flex;
justify-content: center;
gap: 15px;
}
nav span {
color: #0ff;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
/* Section Styling */
section {
margin-top: 100px;
padding: 20px;
border-top: 1px solid #444;
display: none; /* Hide sections initially */
}
</style>
</head>
<body>
<!-- Header -->
<header>
<h1 id="header-text">RIASAAT</h1>
<nav>
<span class="nav-link" data-text="Home" data-target="home">Home</span>
<span class="nav-link" data-text="About" data-target="about">About</span>
<span class="nav-link" data-text="Blogs" data-target="blogs">Blogs</span>
<span class="nav-link" data-text="Contact" data-target="contact">Contact</span>
</nav>
</header>
<!-- Sections -->
<main>
<section id="home">
<h2>Home</h2>
<p>Welcome to my portfolio website. Explore the sections to learn more!</p>
<div id="quote-box">"Technology is best when it brings people together." – Matt Mullenweg</div>
</section>
<section id="about">
<h2>About Me</h2>
<p>Hey there! I'm a developer passionate about cyber security technology and open-source projects.</p>
</section>
<section id="blogs">
<h2>Blogs</h2>
<p>Currently there is no blog to share:</p>
<ul>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Feel free to reach out or connect on social media.</p>
<!-- Social Media Links -->
<div>
<a href="https://www.linkedin.com/in/riasaat-bin-raihan-raihan-a01681336" target="_blank" style="color: #0ff; text-decoration: none;">LinkedIn</a> |
<a href="https://github.com/0xriasaat" target="_blank" style="color: #0ff; text-decoration: none;">GitHub</a> |
<a href="https://x.com/0xriasaat" target="_blank" style="color: #0ff; text-decoration: none;">X</a>
</div>
<!-- Email Link -->
<p>Or email me directly at <a href="mailto:[email protected]" style="color: #0ff; text-decoration: none;">[email protected]</a>.</p>
<!-- Optional Contact Form -->
<form action="https://formspree.io/f/xyzywylz" method="POST" style="margin-top: 20px;">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required style="background-color: #333; color: #d4d4d4; border: none; padding: 8px; width: 100%; margin-top: 8px;">
<label for="email" style="margin-top: 10px; display: block;">Email:</label>
<input type="email" id="email" name="_replyto" required style="background-color: #333; color: #d4d4d4; border: none; padding: 8px; width: 100%; margin-top: 8px;">
<label for="message" style="margin-top: 10px; display: block;">Message:</label>
<textarea id="message" name="message" rows="4" required style="background-color: #333; color: #d4d4d4; border: none; padding: 8px; width: 100%; margin-top: 8px;"></textarea>
<button type="submit" style="margin-top: 10px; padding: 10px 15px; background-color: #0ff; border: none; color: #1a1a1a; font-weight: bold;">Send</button>
</form>
</section>
</main>
<script>
// Show the home section by default
document.getElementById('home').style.display = 'block';
// Characters for scrambling effect
const scrambleChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?~';
// Function to create a random string of a specific length
const getRandomString = (length) => {
return Array.from({length}, () => scrambleChars[Math.floor(Math.random() * scrambleChars.length)]).join('');
};
// Function to scramble text
const scrambleText = (element, originalText) => {
const textLength = originalText.length;
const scrambleInterval = setInterval(() => {
element.textContent = getRandomString(textLength);
}, 50);
// Restore the original text after 500ms
setTimeout(() => {
clearInterval(scrambleInterval);
element.textContent = originalText;
}, 500);
};
// Apply scramble effect on header and navigation links on hover
document.getElementById('header-text').addEventListener('mouseenter', function() {
scrambleText(this, this.textContent);
});
document.querySelectorAll('.nav-link').forEach(link => {
const originalText = link.dataset.text;
link.addEventListener('mouseenter', function() {
scrambleText(this, originalText);
});
// Show the target section when clicked
link.addEventListener('click', function() {
const targetId = link.getAttribute('data-target');
// Hide all sections
document.querySelectorAll('section').forEach(section => {
section.style.display = 'none';
});
// Show the selected section
document.getElementById(targetId).style.display = 'block';
// Smooth scroll to the top of the section
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
});
});
// Quotes array
const quotes = [
'"Technology is best when it brings people together." – Matt Mullenweg',
'"The science of today is the technology of tomorrow." – Edward Teller',
'"The real danger is not that computers will begin to think like men, but that men will begin to think like computers." – Sydney J. Harris',
'"Innovation distinguishes between a leader and a follower." – Steve Jobs',
'"It has become appallingly obvious that our technology has exceeded our humanity." – Albert Einstein'
];
// Function to change quotes periodically with scramble effect
const quoteBox = document.getElementById('quote-box');
let currentQuoteIndex = 0;
const changeQuote = () => {
currentQuoteIndex = (currentQuoteIndex + 1) % quotes.length;
scrambleText(quoteBox, quotes[currentQuoteIndex]);
};
// Rotate quotes every 5 seconds
setInterval(changeQuote, 5000);
// Show the correct section if a hash is present in the URL on page load
window.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash.substring(1);
if (hash) {
// Hide all sections and show the one corresponding to the hash
document.querySelectorAll('section').forEach(section => {
section.style.display = 'none';
});
const targetSection = document.getElementById(hash);
if (targetSection) {
targetSection.style.display = 'block';
targetSection.scrollIntoView({ behavior: 'smooth' });
}
} else {
// Default to showing the home section if no hash is present
document.getElementById('home').style.display = 'block';
}
});
// Periodic scrambling effect on header and navigation links
setInterval(() => {
const randomChoice = Math.random() < 0.5 ? 'header' : 'nav';
if (randomChoice === 'header') {
scrambleText(document.getElementById('header-text'), document.getElementById('header-text').textContent);
} else {
const randomNavLink = document.querySelectorAll('.nav-link');
const randomIndex = Math.floor(Math.random() * randomNavLink.length);
scrambleText(randomNavLink[randomIndex], randomNavLink[randomIndex].dataset.text);
}
}, 3000);
</script>
</body>
</html>