-
Notifications
You must be signed in to change notification settings - Fork 7
/
work.pug
118 lines (112 loc) · 6.94 KB
/
work.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
extends _layout
block vars
- var pageTitle = 'Work'
- var pageDescription = 'A collection of Lynn Fisher’s weird web projects including A Single Div, Dress David Rose, and Nestflix.'
- var pagePath = 'work'
- var bodyClass = 'work'
block header
h1 Work
.callout
small Waste time here
block content
.content
p A collection of weird websites, niche data projects, and CSS experiments. I also design for the team at #[a(href='https://ui.dev') ui.dev], and lately I’ve been working on #[a(href='https://react.gg') react.gg] and #[a(href='https://query.gg') query.gg] which are both pretty fun. Check ’em out.
ul.archive-list
li.project.nestflix
a.archive-image(href='https://nestflix.fun')
picture
source(srcset='/assets/images/web-nestflix.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-nestflix-sm.jpg', width='1150', height='700', alt='Nestflix logo over a grid of movie and tv show thumbnails', decoding='async')
.links
small: a(href='https://nestflix.fun') nestflix.fun
li.project.david-rose
a.archive-image(href='https://davidrose.style')
img(src='/assets/images/web-david-rose.svg', width='1150', height='700', alt='David Rose in three different outfits that say Dress David Rose', decoding='async')
.links
small: a(href='https://davidrose.style') davidrose.style
li.project.airport-codes
a.archive-image(href='https://airportcod.es')
picture
source(srcset='/assets/images/web-airport-codes.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-airport-codes-sm.jpg', width='1150', height='700', alt='a screenshot of the Airport Codes website, featuring a grid of airports each identified by a photo and its three-letter IATA code', decoding='async')
.links
small: a(href='https://airportcod.es') airportcod.es
li.project.asinglediv
a.archive-image(href='https://a.singlediv.com')
picture
source(srcset='/assets/images/web-a-single-div.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-a-single-div-sm.jpg', width='1150', height='700', alt='a grid of illustrations including Frida Kahlo, Spaceship Earth, Cheez-It crackers, and more', decoding='async')
.links
small: a(href='https://a.singlediv.com') a.singlediv.com
li.project.oss-love
a.archive-image(href='https://oss.love')
img(src='/assets/images/web-oss-love.svg', width='1150', height='700', alt='a developer pun Valentine’s card featuring a happy Earth saying “You had me at Hello World”', decoding='async', loading='lazy')
.links
small: a(href='https://oss.love') oss.love
li.project.us-flags
a.archive-image(href='https://usflags.design')
img(src='/assets/images/web-us-flags.svg', width='1150', height='700', alt='the flag of New Mexico', decoding='async', loading='lazy')
.links
small: a(href='https://usflags.design') usflags.design
li.project.top-chef
a.archive-image(href='https://topchefstats.com')
picture
source(srcset='/assets/images/web-top-chef-stats.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-top-chef-stats-sm.jpg', width='1150', height='700', alt='a screenshot of the Top Chef Stats site, showing rankings and stats with numbers and little chef heads', decoding='async', loading='lazy')
.links
small: a(href='https://topchefstats.com') topchefstats.com
li.project.food-place
a.archive-image(href='https://thefoodplace.cafe')
img(src='/assets/images/web-the-food-place.svg', width='1150', height='700', alt='The Food Place: a modern eatery for this life and after', decoding='async', loading='lazy')
.links
small: a(href='https://thefoodplace.cafe') thefoodplace.cafe
li.project.hollywood-age-gap
a.archive-image(href='https://hollywoodagegap.com')
img(src='/assets/images/web-hollywood-age-gap.svg', width='1150', height='700', alt='Hollywood Age Gap', decoding='async', loading='lazy')
.links
small: a(href='https://hollywoodagegap.com') hollywoodagegap.com
li.project.whyaz
a.archive-image(href='https://why.az')
img(src='/assets/images/web-whyaz.svg', width='1150', height='700', alt='Arizona flag', decoding='async', loading='lazy')
.links
small: a(href='https://why.az') why.az
li.project.dusting-zone
a.archive-image(href='https://thedusting.zone')
picture
source(srcset='/assets/images/web-the-dusting-zone.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-the-dusting-zone-sm.jpg', width='1150', height='700', alt='The Dusting Zone', decoding='async', loading='lazy')
.links
small: a(href='https://thedusting.zone') thedusting.zone
li.project.portfolio
a.archive-image(href='/archive')
picture
source(srcset='/assets/images/web-lynnandtonic.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-lynnandtonic-sm.jpg', width='1150', height='700', alt='2019 version of lynnandtonic.com', decoding='async', loading='lazy')
.links
small: a(href='/archive') lynnandtonic.com
li.project.manual
a.archive-image(href='https://stylestage.dev/styles/manual/')
picture
source(srcset='/assets/images/web-style-stage.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-style-stage-sm.jpg', width='1150', height='700', alt='Style Stage: a one page website styled like an unfolded paper manual', decoding='async', loading='lazy')
.links
small: a(href='https://stylestage.dev/styles/manual/') Style Stage: Manual
li.project.cabinet
a.archive-image(href='https://codepen.io/collection/AGYwRe')
picture
source(srcset='/assets/images/web-codepen.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-codepen-sm.jpg', width='1150', height='700', alt='an image effect that makes a photo look like a folded poster', decoding='async', loading='lazy')
.links
small: a(href='https://codepen.io/collection/AGYwRe') CSS Photo Effects
small: a.icon.codepen(href='https://codepen.io/collection/AGYwRe', title='a CodePen project')
include ../_assets/images/social-codepen.svg
li.project.cabinet
a.archive-image(href='https://codepen.io/lynnandtonic/pen/LYGjqOo')
picture
source(srcset='/assets/images/web-collectors-cabinet.jpg', media='(min-width: 1200px)')
img(src='/assets/images/web-collectors-cabinet-sm.jpg', width='1150', height='700', alt='illustration of a curio shelf filled with trinkets and collectables', decoding='async', loading='lazy')
.links
small: a(href='https://codepen.io/lynnandtonic/pen/LYGjqOo') CSS Collector’s Cabinet
small: a.icon.codepen(href='https://codepen.io/lynnandtonic/pen/LYGjqOo', title='a CodePen project')
include ../_assets/images/social-codepen.svg
//- li.blank-space