Skip to content

Instantly share code, notes, and snippets.

@johannschopplich

johannschopplich/index.html

Last active March 26, 2024 10:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johannschopplich/c1611d1f089cf0884ee70887473f1a42 to your computer and use it in GitHub Desktop.
Save johannschopplich/c1611d1f089cf0884ee70887473f1a42 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Patrick Marsceill, software designer</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link
rel="preload"
href="https://thismodernweb.b-cdn.net/f/Freight-Text-Pro-Book.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="https://thismodernweb.b-cdn.net/f/Freight-Text-Pro-Book-Italic.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="https://thismodernweb.b-cdn.net/f/NeueHaasGroteskDisplay-Medium.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="https://thismodernweb.b-cdn.net/f/JetBrainsMono-Light.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Patrick Marsceill is a software designer building high quality developer tools that scale."
/>
<meta
property="og:title"
content="Patrick Marsceill, software designer"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://work.patrickmarsceill.com" />
<meta
property="og:image"
content="https://thismodernweb.b-cdn.net/i/og.png"
/>
<meta
property="og:description"
content="Patrick Marsceill is a software designer building high quality developer tools that scale."
/>
<meta
name="twitter:description"
content="Patrick Marsceill is a software designer building high quality developer tools that scale."
/>
<meta
name="twitter:image"
content="https://thismodernweb.b-cdn.net/i/og.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<style>
@font-face {
font-family: "Freight Text Pro";
src: url("https://thismodernweb.b-cdn.net/f/Freight-Text-Pro-Book.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Freight Text Pro";
src: url("https://thismodernweb.b-cdn.net/f/Freight-Text-Pro-Book-Italic.woff2")
format("woff2");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Neue Haas Grotesk Display";
src: url("https://thismodernweb.b-cdn.net/f/NeueHaasGroteskDisplay-Medium.woff2")
format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://thismodernweb.b-cdn.net/f/JetBrainsMono-Light.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--text-color-heading: rgba(255, 255, 255, 1);
--text-color-body: rgba(218, 219, 225, 1);
--text-color-muted: rgba(129, 130, 141, 1);
--text-color-link: rgba(255, 255, 255, 1);
--text-underline-color: rgba(162, 164, 170, 0.5);
--text-underline-color-hover: rgba(162, 164, 170, 1);
--page-color: rgba(0, 0, 0, 1);
--border-color: rgba(48, 48, 56, 1);
--sans-font-family: "Neue Haas Grotesk Display", system-ui,
sans-serif;
--serif-font-family: "Freight Text Pro", georgia, serif;
--monospace-font-family: "JetBrains Mono", monospace;
--body-font-family: var(--serif-font-family);
--heading-font-family: var(--sans-font-family);
--heading-line-height: 1.05;
--body-line-height: 1.5;
}
@media (prefers-color-scheme: light) {
:root {
--text-color-heading: rgba(0, 0, 0, 1);
--text-color-body: rgba(80, 81, 83, 1);
--text-color-muted: rgba(102, 105, 117, 1);
--text-color-link: rgba(0, 0, 0, 1);
--text-underline-color: rgba(126, 136, 155, 0.5);
--text-underline-color-hover: rgba(126, 136, 155, 1);
--page-color: rgba(247, 247, 248, 1);
--border-color: rgba(222, 224, 227, 1);
}
}
* {
box-sizing: border-box;
min-width: 0;
margin: 0;
}
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: slashed-zero;
}
body {
display: grid;
grid-template-columns: 1fr;
padding: 0 1.5rem;
background-color: var(--page-color);
color: var(--text-color-body);
font-family: var(--body-font-family);
font-size: 16px;
line-height: var(--body-line-height);
}
@media (min-width: 400px) {
body {
padding: 0 2rem;
}
}
@media (min-width: 600px) {
body {
grid-template-columns: minmax(200px, 500px) 1fr;
padding: 0 5rem;
}
}
main {
position: relative;
z-index: 1;
max-width: 600px;
}
footer {
margin: 4rem 0 2rem 0;
font-size: 14px;
font-family: var(--body-font-family);
color: var(--text-color-muted);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-color-heading);
margin: 1.5em 0 0.5em;
font-family: var(--heading-font-family);
line-height: var(--heading-line-height);
text-wrap: balance;
font-size: 21px;
}
h1 {
font-size: clamp(1.5rem, 7vw, 36px);
letter-spacing: -0.01em;
}
h2 {
font-size: 10.5px;
font-family: var(--monospace-font-family);
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 3.5em 0 2em;
color: var(--text-color-muted);
}
em,
i {
font-family: var(--serif-font-family);
font-style: italic;
color: var(--text-color-body);
}
code {
font-size: 0.8em;
font-family: var(--monospace-font-family);
}
a {
position: relative;
color: var(--text-color-link);
text-decoration-color: var(--text-underline-color);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover {
text-decoration-color: var(--text-underline-color-hover);
}
p {
margin-bottom: 0.5rem;
text-wrap: pretty;
}
main > p:first-of-type {
font-size: clamp(1.1rem, 4vw, 21px);
}
dt {
font-family: var(--sans-font-family);
color: var(--text-color-heading);
font-size: 15px;
display: flex;
gap: 0.5em;
}
dt i {
color: var(--text-color-muted);
}
dd {
margin-bottom: 1.5rem;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr;
column-gap: 2rem;
}
@media (min-width: 600px) {
ul {
grid-template-columns: 1fr 1fr;
}
}
ul li {
position: relative;
margin-bottom: 0.5rem;
padding-left: 1em;
}
@media (min-width: 600px) {
ul {
margin-bottom: 0.25rem;
}
}
ul li::before {
content: "";
position: absolute;
width: 0.5em;
height: 1px;
top: 12px;
left: 0;
background-color: var(--text-underline-color);
}
hr {
margin: 3rem 0;
border: none;
border-top: 1px solid var(--border-color);
}
</style>
</head>
<body>
<main>
<h1>Patrick Marsceill, software&nbsp;designer</h1>
<p>
I&apos;m a software designer who makes high quality developer
tools that scale. My working style is hands-on and I enjoy
writing code as much as untangling problems, designing
interfaces, and collaborating with my team. Inevitably one of
these things will lead to another.
</p>
<hr />
<h2>Work Experience</h2>
<dl>
<dt>Magic <i>2024-present</i></dt>
<dd>
Designing and building autonomous software development
tools.
</dd>
<dt>WorkOS <i>2022-2024</i></dt>
<dd>
<p>
Led and managed the design of all products and marketing
surfaces. Helped shape, design, build, and launch the
entirety of WorkOS during my tenure.
</p>
<ul>
<li>
<a
href="https://workos.com/launch-week"
target="_blank"
>Launch Week</a
>
</li>
<li>
<a
href="https://workos.com/user-management"
target="_blank"
>User Management</a
>
</li>
<li>
<a href="https://authkit.com" target="_blank"
>AuthKit</a
>
</li>
<li>
<a
href="https://workos.com/audit-logs"
target="_blank"
>Audit Logs</a
>
</li>
<li>
<a
href="https://workos.com/multi-factor-authentication"
target="_blank"
>Multi-Factor Authentication</a
>
</li>
<li>
<a
href="https://x.com/pmarsceill/status/1738318869876408338"
target="_blank"
>Radix AI</a
>
</li>
<li>
<a href="https://workos.com/404" target="_blank"
>WorkOS Classic: 404 page</a
>
</li>
<li>
<a href="https://workos.com/404" target="_blank"
>WorkOS.com</a
>
</li>
</ul>
</dd>
<dt>GitHub <i>2015-2022</i></dt>
<dd>
<p>
Managed product design and was a Staff Designer for Code
to Cloud and Productivity Tools teams.
</p>
<ul>
<li>
<a
href="https://github.com/features/issues"
target="_blank"
>GitHub Projects & Issues</a
>
</li>
<li>
<a
href="https://github.com/features/actions"
target="_blank"
>GitHub Actions</a
>
</li>
<li>
<a
href="https://github.com/features/packages"
target="_blank"
>GitHub Packages</a
>
</li>
<li>
<a
href="https://github.com/features/code-review"
target="_blank"
>GitHub Code Review</a
>
</li>
<li>
<a
href="https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/configuring-pull-request-merges/managing-a-merge-queue"
target="_blank"
>GitHub Merge Queue</a
>
</li>
<li>
<a
href="https://github.com/features/security"
target="_blank"
>GitHub Security</a
>
</li>
<li>
<a href="https://github.com" target="_blank"
>GitHub.com</a
>
</li>
</ul>
</dd>
<dt>Happy Cog <i>2012-2015</i></dt>
<dd>
Worked as a Senior Designer on product and marketing design
projects for clients like Google, Trek Bicycles, MTV, and
The Philadelphia Inquirer.
</dd>
<dt>Empathy Lab <i>2008-2012</i></dt>
<dd>
As a UX designer, I worked on product and ecommerce design
for clients like DirecTV, Sony Pictures, and Rogers
Communications.
</dd>
</dl>
<hr />
<h2>Projects</h2>
<dl>
<dt>This Modern Web</dt>
<dd>
<p>
My personal website / blog — I tend to write about
design and tech, my own life, and occasionally music and
film.
</p>
<ul>
<li>
<a href="https://thismodernweb.com" target="_blank"
>thismodernweb.com</a
>
</li>
<li>
<a
href="https://www.thismodernweb.com/rss.xml"
target="_blank"
>RSS Feed</a
>
</li>
</ul>
</dd>
<dt>Aware</dt>
<dd>
<p>
A MacOS and VisionOS app built with Josh Peek that
tracks how long you've been using your device in a
single sitting.
</p>
<ul>
<li>
<a href="https://awaremac.com" target="_blank"
>awaremac.com</a
>
</li>
<li>
<a
href="https://apps.apple.com/us/app/aware/id1082170746?mt=12"
target="_blank"
>Aware in the App Store</a
>
</li>
</ul>
</dd>
<dt>Feedster <i>relaunching soon</i></dt>
<dd>
A simple web-based RSS reader with public and private
channels for sharing.
</dd>
<dt>Tab Lab</dt>
<dd>
Write and share fully rendered guitar tablature authored in
the VexTab syntax.
</dd>
</dl>
<hr />
<h2>Elsewhere</h2>
<p>
You can find me around the web as @<em>pmarsceill</em> in most
places.
</p>
<ul>
<li>
<a href="https://github.com/pmarsceill" target="_blank"
>GitHub</a
>
</li>
<li>
<a href="https://read.cv/pmarsceill" target="_blank"
>Read.cv</a
>
</li>
<li>
<a href="https://twitter.com/pmarsceill" target="_blank"
>Twitter</a
>
</li>
<li>
<a
href="https://www.strava.com/athletes/7579302"
target="_blank"
>Strava</a
>
</li>
</ul>
<footer>
Built at home, by hand, with
<a href="https://zed.dev" target="_blank">Zed</a> and good old
<code>HTML</code> and <code>CSS</code>.<br />
&copy; 2024 Patrick Marsceill. All rights reserved.
</footer>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment