-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
135 lines (114 loc) · 3.97 KB
/
index.html
File metadata and controls
135 lines (114 loc) · 3.97 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Rohan Modi</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<main class="container">
<section class="profile">
<img src="PhotoOfMe2.png" alt="Profile photo" class="avatar">
<button class="cta-button" onclick="copyText()">Copy Email</button>
<script>
function copyText() {
navigator.clipboard.writeText("r0hanmodi11111@gmail.com")
.then(() => {
return Swal.fire({
title: "Email copied.",
text: "Feel free to send me an email. I’ll respond as soon as possible.",
icon: "success",
confirmButtonText: "Sounds good",
background: "#ffffff",
color: "#000000",
confirmButtonColor: "#000000",
});
})
.catch(() => {
alert("Failed to copy.");
});
}
</script>
<h1>Rohan Modi</h1>
<p class="subtitleiguess">High School Student • Developer</p>
<p class="desc">
Passionate about computer science and sharing knowledge. Feel free to reach out!
</p>
<p class="desc">
<a href="https://www.youtube.com/@ROHAN-MODI" class="link">YouTube</a> |
<a href="https://thetechresearchpaper.wixsite.com/techknowledge/blog" class="link">Tech Blog</a> |
<a href="https://www.github.com/RohanAltAccount" class="link">Github</a>
</p>
<section class="achievements">
<h2>Achievements</h2>
<div id="achievement-list"></div>
<div id="loading">There's nothing else to see here...</div>
</section>
</section>
</main>
<div class="background"></div>
<footer>
<small>©2025 Rohan.</small>
</footer>
<script>
const achievements = [
"Present・CS and ML oriented high school student",
"2022・Founded tech blog (TecRes), publishing informative tech news",
"2023・Started YouTube channel, creating tech-related content" ,
"2024-Present・FTC and FRC robotics competitor, building and programming robots",
"2024-2025・Built multiple web apps and prototypes",
"2025-2026・Learned C++ and built open-source GitHub projects",
"2025-2026・Started competiting in coding competitions and hackathons",
"2025-2026・Self-taught developer building independent software projects (present)",
"2025-2026・Volunteered to mentor ESL students with STEM-related topics",
"2025-2026・Started research writing and published a paper on arXiv",
"2025-2026・AI & Business Systems Consultant at local Kumon center, contributing to student tracking and marketing systems",
"2026・Technology & marketing contributor for STEM nonprofit initiative, supporting marketing and web operations",
]; let index = 0;
const batchSize = 3;
function loadMore() {
const list = document.getElementById("achievement-list");
const loading = document.getElementById("loading");
loading.style.display = "block";
setTimeout(() => {
for (let i = 0; i < batchSize; i++) {
if (index >= achievements.length) return;
const div = document.createElement("div");
div.className = "achievement-card";
div.textContent = achievements[index];
list.appendChild(div);
index++;
}
loading.style.display = "none";
}, 500);
}
loadMore();
window.addEventListener("scroll", () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
loadMore();
}
});
</script>
<script>
const bg = document.querySelector('.background');
let targetX = window.innerWidth / 2;
let targetY = window.innerHeight / 2;
let currentX = targetX;
let currentY = targetY;
window.addEventListener('mousemove', (e) => {
targetX = e.clientX;
targetY = e.clientY;
});
function animate() {
const ease = 0.08;
currentX += (targetX - currentX) * ease;
currentY += (targetY - currentY) * ease;
bg.style.setProperty('--x', `${currentX}px`);
bg.style.setProperty('--y', `${currentY}px`); requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>