-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
75 lines (75 loc) · 6.36 KB
/
about.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
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='width=device-width' initial-scale='1.0' maximum-scale='1.0'/>
<meta name="description" content="An organic home for Abbey's tech content"/>
<title>About Abbey Perini's Digital Garden</title>
<meta property="og:title" content="Abbey Perini's Digital Garden" />
<meta property="og:url" content="https://abbeyperini.com/" />
<meta property="og:type" content="website" />
<meta property="og:description" content="About Abbey's Digital Garden" />
<meta property="og:image" content="https://images.abbeyperini.com/garden-open-graph.png" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:site" content="@AbbeyPerini" />
<script type="application/ld+json">
{
"@context" : "https://abbeyperini.com",
"@type" : "Article",
"headline" : "Abbey Perini's Digital Garden",
"author" : {
"@type" : "Person",
"name" : "Abbey Perini"
},
"image" : "https://images.abbeyperini.com/garden-open-graph.png"
}
</script>
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png">
<link rel='stylesheet' href='../styles/styles.css'/>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Space+Mono">
<script src="../components/header.js" type="text/javascript" defer></script>
<script src="../components/toggle.js" type="text/javascript" defer></script>
<script src="../components/footer.js" type="text/javascript" defer></script>
<script async src="https://rum.cronitor.io/script.js"></script>
<script>
window.cronitor = window.cronitor || function() { (window.cronitor.q = window.cronitor.q || []).push(arguments); };
cronitor('config', { clientKey: '71d4d4a9cbb3078f61bc7a29ebedfd2d' });
</script>
</head>
<body>
<header-component></header-component>
<main>
<div class="garden-container">
<h1 class="garden-title">About My Digital Garden</h1>
<img src="https://images.abbeyperini.com/dev-shiba.png" alt="a shiba inu in glasses and a bowtie working on a computer covered in stickers" width="100px;" />
<h2 class="garden-title">What is a Digital Garden?</h2>
<p class="garden-content">If you want a comprehensive summary of digital gardening, you can't go wrong with Maggie Appleton's <a href="https://maggieappleton.com/garden-history">A Brief History & Ethos of the Digital Garden</a> or her <a href="https://github.com/MaggieAppleton/digital-gardeners">repo of resources</a>. Digital gardening has been around since the late 90's. In short, if Medium is a stream, Wikipedia is a garden. The ideal digital garden is a community garden - ease of sharing, contextualization, and availability of information are very important.
A digital garden is never complete. It grows as you learn and grow. It lies somewhere in between taking notes and blogging. Instead of time, content is curated by topic, state of completion, and how it's related to other content.
The digital garden ethos embraces imperfection, and with it, transparency and meta categorization for the user. Gardeners are encouraged to experiment, use diverse media formats, and find the tools that are sustainable for them, even if they don't involve coding.
Underpinning the whole philosophy is a sense of optimism about the future of the web. Digital gardeners want to push the boundaries of webpage interconnectivity through technologies like web messaging. They strive to put their information in the hands of anyone who wants it.
Plus, a digital garden provides endless opportunities for plant analogies and puns.</p>
<h2 class="garden-title">My Garden</h2>
<p class="garden-content">As it stands, my blog timeline would give you topic whiplash. In contrast, a digital garden works with how my brain works - grouping related articles together even if I wrote them 5 years apart. Bidirectional links will encourage jumping down rabbit holes. The emphasis is on growing a store of interconnected information naturally rather than perfect isolated pieces, and I'm no stranger to learning and building in public.
My digital garden is to be an organic home for all my tech creations. My stack is JavaScript, CSS, HTML, and Markdown. I originally spun up a website in a new framework I wanted to try and quickly realized a framework was far more than I needed and not as sustainable as I wanted.
Many have suggested I should host my own blog, and initially, I didn't see a need. Now, the more I create content in formats other than writing, the more I want a central place for everything I create. Plus, I've got to justify that domain purchase somehow.
I've written before about my nostalgia for a time when everyone slapped up a personal website to share information, and now's my chance to put my money where my mouth is. The more I learn about the web and digital accessibility, the less I can justify paywalls and walled gardens.</p>
<h2 class="garden-title">Knowledge Level</h2>
<p class="garden-content">My writing is broken down into 3 knowledge levels.</p>
<ul class="garden-list">
<li><p>Seedlings for very rough and early ideas</p></li>
<li><p>Budding for work I've cleaned up and clarified</p></li>
<li><p>Evergreen for work that is reasonably complete (though I still tend these over time).</p></li>
</ul>
<p class="garden-content">Each blog also has the date it was planted (published) and last tended (edited). The goal is to give you enough information to assess if the writing is a work in progress and how up to date it is.</p>
<h2 class="garden-title">Topics</h2>
<p class="garden-content">This site is set up to encourage you going down rabbit holes. Each blog has a list of topics it covers, and you can click them to see all of my writing on that subject.</p>
<h2 class="garden-title">Series</h2>
<p class="garden-content">If a blog is part of a series, the series name will be listed and clickable. Series articles were either written together or curated on a topic afterwards. They're slightly more curated than topics.</p>
</div>
</main>
<footer-component></footer-component>
</body>
</html>