Initial commit

content/posts/hello-world.mdx

@@ -0,0 +1,48 @@
+---
+title: 'Hello World: The Art of Minimalism'
+date: '2024-01-01'
+description: 'An introduction to this minimal digital garden and the philosophy behind it.'
+tags: ['minimalism', 'design', 'intro']
+---
+
+Welcome to my new digital garden. This space is designed to be a reflection of my philosophy: **simplicity is the ultimate sophistication**.
+
+## Why Minimalism?
+
+In a world full of noise, I find peace in clarity. This website is built with:
+
+- **Next.js 15**: For bleeding-edge performance.
+- **Tailwind CSS**: For utility-first styling.
+- **MDX**: For rich, interactive content.
+
+## The Detail
+
+Design is not just what it looks like and feels like. Design is how it works. <Citation id="jobs" index={1} />
+
+<SideNote title="Minimalism">
+  "Simplicity is the ultimate sophistication." — Leonardo da Vinci
+</SideNote>
+
+### Code Snippet Test
+
+Here is how I configured the font:
+
+```typescript
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  display: "swap",
+});
+```
+
+## Future Plans
+
+I plan to write about:
+1. Software Architecture
+2. Design Systems
+3. The Zen of Coding
+
+<Bibliography items={[
+  { id: 'jobs', content: 'Steve Jobs, The New York Times Magazine, 2003' }
+]} />
+

content/posts/testing-layout.mdx

@@ -0,0 +1,107 @@
+---
+title: "The Architecture of a Modern Personal Site"
+date: "2025-02-06"
+description: "A deep dive into the technical stacks, design philosophies, and implementation details of building a minimalist digital garden in the age of AI."
+tags: ["Architecture", "Next.js", "Design", "System"]
+---
+
+# Introduction
+
+In an era dominated by algorithmic feeds and ephemeral content, the personal website remains the last bastion of digital sovereignty. It is a space where the signal-to-noise ratio is controlled entirely by the author. 
+
+This post serves as **stress test** for the typography and layout of this blog engine. We need to verify that long-form content is readable, that the table of contents tracks correctly, and that the marginalia (side notes) function as intended.
+
+## The Tech Stack
+
+We opted for a "bleeding-edge but stable" approach. The core constraints were:
+
+1.  **Performance**: Sub-100ms navigation.
+2.  **Simplicity**: No heavy client-side hydration unless necessary.
+3.  **Ownership**: Markdown-backed content.
+
+<SideNote title="Why Markdown?">
+  Markdown ensures that the content is portable. If this site moves to a completely different stack in 5 years, the content remains valid.
+</SideNote>
+
+### Next.js & React Server Components
+
+We utilize React Server Components (RSC) to render the MDX content entirely on the server. This means zero JavaScript is shipped for the blog post content itself.
+
+```typescript
+// app/blog/[slug]/page.tsx
+export default async function BlogPost({ params }: Props) {
+    const { slug } = await params;
+    const post = getPostBySlug(slug);
+
+    return (
+        <article>
+            <MDXRemote source={post.content} />
+        </article>
+    );
+}
+```
+
+
+![Example Image](/images/testing-layout/example.svg)
+
+## Typography & Rhythm
+
+Good typography is invisible. It guides the eye without drawing attention to itself. We use **Inter** for its tall x-height and readability on screens.
+
+The vertical rhythm is maintained using `prose` (Tailwind Typography), ensuring that margins between paragraphs, headings, and lists are consistent.
+
+### List Styles
+
+*   **Unordered lists** are used for collections of related items.
+*   **Ordered lists** imply a sequence or ranking.
+*   **Nested lists** should handle indentation gracefully.
+
+1.  First item
+2.  Second item
+    *   Sub-item A
+    *   Sub-item B
+3.  Third item
+
+## Handling Complexity
+
+What happens when we introduce complex diagrams or citations?
+
+The system uses a custom citation component <Citation id="tufte" index="1" /> that links to a bibliography at the end. This is inspired by Tufte's design principles.
+
+> "Clutter and confusion are failures of design, not attributes of information." — Edward Tufte
+
+## Deep Dive: The Graph Network
+
+Let's discuss the graph neural network work mentioned in my resume. When dealing with multi-agent systems, the topology of interaction is often unknown.
+
+### Inference Challenge
+
+Inferring the graph $G = (V, E)$ from a set of trajectories $T$ is an NP-hard problem in its general form. However, by restricting the hypothesis space to local interactions, we can approximate the adjacency matrix.
+
+<SideNote title="Attention Mechanism">
+  The attention mechanism acts as a "soft" adjacency matrix, allowing the model to learn weights between agents dynamically.
+</SideNote>
+
+We developed a novel **Fast Graph Attention** layer that allows for:
+
+1.  **Batching**: Processing heavily disjoint graphs in parallel.
+2.  **Sparsity**: Pruning edges with low attention scores during training.
+
+```python
+class FastGAT(nn.Module):
+    def forward(self, x, adj):
+        # Efficient sparse matrix multiplication
+        return spmm(adj, self.W(x))
+```
+
+## Conclusion
+
+This layout seems to handle various content types well. The sticky TOC on the left should have tracked your progress through *The Tech Stack*, *Typography*, and *Deep Dive* sections.
+
+The marginalia should have appeared to the right of the relevant paragraphs without overlapping the main text.
+
+<Bibliography>
+  <div id="bib-tufte">
+    [1] Edward Tufte, *Envisioning Information*, Graphics Press, 1990.
+  </div>
+</Bibliography>