108 lines
4.0 KiB
Plaintext
108 lines
4.0 KiB
Plaintext
---
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
|
|
|
|
|
|
## 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>
|