ethan
/
ethanyoo.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update home page

This commit is contained in:
Ethan Yoo 2024-06-25 20:40:46 -04:00
parent 2b9d2705c9
commit 2cd9cbe709
Signed by: ethan
GPG Key ID: 70596474C5D20F85
4 changed files with 316 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
layouts/index.html
View File

@ -2,20 +2,45 @@
<header> <header>
{{ "<!-- For more information on microformats, read the source code comments -->" | safeHTML }} {{ "<!-- For more information on microformats, read the source code comments -->" | safeHTML }}
<div class="center h-card vcard"> <div class="center h-card vcard">
<!-- For basic h-card validation, visit 'Publishing on the IndieWeb' at https://indiewebify.me/validate-h-card/ <!--
For basic h-card validation, visit 'Publishing on the IndieWeb' at
https://indiewebify.me/validate-h-card/
For complete results, try parsing this page with the 'PHP Microformats Parser' at https://pin13.net/mf2/ For complete results, try parsing this page with the 'PHP Microformats Parser'
at https://pin13.net/mf2/
Examples for writing 'backward compatible' h-card markup available at https://microformats.org/wiki/microformats2#authoring --> Examples for writing 'backward compatible' h-card markup available at
<a class="p-name fn u-url url link-000" href="/"><h1>{{ .Site.Params.author }}</h1></a> https://microformats.org/wiki/microformats2#authoring
<!-- New properties (including gender identity) listed at https://microformats.org/wiki/rfc-6350 --> -->
<h3>Pronouns: <span class="p-gender-identity gender">{{ .Site.Params.authorPronouns }}</span></h3> <a class="p-name fn u-url url link-000" href="/">
<h1>{{ .Site.Params.author }}</h1>
<p class="p-note">I am a data enthusiast skilled in data management, qualitative and quantitative data analysis, and low-code automation. My research interests include disability, health equity, poverty, and social policy. I am also an advocate for digital rights and free culture, and I maintain <a href="/resources/" >a page with useful resources</a>.</p> </a>
<!--
<img class="u-photo photo" src="/me.jpg" alt="Photo of an East Asian man wearing a dark gray suit and a floral tie" title="{{ .Site.Params.author }}" /> New properties (including gender identity) listed at
https://microformats.org/wiki/rfc-6350
<p>My guiding principles draw from disability justice and the ethics of care; these principles are connected to current sociopolitical issues and my commitment to progressive social change.</p> -->
<h3>
Pronouns:
<span class="p-gender-identity gender">{{ .Site.Params.authorPronouns }}</span>
</h3>
<p class="p-note">
I am a data enthusiast skilled in data management, qualitative and
quantitative data analysis, and low-code automation. My research interests
include disability, health equity, poverty, and social policy. I am also
an advocate for digital rights and free culture, and I maintain
<a href="/resources/">a page with useful resources</a>.
</p>
<img
class="u-photo photo"
src="/me.jpg"
alt="Photo of an East Asian man wearing a dark gray suit and a floral tie"
title="{{ .Site.Params.author }}"
/>
<p>
My guiding principles draw from disability justice and the ethics of care;
these principles are connected to current sociopolitical issues and my
commitment to progressive social change.
</p>
</div> </div>
</header> </header>
{{- end }} {{- end }}
@ -24,22 +49,59 @@ Examples for writing 'backward compatible' h-card markup available at https://mi
<main> <main>
<div class="center"> <div class="center">
<h2>Where should you go from here?</h2> <h2>Where should you go from here?</h2>
<p>&#128226; <a href="/links/" >I found these current events and recent articles interesting</a>. &#128226;</p> <p>
<p>&#128198; <a href="/now/" >I regularly write updates on what I'm doing now</a>. &#128198;</p> <a class="btn" href="/links/">&#128226; I found these current events and recent articles interesting.</a>
<p>&#128217; <a href="/resources/" >You can browse my recommended resources</a>. &#128217;</p> </p>
<p>
<a class="btn" href="/now/">&#128198; I regularly write updates on what I'm doing now.</a>
</p>
<p>
<a class="btn" href="/resources/">&#x1F4DA; You can browse my recommended resources.</a>
</p>
<h2>Elsewhere</h2> <h2>Elsewhere</h2>
<p>&#128204; <a rel="me" href="{{ .Site.Params.authorLinkedIn }}" >I have a LinkedIn profile</a>. &#128204;</p> <a class="link-linkedin" rel="me" href="{{ .Site.Params.authorLinkedIn }}">
<p>&#127916; <a rel="me" href="{{ .Site.Params.authorLetterboxd }}" >I use Letterboxd, "the social network for film lovers."</a> &#127916;</p> <img class="linkedin" src="icon/linkedin.svg"></img>LinkedIn
<p>&#128588; This website is a member of <a href="https://512kb.club/"><b>The 512KB Club</b></a>! &#128588;</p> </a>
<a class="link-letterboxd" rel="me" href="{{ .Site.Params.authorLetterboxd }}">
<img class="letterboxd" src="icon/letterboxd.svg"></img>Letterboxd
</a>
</div> </div>
</main> </main>
<footer> <footer>
<div class="center"> <div class="center">
<a class="link-000" href="https://ForTheBadge.com/"><img src="/img/built-with-love.svg" alt="This site was built with love, using Git and Hugo." title="I also used Git and Hugo." /></a> <br>
<a class="link-000" href="{{ .Site.Params.license }}"><img src="/img/CC-BY-SA.svg" alt="Original content by {{ .Site.Params.author }} is licensed under {{ .Site.Copyright }}" title="{{ .Site.Params.copyrightMessage }}" /></a> <a class="link-000" href="https://ForTheBadge.com/">
<p><b><a class="u-email email" rel="me" href="mailto:{{ .Site.Params.authorEmail }}">Contact me</a>. <a href="/privacy/" >Privacy</a>. <a rel="pgpkey" href="/ethan.asc.txt">Public key</a> <a href="https://keyoxide.org/{{ .Site.Params.authorEmail }}">(Keyoxide)</a>.</b></p> <img
<a class="link-001" href="https://nextcloud.com/sharing#eyoo@share.mayfirst.org"><img src="/icon/nextcloud.svg" class="nextcloud" alt="Share with me via Nextcloud!" title="Federated Cloud ID makes it possible to share across Nextcloud and other Open Cloud Mesh (OCM) compatible servers!" /> Share with me via Nextcloud!</a> src="/img/built-with-love.svg"
alt="This site was built with love, using Git and Hugo."
title="I also used Git and Hugo."
/>
</a>
<a class="link-000" href="{{ .Site.Params.license }}">
<img
src="/img/CC-BY-SA.svg"
alt="Original content by {{ .Site.Params.author }} is licensed under {{ .Site.Copyright }}"
title="{{ .Site.Params.copyrightMessage }}"
/>
</a>
<p>
<b>
<a class="u-email email" rel="me" href="mailto:{{ .Site.Params.authorEmail }}">Contact me</a>.
<a href="/privacy/" >Privacy</a>.
<a rel="pgpkey" href="/ethan.asc.txt">Public key</a>
<a href="https://keyoxide.org/{{ .Site.Params.authorEmail }}">(Keyoxide)</a>.
</b>
</p>
<a class="link-nextcloud" href="https://nextcloud.com/sharing#eyoo@share.mayfirst.org">
<img
src="/icon/nextcloud.svg"
class="nextcloud"
alt="Share with me via Nextcloud!"
title="Federated Cloud ID makes it possible to share across Nextcloud and other Open Cloud Mesh (OCM) compatible servers!"
/>
Share with me via Nextcloud!
</a>
<p>&#128421; <a href="/cloudflare/" ><i>Where is this website hosted?</i></a> &#128421;</p> <p>&#128421; <a href="/cloudflare/" ><i>Where is this website hosted?</i></a> &#128421;</p>
</div> </div>
</footer> </footer>

34
static/icon/letterboxd.svg Normal file
View File

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>letterboxd-decal-dots-neg-rgb</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="129.847328" height="141.389313"/>
<rect id="path-3" x="0" y="0" width="129.847328" height="141.389313"/>
</defs>
<g id="letterboxd-decal-dots-neg-rgb" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Circle" fill="#FFFFFF" cx="250" cy="250" r="250"/>
<g id="dots-pos" transform="translate(61.000000, 180.000000)">
<g id="Dots">
<ellipse id="Green" fill="#00E054" cx="189" cy="69.9732824" rx="70.0786517" ry="69.9732824"/>
<g id="Blue" transform="translate(248.152672, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<g id="Mask"/>
<ellipse fill="#40BCF4" mask="url(#mask-2)" cx="59.7686766" cy="69.9732824" rx="70.0786517" ry="69.9732824"/>
</g>
<g id="Orange">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"/>
</mask>
<g id="Mask"/>
<ellipse fill="#FF8000" mask="url(#mask-4)" cx="70.0786517" cy="69.9732824" rx="70.0786517" ry="69.9732824"/>
</g>
<path d="M129.539326,107.022244 C122.810493,96.2781677 118.921348,83.5792213 118.921348,69.9732824 C118.921348,56.3673435 122.810493,43.6683972 129.539326,32.9243209 C136.268159,43.6683972 140.157303,56.3673435 140.157303,69.9732824 C140.157303,83.5792213 136.268159,96.2781677 129.539326,107.022244 Z" id="Overlap" fill="#556677"/>
<path d="M248.460674,32.9243209 C255.189507,43.6683972 259.078652,56.3673435 259.078652,69.9732824 C259.078652,83.5792213 255.189507,96.2781677 248.460674,107.022244 C241.731841,96.2781677 237.842697,83.5792213 237.842697,69.9732824 C237.842697,56.3673435 241.731841,43.6683972 248.460674,32.9243209 Z" id="Overlap" fill="#556677"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

1
static/icon/linkedin.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B

166
themes/geronimo/static/css/style.css
View File

@ -1,22 +1,24 @@
/* Body */
a, a,
a:link { a:link {
text-decoration: none; text-decoration: none;
color: #ace; color: #ace;
} }
a:hover { a:hover {
background: #2b5278; background: #2b5278;
text-decoration: underline dotted; text-decoration: underline dotted;
border: 1px solid; border: 1px solid;
} }
header a:link, header a:link,
header a:visited, header a:visited,
footer a:link, footer a:link,
footer a:visited, footer a:visited,
aside a:visited, aside a:visited,
main a:visited { main a:visited {
color: #FFF; color: #fff;
} }
body { body {
background: #10151a; background: #10151a;
color: #d3dae3; color: #d3dae3;
@ -25,40 +27,156 @@ body {
max-width: 50em; max-width: 50em;
padding: 0 2em; padding: 0 2em;
} }
h2, h2,
main h1 { main h1 {
text-align: center; text-align: center;
} }
h1 { h1 {
font-size: 2.1em; font-size: 2em;
} }
h2 { h2 {
font-size: 1.8em; font-size: 1.75em;
} }
h3 { h3 {
font-size: 1.5em; font-size: 1.5em;
} }
article, article,
main { main {
padding: 4px 2px; padding: 4px 2px;
} }
blockquote { blockquote {
padding: 0.25em 1.5em; padding: 0.25em 1.5em;
background: #ddd; background: #ddd;
color: #000; color: #000;
border-radius: 4px; border-radius: 4px;
} }
code { code {
background: #000; background: #000;
font: 1em/1.5 monospace, monospace; font: 1em/1.5 monospace, monospace;
padding: 2px; padding: 2px;
} }
img[src$='#center'] { img[src$='#center'] {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.nextcloud {
width: 50px;
height: 30px;
position: relative;
top: 8px;
background-size: contain;
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
}
.post-title {
line-height: 1.8;
}
.subtitle {
float: right;
}
a.link-000 {
background: #000;
border: none;
}
a.link-nextcloud {
padding: 10px;
background-color: #0082c9;
color: #fff;
border-radius: 3px;
padding-left: 4px;
}
html {
overflow-y: scroll;
visibility: visible;
opacity: 1;
}
a.link-letterboxd {
padding: 0.5em;
background-color: #202830;
border-radius: 3px;
padding-left: 0.25em;
}
.letterboxd {
display: inline-block;
width: 1em;
margin-right: 0.25em;
vertical-align: middle;
}
a.link-linkedin {
padding: 0.5em;
background-color: #0077b5;
border-radius: 3px;
margin-right: 0.5em;
padding-left: 0.25em;
color: #fff;
}
.linkedin {
display: inline-block;
width: 1em;
margin-right: 0.25em;
vertical-align: middle;
}
.btn {
display: block;
margin: 0.5em auto;
padding: 0.5em;
border: none;
border-radius: 3px;
background-color: #e36d25;
color: #000;
cursor: pointer;
width: fit-content;
}
.btn:hover {
background-color: #d15d27;
}
a.btn:hover {
text-decoration: none;
border: none;
}
a.btn:link,
a.btn:visited {
color: #000;
}
a.link-letterboxd:link,
a.link-letterboxd:visited,
a.link-linkedin:link,
a.link-linkedin:visited {
color: #fff;
}
/* Light theme */ /* Light theme */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body { body {
@ -91,43 +209,3 @@ img[src$='#center'] {
padding: 2px; padding: 2px;
} }
} }
/* Classes */
.center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.nextcloud {
width: 50px;
height: 30px;
position: relative;
top: 8px;
background-size: contain;
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
}
.post-title {
line-height: 1.8;
}
.subtitle {
float: right;
}
a.link-000 {
background: #000;
border: none;
}
a.link-001 {
padding: 10px;
background-color: #0082c9;
color: #ffffff;
border-radius: 3px;
padding-left: 4px;
}
html {
overflow-y: scroll;
visibility: visible;
opacity: 1;
}