Story.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VolComm - Profile Page</title>
  <link rel="stylesheet" href="styles.css">
  <style>
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #c1feec 50%, #f2fffb);
  font-family: Arial, sans-serif;
}

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

header {
  position: relative;
  z-index: 10; /* Ensures the header stays on top */
}

.profile-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.profile-info, .timeline {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 45%;
  position: relative; /* Ensure it's positioned relative for z-index */
}

.timeline svg {
  position: relative;
  z-index: 0; /* Ensure the line stays behind */
}

.timeline-content {
  margin-top: 20px;
}

.checkpoint {
  margin-bottom: 20px;
}

.date {
  color: #999999;
  font-size: 14px;
}

  </style>
</head>

<body>
  <header>
    <div class="container">
        <h1>VolComm</h1><br>
        
        <nav>
            <div class="menu-toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>

            <ul class="nav-links" id="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="opportunities.html">Opportunities</a></li>
                <li><a href="events.html">Events</a></li>
                <li><a href="post.html">Post</a></li>
                <li><a href="SignIn.html" id="login-link">Login</a></li>
                <li><a href="SignUp.html" id="register-link">Register</a></li>
            </ul>

        </nav>

        <div class="search-bar">
            <input type="text" id="search-input" placeholder="Search...">
            <button id="search-button">Search</button>
        </div>

    </div>

</header>

<svg id="timeline-svg" width="100px" height="100%" viewBox="0 0 20 2000">
  <path id="timeline" d="M10,10 V1990" fill="none"/>
  <!-- Checkpoints -->
  <!-- Checkpoints are not needed in the SVG since they will move with the content -->
</svg>

<!-- Checkpoint Contents -->
<div class="checkpoint-content">
  <svg class="checkpoint-svg" width="20" height="100" viewBox="0 0 20 20" style="position:absolute;left:-50px;top:40px;">
    <circle class="checkpoint" cx="10" cy="10" r="5" />
  </svg>
  <img src="https://via.placeholder.com/100" alt="Community Clean-Up">
  <div>
    <h3>Community Clean-Up</h3>
    <p class="date">March 2024</p>
    <p>Participated in a local clean-up event to help maintain the beauty of the community park.</p>
  </div>
</div>

<div class="checkpoint-content">
  <svg class="checkpoint-svg" width="20" height="100" viewBox="0 0 20 20" style="position:absolute;left:-50px;top:40px;">
    <circle class="checkpoint" cx="10" cy="10" r="5" />
  </svg>
  <img src="https://via.placeholder.com/100" alt="Fundraising Gala">
  <div>
    <h3>Fundraising Gala</h3>
    <p class="date">January 2024</p>
    <p>Organized a fundraising event to support local charities, raising over $10,000.</p>
  </div>
</div>

<div class="checkpoint-content">
  <svg class="checkpoint-svg" width="20" height="100" viewBox="0 0 20 20" style="position:absolute;left:-50px;top:40px;">
    <circle class="checkpoint" cx="10" cy="10" r="5" />
  </svg>
  <img src="https://via.placeholder.com/100" alt="Food Drive">
  <div>
    <h3>Food Drive</h3>
    <p class="date">November 2023</p>
    <p>Volunteered to collect and distribute food donations to families in need during the holiday season.</p>
  </div>
</div>

<div class="checkpoint-content">
  <svg class="checkpoint-svg" width="20" height="100" viewBox="0 0 20 20" style="position:absolute;left:-50px;top:40px;">
    <circle class="checkpoint" cx="10" cy="10" r="5" />
  </svg>
  <img src="https://via.placeholder.com/100" alt="Clothing Drive">
  <div>
    <h3>Clothing Drive</h3>
    <p class="date">September 2023</p>
    <p>Collected and distributed clothes to the homeless community before the winter season.</p>
  </div>
</div>

<div class="checkpoint-content">
  <svg class="checkpoint-svg" width="20" height="100" viewBox="0 0 20 20" style="position:absolute;left:-50px;top:40px;">
    <circle class="checkpoint" cx="10" cy="10" r="5" />
  </svg>
  <img src="https://via.placeholder.com/100" alt="Blood Donation Camp">
  <div>
    <h3>Blood Donation Camp</h3>
    <p class="date">July 2023</p>
    <p>Organized a blood donation camp that received contributions from over 200 donors.</p>
  </div>
</div>

<script>
  document.addEventListener('scroll', () => {
    const scrollPosition = window.scrollY;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    const scrollPercentage = Math.min(scrollPosition / (documentHeight - windowHeight), 1);
    const path = document.querySelector('#timeline');
    const pathLength = path.getTotalLength();

    path.style.strokeDasharray = `${scrollPercentage * pathLength} ${pathLength}`;
  });
</script>
<script src="script.js"></script>
</body>
</html>