

<PageContainer visibleImageIndex={visibleImageIndex}>
  <Spacer height="80px"/>

  <div class="grid md:grid-cols-3 gap-8">
    <div>
      # Hi, I'm Michael
      <Spacer />
      I co-founded <a class="hover:underline" href="https://snips.ai" target="_blank">Snips</a>, building privacy-respecting voice recognition technology. We got acquired by Sonos in November 2019. Prior to that, I created <a class="hover:underline" href="https://www.youtube.com/watch?v=q3OuCR0EpGo" target="_blank">8pen</a>, a new way to write on mobile devices which draws inspiration from handwriting.
    </div>
  </div>

  <Spacer height="120px"/>

  <div class="grid md:grid-cols-3 gap-8">
    <div>
      <SectionHeading href="https://michaelfester.com/quilts">Art Quilts →</SectionHeading>
      <div class="grid gap-y-2">
        <QuiltPreview v="v1608647486" id="vgv0zvmskkib6gsnhbtg" artist="cezanne" />
        <QuiltPreview v="v1608647502" id="r0euebpuahx2qh28ovfk" artist="monet" />
        <QuiltPreview v="v1608647513" id="zw1ztlsq66sm8st3l8no" artist="schiele" />
      </div>
    </div>
    <div>
      <SectionHeading>Drawings</SectionHeading>
      <Artworks />
    </div>
    <div class="hidden sm:block">
      <SectionHeading href="https://michaelfester.com/doodles">Doodles →</SectionHeading>
      <div class="flex flex-col bg-gray-100 overflow-hidden" style={{width: "100%", height: 0, paddingBottom: "100%"}}>
        <div class="flex bg-gray-100" style={{width: "100%", height: "100vh"}}>
          <iframe title="8pen Doodle" style={{width: "100%", height: "100vh"}} scrolling="no" src="https://michaelfester.github.io/doodle/doodle">
          </iframe>
        </div>
      </div>
    </div>
  </div>

  <Spacer height="80px" />

  <div class="grid md:grid-cols-3 gap-8">
    <div>
      <SectionHeading>Projects</SectionHeading>
      <ProjectPreview
        href="https://github.com/michaelfester/artquilts"
        name="Artquilts"
        a
      >
        Create quilts of your favorite artists.
      </ProjectPreview>
      <ProjectPreview
        href="https://github.com/michaelfester/mastodon"
        name="Mastodon"
        a
      >
        A next-word prediction engine for Python and C++.
      </ProjectPreview>
      <ProjectPreview
        href="https://github.com/michaelfester/doodle"
        name="Doodle"
        a
      >
        Generate natural 8pen doodles.
      </ProjectPreview>
      <ProjectPreview
        href="https://chrome.google.com/webstore/detail/keyboard-shortcuts-to-clo/dkoadhojigekhckndaehenfbhcgfeepl"
        name="Tabasco"
        a
      >
        Chrome extension adding keyboard shortcuts to close tabs.
      </ProjectPreview>
      <ProjectPreview
        href="https://michaelfester.com/air"
        name="Air"
      >
        Concept video for a mesh network of AI assistants. With <a href="https://www.dokraphael.com" class="hover:underline" target="_blank">Dok</a>.
      </ProjectPreview>
    </div>
    <div>
      <SectionHeading>Writings</SectionHeading>
      <ProjectPreview
        href="https://michaelfester.com/8pen"
        name="Is there a natural way to write on small devices?"
      >
        Whenever we have an idea or want to take a note, we reach out for pen and paper. It is often the fastest and easiest way take a note. We enjoy handwriting, because it is natural. So one may ask: *is there a natural way to write on small devices?*
      </ProjectPreview>
      <ProjectPreview
        href="https://res.cloudinary.com/djp21wtxm/raw/upload/v1608722144/zdefsd1mzk4fzjftpqgf.pdf"
        name="Ramification Theory"
        a
      >
        My Part III essay at Cambridge, where I present a theorem of Tate which relates *p*-adic representations with a "Hodge-Tate decomposition" to "locally algebraic" ones.
      </ProjectPreview>
      <ProjectPreview
        href="https://res.cloudinary.com/djp21wtxm/raw/upload/v1608722285/tl4mr3fobk5bgzz5890q.pdf"
        name="Higher Norm Fields"
        a
      >
        A short note on the connection between Scholl's strictly deeply ramified towers and Fontaine-Wintenberger's arithmetically profinite extensions, in the general case of local fields with imperfect residue fields, using the ramification filtration of Abbès and Saito.
      </ProjectPreview>
    </div>

    <div>
      <SectionHeading>Links</SectionHeading>
      <ProjectPreview
        href="https://twitter.com/michaelfester"
        name="Twitter @michaelfester"
        compact
        a
       />
      <ProjectPreview
        href="https://github.com/michaelfester"
        name="GitHub @michaelfester"
        compact
        a
       />
      <ProjectPreview
        href="https://www.figma.com/@michaelfester"
        name="Figma @michaelfester"
        compact
        a
       />
      <ProjectPreview
        href="mailto:michael.fester@gmail.com"
        name="Email michael.fester@gmail.com"
        compact
        a
       />
    </div>
  </div>

  <Spacer height="80px"/>
</PageContainer>

{/* Definitions */}

export const artworks = [
  { thumbV: "v1608661163", thumbId: "qhsvlmedkrth5falk5ti", v: "v1608818385", id: "vsdns5thso9nhskls5vf", title: "iPhone girl" },
  { thumbV: "v1608661163", thumbId: "unoy3qdrdqecy9bbjwvv", v: "v1608818385", id: "okjaib9nrcdmdebxgrqw", title: "Lee Miller pencil" },
  { thumbV: "v1608661163", thumbId: "grosopgiorvoibidxsvr", v: "v1608818385", id: "brhpxkpe0qjv10nzqtum", title: "Portrait charcoal" },
  { thumbV: "v1608661164", thumbId: "qgnbrnry1vtyckg68jlf", v: "v1608818385", id: "hsbddaj8w4ofw4jh0rbe", title: "Hélène baby charcoal" },
  { thumbV: "v1608661164", thumbId: "bmo8zcedv8lakjghsu9p", v: "v1608818386", id: "q7awgqokiz7jqhv0lara", title: "Me baby pencil" },
  { thumbV: "v1608661164", thumbId: "d3a9tmdjdehrieg3c5nw", v: "v1608818385", id: "scdnnh2anb76zafst8fe", title: "Mami girl pencil" },
  { thumbV: "v1608661164", thumbId: "ozasipfqgn0mqydxfo4m", v: "v1608818385", id: "wyyimsqolxusixgdfjsb", title: "Mami young pencil" },
  { thumbV: "v1608661164", thumbId: "wxx9klalkgdavqs8r44p", v: "v1608818386", id: "vtlmkn6vkxhvwe7i0y3g", title: "Marie-Thérèse Walter pencil" },
  { thumbV: "v1608661164", thumbId: "ogdfpzocoyu5ty4qqsko", v: "v1608818386", id: "axd9ktmspkhm1kzx5wvl", title: "Me ink" }
];

const [visibleImageIndex, setVisibleImageIndex] = useState(-1);

export const PageContainer = (props) => {
  const imageVisible = props.visibleImageIndex >= 0;
  const N = artworks.length;
  return <>
    <div class={!imageVisible && "invisible"}>
      <FullScreenArtwork index={props.visibleImageIndex}
        onNext={() => {
          setVisibleImageIndex((visibleImageIndex+1) % N);
        }}
        onPrev={() => {
          setVisibleImageIndex(((visibleImageIndex-1) % N + N) % N);
        }}
      />
    </div>
    {!imageVisible &&
      props.children
    }
  </>
}

const QuiltPreview = (props) => <Link href="https://michaelfester.com/quilts" aria-label="quilt"><div class="bg-gray-100 bg-cover bg-center hover:opacity-75 transition duration-300 ease-in-out" style={{
  width: "100%",
  height: 0,
  paddingBottom: "calc(33% - 0.25rem)", backgroundImage: "url(https://res.cloudinary.com/djp21wtxm/image/upload/" + props.v + "/" + props.id + ".png)"}}>
</div></Link>

export const Artworks = () => {
  return <>
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
      {
        artworks.map((artwork, index) =>
          <ArtworkPreview
            onClick={() => setVisibleImageIndex(index)}
            v={artwork.thumbV}
            id={artwork.thumbId}
            title={artwork.title}
          />
        )
      }
    </div>
  </>
}

export const FullScreenArtwork = (props) => {
  if (!(props.index >= 0)) {
    return <></>;
  }
  const image = artworks[props.index];
  const imageUrl = "https://res.cloudinary.com/djp21wtxm/image/upload/" + image.v + "/" + image.id + ".png";
  return <div class="absolute h-screen top-0 left-0 right-0 bottom-0 bg-black transition duration-200 ease-in-out z-5" onClick={() => {
    setVisibleImageIndex(-1);
  }}>
    <div class="absolute top-0 bottom-0 left-8 w-16 flex items-center">
      <Arrow left onClick={(e) => {
        e.stopPropagation();
        props.onPrev()
      }} />
    </div>
    <div class="absolute top-0 bottom-0 right-8 w-16 flex items-center">
      <Arrow right onClick={(e) => {
        e.stopPropagation();
        props.onNext()
      }} />
    </div>
    <img src={imageUrl} class="object-scale-down mt-0 w-full h-full"
      onClick={(e) => {
        e.stopPropagation();
      }} />
  </div>
}

const ArtworkPreview = (props) => <div onClick={props.onClick}><img alt={props.title}
  class="w-full hover:opacity-75 transition duration-300 ease-in-out cursor-pointer my-0" src={"https://res.cloudinary.com/djp21wtxm/image/upload/" + props.v + "/" + props.id + ".png"}
/>
</div>

export const SectionHeading = (props) => {
  const className = "inline-block font-bold text-black text-xl rounded-md mt-2 mb-4 py-0" + (props.href ? " hover:bg-gray-200 -ml-1 px-1 transition duration-200 ease-in-out" : "");
  const heading = <h2 class={className}>{props.children}</h2>;
  if (!!props.href) {
    return <Link href={props.href}>{heading}</Link>
  } else {
    return heading;
  }
}

export const ProjectPreview = (props) => {
  const extras = props.a ? { target: "_blank" } : {};
  const mb = props.compact ? "mb-3" : "mb-6";
  const className = "font-semibold text-black rounded-md hover:bg-gray-200 -ml-1 p-1 transition duration-200 ease-in-out";
  let titleEl;
  if (props.a) {
    titleEl = <a href={props.href} target="_blank">
      <span class={className}>{props.name}</span>
    </a>;
  } else {
    titleEl = <Link href={props.href}>
      <span class={className}>{props.name}</span>
    </Link>;
  }
  return <div class={mb}>
    {titleEl}
    <p>{props.children}</p>
  </div>
}

export const Arrow = (props) => {
  return <div class="block bg-black bg-opacity-50 hover:bg-opacity-75 rounded-full w-16 h-16 border-2 border-white border-opacity-75 cursor-pointer transition duration-300 ease-in-out flex items-center justify-center" onClick={props.onClick}>
    <img class={"w-6 h-6" + (props.left && " transform rotate-180")} src="https://res.cloudinary.com/djp21wtxm/image/upload/v1608998684/y6v6hyes7ncoakzthhfj.svg" />
  </div>
}