index.html

---
title: Home
---

<style>
/* About Me */

/* #about-box {
	display: grid;
	grid-row-gap: 0.5rem;
	grid-column-gap: 1.0rem;
	align-items: center;

	max-width: var(--max-width);
	min-width: var(--min-width);

	margin: 0 auto;
	box-sizing: border-box;
	padding: 1em;
}

#about-container {
	background-color: #dfedff;
}

@media (min-width: 40rem) {
	#about-box {
		grid: auto 1fr / auto 1fr;
		grid-template-areas:
			"img text"
			"info text";
	}

	#about-box #ben-photo {
		justify-self: center;
	}
}

@media (max-width: 40rem) {
	#about-box {
		grid: auto 1fr / 1fr 1fr;
		grid-template-areas:
			"img info"
			"text text";
	}

	#about-info {
		align-self: center;
	}

	#about-box #ben-photo {
		justify-self: right;
	}
}

#about-info {
	grid-area: info;
	list-style: none;
	margin: 0 0 0 1em;
	padding: 0;
}

#about-info li.social a {
	font-weight: 100;
	font-family: monospace;
	color: #444;
}

#about-info li.social img {
	display: inline-block;
	max-width: 14px;
	max-height: 14px;
	margin-right: 0.5em;
	text-align: center;
	vertical-align: middle;
}

#about-box #ben-photo {
	grid-area: img;
	width: 140px;
	height: 140px;
	border: 2px solid #5a97e6;
	border-radius: 50%;
}

#about-text {
	grid-area: text;
}

#about-text p:first-child {
	margin-top: 0;
} */

h2 {
	font-size: 1.8rem;
	margin-top: 2em;
}

/* ---- */

.gridlist {
	display: grid;
	margin: 0.4em 0;
	grid-template-columns: 5.5em 1fr;
	grid-template-areas: "badge title";
}

.gridlist-badge {
	grid-area: badge;
}

.gridlist-title {
	grid-area: title;
}

/* ---- */

.npm-package img {
	display: block;
}

.npm-package .gridlist-title {
	font-family: var(--code-font);
}

/* ---- */

.github-pr-badge > span {
	display: inline-block;
	padding: 0 10px;
	width: 5em;
	border-radius: 2em;
	font-family: var(--sans-font);
	font-size: 12px;
	text-align: center;
	line-height: 24px;
	color: white;
}

.github-pr-open   { background-color: #28a745; }
.github-pr-draft  { background-color: #6a737d; }
.github-pr-merged { background-color: #6f42c1; }

.github-pr-open::after   { content: "Open";   display: inline; }
.github-pr-draft::after  { content: "Draft";  display: inline; }
.github-pr-merged::after { content: "Merged"; display: inline; }

.github-pr-badge img {
	width: 1em;
	vertical-align: text-bottom;
}

.github-pr-title a {
	color: var(--color-text);
	font-weight: bold;
}

.github-pr-title a:hover, .github-pr-title a:hover .github-pr-subtitle {
	color: var(--color-link);
}

.github-pr-subtitle {
	color: gray;
	font-weight: normal;
	font-family: var(--code-font);
}

/* ---- */

#about {
	display: grid;
	gap: 2em;
}

#about .about-portrait {
	min-width: 16rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#about .about-portrait img {
	display: block;
}

#about .about-description {
	grid-area: intro;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

#about .about-description p { margin: 0.6rem 0; }
#about .about-title         { margin: 0.6rem 0; }

#about .about-title {
	font-size: 2em;
	font-weight: bold;
}

@media (min-width: 52rem) {
	#about {
		grid-template-columns: 1fr 2fr;
		grid-template-areas: "photo intro";
	}

	#about .about-portrait {
		justify-self: stretch;
		min-height: 100%;
	}

	#about .about-portrait img {
		max-width: 100%;
		max-height: 100%;
	}
}

@media (max-width: 52rem) {

	h2 { text-align: center; }
	#about .about-title { text-align: center; }

	#about {
		grid-template-areas:
			"photo"
			"intro";
	}


	#about .about-portrait {
		position: relative;
		max-height: min(50vh, 30em);
		justify-self: center;
		border-radius: 50%;
		overflow: hidden;
	}

	#about .about-portrait::after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}

	#about .about-portrait img {
		position: absolute;
		width: 100%;
		object-fit: cover;
		top: -2em;
		/* top: 1em; */
	}
}

</style>

<div id="page">

<div id="about">
	<!-- photo -->
	<div class="about-portrait">
		<img alt="photo of me in France, taken September 2023" src="/images/ben-france.png" />
	</div>
	<!-- ontro -->
	<div class="about-description">
		<div class="about-title">Benjamin R. Bray</div>
		<p>
			I work as a <b>research software engineer</b> for Prof. <a href="https://group-mmm.org/~ichiro/">Ichiro Hasuo</a> at the <a
				href="https://www.nii.ac.jp/en/">National Institute of Informatics</a> in Tokyo, Japan, where I use <b>Haskell</b> to create domain-specific programming languages for formal verification of cyberphysical systems.
		</p>
		<p>
			My ambition is to design software which makes <b>formal verification</b> more accessible to developers.  I'm particularly interested in improving the user experience of <b>dependently-typed</b> programming. 
		</p>
		<p>
			In my free time, I enjoy cycling, <a href="/images/ben-goat.jpg">goats</a>, dodgeball, <a href="/images/tokyo-walking-map.jpg">long walks</a>, and <a
			href="/images/sourdough.jpg">bread</a>. Maybe one day I'll make more <a
			href="http://www.newgrounds.com/portal/view/512482">games</a>. If you'd like to chat, feel free to
		write me at <a href="mailto:benrbray@gmail.com">benrbray@gmail.com</a>.
		</p>

		<!-- <p>In my free time, I work on <a href="https://noteworthy.ink/">Noteworthy</a>, an open-source Markdown
			editor with bidirectional links and excellent math support!
		</p> -->

		<!-- <p>I hold a Masters in Computer Science from <b>Georgia Tech</b>, where my research advisor was <a
				href="https://www.cc.gatech.edu/~jabernethy9/">Jacob Abernethy</a>. Previously, I studied math at
			the University of Michigan, where I also helped with a machine learning <a
				href="https://eecs445-f16.github.io/">class</a> and <a href="http://msail.github.io/">reading
				group</a>. -->
	</div>
</div>

<!-- Writing ----------------------------------------------------------------->
<h2>Selected Writing</h2>
$partial("templates/post-list.html")$



<!-- Projects ----------------------------------------------------------------->
<h2>Selected Projects</h2>
$partial("templates/project-list.html")$

<!-- Open Source -------------------------------------------------------------->
<h2>Open Source</h2>

<p>I maintain the following open-source packages:</p>

<div class="gridlist npm-package">
	<div class="gridlist-badge">
	<a ref="https://www.npmjs.com/package/@benrbray/prosemirror-math">
		<img src="https://img.shields.io/npm/v/@benrbray/prosemirror-math?style=flat-square">
	</a>
	</div>
	<div class="gridlist-title">
	<a href="https://www.npmjs.com/package/@benrbray/prosemirror-math">
		<div>@benrbray/prosemirror-math</div>
	</a>
	</div>
</div>

<div class="gridlist npm-package">
	<div class="gridlist-badge">
	<a href="https://www.npmjs.com/package/@benrbray/remark-cite">
		<img src="https://img.shields.io/npm/v/@benrbray/remark-cite?style=flat-square">
	</a>
	</div>
	<div class="gridlist-title"><a href="https://www.npmjs.com/package/@benrbray/remark-cite">
		<div>@benrbray/remark-cite</div>
	</a></div>
</div>

<p>I have also made a few small contributions to open-source libraries:</p>

<div class="gridlist github-pr">
	<div class="gridlist-badge github-pr-badge">
		<span class="github-pr-merged">
			<img src="/images/icons/git-merge-16.svg" width="14" height="14">
		</span>
	</div>
	<div class="gridlist-title github-pr-title">
		<a href="https://github.com/jgm/citeproc/pull/88">
			Support Hyperlinked Titles per Draft of CSL v1.0.2 Spec
			<span class="github-pr-subtitle">jgm/citeproc#88</span>
		</a>
	</div>
</div>

<div class="gridlist github-pr">
	<div class="gridlist-badge github-pr-badge">
		<span class="github-pr-merged">
			<img src="/images/icons/git-merge-16.svg" width="14" height="14">
		</span>
	</div>
	<div class="gridlist-title github-pr-title">
		<a href="https://github.com/jgm/citeproc/pull/88">
			Address unexpected interaction between CSL `second-field-align` setting and whole-citation links
			<span class="github-pr-subtitle">jgm/citeproc#113</span>
		</a>
	</div>
</div>

<div class="gridlist github-pr">
	<div class="github-pr-badge">
		<span class="github-pr-open">
			<img src="/images/icons/git-pull-request-16.svg" width="14" height="14">
		</span>
	</div>
	<div class="github-pr-title">
		<a href="https://github.com/jgm/pandoc/pull/7514">
			Adjust <code>fenced_divs</code> Syntax to Resemble Directive Syntax
			<span class="github-pr-subtitle">jgm/pandoc#7514</span>
		</a>
	</div>
</div>

<div class="gridlist github-pr">
	<div class="github-pr-badge">
		<span class="github-pr-open">
			<img src="/images/icons/git-pull-request-16.svg" width="14" height="14">
		</span>
	</div>
	<div class="github-pr-title">
		<a href="https://github.com/KaTeX/KaTeX/pull/3085">
			Support <code>\textsc</code> via Small Caps Font <code>cmcsc10</code>
			<span class="github-pr-subtitle">KaTeX/KaTeX#3085</span>
		</a>
	</div>
</div>

<div class="gridlist github-pr">
	<div class="github-pr-badge">
		<span class="github-pr-merged">
			<img src="/images/icons/git-merge-16.svg" width="14" height="14">
		</span>
	</div>
	<div class="github-pr-title">
		<a href="https://github.com/pjones/byline/pull/20">
			Support ANSI <code>Vivid</code> Color Intensity
			<span class="github-pr-subtitle">pjones/byline#20</span>
		</a>
	</div>
</div>

<!-- Draft Posts -->
$if(draftPosts)$
<h2>Draft Posts</h2>
$for(draftPosts)$
<div class="post-box unpublished">
	<a class="post-title" href="$url$">$title$</a>
</div>
$endfor$
$endif$

<!-- Draft Projects -->
$if(draftProjects)$
<h2>Draft Projects</h2>
$for(draftProjects)$
<div class="post-box unpublished">
	<a class="post-title" href="$url$">$title$</a>
</div>
$endfor$
$endif$

</div>