-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
123 lines (115 loc) · 6.53 KB
/
index.html
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
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
<title>simonsarris.com</title>
<!-- this is where sane people load frameworks and stuff -->
<link rel="stylesheet" type="text/css" href="layout.css" />
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap" rel="stylesheet">
<link rel="icon" href="favicon.ico">
<body>
<!--
let me just say that CSS3 is rad as hell but
it's not any easier to program for the web in 2020 than
it was in 2010 or 2000. In a way we have failed everyone.
-->
<div class="container">
<div class="bg-images">
<!-- SIMEVILLE.
Just when you thought this website's payload would be small
I go and use our old pal, PNG. Yes I know about webp.
-->
<img class="bg-sky" src="bg-sky.png" />
<img class="bg-town" id="town7" src="bg-town7.png" />
<img class="bg-town" id="town6" src="bg-town6.png" />
<img class="bg-town" id="town5" src="bg-town5.png" />
<img class="bg-town" id="town3" src="bg-town3.png" />
<img class="bg-town" id="town4" src="bg-town4.png" />
<img class="bg-town" id="town2" src="bg-town2.png" />
<img class="bg-town" id="town1" src="bg-town1.png" />
<img class="bg-town" id="town0" src="bg-town0.png" />
<img class="bg-fore" src="bg-foreground.png" />
<!-- HA HA! BIRDS!
Bet you thought they were animated with meowzerscript
but nay, it is CSS. See layout.css for a vague explanation -->
<div class="BIRD BIRD0"></div>
<div class="BIRD BIRD1"></div>
<div class="BIRD BIRD2"></div>
<div class="BIRD BIRD3"></div>
<div class="BIRD BIRD4"></div>
<div class="text">
<h1>Simon Sarris</h1>
<div class="main-menu">
<input id="photo" class="toggle" type="radio" name="menuradio">
<label for="photo" class="menu-button photo-toggle">photo</label>
<input id="writing" class="toggle" type="radio" name="menuradio">
<label for="writing" class="menu-button writing-toggle">writing</label>
<input id="about" class="toggle" type="radio" name="menuradio">
<label for="about" class="menu-button about-toggle">about</label>
<div class="photo-content">
<div class="content-inner">
<p>Gallery coming soon. For now, there's <a href="https://www.instagram.com/simonsarris" target="_blank">Instagram</a>.
<p>I post lots of documentary-style photos to twitter, such as
<a href="https://twitter.com/simonsarris/status/1164147316745523200" target="_blank">Pictures of Home</a> and photo-blogging
<a href="https://twitter.com/simonsarris/status/1183143604925190144" target="_blank">my Home, the first year</a>.
<p>I advocate at-least-one-photo-a-day, partly because it teaches us to notice our surroundings more, partly for the huge
boost to memory, partly because looking back on the record of normal day to day
life is its own kind of beautiful. Your own aesthetic tastes are a kind of self discovery,
and one of the best ways to exercise this self discovery is through photography.
It compels you to ponder what is meaningful and beautiful in your surroundings.
Once you know this, you can make them more beautiful.
I share photos because I want to make people feel wonder and emotions that are difficult
to put into words but feel very right to "show." If you see and capture them you can
show that they exist as part of the landscape, that emotions surround us, they are not just internal.
<p>Photos, like paintings, help you see the moods that inhabit the world.
</div>
</div>
<div class="writing-content">
<div class="content-inner">
<p>For micro-blogging I use <a href="https://twitter.com/simonsarris" target="_blank">my Twitter</a> a lot lately.
<p>For longer writing I have been using
<a href="https://medium.com/@simon.sarris" target="_blank">Medium</a>.
<p>Recently written:
<em>
<a href="https://medium.com/@simon.sarris/are-we-still-thinking-795bd9f4a658">Are We Still Thinking?</a>
</em>
We lived in a state of dialogue for millennia, almost all knowledge was two-way communication.
Even with books, everyS person talked to more people, sometimes in a single day, than they had ever read.
Then between the printing press and radio we switched to one-way communication as the norm,
and now it's the opposite. The consequences of this are not fully appreciated.
</p>
</div>
</div>
<div class="about-content">
<div class="content-inner">
<p>What is good: Sacred things, making things, photography, kalopsía.
<p>At work I make: <a href="https://gojs.net" target="_blank">GoJS</a>, a diagramming library for the web. My resume is <a href="SimonSarrisResume.pdf">here</a>.
<p>I can be found on <a href="https://twitter.com/simonsarris" target="_blank">Twitter</a>.
I can be contacted by driving around new hampshire and shouting my name or else simonsarris at gmail works too.
<p>Simeville, which you behold, is based on a 1550's painting by Sebastian Münster of Speyer, Germany.
We find great consolation in landscape, don't we? And architecture, good or bad, twists and turns our moods.
<p>This site uses no JavaScript in its interactivity, only CSS transitions and animation written by hand.
I apollo for any hiccups experienced.
<p>In labouring to be concise, I become obscure.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!--
MaKE sURe itS iN ThE HEaDeR. ya ok sure thing goog.
can't believe this is the only js I'm using
maybe there's a better way.
maybe it should be my happy fortune, not to see or hear,
how many peeps show up to my website.
alas.
-->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-7601972-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-7601972-1');
</script>
</html>