-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (188 loc) · 9.71 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<title>Riley Siemens - Since 1990</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
<!-- Alpine -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<!-- Tailwind -->
<link rel="manifest" href="/manifest.json" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- <link rel="stylesheet" href="style.css" /> -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/games.js"></script>
<script type="text/javascript" src="js/recipes.js"></script>
<script type="text/javascript" src="js/photos.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- Custom Style -->
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
[x-cloak] {
display: none !important;
}
</style>
</head>
<body class="text-white font-black text-xl sm:text-2xl tracking-tight p-2">
<div class="h-4 bg-gray-950 rounded-t-2xl"></div>
<div class="bg-gray-950 min-h-screen flex flex-col items-center gap-16 justify-center p-4 sm:p-20 md:flex-row">
<svg class="fill-current shrink-0 w-60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0, 0, 400,400">
<path fill="currentColor" d="M184.181 0.585 C 64.684 11.856,-16.906 117.651,3.159 235.311 C 17.363 318.600,86.368 385.624,170.339 397.690 C 322.068 419.492,440.639 272.480,386.991 129.071 C 356.247 46.887,270.335 -7.541,184.181 0.585 M223.446 28.739 C 340.604 46.578,406.532 169.254,355.715 274.859 C 309.394 371.120,187.287 402.759,100.282 341.043 C 2.951 272.002,2.990 127.969,100.358 58.903 C 135.691 33.840,182.160 22.453,223.446 28.739 M226.919 106.356 C 218.583 125.997,169.301 239.935,169.027 240.202 C 168.816 240.407,146.017 231.867,118.362 221.224 L 68.079 201.874 67.906 200.149 C 67.749 198.578,67.952 198.341,70.166 197.515 C 71.504 197.016,87.218 191.423,105.085 185.086 L 137.571 173.565 137.721 159.099 C 137.804 151.142,137.677 144.626,137.439 144.618 C 137.201 144.610,113.806 153.817,85.452 165.079 L 33.898 185.554 33.898 200.061 C 33.898 211.145,34.065 214.633,34.605 214.842 C 38.345 216.288,157.963 265.151,158.123 265.297 C 158.241 265.405,155.508 272.092,152.050 280.158 C 148.592 288.223,145.763 294.974,145.763 295.160 C 145.763 295.347,152.420 295.431,160.557 295.348 L 175.351 295.198 204.318 227.966 C 223.549 183.330,233.530 160.796,234.015 160.917 C 234.555 161.052,324.911 195.558,331.245 198.049 C 331.974 198.335,332.215 198.930,332.093 200.137 L 331.921 201.825 297.327 214.048 L 262.733 226.271 262.723 240.819 C 262.717 248.821,262.814 255.367,262.938 255.367 C 263.312 255.367,364.610 215.184,365.688 214.608 C 366.608 214.116,366.674 212.962,366.535 199.854 L 366.384 185.634 305.650 160.933 C 272.246 147.348,244.689 136.140,244.412 136.028 C 244.136 135.915,246.773 129.225,250.273 121.160 C 253.773 113.095,256.762 106.052,256.915 105.508 C 257.176 104.585,256.221 104.520,242.446 104.520 L 227.699 104.520 226.919 106.356 " stroke="none" fill-rule="evenodd"></path>
</svg>
<div>
<h1 class="text-4xl text-center xs:text-6xl sm:text-left md:text-8xl">Riley Siemens</h1>
<p class="mt-4 text-3xl text-center uppercase tracking-widest font-normal md:text-left md:text-4xl">
Since 1990
</p>
</div>
</div>
<div x-data="homepageData" class="bg-gray-950 min-h-screen p-4 lg:p-20">
<div class="flex gap-8 text-3xl mb-20 max-w-[100vw] overflow-x-auto sm:text-4xl overflow-y-clip">
<template x-for="(tab, index) in tabs">
<button
class="scroll-mt-8 whitespace-nowrap outline-none hover:text-gray-200"
x-on:click="selectTab(index)"
x-text="tab"
x-bind:id="slugify(tab)"
x-bind:class="index === currentTab ? 'text-white' : 'text-gray-500'"
></button>
</template>
</div>
<div
x-show="currentTab === 0"
x-transition:enter="transition-all duration-300"
x-transition:enter-start="opacity-50 translate-x-1/2"
x-transition:enter-end="translate-x-0 opacity-100"
x-transition:leave="hidden"
class="space-y-12 max-w-xl"
>
<img x-ref="gravatar" class="rounded-full border-2 border-gray-600" />
<p>Hello! I'm Riley.</p>
<p>You might notice this website doesn't have a lot of useful or interesting content on it.</p>
<p>I have no argument against that.</p>
<p>
It's become a place for me to keep and share <a href="#recipes" class="underline">recipes</a>
(like my pizza dough recipe, for example), and a list of all the <a href="#video-games" class="underline">video games</a>
I've bought since 2017.
</p>
<p>
This is a good place to share my <a href="#photos" class="underline">photos</a>
seeing as I have no social media with which to broadcast my inanity.
</p>
<p>
But the main reason I have this domain is so I can have a custom email
address like this:
<span class="whitespace-nowrap flex gap-0 items-baseline">
hi
<span class="after:content-['@']"></span>
rileysiemens
<span class="after:content-['.']"></span>
com
</span>
</p>
<p>Please enjoy!</p>
</div>
<!-- Recipes -->
<div
class="max-w-2xl space-y-8"
x-show="currentTab === 1"
x-transition:enter="transition-all duration-300"
x-transition:enter-start="opacity-50 translate-x-1/2"
x-transition:enter-end="translate-x-0 opacity-100"
x-transition:leave="hidden"
x-data="{ recipes }"
>
<template x-for="recipe in recipes">
<div x-data="{ show: false, tweak: false, servings: 4 }">
<button
class="transition-all flex items-center gap-2 hover:text-white"
x-bind:class="show ? 'text-3xl sm:text-4xl text-white' : 'text-gray-500 text-2xl'"
x-on:click="show = ! show"
>
<span class="text-left" x-text="recipe.name"></span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" >
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" x-show="!show"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" x-show="show"/>
</svg>
</button>
<div class="space-y-6 mt-6" x-transition x-show="show" x-cloak>
<div class="flex items-baseline gap-4">
<p class="text-2xl sm:text-3xl">Ingredients</p>
<button class="text-lg text-gray-500 font-thin hover:text-white hover:underline" x-on:click="tweak = ! tweak" x-text="`${servings} servings`"></button>
</div>
<input type="range" min="1" max="16" class="ml-8 accent-blue-500 w-[22rem]" x-cloak x-show="tweak" x-model="servings" />
<ul class="max-w-sm space-y-2">
<template x-for="ingredient in recipe.ingredients">
<li class="ml-8 flex items-baseline gap-2">
<p class="font-thin grow" x-text="ingredient.name"></p>
<p x-text="ingredient.amount * servings"></p>
<p class="font-thin" x-text="ingredient.unit"></p>
</li>
</template>
</ul>
<p class="text-2xl sm:text-3xl">Steps</p>
<ol class="list-decimal list-inside space-y-4 font-thin">
<template x-for="step in recipe.steps">
<li x-text="step"></li>
</template>
</ol>
</div>
</div>
</template>
</div>
<!-- Video Games -->
<div
class="max-w-2xl"
x-show="currentTab === 2"
x-transition:enter="transition-all duration-300"
x-transition:enter-start="opacity-50 translate-x-1/2"
x-transition:enter-end="translate-x-0 opacity-100"
x-transition:leave="hidden"
x-data="videoGamesData"
>
<template x-for="(game, index) in games">
<div class="grid grid-cols-12 items-end sm:gap-2">
<template x-if="shouldPrintYear(index)">
<h3 class="text-3xl sm:text-4xl col-span-12 mt-8" x-text="getYear(game.date)"></h3>
</template>
<p class="mt-4 col-span-12 font-thin whitespace-nowrap sm:m-0 sm:col-span-2" x-text="getMonthDay(game.date)"></p>
<p class="col-span-8" x-text="game.name"></p>
<p class="col-span-4 font-thin text-right sm:m-0 sm:col-span-2" x-text="getPrice(game)"></p>
</div>
</template>
</div>
<!-- photos -->
<div
x-show="currentTab === 3"
x-transition:enter="transition-all duration-300"
x-transition:enter-start="opacity-50 translate-x-1/2"
x-transition:enter-end="translate-x-0 opacity-100"
x-transition:leave="hidden"
x-data="photoData"
>
<div class="grid grid-cols-3 grid-flow-row max-w-5xl gap-1">
<template x-for="photo in photosByDate()">
<div class="cursor-pointer w-full aspect-square group overscroll-none" x-data="{ enlarge: false }" x-on:click="enlarge = ! enlarge" x-bind:class="{
'overflow-hidden': !enlarge,
'bg-black/25 backdrop-blur w-screen h-screen fixed inset-0 p-2 lg:p-4': enlarge,
}" x-trap.noscroll="enlarge" x-bind:data-enlarged="enlarge">
<img x-bind:class="{
'w-full aspect-square object-cover object-center transition-scale duration-150 group-hover:scale-105': !enlarge,
'mx-auto rounded-lg max-h-[78svh] object-contain border-white border-4': enlarge,
}" x-bind:src="photo.src" x-bind:title="photo.caption" />
<div class="w-full text-sm p-4 max-w-[29.5rem] rounded-lg text-gray-950 bg-white backdrop-blur font-normal mx-auto max-w-xl mt-1" x-show="enlarge" x-cloak>
<p x-text="photo.caption"></p>
<p class="text-gray-400" x-text="relativeDate(photo)"></p>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="h-4 bg-gray-950 rounded-b-2xl"></div>
</body>
</html>