achievements

Author: RohanAltAccount

index.html

@@ -32,12 +32,69 @@ <h1>Rohan Modi</h1>
         <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">loading up...</div>
+</section>
     </section>
 
   </main>
 <background class="background"></background>
   <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",
+  "2024-2025・Built multiple web apps and prototypes",
+  "2025・Learned C++ and built CLI projects",
+  "2025・Started competiting in coding competitions and hackathons",
+  "2025・Won first hackathon",
+  "2025・Built GitHub open-source tools",
+  "2025-2026・Started research writing and published a paper on arXiv",
+  "2025-2026・AI & Business Systems Consultant at Kumon, contributing to student tracking and marketing systems",
+  "2026・Started YouTube channel sharing tech knowledge and tutorials"
+];
+
+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);
+}
+
+// initial load
+loadMore();
+
+// infinite scroll trigger
+window.addEventListener("scroll", () => {
+  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
+    loadMore();
+  }
+});
+</script>
+
 </body>
 </html>

styles.css

@@ -8,9 +8,8 @@ body {
   color: #111;
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
   min-height: 100vh;
-  display: flex;
-  justify-content: center;
   padding: 64px 16px;
+  display: block;
 }
 body::before {
   content: "";
@@ -19,7 +18,7 @@ body::before {
   pointer-events: none;
   background-image: url("https://grainy-gradients.vercel.app/noise.svg");
   opacity: 0.04;
-  z-index: 999;
+  z-index: 0;
 }
 main.container {
   max-width: 680px;
@@ -30,7 +29,7 @@ main.container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: fixed;
+  z-index: 1;
 }
 .profile {
   display: flex;
@@ -68,7 +67,7 @@ main.container {
   box-shadow: 0 10px 30px rgba(0,0,0,0.08);
 }
 .background {
-  position: fixed;
+  position: relative;
   inset: 0;
   z-index: -1;
   overflow: hidden;
@@ -165,6 +164,42 @@ h1 {
   cursor: pointer;
   border: none;
 }
+.achievements {
+  margin-top: 50px;
+}
+
+#achievement-list {
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
+}
+
+.achievement-card {
+  padding: 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6a6a6a;
+    transition: color 0.5s ease, font-size 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+
+}
+.achievement-card:hover {
+  padding: 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #000000;
+  font-size: 1.05rem;
+  cursor: pointer;
+  transform: translateY(-2px);
+    transition: color 0.5s ease, font-size 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#loading {
+  text-align: center;
+  padding: 20px;
+  display: none;
+}
 
 .card:hover {
   transform: translateY(-2px);