---
import EntryThumbnail from '../components/EntryThumbnail.astro';
import Page from '../layouts/Page.astro';
import {
  articlePath,
  absoluteUrl,
  buildPersonJsonLd,
  getArticles,
  optimizeOgImage,
  site,
} from '../lib/site';
import defaultOg from '../assets/og-default.jpg';

const STARTING_POINTS = 5;

const posts = await getArticles();
const startingPoints = posts
  .filter((post) => post.data.article?.featuredOrder !== undefined)
  .sort(
    (a, b) =>
      (a.data.article?.featuredOrder ?? 99) - (b.data.article?.featuredOrder ?? 99)
  )
  .slice(0, STARTING_POINTS);

const STARTING_POINT_NOTES: Record<string, string> = {
  'greatai-ai-deployment-api': 'Policy expressed as a small API.',
  'reconcile-text-3-way-merge': 'A merge design shaped by no history and three editors.',
  'sdf-2d-ray-tracing': 'Mobile GPU limits drive the rendering architecture.',
  'life-towers-immutable-tries': 'Immutable tries make sync cheap and explicit.',
  'nuclear-cooling-simulation': 'Separate graph passes keep simulation logic readable.',
};

const startingPointsAnnotated = startingPoints.map((post) => ({
  post,
  href: articlePath(post),
  note: STARTING_POINT_NOTES[post.id.replace(/\.mdx?$/, '')],
}));

const startingPointThumbnail = {
  widths: [160, 240, 320, 480, 640, 800],
  sizes:
    '(max-width: 700px) 4rem, (max-width: 960px) calc((100vw - 64px - 1.5rem) / 3), calc((min(100vw - 64px, 72rem) - 3rem) / 5)',
};

const personImage = await optimizeOgImage(defaultOg);

// Canonical Person JSON-LD. Other pages reference this entity by @id.
const personJsonLd = buildPersonJsonLd({
  jobTitle: 'Software Engineer',
  description:
    'Software engineer who keeps reaching for the same two moves: let the hard constraint pick the data structure, then keep the API small enough to defend.',
  knowsAbout: [
    'Software architecture',
    'AI/ML systems',
    'Web platforms',
    'Computer graphics',
    'Simulations',
    'Data visualization',
  ],
  image: absoluteUrl(personImage.src),
  mainEntityOfPage: absoluteUrl('/about/'),
});
---

<Page
  title="About"
  description="A few sentences about the two moves I keep reaching for, and the posts that show them in different shapes."
  jsonLd={personJsonLd}
  ogType="profile"
  fullWidth
>
  <div class="prose about-copy">
    <p>
      I'm Andras. I write software for a living, and have done so for about six years. MSc
      in CS. The first non-trivial thing I finished was a Raspberry Pi music visualiser
      driving LED strips through MOSFETs in 2016, and I've been chasing that same feeling
      ever since: pick something I can't yet do, then finish it.
    </p>
    <p>
      Two patterns show up in almost everything here. First, the hard constraint usually
      picks the data structure: an 8-bit ALU, a mobile GPU, a single static HTML file, a
      cross-language ABI, no edit history. Second, once the data structure is right, the
      API shrinks to something I can defend in one paragraph. When I get those two right I
      tend to like the result years later. When I don't, I say so in the writeup.
    </p>
  </div>

  <section class="about-section facts">
    <h2 id="quick-facts">Quick Facts</h2>
    <dl>
      <div>
        <dt>Lives in</dt>
        <dd>Europe.</dd>
      </div>
      <div>
        <dt>Studied</dt>
        <dd>
          MSc Computer Science. BSc thesis on SDF-2D, MSc thesis on GreatAI; both have
          writeups below.
        </dd>
      </div>
      <div>
        <dt>Languages I'm fastest in</dt>
        <dd>TypeScript, Python, Rust. C or Rust when bytes matter.</dd>
      </div>
      <div>
        <dt>Email</dt>
        <dd>
          <address>
            <a href={`mailto:${site.email}`}>{site.email}</a>
          </address>
        </dd>
      </div>
      <div>
        <dt>Elsewhere</dt>
        <dd class="about-links">
          <a href={site.cv} rel="noopener">CV</a>
          <a href={site.git} rel="noopener me">Git</a>
          <a href={site.linkedin} rel="noopener me">LinkedIn</a>
        </dd>
      </div>
    </dl>
  </section>

  <section class="about-section about-section--starting-points">
    <div class="section-heading">
      <div class="section-heading__text">
        <h2 id="selected-writeups">Selected writeups</h2>
        <p>Finished projects where a hard constraint did most of the design work.</p>
      </div>
      <a href="/articles/">All articles <span aria-hidden="true">→</span></a>
    </div>
    <ol class="starting-points" aria-label="Selected article writeups">
      {
        startingPointsAnnotated.map(({ post, href, note }) => (
          <li>
            <EntryThumbnail
              src={post.data.thumbnail.src}
              alt={post.data.thumbnail.alt}
              href={href}
              class="starting-point__thumbnail"
              widths={startingPointThumbnail.widths}
              sizes={startingPointThumbnail.sizes}
              ariaLabel={`Open article: ${post.data.title}`}
              loading="eager"
            />
            <div class="starting-point__body">
              <h3>
                <a href={href}>{post.data.title}</a>
              </h3>
              {note && <p>{note}</p>}
            </div>
          </li>
        ))
      }
    </ol>
  </section>

  <section class="about-section facts">
    <h2 id="working-style">A few things I believe</h2>
    <div class="prose about-copy">
      <ul>
        <li>
          Most "interesting algorithm" problems are actually data-structure problems
          wearing a costume. Pick the structure that makes the comparison, the query, or
          the merge trivial, and the algorithm fits in a screen.
        </li>
        <li>
          A library you can explain in one paragraph beats a framework you have to teach.
          I'll take five lines of WGSL I can read over one beautiful 300-line kernel.
        </li>
        <li>
          The cost of a project is whether I'll still trust it in three years. The ones I
          trust are the ones with a tiny surface and a boring centre.
        </li>
        <li>
          I like working at the seams: firmware meeting a render loop, a Rust core
          crossing wasm-bindgen and pyo3, a client and server agreeing on what "next
          state" means. That's where the design work actually is.
        </li>
        <li>
          Caveat: the writeups here are biased toward things that worked. The dead
          prototypes don't have URLs and I should probably write up one of them honestly
          sometime.
        </li>
      </ul>
    </div>
  </section>
</Page>
