Welcome to My Renewed Website

A Fresh Start

After years of using Hugo, I’ve rebuilt my academic website using Astro. This is a cosmetic and structural improvement of how I share my research online.

When I decided to refresh my site, I evaluated several static site generators: Hugo (which I was already using), Jekyll (the GitHub Pages classic), and Astro (the new kid on the block). Each has its strengths - Hugo’s speed, Jekyll’s simplicity, Astro’s modern architecture.

I ultimately chose Astro for a practical reason: I found templates like the HuggingFace Research Template, Astro Academia, and Academic Project Template that were all built with Astro. They handled LaTeX math, citations, and interactive components beautifully. Rather than build everything from scratch, I could start with a nice foundation and customize from there.

After this, almost all coding was done by AI coding assistants.

Why Astro works well: It ships zero JavaScript by default, pre-rendering everything to static HTML for instant page loads. When you do need interactivity (like the tag filters on this blog), its “component islands” architecture lets you hydrate just those specific components while keeping the rest static. Plus, native MDX support means I can write in Markdown and embed React components seamlessly. For an academic site where content is king and performance matters, this approach just makes sense.

What I built: Starting from the Astro Academia and the HuggingFace template, I extended it with several custom components:

Homepage: Built with Astro components that pull data from a centralized TypeScript file (cv.ts). This means that the publications automatically populate across the homepage, publications page, and anywhere else needed. The layout combines a profile card with a filterable publications list.
Publications page: Added client-side filtering by research topic tags. The page uses Astro’s component islands to hydrate just the filter buttons with JavaScript while keeping the publication list static. When you click a tag, it shows/hides items using simple CSS classes - no heavy framework needed.
Blog with tag navigation: The blog index generates a tag cloud from all posts, and each tag links to a dynamically generated page showing filtered posts. Astro’s static site generation creates all these pages at build time, so navigation is instant.
Standalone project pages: For some research projects, I created self-contained Astro projects that can be deployed independently or embedded in the main site. The websites will be updated or released later.

Design consistency: A challenge was making everything feel cohesive. I created a setting file that defines colors, typography, and other design tokens. Tailwind CSS handles the responsive layouts, and DaisyUI provides consistent button and card styles across all pages.

Tech Stack: Astro + TypeScript, Tailwind CSS, DaisyUI, HuggingFace blog template, deployed on Netlify. KaTeX for math, Mermaid for diagrams.

What This Site Can Do

Here are some of the capabilities available. As a researcher, I need more than just plain text - I need to communicate complex ideas with precision.

Mathematical Notation

LaTeX math rendering powered by KaTeX. Write inline equations like $f(x) = \int_{-\infty}^{\infty} e^{-x^2} dx$ or display complex formulas:

\mathcal{L}_{DPO} = - \mathbb{E}_{(x, y_w, y_l)} \left[ \log \sigma \left( \beta \log \frac{\pi_\theta(y_w | x)}{\pi_{ref}(y_w | x)} - \beta \log \frac{\pi_\theta(y_l | x)}{\pi_{ref}(y_l | x)} \right) \right]

Code Highlighting

Syntax highlighting for sharing algorithms and implementation details:

def scaled_dot_product_attention(query, key, value, mask=None):
    """
    Compute attention weights and apply them to values.

    Args:
        query: Query tensor of shape (batch, seq_len, d_model)
        key: Key tensor of shape (batch, seq_len, d_model)
        value: Value tensor of shape (batch, seq_len, d_model)
    """
    d_k = query.shape[-1]
    scores = torch.matmul(query, key.transpose(-2, -1)) / math.sqrt(d_k)

    if mask is not None:
        scores = scores.masked_fill(mask == 0, -1e9)

    attention_weights = F.softmax(scores, dim=-1)
    return torch.matmul(attention_weights, value), attention_weights

Marginal Notes

Academic writing often requires providing context without breaking the narrative. Sidenotes let me add commentary, citations, or technical details that readers can explore at their own pace.

Visual Diagrams

Mermaid diagrams for visualizing architectures and workflows:

graph TD
    A[User Request] --> B{Astro Router}
    B -->|Static| C[Pre-rendered HTML]
    B -->|Dynamic| D[Server Endpoint]
    C --> E[Serve Instantly]
    D --> F[Generate Response]
    F --> E
    style E fill:#90EE90,stroke:#333,stroke-width:2px

Citation Support

Full BibTeX integration for referencing papers. For example, the Transformer architecture (Vaswani et al., 2017) revolutionized NLP and beyond.

What’s Next

I’ll be migrating my research articles, adding project showcases, and writing articles about my research.

For more, feel free to explore the publications, check out my projects, or get in touch.

Vaswani, A., Shazeer, N., Parmar, N., Uszkoreit, J., Jones, L., Gomez, A. N., Kaiser, L., & Polosukhin, I. (2017). Attention Is All You Need.