# Selected work

Check out some of my work! A mix of paid and personal pursuits. These projects showcase my experience building sophisticated apps with each of the major front-end frameworks, as well as my strong graphic design literacy.


# Reporter

[Visit production site](https://reporter.mpq.dev/) &#183; [Github](https://github.com/mpqmpqm/reporter-2021)

Reporter is a [quantified self](https://en.wikipedia.org/wiki/Quantified_self) app that lets users choose what to quantify.

Users select one or more emoji to associate with a particular board. Tapping on an emoji sends a report of that event to the Firestore database, and the app charts the number of reports over time in a calendar view that facilitates trend visualization.

<aside class="media video bleed tall">
 <video 
 controls 
 loop 
 muted 
 preload="metadata"
 >
 <source 
 src="/static/reporter-demo-vote.webm#t=0.01" 
 type="video/webm"
 >
 <source 
 src="/static/reporter-demo-vote.mp4#t=0.01"
 type="video/mp4"
 >
 </video>
 
 Everyone starts out with a predefined `Mood` board, but users can choose what to track and how to express the different possibilities. The visual feedback for button presses encourages so-called "smashing."
 
</aside>

One fun aspect of the app is that different users will choose more and less metaphorical emoji to represent the phenomena they're tracking. A friend of mine uses ☔ for "rainy" moods. On the other hand one of my boards uses the relatively direct 💧 to track when I last watered my plants.

<aside class="media image bleed tall">
 <img 
 src="/static/reporter-demo-cal.jpg" alt="Screenshot of the calendar view from the Reporter app"
 >
 
 Use the calendar view to spot trends in the phenomena you're tracking. This user is having a fairly 😘 June, with a couple small "blue" patches. Selecting a date on the calendar summons a modal with precise report counts for that day.
 
</aside>

The app is written in Next. It performs server-side authentication and uses react-router for client-side routing, with Google Cloud Firestore on the back end to manage users and data.

[Try it now!](https://reporter.mpq.dev/)

Reporter

# Faculty and Members

[Visit production site](https://www.ias.edu/publications/faculty-members/2020-21)

The Institute for Advanced Study hosts about 250 visiting scholars each academic year. My office produces the annual _Faculty and Members_ booklet, which features a full profile for each visiting scholar including a photo, top-level research topics, and a short description of current work.

The core strength of the print experience is how natural it is to _skim_: you can easily flip through the pages to find people whose work interests you. In fact, visiting scholars tell us the booklet helps them find potential collaborators. Facilitating this use case was my top priority for the digital edition of the publication.

The flagship feature of the digital edition is a search box that surfaces ranked results as the user types. Want to know who&rsquo;s studying quantum field theory? Simply enter that phrase and the app will surface the relevant scholar profiles, with key phrases emphasized in bold.

<aside class="media video bleed">
 <video controls loop preload="metadata">
 <source src="/fac-mem.mp4#t=0.1" type="video/mp4">
 </video>
 The app supports searching by name and/or research topic, with key phrases marked out in bold. Results can be further filtered by departmental affiliation and scholar type.
</aside>

One challenge I faced was that having 250 profiles in the DOM tended to slow down performance, particularly on mobile. I was already using the Intersection Observer API to lazily load images, so I decided to use the same API to lazily render profiles. Now the app loads fast and stays fast.

I built the site in Svelte, utilizing [Fuse.js](https://fusejs.io/) for fuzzy search and ranking.

Faculty and Members

# Institute Letter

[Fall 2020 production site](https://www.ias.edu/publications/institute-letter/fall-2020) &middot; [Spring 2021 production site](https://www.ias.edu/publications/institute-letter/spring-2021)

Twice a year, my office at the Institute for Advanced Study publishes a newsletter featuring original articles by visiting scholars.

Newsletter articles share a common prototype, but the diversity of style, subject matter, and authorship calls for flexibility in presentation.

<aside class="media image bleed">
 <img 
 src="/il-fa-20-mosaic.jpg" alt="Mosaic table of contents display for the IAS Letter Fall 2020"/>
 
 The publication&rsquo;s landing page displays its contents in a CSS grid.
 
</aside>

Anticipating this need for flexibility, for the digital edition of the _Fall 2020_ newsletter&mdash;written in Svelte&mdash;I focused development on a robust set of beautiful, composable, compound components.

When it came time to lay out the content of each piece, this compositional approach facilitated efficient article-building whilst leaving the door open to the one-offs that make each article unique.

This approach paid off even further when I started work on the _Spring 2021_ edition of the same publication. With a library of reusable compound components already in place, I was free to focus development on a few smaller extensions written specifically for that issue&rsquo;s content.

Institute Letter

# MPQ.dev

[Github](https://github.com/mpqmpqm/mpq-hp-3)

My personal portfolio, written in Next.js and hosted on Vercel.

The pages on this site are statically generated at build time from Markdown files hosted in a private Github repository. This enables me to separate work on the _content_ of the site from work on the site proper and vice versa.

<next-link href="/portfolio">/portfolio</next-link> is a bit unique in that the page and its subroutes are dynamically composed out of files in the content repository. At build time, each Markdown file in the `portfolio` directory becomes a `/portfolio/*` subroute. This means I can maintain a file-based routing convention even beyond Next-specific code.

A Vercel [_deploy hook_](https://vercel.com/docs/more/deploy-hooks) subscribes to a Github webhook to automatically rebuild the site whenever I push to the content repository. Continuous integration!

MPQ.dev

# Teatime at Home

[Visit production site](https://www.ias.edu/teatime-at-home)

_Teatime at Home: a social distancing newsletter_ was a limited run weekly email series that ran from April to July 2020.

The centerpiece of each email was a new Q&A between our journalist-in-residence and a visiting scholar. To mark these pieces out as special I introduced a new two-column responsive design, featuring the main thread of each interview in the larger column and supporting aside content in the smaller.

You can find all the interviews [here](https://www.ias.edu/idea-tags/teatime-home).

Since I also edited each campaign, I wrote a little [Vue app](https://www.ias.edu/teatime-at-home) to showcase the campaigns in their original context.

Teatime at Home


# IAS Spotlight

[Visit production site](https://www.ias.edu/publications/spotlight/2020-21)

Come back soon!
