Update index.html

SrishtiCode · web-flow · commit e7e6569ca7d6 · 2025-10-28T20:20:23.000+05:30
diff --git a/index.html b/index.html
@@ -179,6 +179,29 @@
     }
 
     .skill-item:hover { transform: translateY(-2px); border-color: var(--accent); }
+
+    .writeup-content {
+      background: var(--bg-secondary);
+      padding: 2rem;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      animation: fadeIn 0.5s ease-in-out;
+    }
+    .back-btn {
+      display: inline-block;
+      margin-bottom: 1rem;
+      background: var(--bg-primary);
+      color: var(--accent);
+      padding: 0.5rem 1rem;
+      border-radius: 6px;
+      text-decoration: none;
+      border: 1px solid var(--border);
+      transition: all 0.2s;
+    }
+    .back-btn:hover {
+      background: var(--accent);
+      color: #fff;
+    }
   </style>
 </head>
 <body>
@@ -301,7 +324,7 @@ <h3 style="margin-top: 2rem;">Contact</h3>
       <p>Email: <a href="mailto:srishtirathi@gmail.com" style="color: var(--accent); text-decoration: none;">srishtirathi@gmail.com</a></p>
     </main>
 
-    <!-- WRITEUPS -->
+    <!-- WRITEUPS LIST -->
     <main id="writeups" class="page-section">
       <h2 style="font-size: 2rem; margin-bottom: 2rem;">Security Writeups</h2>
       <div class="timeline">
@@ -311,7 +334,7 @@ <h2 class="post-title">DOM XSS: My Learning Journey</h2>
           <p class="post-description">Completed all Burp Suite DOM XSS labs, analyzed real-world cases, and explored detection using DevTools and MutationObservers.</p>
           <div class="tags"><span class="tag">XSS</span><span class="tag">Security</span><span class="tag">Bug Bounty</span></div>
           <div class="project-links" style="margin-top: 1rem;">
-            <a href="#" class="btn">Read Writeup</a>
+            <a href="#" class="btn read-writeup" data-id="domxss">Read Writeup</a>
           </div>
         </article>
 
@@ -321,7 +344,7 @@ <h2 class="post-title">Exploring Bug Bounty Hunting on GitLab</h2>
           <p class="post-description">My week-long bug bounty practice on GitLab — the methods, payloads, and lessons learned from real-world testing.</p>
           <div class="tags"><span class="tag">Bug Bounty</span><span class="tag">Web Security</span></div>
           <div class="project-links" style="margin-top: 1rem;">
-            <a href="#" class="btn">Read Writeup</a>
+            <a href="#" class="btn read-writeup" data-id="gitlabbounty">Read Writeup</a>
           </div>
         </article>
 
@@ -331,12 +354,20 @@ <h2 class="post-title">SQL Injection Deep Dive</h2>
           <p class="post-description">Comprehensive analysis of SQL injection techniques, from basic UNION attacks to advanced blind SQL injection methodologies.</p>
           <div class="tags"><span class="tag">SQL Injection</span><span class="tag">Web Security</span><span class="tag">Pentesting</span></div>
           <div class="project-links" style="margin-top: 1rem;">
-            <a href="#" class="btn">Read Writeup</a>
+            <a href="#" class="btn read-writeup" data-id="sqlinjection">Read Writeup</a>
           </div>
         </article>
       </div>
     </main>
 
+    <!-- SINGLE WRITEUP VIEW -->
+    <main id="single-writeup" class="page-section">
+      <a href="#" class="back-btn" id="backToWriteups">← Back to Writeups</a>
+      <div id="writeupContainer" class="writeup-content">
+        <!-- Content dynamically loaded here -->
+      </div>
+    </main>
+
     <footer>
       <p>© 2025 Srishti Rathi. All rights reserved.</p>
       <div class="social-links">
@@ -351,6 +382,29 @@ <h2 class="post-title">SQL Injection Deep Dive</h2>
     document.addEventListener('DOMContentLoaded', function() {
       const navLinks = document.querySelectorAll('.nav-link');
       const pageSections = document.querySelectorAll('.page-section');
+      const writeupContainer = document.getElementById('writeupContainer');
+      const backToWriteups = document.getElementById('backToWriteups');
+
+      const writeups = {
+        domxss: `
+          <h2>DOM XSS: My Learning Journey</h2>
+          <p>In this writeup, I explored DOM-based Cross-Site Scripting (XSS) vulnerabilities. These occur when untrusted data is written to the DOM without proper sanitization.</p>
+          <p>I completed all Burp Suite DOM XSS labs and analyzed multiple payloads using <strong>DevTools</strong> and <strong>MutationObservers</strong> to trace JavaScript execution flows.</p>
+          <p>Key takeaways included understanding sinks like <code>innerHTML</code>, <code>document.write</code>, and <code>eval()</code>—and the importance of context-aware encoding.</p>
+        `,
+        gitlabbounty: `
+          <h2>Exploring Bug Bounty Hunting on GitLab</h2>
+          <p>During my week-long GitLab bug bounty practice, I focused on testing for injection, IDOR, and XSS vulnerabilities across endpoints.</p>
+          <p>I learned how to efficiently use <strong>Burp Suite</strong> for intercepting API calls, and how GitLab’s bounty structure encourages detailed proof-of-concept submissions.</p>
+          <p>This helped me refine my reconnaissance strategy and improved my payload crafting skills for web security testing.</p>
+        `,
+        sqlinjection: `
+          <h2>SQL Injection Deep Dive</h2>
+          <p>This writeup explores SQL Injection from fundamental UNION-based attacks to advanced Blind SQL Injection.</p>
+          <p>Key methods studied: <strong>boolean-based</strong>, <strong>time-based</strong>, and <strong>out-of-band</strong> injections.</p>
+          <p>I also practiced exploitation using <code>sqlmap</code> and learned preventive coding practices using parameterized queries and ORM frameworks.</p>
+        `
+      };
 
       function showPage(pageName) {
         pageSections.forEach(section => section.classList.remove('active'));
@@ -371,6 +425,21 @@ <h2 class="post-title">SQL Injection Deep Dive</h2>
         });
       });
 
+      // Read writeup click
+      document.querySelectorAll('.read-writeup').forEach(btn => {
+        btn.addEventListener('click', e => {
+          e.preventDefault();
+          const id = btn.dataset.id;
+          writeupContainer.innerHTML = writeups[id] || '<p>Writeup not found.</p>';
+          showPage('single-writeup');
+        });
+      });
+
+      backToWriteups.addEventListener('click', e => {
+        e.preventDefault();
+        showPage('writeups');
+      });
+
       window.addEventListener('popstate', () => {
         const hash = window.location.hash.slice(1) || 'home';
         showPage(hash);
