> ## Documentation Index
> Fetch the complete documentation index at: https://mariacristoforo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

> Designer, engineer, and writer based in San Francisco

<div data-portfolio-index className="flex w-full flex-col gap-8 max-w-5xl mx-auto px-4 md:px-8 lg:px-12 py-10 lg:gap-14 lg:py-16">
  <div className="flex flex-col gap-6">
    <div className="flex items-start justify-between gap-8 w-full">
      <div className="flex flex-col gap-4 max-w-[540px]">
        <div className="font-mono text-sm font-semibold uppercase tracking-wider portfolio-primary-text">
          Introduction
        </div>

        <h1 className="font-serif text-6xl sm:text-7xl italic tracking-tight text-gray-900 dark:text-gray-50 leading-[0.95]">
          Maria Cristoforo
        </h1>

        <p className="text-xl leading-relaxed text-gray-700 dark:text-gray-300">
          thinks like a designer, executes like an engineer
        </p>
      </div>

      <img src="https://mintcdn.com/mariasdocs/ViO0Hr8mRBypgnz1/images/mc.jpg?fit=max&auto=format&n=ViO0Hr8mRBypgnz1&q=85&s=ccf48bcdfc5d300a4580deeefe2af579" alt="Maria Cristoforo" className="rounded-full shrink-0 mt-1" style={{width:'120px',height:'120px',objectFit:'cover'}} width="2500" height="2500" data-path="images/mc.jpg" />
    </div>

    {/* Metadata grid */}

    <div className="flex flex-col">
      <div className="border-t border-gray-900/15 dark:border-gray-50/15" />

      <div className="grid grid-cols-3 divide-x divide-gray-900/15 dark:divide-gray-50/15 py-4">
        <div className="flex flex-col gap-2 pr-6">
          <span className="font-mono text-[10px] font-medium uppercase tracking-widest text-gray-400 dark:text-gray-500">Location</span>

          <span className="text-lg text-gray-700 dark:text-gray-300">
            <span className="sm:hidden">San Francisco</span>
            <span className="hidden sm:inline">San Francisco, CA</span>
          </span>
        </div>

        <div className="flex flex-col gap-2 px-6">
          <span className="font-mono text-[10px] font-medium uppercase tracking-widest text-gray-400 dark:text-gray-500">Status</span>

          <span className="inline-flex flex-wrap items-center text-lg text-gray-700 dark:text-gray-300">
            <span className="whitespace-nowrap inline-flex items-center gap-2 mr-[0.25em]">
              <span className="h-2 w-2 rounded-full bg-green-500 shrink-0" />

              Open
            </span>

            to chat
          </span>
        </div>

        <div className="flex flex-col gap-2 pl-6">
          <span className="font-mono text-[10px] font-medium uppercase tracking-widest text-gray-400 dark:text-gray-500">
            <span className="sm:hidden">Building at</span>
            <span className="hidden sm:inline">Currently building at</span>
          </span>

          <span className="text-lg text-gray-700 dark:text-gray-300">Ocular AI (YC W24)</span>
        </div>
      </div>

      <div className="border-t border-gray-900/15 dark:border-gray-50/15" />
    </div>
  </div>

  <div className="max-w-2xl text-lg leading-relaxed text-gray-700 dark:text-gray-300 portfolio-dropcap-section">
    <p>
      <span className="portfolio-dropcap leading-[0.85]">I</span>
      work at the intersection of design and engineering, owning features end-to-end on small, fast-moving teams. I consider design principles throughout the ideation and development process, rather than treating design as a separate step. My work is shaped by an interdisciplinary background in computer science and human-centered design, along with interests in psychology and writing. I believe storytelling, user empathy, and intentional human-made decisions are what set great interfaces and designers apart, and I aim to bring those qualities to every project.
    </p>
  </div>

  <hr className="border-0 border-t border-gray-200 dark:border-gray-800" />

  <div className="flex flex-col gap-4">
    <h2 className="font-serif text-3xl italic text-gray-900 dark:text-gray-50">Explore</h2>

    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <Card title="Case Studies" icon="briefcase" href="/work/overview">
        Selected projects with description of the problem, my approach, outcomes and learnings.
      </Card>

      <Card title="Writing" icon="pen-line" href="/writing/overview">
        My thoughts on design engineering, UX friction, and building in small teams.
      </Card>

      <Card title="Skills" icon="code-xml" href="/about/skills">
        API-style reference of languages, tools, and frameworks I know and how well.
      </Card>

      <Card title="Experience" icon="scroll-text" href="/about/changelog">
        Roles, companies, and milestones formatted as a software changelog.
      </Card>
    </div>
  </div>

  <hr className="border-0 border-t border-gray-200 dark:border-gray-800" />

  <div className="flex flex-col gap-4">
    <h2 className="font-serif text-3xl italic text-gray-900 dark:text-gray-50">Changelog</h2>

    <div className="flex flex-col gap-2">
      <div className="flex items-center justify-between rounded-xl border border-gray-900/10 dark:border-gray-50/10 bg-white/60 dark:bg-gray-900/50 px-4 py-3">
        <div className="flex items-center gap-3 min-w-0">
          <span className="font-mono text-xs font-medium portfolio-primary-text shrink-0">v3.0.0</span>
          <span className="text-sm text-gray-900 dark:text-gray-50 truncate">Joined Ocular AI as a Design Engineer</span>
        </div>

        <span className="font-mono text-xs text-gray-400 hidden sm:block shrink-0 ml-4">Winter 2025</span>
      </div>

      <div className="flex items-center justify-between rounded-xl border border-gray-900/10 dark:border-gray-50/10 bg-white/60 dark:bg-gray-900/50 px-4 py-3">
        <div className="flex items-center gap-3 min-w-0">
          <span className="font-mono text-xs font-medium portfolio-primary-text shrink-0">v2.0.0</span>
          <span className="text-sm text-gray-900 dark:text-gray-50 truncate">Graduated Dartmouth, CS + Human-Centered Design</span>
        </div>

        <span className="font-mono text-xs text-gray-400 hidden sm:block shrink-0 ml-4">Spring 2024</span>
      </div>

      <div className="flex items-center justify-between rounded-xl border border-gray-900/10 dark:border-gray-50/10 bg-white/60 dark:bg-gray-900/50 px-4 py-3">
        <div className="flex items-center gap-3 min-w-0">
          <span className="font-mono text-xs font-medium portfolio-primary-text shrink-0">v1.0.0</span>
          <span className="text-sm text-gray-900 dark:text-gray-50 truncate">First design and development work at DALI Lab, Dartmouth</span>
        </div>

        <span className="font-mono text-xs text-gray-400 hidden sm:block shrink-0 ml-4">Spring 2021</span>
      </div>
    </div>

    <a href="/about/changelog" className="portfolio-primary-text inline-flex items-center gap-2 pl-2 text-sm">
      View full changelog <Icon icon="arrow-right" size={14} />
    </a>
  </div>

  <hr className="border-0 border-t border-gray-200 dark:border-gray-800" />

  <div className="flex flex-col gap-4">
    <h2 className="font-serif text-3xl italic text-gray-900 dark:text-gray-50">Selected Work</h2>

    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <Card title="ApiLens" icon="github" href="/work/apilens" img="/images/apilens_study1_polished.png">
        Open source versioning + visual diff tool for OpenAPI specs. Designed, built, and published to PyPI.
      </Card>

      <Card title="Canvas & Annotation Revamp" icon="pencil-ruler" href="/work/canvas-annotation-revamp" img="/images/canvas_study1_newcanvas.png">
        Full design and implementation process for revamping Ocular's image annotation canvas.
      </Card>

      <Card title="Turn-Based Audio Annotation" icon="audio-waveform" href="/work/turn-based-audio-annotation" img="/images/audio_study1_blurred.png">
        New annotation interface for multi-speaker audio, built using an AI-assisted design process.
      </Card>

      <Card title="Portfolio" icon="layout-panel-left" href="/work/portfolio" img="/images/mintlify_dashboard.png">
        How I adapted Mintlify, an AI-native product documentation platform, into a personal portfolio.
      </Card>
    </div>
  </div>
</div>