j0.lol
Website version 6
v6.j0.lol
1---js
2// Initialize page data in JavaScript front matter
3let place = "earth";
4---
5<style>
6
7.card-block {
8 margin: 0;
9 padding: 1em;
10}
11
12
13</style>
14
15<h1>Home Page</h1>
16
17<div class="card card-block">
18 <p>Hi! I'm a software developer (with a degree!) and hobbyist designer-artist type from Brighton, UK. I try to practice minimalism in my development.</p>
19</div>
20
21<style>
22.item {
23 display: flex;
24 justify-content: space-between;
25 align-items: baseline;
26
27 padding: 0 1em;
28 margin: 0 1em;
29
30
31 &:nth-child(2n-1) {
32 background: oklab(from var(--border) l a b / 10%)
33 }
34
35 .item-date {
36 flex-shrink: 0;
37 }
38}
39
40</style>
41
42<h2>Latest Blog Posts</h2>
43
44<div class="card card-block" style="padding: 1em 0;">
45 <div class="item" webc:for="post of collections.post.toReversed().slice(0, 3)">
46 <a :href="post.url"><span @text="post.data.title">Sample title</span></a>
47 <span class="item-date" @text="fmtYearMonth(post.date)"></span>
48 </div>
49
50 <a href="/blog" class="item" >View more...</a>
51</div>
52
53<h2 class="subhead">Projects</h2>
54<auto-grid>
55 <project-card webc:for="project of collections.projects.toReversed().slice(0, 3)" :@project="project"> </project-card>
56</auto-grid>
57<br>
58<a href="/projects">View more...</a>
59
60
61<h2 class="subhead">Etcetera</h2>
62<div class="card card-block">
63 <p>
64 I'm looking for work! Check out <a href="https://vps.j0.lol/Resume%20Jo%20Burnett.pdf">my resume</a>, and email me at my professional 'work email' <a href="mailto:me@jobur.net">me@jobur.net</a>! <span class="nowrap">:-)</span>
65 </p>
66 <p>
67 'Business' aside, this website is quite new and I'm migrating some stuff from my old site (comments mainly), so please be patient with me! Thx!</p>
68</div>
69<!--- is-land: https://www.11ty.dev/docs/plugins/partial-hydration/ --->
70<!---
71 <is-land on:visible>
72 This is an island.
73 </is-land>
74--->