aaron/www
1
0
Fork 0
Code Releases Activity

video messaging, css improvements, image dimensions

Browse Source
This commit is contained in:
Aaron Gutierrez
2022-02-06 11:33:38 -08:00
parent 0808bc7c1b
commit 2cffbb0b1d
4 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
bench_template.html
View File

@@ -17,9 +17,9 @@
</header> </header>
<main> <main>
<p>Towards the start of my time at Carnegie Mellon, I started taking <p>Towards the start of my time at Carnegie Mellon, I started taking
pictures of benches. It provided me an object to seek out; and seek pictures of benches on walk around Pittsburgh. It provided me an subject
benches out I did. Since then, I've amassed a collection of photographs to seek out. Since then, I've amassed a collection of photographs from
from all over the world.</p> all over the world.</p>
<p>All images <a href="https://creativecommons.org/licenses/by-nc/4.0/"> <p>All images <a href="https://creativecommons.org/licenses/by-nc/4.0/">
CC BY-NC</a> Aaron Gutierrez.</p> CC BY-NC</a> Aaron Gutierrez.</p>

9
index.html
View File

@@ -10,11 +10,13 @@
<meta property="og:url" content="https://www.aarongutierrez.com"> <meta property="og:url" content="https://www.aarongutierrez.com">
<meta property="og:image" content="https://www.aarongutierrez.com/img/aaron@3x.jpg"> <meta property="og:image" content="https://www.aarongutierrez.com/img/aaron@3x.jpg">
<meta property="og:description" content="Aaron Gutierrez is a software engineer at Asana, a CMU graduate, and fond of benches."> <meta property="og:description" content="Aaron Gutierrez is a software engineer at Asana, a CMU graduate, and fond of benches.">
<meta name="description" content="Aaron Gutierrez is a software engineer at Asana, a CMU graduate, and fond of benches.">
</head> </head>
<body> <body>
<header> <header>
<h1>Aaron Gutierrez</h1> <h1>Aaron Gutierrez</h1>
<img id="aaron" alt="Aaron" src="img/aaron.jpg" <img id="aaron" alt="Aaron Gutierrez" src="img/aaron.jpg"
width="128px" height="128px"
srcset="img/aaron.jpg, img/aaron@2x.jpg 2x,img/aaron@3x.jpg 3x"> srcset="img/aaron.jpg, img/aaron@2x.jpg 2x,img/aaron@3x.jpg 3x">
<p> <p>
Engineering Manager @ <a href="https://asana.com">Asana</a><br> Engineering Manager @ <a href="https://asana.com">Asana</a><br>
@@ -48,8 +50,9 @@
Wufoo</a> Wufoo</a>
</li> </li>
<li>I've also worked on our <a href="https://asana.com/apps/csv-importer"> <li>I've also worked on <a href="https://blog.asana.com/2022/01/vimeo-video-messaging/">video messaging</a>,
CSV importer</a> and <a href="https://blog.asana.com/2019/02/asana-marketing-creative-teams/">Asana our <a href="https://asana.com/apps/csv-importer">CSV importer</a>,
and <a href="https://blog.asana.com/2019/02/asana-marketing-creative-teams/">Asana
Forms</a></li> Forms</a></li>
</ul> </ul>
</section> </section>

15
pub.py
View File

@@ -5,6 +5,7 @@ import os
import sys import sys
import subprocess import subprocess
from functools import cache from functools import cache
from PIL import Image
import boto3 import boto3
@@ -14,9 +15,9 @@ session = boto3.Session(profile_name='push')
s3 = session.client('s3') s3 = session.client('s3')
bench_fmt = """<a href="/bench/view/{0}"><picture><source type="image/webp" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.webp 2x, /img/bench/{0:03d}.780.webp"><source type="image/webp" srcset="/img/bench/{0:03d}.780.webp 2x, /img/bench/{0:03d}.390.webp"><source type="image/jpeg" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.jpg 2x, /img/bench/{0:03d}.780.jpg"><source type="image/jpeg" srcset="/img/bench/{0:03d}.780.jpg 2x, /img/bench/{0:03d}.390.jpg"><img src="/img/bench/{0:03d}.780.jpg"></picture></a>""" bench_fmt = """<a href="/bench/view/{0}"><picture><source type="image/webp" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.webp 2x, /img/bench/{0:03d}.780.webp"><source type="image/webp" srcset="/img/bench/{0:03d}.780.webp 2x, /img/bench/{0:03d}.390.webp"><source type="image/jpeg" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.jpg 2x, /img/bench/{0:03d}.780.jpg"><source type="image/jpeg" srcset="/img/bench/{0:03d}.780.jpg 2x, /img/bench/{0:03d}.390.jpg"><img src="/img/bench/{0:03d}.780.jpg" width="{1}px" height="{2}px"></picture></a>"""
bench_view_ftm = """<a href="/img/bench/{0:03d}.1560.jpg"><picture><source type="image/webp" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.webp 2x, /img/bench/{0:03d}.780.webp"><source type="image/webp" srcset="/img/bench/{0:03d}.780.webp 2x, /img/bench/{0:03d}.390.webp"><source type="image/jpeg" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.jpg 2x, /img/bench/{0:03d}.780.jpg"><source type="image/jpeg" srcset="/img/bench/{0:03d}.780.jpg 2x, /img/bench/{0:03d}.390.jpg"><img src="/img/bench/{0:03d}.780.jpg"></picture></a>""" bench_view_ftm = """<a href="/img/bench/{0:03d}.1560.jpg"><picture><source type="image/webp" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.webp 2x, /img/bench/{0:03d}.780.webp"><source type="image/webp" srcset="/img/bench/{0:03d}.780.webp 2x, /img/bench/{0:03d}.390.webp"><source type="image/jpeg" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.jpg 2x, /img/bench/{0:03d}.780.jpg"><source type="image/jpeg" srcset="/img/bench/{0:03d}.780.jpg 2x, /img/bench/{0:03d}.390.jpg"><img src="/img/bench/{0:03d}.780.jpg" width="{1}px" height="{2}px"></picture></a>"""
TYPE_MAP = { TYPE_MAP = {
'asc': 'text/plain', 'asc': 'text/plain',
@@ -108,7 +109,10 @@ def make_bench():
for i in range(1, num_imgs+1, 16): for i in range(1, num_imgs+1, 16):
page = '' page = ''
for j in range(i, min(num_imgs+1, i+16)): for j in range(i, min(num_imgs+1, i+16)):
page += bench_fmt.format(num_imgs + 1 - j) idx = num_imgs + 1 - j
with Image.open('img/bench/{0:03d}.png'.format(idx)) as img:
width,height = img.size
page += bench_fmt.format(idx, width, height)
prev_pg = i//16 prev_pg = i//16
next_pg = i//16 + 2 next_pg = i//16 + 2
@@ -129,7 +133,10 @@ def make_bench_view(idx, prev, nxt):
with open('bench_view_template.html', 'r') as f: with open('bench_view_template.html', 'r') as f:
template = f.read() template = f.read()
body = bench_view_ftm.format(idx) with Image.open('img/bench/{0:03d}.png'.format(idx)) as img:
width,height = img.size
body = bench_view_ftm.format(idx, width, height)
preview = "/img/bench/{0:03d}.780.jpg".format(idx) preview = "/img/bench/{0:03d}.780.jpg".format(idx)

27
site.css
View File

@@ -1,14 +1,13 @@
img#aaron {
width: 128px;
height: 128px;
}
body { body {
max-width: 780px; max-width: 780px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
} }
:root {
--padding: 20px;
}
h1 { h1 {
font-weight: normal; font-weight: normal;
} }
@@ -23,6 +22,14 @@ footer {
text-align: center; text-align: center;
} }
li, p {
line-height: 1.5;
}
li {
margin-bottom: 1em;
}
.img-grid { .img-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -33,12 +40,15 @@ footer {
align-items: flex-end; align-items: flex-end;
display: flex; display: flex;
margin-bottom: 40px; margin-bottom: 40px;
margin-bottom: var(--padding);
max-height: min(calc(100vh - 80px), calc(100vw - 40px)); max-height: min(calc(100vh - 80px), calc(100vw - 40px));
max-height: min(calc(100vh - 80px), calc(100vw - var(--padding)));
overflow: hidden; overflow: hidden;
} }
.img-grid img { .img-grid img {
display: block; display: block;
height: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 100%; max-width: 100%;
@@ -51,6 +61,7 @@ footer {
} }
.img-view img { .img-view img {
height: 100%;
max-height: 100vh; max-height: 100vh;
max-width: 100%; max-width: 100%;
} }
@@ -68,6 +79,12 @@ div.nav {
} }
} }
@media(min-width:820px) {
:root {
--padding: min(40px, calc((100vw - 820px) / 2 + 20px));
}
}
@media(prefers-color-scheme: dark) { @media(prefers-color-scheme: dark) {
body { body {
background: #333; background: #333;