sarathprabhav.github.io/blog.html at main · sarathprabhav/sarathprabhav.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
  <title>Blog | Sarath Prabhavu</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="navbar-placeholder"></div>

<!-- PAGE HERO -->
<header class="page-hero">
  <div class="container">
    <p class="hero-eyebrow">Writing</p>
    <h1 class="page-hero-title">Blog</h1>
    <p class="page-hero-sub">Thoughts, experiences, and science writing</p>
  </div>
</header>

<!-- BLOG SECTION -->
<section class="py-5" style="background:var(--bg-alt); min-height:60vh;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8" id="blog-posts"></div>
    </div>
  </div>
</section>

<footer class="site-footer">
  <div class="container text-center">
    <p class="footer-name">Sarath Prabhavu J.</p>
    <p class="footer-links">
      <a href="mailto:sarathprabhav@gmail.com"><i class="bi bi-envelope-fill"></i></a>
      <a href="https://github.com/sarathprabhav" target="_blank"><i class="bi bi-github"></i></a>
      <a href="SARATH_PRABHVU_CV.pdf" target="_blank"><i class="bi bi-file-earmark-person-fill"></i></a>
    </p>
    <p class="footer-copy">© 2026 Sarath Prabhavu J.</p>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="scripts.js"></script>

<script>
fetch('posts.json')
  .then(response => response.json())
  .then(posts => {
    posts.sort((a, b) => new Date(b.date) - new Date(a.date));
    const container = document.getElementById('blog-posts');

    posts.forEach((post, index) => {
      fetch(post.file)
        .then(res => res.text())
        .then(markdown => {
          const fullHTML = marked.parse(markdown);
          const lines = markdown.split('\n');
          const previewText = lines.slice(0, 4).join('\n');
          const previewHTML = marked.parse(previewText);
          const postId = `post-${index}`;

          const el = document.createElement('div');
          el.style.cssText = 'background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.75rem;margin-bottom:1.5rem;';

          el.innerHTML = `
            <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;flex-wrap:wrap;">
              <span style="font-size:0.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);">${post.category || 'Article'}</span>
              <span style="color:var(--border);">·</span>
              <span style="font-size:0.8rem;color:var(--muted);">${post.date}</span>
            </div>
            <h3 style="font-family:'Merriweather',Georgia,serif;font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:0.75rem;">${post.title}</h3>
            <div id="${postId}-preview" style="color:var(--muted);font-size:0.92rem;line-height:1.8;">${previewHTML}</div>
            <div id="${postId}-full" style="display:none;color:var(--text);font-size:0.93rem;line-height:1.85;">${fullHTML}</div>
            <button
              style="margin-top:1rem;background:transparent;border:1.5px solid var(--accent);color:var(--accent);font-size:0.82rem;font-weight:600;padding:0.4rem 1rem;border-radius:8px;cursor:pointer;transition:all 0.2s;"
              onmouseover="this.style.background='var(--accent)';this.style.color='#fff';"
              onmouseout="this.style.background='transparent';this.style.color='var(--accent)';"
              onclick="togglePost('${postId}', this)">
              Read More →
            </button>
          `;

          container.appendChild(el);
        });
    });
  });

function togglePost(id, btn) {
  const preview = document.getElementById(id + '-preview');
  const full = document.getElementById(id + '-full');
  if (full.style.display === 'none') {
    preview.style.display = 'none';
    full.style.display = 'block';
    btn.innerText = '← Show Less';
  } else {
    preview.style.display = 'block';
    full.style.display = 'none';
    btn.innerText = 'Read More →';
  }
}
</script>
</body>
</html>