jsonresume-theme-a11y
Version:
Theme for JSON Resume addressing WCAG 2.1 and ARIA accessibility (a11y) standards
314 lines (312 loc) • 12.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Jonathan Pool</title>
<style>
@media (max-width: 500px) {
html {
font-size: 7px;
}
}
@media (min-width: 501px) {
html {
font-size: 1.4vw;
}
}
* {
box-sizing: border-box;
}
a {
overflow-wrap: break-word;
}
body {
background: #eee;
margin: 3rem 3rem;
}
.boxedBulletList {
padding-bottom: 0.5rem;
border-style: solid;
border-width: 1px;
}
.compactDiv {
padding: 0 3rem 2rem 3rem;
margin-top: 1rem;
border-style: solid;
border-width: 0.5rem;
border-radius: 50%;
border-color: #33444433;
}
h1,
h2,
h3,
h4,
h5,
h6
h7 {
margin: 0.5rem 0 0 0.3rem;
color: #344;
}
h1,
.head1 {
font-size: 2rem;
}
h2,
.head2 {
font-size: 1.9rem;
font-style: italic;
}
h3,
.head3 {
font-size: 1.8rem;
}
h4,
.head4 {
font-size: 1.7rem;
font-style: italic;
}
h5,
.head5 {
font-size: 1.6rem;
}
h6,
.head6 {
font-size: 1.5rem;
font-style: italic;
}
h7,
.head7 {
font-size: 1.4rem;
}
.head1,
.head2,
.head3,
.head4,
.head5,
.head6,
.head7 {
margin-top: 1rem;
text-align: center;
font-weight: bolder;
color: #344;
}
.level1 > section:first-child > h1,
.level2 > section:first-child > h2,
.level3 > section:first-child > h3 {
margin-top: 0;
}
.level1 {
border-color: slategray;
}
.level2 {
margin: 0.5vw;
border-color: mediumslateblue;
}
.level3 {
margin: 0.5vw;
border-color: mediumturquoise;
}
.list-item {
position: relative;
left: -0.5rem;
}
p {
display: list-item;
list-style: inside;
margin: 0.3rem 0 0 0;
padding-left: 0.75rem;
font-size: 1.2rem;
}
.pic1 > img {
position: absolute;
top: 3rem;
right: 3rem;
width: 8rem;
}
.rowTable ~ .rowTable {
margin-top: 0.1rem;
}
.rowTablesCircled {
display: flex;
justify-content: center;
}
.rowTablesCircled td {
padding-right: 0.3rem;
}
section > .tableLH,
section > .tableTH {
margin-top: 2rem;
}
.boxedBulletList + .boxedBulletList {
margin-top: -1px;
}
section:not(.boxedBulletList) + .boxedBulletList {
margin-top: 1.5rem;
}
strong {
font-weight: bold;
}
table {
margin: 1rem auto 0 auto;
border-collapse: collapse;
}
.tableLH th {
text-align: right;
padding-right: 0.5rem;
}
.theme-credit {
margin-top: 1rem;
text-align: center;
font-size: 1rem;
font-style: italic;
}
td {
padding: 0.2rem;
border-style: solid;
border-width: 1px;
border-color: slategray;
}
</style>
</head>
<body>
<main>
<section title="Photograph" class="pic1">
<img src="http://stulta.com/images/pool-2009.jpg" alt="Photograph of Jonathan Pool">
</section>
<section title="Name" class="head1">
<h1>Jonathan Pool</h1>
</section>
<section title="Profession" class="head2">
<h2>Developer of accessible web applications</h2>
</section>
<section title="Repertoire" class="rowTablesCircled">
<div></div>
<div class="compactDiv">
<div class="head3">All phases:</div>
<table class="rowTable">
<tr>
<td>planning</td><td>design</td><td>coding</td><td>linting</td><td>testing</td>
</tr>
</table>
<table class="rowTable">
<tr>
<td>documentation</td><td>blogging</td><td>training</td><td>maintenance</td><td>upgrades</td>
</tr>
</table>
</div>
<div></div>
</section>
<section title="Contact information">
<table class="tableLH">
<tr>
<th>Email</th><td><a href="mailto:pool@stulta.com">pool@stulta.com</a></td>
</tr>
<tr>
<th>Telephone</th><td>(510) 225-1717</td>
</tr>
<tr>
<th>Mobile telephone</th><td>(510) 225-1700</td>
</tr>
<tr>
<th>Blog</th><td><a href="http://stulta.com/forumo">http://stulta.com/forumo</a></td>
</tr>
<tr>
<th>Mailing address</th><td>555 10th St Apt 312<br>Oakland, California 94607-5208, US</td>
</tr>
</table>
</section>
<section title="Profiles">
<table class="tableTH">
<tr>
<th>Host</th><th>User ID</th><th>URL</th>
</tr>
<tr>
<td>Github</td><td>jrpool</td><td><a href="https://github.com/jrpool">https://github.com/jrpool</a></td>
</tr>
<tr>
<td>LinkedIn</td><td>jonathanpool</td><td><a href="https://www.linkedin.com/in/jonathanpool/">https://www.linkedin.com/in/jonathanpool/</a></td>
</tr>
<tr>
<td>MDN Web Docs</td><td>JonathanPool</td><td><a href="https://developer.mozilla.org/en-US/profiles/JonathanPool">https://developer.mozilla.org/en-US/profiles/JonathanPool</a></td>
</tr>
</table>
</section>
<section class="boxedBulletList level1">
<h1>Current a11y projects</h1>
<p><span class="list-item"><strong>Accessible Calculator</strong>: <a href="https://github.com/jrpool/calculator/blob/master/README3.md">https://github.com/jrpool/calculator/blob/master/README3.md</a></span></p>
<p><span class="list-item"><strong>Accessible <code>jsonresume</code> theme</strong>: <a href="https://github.com/jrpool/jsonresume-theme-a11y">https://github.com/jrpool/jsonresume-theme-a11y</a></span></p>
<p><span class="list-item"><strong>Senior-friendly single-page site</strong>: <a href="https://github.com/jrpool/singlepropertysite">https://github.com/jrpool/singlepropertysite</a></span></p>
</section>
<section class="boxedBulletList level1">
<h1>Open-source contributions</h1>
<p><span class="list-item"><strong>ESLint (#25)</strong>: <a href="https://github.com/eslint/eslint/graphs/contributors">https://github.com/eslint/eslint/graphs/contributors</a></span></p>
<p><span class="list-item"><strong>MDN Web Docs</strong>: <a href="https://developer.mozilla.org/en-US/dashboards/revisions?user=JonathanPool">https://developer.mozilla.org/en-US/dashboards/revisions?user=JonathanPool</a></span></p>
<p><span class="list-item"><strong>LearnersGuild/curriculum-app (#3)</strong>: <a href="https://github.com/LearnersGuild/curriculum-app/graphs/contributors">https://github.com/LearnersGuild/curriculum-app/graphs/contributors</a></span></p>
<p><span class="list-item"><strong>PanLem</strong>: <a href="https://gitlab.com/JonathanPool">https://gitlab.com/JonathanPool</a></span></p>
<p><span class="list-item"><strong>PanLex developer documentation</strong>: <a href="https://dev.panlex.org">https://dev.panlex.org</a></span></p>
</section>
<section class="boxedBulletList level1">
<h1>What I have worked with</h1>
<p><span class="list-item"><strong>Languages</strong>: JavaScript, Perl, Java, bash, VBA, APL</span></p>
<p><span class="list-item"><strong>Scopes</strong>: full-stack, back-end, front-end, APIs, SPAs</span></p>
<p><span class="list-item"><strong>Back-end</strong>: Node.js, NPM, Express, pg, pg-promise, bcrypt, solr, DBI</span></p>
<p><span class="list-item"><strong>Databases</strong>: PostgreSQL, PL/pgSQL, SQL Server, FileMaker Pro, MongoDB, migrations</span></p>
<p><span class="list-item"><strong>Front-end</strong>: HTML, CSS, JQuery, Cheerio, Bootstrap, EJS, Pug, Materialize</span></p>
<p><span class="list-item"><strong>Content and version management</strong>: git, svn, Github, Gitlab, Bitbucket, SourceForge, WordPress</span></p>
<p><span class="list-item"><strong>Quality control</strong>: ESLint, mocha, chai, Selenium Webdriver, Chrome Developer Tools</span></p>
<p><span class="list-item"><strong>Accessibility</strong>: WCAG 2.1, ARIA, Chrome/aXe/Siteimprove audits, ADA Title III</span></p>
<p><span class="list-item"><strong>Internationalization</strong>: Unicode, CLDR, ISO 639, PanLex API</span></p>
<p><span class="list-item"><strong>Web servers</strong>: Apache httpd, nginx</span></p>
<p><span class="list-item"><strong>Mail servers</strong>: Postfix, sendmail, SendGrid Web API</span></p>
<p><span class="list-item"><strong>Remote hosts</strong>: Amazon AWS (EC2, S3, Glacier), OVH</span></p>
<p><span class="list-item"><strong>OS’s</strong>: Ubuntu, RHEL, OS X, Cisco IOS</span></p>
<p><span class="list-item"><strong>Configuration management</strong>: Puppet</span></p>
<p><span class="list-item"><strong>Files</strong>: FineReader, Acrobat, iconv, Atom, nano, ed, sed, GraphicConverter</span></p>
<p><span class="list-item"><strong>CAD</strong>: VectorWorks</span></p>
<p><span class="list-item"><strong>Statistics</strong>: SPSS</span></p>
<p><span class="list-item"><strong>Office apps</strong>: Apache OpenOffice, Apple iWork, Microsoft Office</span></p>
<p><span class="list-item"><strong>Collaboration</strong>: Slack, Asana, Wrike, Trello, Egnyte</span></p>
</section>
<section class="boxedBulletList level1">
<h1>Human languages (best→worst)</h1>
<p><span class="list-item">English</span></p>
<p><span class="list-item">Esperanto</span></p>
<p><span class="list-item">German</span></p>
<p><span class="list-item">Turkish</span></p>
<p><span class="list-item">French</span></p>
<p><span class="list-item">Norwegian Bokmål</span></p>
<p><span class="list-item">Russian</span></p>
<p><span class="list-item">Latin</span></p>
</section>
<section class="boxedBulletList level1">
<h1>Professional education</h1>
<p><span class="list-item"><a href="https://learnersguild.org">Learners Guild</a>, 2017–2018: web development</span></p>
<p><span class="list-item"><a href="https://jpdev.pro/info/docs/pool-uw-transcript.pdf">University of Washington</a>, 2004–2007: computer science, user interface design, linguistics</span></p>
<p><span class="list-item"><a href="https://www.uchicago.edu">The University of Chicago</a>, 1966–1971: political science</span></p>
</section>
<section class="boxedBulletList level1">
<h1>Work</h1>
<p><span class="list-item"><a href="http://longnow.org">The Long Now Foundation</a>, 2012–2016: Project Director, PanLex</span></p>
<p><span class="list-item"><a href="http://stulta.com/misc/cx/">Centerplex</a>, 1990–2004: contracting, project management, ADA upgrades</span></p>
<p><span class="list-item"><a href="http://www.washington.edu">University of Washington</a>, 1977–1993: research and teaching</span></p>
<p><span class="list-item"><a href="http://www.stonybrook.edu">State University of New York at Stony Brook</a>, 1971–1977: research and teaching</span></p>
<p><span class="list-item"><a href="https://www.peacecorps.gov/">Peace Corps</a>, 1964–1966: teaching</span></p>
</section>
<section class="boxedBulletList level1">
<h1>Software-development grants</h1>
<p><span class="list-item">University of Maryland</span></p>
<p><span class="list-item">National Science Foundation</span></p>
</section>
<section class="boxedBulletList level1">
<h1>Publication subjects</h1>
<p><span class="list-item">computational lexicography</span></p>
<p><span class="list-item">syntactic ambiguity</span></p>
<p><span class="list-item">game-theoretic models of social choice</span></p>
</section>
</main>
<section class="theme-credit">
Powered by <a href="https://github.com/jrpool/jsonresume-theme-a11y">jsonresume-theme-a11y</a>
</section>
</body>
</html>