RPR21.github.io/blog.html at main · RPR21/RPR21.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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!--
FILE: blog.html
PURPOSE: Blog listing and insights hub
FEATURES:
  - Blog post cards with excerpts
  - Category filters (astronomy, coding, music, life)
  - Search functionality
  - RSS feed link
DEPENDENCIES: main.css, animations.css
STATUS: [TODO / IN PROGRESS / COMPLETE]
NOTES: Regular updates here keep site fresh. Plan for easy content addition.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog | Your Name</title>
  <meta name="description" content="Thoughts on astronomy, coding, music, and the intersections between them.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&family=Sora:wght@300;400;500;600&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="starfield" id="starfield"></div>

  <!-- Navigation -->
  <nav class="nav" id="nav">
    <a href="index.html" class="nav-logo">
      <span class="logo-text">PR</span>
    </a>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
      <span></span>
      <span></span>
      <span></span>
    </button>
    <ul class="nav-links" id="navLinks">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="research.html">Research</a></li>
      <li><a href="software.html">Software</a></li>
      <li><a href="teaching.html">Teaching</a></li>
      <li><a href="passions.html">Passions</a></li>
      <li><a href="blog.html" class="active">Blog</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

  <!-- Page Header -->
  <header class="page-header">
    <div class="container">
      <div class="page-header-content">
        <div class="page-eyebrow">
          <span>Blog</span>
          <span></span>
        </div>
        <h1 class="page-title">Thoughts & Reflections</h1>
        <p class="page-description">
          Writing about the things I learn, build, and wonder about — from the physics of
          star formation to the mathematics of music scales.
        </p>
      </div>
    </div>
  </header>

  <!-- Filter Tags -->
  <section class="content-section" style="padding-bottom: 0;">
    <div class="container">
      <div class="blog-filters">
        <button class="filter-btn active" data-filter="all">All</button>
        <button class="filter-btn" data-filter="astronomy">Astronomy</button>
        <button class="filter-btn" data-filter="coding">Coding</button>
        <button class="filter-btn" data-filter="music">Music</button>
        <button class="filter-btn" data-filter="career">Career</button>
      </div>
    </div>
  </section>

  <!-- Blog Posts -->
  <section class="content-section">
    <div class="container">
      <div class="blog-list">
        <!-- Featured Post -->
        <article class="blog-post blog-post-featured">
          <div class="blog-post-image">
            <img src="images/blog-featured.jpg" alt="Featured Post">
            <div class="blog-post-overlay"></div>
          </div>
          <div class="blog-post-content">
            <div class="blog-post-meta">
              <span class="blog-date">January 15, 2025</span>
              <span class="blog-category">Astronomy</span>
              <span class="blog-read-time">8 min read</span>
            </div>
            <h2>Why I Study Star Formation (And Why You Should Care)</h2>
            <p>
              Every atom in your body was forged in the heart of a star. Understanding how
              stars form isn't just academic curiosity — it's piecing together our own origin story.
              Here's why I've dedicated my career to this question.
            </p>
            <a href="blog/star-formation-intro.html" class="blog-read-more">Read Article →</a>
          </div>
        </article>

        <!-- Regular Posts Grid -->
        <div class="blog-grid">
          <article class="blog-card" data-category="coding">
            <div class="blog-card-image">
              <img src="images/blog-python.jpg" alt="Python for Scientists">
            </div>
            <div class="blog-card-content">
              <div class="blog-card-meta">
                <span>December 28, 2024</span>
                <span>Coding</span>
              </div>
              <h3>5 Python Libraries Every Scientist Should Know</h3>
              <p>Beyond NumPy and Pandas — lesser-known tools that have transformed my workflow.</p>
              <a href="blog/python-libraries.html" class="blog-card-link">Read →</a>
            </div>
          </article>

          <article class="blog-card" data-category="music">
            <div class="blog-card-image">
              <img src="images/blog-raga.jpg" alt="Ragas and Mathematics">
            </div>
            <div class="blog-card-content">
              <div class="blog-card-meta">
                <span>December 10, 2024</span>
                <span>Music</span>
              </div>
              <h3>The Mathematics of Indian Ragas</h3>
              <p>How I discovered beautiful patterns hiding in ancient musical scales.</p>
              <a href="blog/raga-mathematics.html" class="blog-card-link">Read →</a>
            </div>
          </article>

          <article class="blog-card" data-category="career">
            <div class="blog-card-image">
              <img src="images/blog-career.jpg" alt="Career Transition">
            </div>
            <div class="blog-card-content">
              <div class="blog-card-meta">
                <span>November 22, 2024</span>
                <span>Career</span>
              </div>
              <h3>From Academia to Tech: My Ongoing Journey</h3>
              <p>Reflections on considering a career pivot and what I've learned so far.</p>
              <a href="blog/academia-to-tech.html" class="blog-card-link">Read →</a>
            </div>
          </article>

          <article class="blog-card" data-category="astronomy">
            <div class="blog-card-image">
              <img src="images/blog-disk.jpg" alt="Protoplanetary Disks">
            </div>
            <div class="blog-card-content">
              <div class="blog-card-meta">
                <span>November 5, 2024</span>
                <span>Astronomy</span>
              </div>
              <h3>Protoplanetary Disks Explained (For Everyone)</h3>
              <p>A jargon-free introduction to the cosmic nurseries where planets are born.</p>
              <a href="blog/protoplanetary-disks.html" class="blog-card-link">Read →</a>
            </div>
          </article>

          <article class="blog-card" data-category="coding">
            <div class="blog-card-image">
              <img src="images/blog-visualization.jpg" alt="Data Visualization">
            </div>
            <div class="blog-card-content">
              <div class="blog-card-meta">
                <span>October 18, 2024</span>
                <span>Coding</span>
              </div>
              <h3>Making Beautiful Scientific Figures</h3>
              <p>Tips and tricks I've learned for creating publication-quality visualizations.</p>
              <a href="blog/scientific-figures.html" class="blog-card-link">Read →</a>
            </div>
          </article>

          <article class="blog-card" data-category="music">
            <div class="blog-card-image">
              <img src="images/blog-guitar.jpg" alt="Learning Guitar">
            </div>
            <div class="blog-card-content">
              <div class="blog-card-meta">
                <span>October 2, 2024</span>
                <span>Music</span>
              </div>
              <h3>What 5 Years of Guitar Taught Me About Learning</h3>
              <p>Lessons from learning an instrument that apply to everything else in life.</p>
              <a href="blog/guitar-lessons.html" class="blog-card-link">Read →</a>
            </div>
          </article>
        </div>

        <!-- Load More -->
        <div class="blog-load-more">
          <button class="btn btn-secondary">Load More Posts</button>
        </div>
      </div>
    </div>
  </section>

  <!-- Newsletter Section -->
  <section class="content-section" style="background: var(--bg-tertiary);">
    <div class="container">
      <div class="newsletter-box">
        <div class="newsletter-content">
          <h3>Stay Updated</h3>
          <p>Get notified when I publish new posts. No spam, just occasional updates about astronomy, code, and music.
          </p>
        </div>
        <form class="newsletter-form" action="#" method="post">
          <input type="email" placeholder="your@email.com" required>
          <button type="submit" class="btn btn-primary">Subscribe</button>
        </form>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <p class="footer-copyright">© 2025 Your Name. Crafted with curiosity.</p>
        <p class="footer-tagline">From stars to strings, code to cosmos.</p>
      </div>
    </div>
  </footer>

  <script src="js/main.js"></script>
  <script>
    // Simple blog filter functionality
    const filterBtns = document.querySelectorAll('.filter-btn');
    const blogCards = document.querySelectorAll('.blog-card');

    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        // Update active button
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const filter = btn.dataset.filter;

        blogCards.forEach(card => {
          if (filter === 'all' || card.dataset.category === filter) {
            card.style.display = 'block';
            card.style.animation = 'fadeInUp 0.5s ease forwards';
          } else {
            card.style.display = 'none';
          }
        });
      });
    });
  </script>
</body>

</html>