index.html

---
layout: default
title: Home
---

<!-- Hero Section -->
<section class="hero">
  <div class="container">
    <div class="hero-content">
      <span class="hero-tag">Agent Developer</span>
      <h1 class="hero-title">
        Building the<br>
        <span class="accent-gradient">Next Wave</span> of AI Agents
      </h1>
      <p class="hero-subtitle">
        I ship multi-agent systems and AI-driven MVPs from idea to production.
      </p>
      <div class="hero-stats">
        <a href="https://github.com/calderbuild" class="tag" target="_blank" rel="noopener">1.6k+ Stars</a>
        <a href="/projects/" class="tag">4+ Hackathon Wins</a>
        <a href="https://github.com/datawhalechina" class="tag" target="_blank" rel="noopener">Datawhale Contributor</a>
      </div>
      <div class="hero-cta">
        <a href="/projects/" class="btn btn-primary">View Projects</a>
        <a href="mailto:johnrobertdestiny@gmail.com" class="btn">Get in Touch</a>
      </div>
    </div>

    <div class="terminal-block" aria-hidden="true">
      <div class="terminal-line">
        <span>agent.status</span>
        <span class="terminal-val--active">ONLINE</span>
      </div>
      <div class="terminal-line">
        <span>active_projects</span>
        <span>4</span>
      </div>
      <div class="terminal-line terminal-cursor">
        <span>next_build</span>
        <span class="terminal-val--cyan">initializing...</span>
      </div>
    </div>
  </div>
</section>

<!-- Featured Projects -->
<section class="section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Featured Projects</h2>
      <a href="/projects/" class="btn">View All</a>
    </div>

    <div class="post-grid">
      {% for project in site.data.projects limit:3 %}
        {% if project.url %}
        <article class="post-card">
          <div class="project-header">
            <h3 class="post-title"><a href="{{ project.url }}" target="_blank" rel="noopener">{{ project.name }}</a></h3>
            {% if project.stars %}
            <span class="post-meta" style="color: var(--accent-yellow)">{{ project.stars }} stars</span>
            {% endif %}
          </div>
          <p class="post-excerpt">{{ project.tagline }}</p>
          <div class="post-tags">
            {% for t in project.tech %}
            <span class="tag">{{ t }}</span>
            {% endfor %}
          </div>
        </article>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

<!-- Latest Posts -->
<section class="section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Latest Posts</h2>
      <a href="/archive/" class="btn">View All</a>
    </div>

    <div class="post-grid">
      {% for post in site.posts limit:3 %}
      <article class="post-card">
        <div class="post-meta">{{ post.date | date: "%b %d, %Y" }}</div>
        <h3 class="post-title">
          <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
        </h3>
        {% if post.subtitle %}
        <p class="post-excerpt">{{ post.subtitle | truncate: 120 }}</p>
        {% elsif post.description %}
        <p class="post-excerpt">{{ post.description | truncate: 120 }}</p>
        {% endif %}
        {% if post.tags.size > 0 %}
        <div class="post-tags">
          {% for tag in post.tags limit:3 %}
          <a href="/tags/{{ tag | slugify }}/" class="tag">{{ tag }}</a>
          {% endfor %}
        </div>
        {% endif %}
      </article>
      {% endfor %}
    </div>
  </div>
</section>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfilePage",
  "mainEntity": {
    "@type": "Person",
    "name": "Calder",
    "alternateName": "Lin Luo",
    "url": "https://calderbuild.github.io",
    "sameAs": [
      "https://github.com/calderbuild",
      "https://x.com/CalderBuild"
    ],
    "jobTitle": "Agent Developer",
    "knowsAbout": ["Multi-Agent Systems", "AI Agents", "Prompt Engineering", "RAG"]
  }
}
</script>

<style>
  .hero .container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: var(--space-2xl);
  }

  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
  }

  @media (max-width: 768px) {
    .hero .container { grid-template-columns: 1fr; }
    .terminal-block { display: none; }
  }
</style>