aaron/www
1
0
Fork 0
Code Releases Activity

Redesign bench pages

Browse Source
This commit is contained in:
Aaron Gutierrez
2020-12-18 22:13:35 -08:00
parent 8939dd8016
commit 5db3b83648
10 changed files with 71 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
bench/1.html
View File

File diff suppressed because one or more lines are too long

22
bench/2.html
View File

File diff suppressed because one or more lines are too long

22
bench/3.html
View File

File diff suppressed because one or more lines are too long

22
bench/4.html
View File

File diff suppressed because one or more lines are too long

22
bench/5.html
View File

File diff suppressed because one or more lines are too long

15
bench/6.html
View File

@@ -19,21 +19,10 @@
CC BY-NC</a> Aaron Gutierrez.</p> CC BY-NC</a> Aaron Gutierrez.</p>
<div class="img-grid"> <div class="img-grid">
<a href="/bench/view/81.html"><picture><source type="image/webp" srcset="/img/bench/081.thumb.webp, /img/bench/081.thumb@2x.webp 2x"><img src="/img/bench/081.thumb.jpg"></picture></a> <a href="/bench/view/11"><picture><source type="image/webp" srcset="/img/bench/011.1560.webp 1560w, /img/bench/011.780.webp 780w, /img/bench/011.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/011.1560.jpg 1560w, /img/bench/011.780.jpg 780w, /img/bench/011.390.jpg 390w"><img src="/img/bench/011.780.jpg"></picture></a><a href="/bench/view/10"><picture><source type="image/webp" srcset="/img/bench/010.1560.webp 1560w, /img/bench/010.780.webp 780w, /img/bench/010.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/010.1560.jpg 1560w, /img/bench/010.780.jpg 780w, /img/bench/010.390.jpg 390w"><img src="/img/bench/010.780.jpg"></picture></a><a href="/bench/view/9"><picture><source type="image/webp" srcset="/img/bench/009.1560.webp 1560w, /img/bench/009.780.webp 780w, /img/bench/009.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/009.1560.jpg 1560w, /img/bench/009.780.jpg 780w, /img/bench/009.390.jpg 390w"><img src="/img/bench/009.780.jpg"></picture></a><a href="/bench/view/8"><picture><source type="image/webp" srcset="/img/bench/008.1560.webp 1560w, /img/bench/008.780.webp 780w, /img/bench/008.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/008.1560.jpg 1560w, /img/bench/008.780.jpg 780w, /img/bench/008.390.jpg 390w"><img src="/img/bench/008.780.jpg"></picture></a><a href="/bench/view/7"><picture><source type="image/webp" srcset="/img/bench/007.1560.webp 1560w, /img/bench/007.780.webp 780w, /img/bench/007.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/007.1560.jpg 1560w, /img/bench/007.780.jpg 780w, /img/bench/007.390.jpg 390w"><img src="/img/bench/007.780.jpg"></picture></a><a href="/bench/view/6"><picture><source type="image/webp" srcset="/img/bench/006.1560.webp 1560w, /img/bench/006.780.webp 780w, /img/bench/006.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/006.1560.jpg 1560w, /img/bench/006.780.jpg 780w, /img/bench/006.390.jpg 390w"><img src="/img/bench/006.780.jpg"></picture></a><a href="/bench/view/5"><picture><source type="image/webp" srcset="/img/bench/005.1560.webp 1560w, /img/bench/005.780.webp 780w, /img/bench/005.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/005.1560.jpg 1560w, /img/bench/005.780.jpg 780w, /img/bench/005.390.jpg 390w"><img src="/img/bench/005.780.jpg"></picture></a><a href="/bench/view/4"><picture><source type="image/webp" srcset="/img/bench/004.1560.webp 1560w, /img/bench/004.780.webp 780w, /img/bench/004.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/004.1560.jpg 1560w, /img/bench/004.780.jpg 780w, /img/bench/004.390.jpg 390w"><img src="/img/bench/004.780.jpg"></picture></a><a href="/bench/view/3"><picture><source type="image/webp" srcset="/img/bench/003.1560.webp 1560w, /img/bench/003.780.webp 780w, /img/bench/003.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/003.1560.jpg 1560w, /img/bench/003.780.jpg 780w, /img/bench/003.390.jpg 390w"><img src="/img/bench/003.780.jpg"></picture></a><a href="/bench/view/2"><picture><source type="image/webp" srcset="/img/bench/002.1560.webp 1560w, /img/bench/002.780.webp 780w, /img/bench/002.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/002.1560.jpg 1560w, /img/bench/002.780.jpg 780w, /img/bench/002.390.jpg 390w"><img src="/img/bench/002.780.jpg"></picture></a><a href="/bench/view/1"><picture><source type="image/webp" srcset="/img/bench/001.1560.webp 1560w, /img/bench/001.780.webp 780w, /img/bench/001.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/001.1560.jpg 1560w, /img/bench/001.780.jpg 780w, /img/bench/001.390.jpg 390w"><img src="/img/bench/001.780.jpg"></picture></a>
<a href="/bench/view/82.html"><picture><source type="image/webp" srcset="/img/bench/082.thumb.webp, /img/bench/082.thumb@2x.webp 2x"><img src="/img/bench/082.thumb.jpg"></picture></a>
<a href="/bench/view/83.html"><picture><source type="image/webp" srcset="/img/bench/083.thumb.webp, /img/bench/083.thumb@2x.webp 2x"><img src="/img/bench/083.thumb.jpg"></picture></a>
<a href="/bench/view/84.html"><picture><source type="image/webp" srcset="/img/bench/084.thumb.webp, /img/bench/084.thumb@2x.webp 2x"><img src="/img/bench/084.thumb.jpg"></picture></a>
<a href="/bench/view/85.html"><picture><source type="image/webp" srcset="/img/bench/085.thumb.webp, /img/bench/085.thumb@2x.webp 2x"><img src="/img/bench/085.thumb.jpg"></picture></a>
<a href="/bench/view/86.html"><picture><source type="image/webp" srcset="/img/bench/086.thumb.webp, /img/bench/086.thumb@2x.webp 2x"><img src="/img/bench/086.thumb.jpg"></picture></a>
<a href="/bench/view/87.html"><picture><source type="image/webp" srcset="/img/bench/087.thumb.webp, /img/bench/087.thumb@2x.webp 2x"><img src="/img/bench/087.thumb.jpg"></picture></a>
<a href="/bench/view/88.html"><picture><source type="image/webp" srcset="/img/bench/088.thumb.webp, /img/bench/088.thumb@2x.webp 2x"><img src="/img/bench/088.thumb.jpg"></picture></a>
<a href="/bench/view/89.html"><picture><source type="image/webp" srcset="/img/bench/089.thumb.webp, /img/bench/089.thumb@2x.webp 2x"><img src="/img/bench/089.thumb.jpg"></picture></a>
<a href="/bench/view/90.html"><picture><source type="image/webp" srcset="/img/bench/090.thumb.webp, /img/bench/090.thumb@2x.webp 2x"><img src="/img/bench/090.thumb.jpg"></picture></a>
<a href="/bench/view/91.html"><picture><source type="image/webp" srcset="/img/bench/091.thumb.webp, /img/bench/091.thumb@2x.webp 2x"><img src="/img/bench/091.thumb.jpg"></picture></a>
</div> </div>
<div class="nav"> <div class="nav">
<a href="/bench/5.html">Prev</a> <a href="/bench/5">Prev</a>
<a href="/">Home</a> <a href="/">Home</a>
<a href="#">Next</a> <a href="#">Next</a>
</nav> </nav>

4
bench_view_template.html
View File

@@ -14,9 +14,9 @@
{0} {0}
</div> </div>
<div class="nav"> <div class="nav">
<a href="{2}">Prev</a>
<a href="/">Home</a>
<a href="{3}">Next</a> <a href="{3}">Next</a>
<a href="/">Home</a>
<a href="{2}">Prev</a>
</nav> </nav>
</main> </main>
<hr> <hr>

26
index.html
View File

@@ -17,7 +17,7 @@
<img id="aaron" alt="Aaron" src="img/aaron.jpg" <img id="aaron" alt="Aaron" src="img/aaron.jpg"
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>
Platform Engineer @ <a href="https://asana.com">Asana</a><br> Program Lead @ <a href="https://asana.com">Asana</a><br>
Carnegie Mellon University, SCS 2017 Carnegie Mellon University, SCS 2017
</p> </p>
</header> </header>
@@ -27,25 +27,27 @@
<section> <section>
<h3>Asana</h3> <h3>Asana</h3>
<ul> <ul>
<li>I've helped build Asana's <li>I've helped build Asana's integrations with
<a href="https://asana.com/apps/zoom">Zoom</a>,
<a href="https://blog.asana.com/2020/02/jira-integration/"> <a href="https://blog.asana.com/2020/02/jira-integration/">
Jira</a>, Jira</a>,
<a href="https://asana.com/apps/adobe-creative-cloud"> <a href="https://asana.com/apps/adobe-creative-cloud">
Adobe Creative Cloud</a>, Adobe Creative Cloud</a>,
<a href="https://blog.asana.com/2019/02/asana-marketing-creative-teams">
Forms</a>,
<a href="https://blog.asana.com/2018/05/new-asana-slack-integration/"> <a href="https://blog.asana.com/2018/05/new-asana-slack-integration/">
Slack</a>, Slack</a>,
<a href="https://blog.asana.com/2017/10/emails-tasks-gmail-asana-integration/"> <a href="https://blog.asana.com/2017/10/emails-tasks-gmail-asana-integration/">
Gmail</a>, Gmail</a>,
<a href="https://blog.asana.com/2018/10/new-asana-outlook-integration/"> <a href="https://blog.asana.com/2018/10/new-asana-outlook-integration/">
Outlook</a>, Outlook</a>, and
<a href="https://blog.asana.com/2017/09/wufoo-web-form-integration/"> <a href="https://blog.asana.com/2017/09/wufoo-web-form-integration/">
Wufoo</a>, and Wufoo</a>
<a href="https://asana.com/apps/csv-importer">CSV</a> integrations.
</li> </li>
<li>I'm currently the Program Lead for our Platform Apps team as we <li>I've also built our <a href="https://asana.com/apps/csv-importer">
look to enable rich experiences for integration with Asana.</li> CSV importer</a> and <a href="https://asana.com/apps/zoom">Asana
Forms</a></li>
<li>I'm currently the Program Lead for the Integrations team as we
look to scalably build more high-quality integrations on Asana's
platform</li>
</ul> </ul>
</section> </section>
<section> <section>
@@ -65,17 +67,17 @@
<li>I served as Treasurer and President of the <li>I served as Treasurer and President of the
<a href="https://rushdelt.com">Delta Beta Chapter</a> of <a href="https://rushdelt.com">Delta Beta Chapter</a> of
<a href="https://www.delts.org">∆T∆</a>, where I built and maintained our <a href="https://www.delts.org">∆T∆</a>, where I built and maintained our
reimbursement tracking web application.</li> reimbursement tracking web application</li>
</ul> </ul>
</section> </section>
<h2>Links</h2> <h2>Links</h2>
<section> <section>
<ul> <ul>
<li><a href="bench/1.html">My Benches</a></li> <li><a href="/bench/1">My Benches</a></li>
<li><a href="https://ski.aarongutierrez.com">My Ski Photos</a></li> <li><a href="https://ski.aarongutierrez.com">My Ski Photos</a></li>
<li>Github: <a href="https://github.com/aarongut">aarongut</a></li> <li>Github: <a href="https://github.com/aarongut">aarongut</a></li>
<li>Public Key: <a href="pubkey.asc">9CAC97E9</a></li> <li>Public Key: <a href="pubkey.asc">9CAC97E9</a></li>
<li><a href="campaign/index.html">Campaign Website</a></li> <li><a href="/campaign/index.html">Campaign Website</a></li>
<li>Email: <a href="mailto:aaron@gutierrez.party">aaron@gutierrez.party</a> <li>Email: <a href="mailto:aaron@gutierrez.party">aaron@gutierrez.party</a>
</ul> </ul>
</section> </section>

42
pub.py
View File

@@ -3,6 +3,7 @@
import argparse import argparse
import os import os
import sys import sys
import subprocess
import boto3 import boto3
@@ -11,9 +12,10 @@ BUCKET='www.aarongutierrez.com'
session = boto3.Session(profile_name='push') session = boto3.Session(profile_name='push')
s3 = session.client('s3') s3 = session.client('s3')
bench_fmt = """<a href="/bench/view/{0}.html"><picture><source type="image/webp" srcset="/img/bench/{0:03d}.thumb.webp, /img/bench/{0:03d}.thumb@2x.webp 2x"><img src="/img/bench/{0:03d}.thumb.jpg"></picture></a>""" + "\n"
bench_view_ftm = """<a href="/img/bench/{0:03d}.jpg"><img src="/img/bench/{0:03d}.jpg"></a>""" bench_fmt = """<a href="/bench/view/{0}"><picture><source type="image/webp" srcset="/img/bench/{0:03d}.1560.webp 1560w, /img/bench/{0:03d}.780.webp 780w, /img/bench/{0:03d}.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/{0:03d}.1560.jpg 1560w, /img/bench/{0:03d}.780.jpg 780w, /img/bench/{0:03d}.390.jpg 390w"><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" srcset="/img/bench/{0:03d}.1560.webp 1560w, /img/bench/{0:03d}.780.webp 780w, /img/bench/{0:03d}.390.webp 390w"><source type="image/jpeg" srcset="/img/bench/{0:03d}.1560.jpg 1560w, /img/bench/{0:03d}.780.jpg 780w, /img/bench/{0:03d}.390.jpg 390w"><img src="/img/bench/{0:03d}.780.jpg"></picture></a>"""
TYPE_MAP = { TYPE_MAP = {
'asc': 'text/plain', 'asc': 'text/plain',
@@ -71,10 +73,32 @@ def upload_root():
upload_file('site.css') upload_file('site.css')
upload_file('pubkey.asc') upload_file('pubkey.asc')
def thumbnail_bench(src):
sizes = [1560, 780, 390]
formats = ["webp", "jpg"]
filename = src.split(".")[0]
for size in [1560, 780, 390]:
for image_type in ["webp", "jpg"]:
output = "img/bench/{}.{}.{}".format(filename, size, image_type)
if not os.path.exists(output):
print("Thumbnailing {}...".format(output))
subprocess.run(["convert", "img/bench/{}".format(src),
"-resize", "{}x".format(size),
"-quality", "40", output], check=True)
else:
print("Thumbnail {} exists".format(output))
def make_bench(): def make_bench():
imgs = os.listdir('img/bench') imgs = os.listdir('img/bench')
img_files = [f for f in filter_filenames(imgs, ['jpg', 'webp'])] img_files = [f for f in filter_filenames(imgs, 'png')]
num_imgs = int(len(img_files) / 4)
for img in img_files:
thumbnail_bench(img)
num_imgs = int(len(img_files))
with open('bench_template.html', 'r') as f: with open('bench_template.html', 'r') as f:
template = f.read() template = f.read()
@@ -82,21 +106,21 @@ 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(j) page += bench_fmt.format(num_imgs + 1 - j)
prev_pg = i//16 prev_pg = i//16
next_pg = i//16 + 2 next_pg = i//16 + 2
prev_link = '#' if (prev_pg == 0) else '/bench/{}.html'.format(prev_pg) prev_link = '#' if (prev_pg == 0) else '/bench/{}'.format(prev_pg)
next_link = '#' if (i+16 > num_imgs) else '/bench/{}.html'.format(next_pg) next_link = '#' if (i+16 > num_imgs) else '/bench/{}'.format(next_pg)
with open('bench/{}.html'.format(i//16 + 1), 'w') as out: with open('bench/{}.html'.format(i//16 + 1), 'w') as out:
out.write(template.format(page, prev_link, next_link)) out.write(template.format(page, prev_link, next_link))
for i in range(1, num_imgs+1): for i in range(1, num_imgs+1):
make_bench_view(i, make_bench_view(i,
'#' if (i-1 == 0) else str(i-1) + '.html', '#' if (i-1 == 0) else str(i-1),
'#' if (i+1 > num_imgs) else str(i+1) + '.html') '#' if (i+1 > num_imgs) else str(i+1))
def make_bench_view(idx, prev, nxt): def make_bench_view(idx, prev, nxt):

15
site.css
View File

@@ -5,6 +5,7 @@ img#aaron {
body { body {
max-width: 780px; max-width: 780px;
margin: 0 auto;
padding: 20px; padding: 20px;
} }
@@ -29,18 +30,18 @@ footer {
} }
.img-grid a { .img-grid a {
display: inline-block; align-items: flex-end;
height: 160px; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
width: 160px; max-height: calc(100vw - 40px);
overflow: hidden;
} }
.img-grid img { .img-grid img {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 160px; max-width: 100%;
max-height: 160px;
} }
.img-view { .img-view {
@@ -65,10 +66,6 @@ div.nav {
header { header {
text-align: left; text-align: left;
} }
body {
margin: 0 auto;
}
} }
@media(prefers-color-scheme: dark) { @media(prefers-color-scheme: dark) {