A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://daily.tinyprojects.dev/paper_website">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://daily.tinyprojects.dev/paper_website" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="paragraph"> <i>December 14th 2021</i> </p>
  71. <p class="paragraph"> TLDR; I started a business that lets you <a href="https://paperwebsite.com/" target="_blank">build websites using pen &amp; paper</a>. In the process I went viral on Twitter, made $1,000 in two days, and blew $720 on 100 paper notebooks from Alibaba. </p>
  72. <h3>📖 Can you build a website from a piece of paper?</h3>
  73. <p class="paragraph"> One day, a riddle popped into my brain: </p>
  74. <p class="paragraph"> <i>"Can you build a website from a piece of paper?"</i> </p>
  75. <p class="paragraph"> I'm a man who <a href="https://tinyprojects.dev/projects/mailoji" target="_blank">once bought 300 emoji domain names from Kazakhstan,</a> but, even to me, the idea of building a website from a piece of paper seemed a <i>bit</i> strange. </p>
  76. <p class="paragraph"> Around this time though, I'd been planning to start a brand new daily blog. </p>
  77. <p class="paragraph"> I began picturing myself in a dressing gown, with a cup of tea and a biro, somehow writing this online blog from a page in a notebook. </p>
  78. <p class="paragraph"> This idea seemed <i>very</i> funny. </p>
  79. <p class="paragraph"> Can you build a website from a piece of paper? I decided to at least try it. </p>
  80. <h3>🧙‍♂️ Paper website experiment #1</h3>
  81. <p class="paragraph"> Feeling confident, I got out some paper and wrote down a chorus from <i>The Fresh Prince of Bel Air</i> (don't ask). </p>
  82. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142559083.png?alt=media&amp;token=6e3c2fd2-21d1-449e-9cda-65ea04c17a95" alt=""><figcaption class="fig-cap"></figcaption></figure>
  83. <p class="paragraph"> If I could transform these handwritten words into pixel words, then it wouldn't be too hard to convert that into the HTML code for a website. </p>
  84. <p class="paragraph"> I took a photo of the page with my phone, and eagerly fed the image into some software that could recognise handwriting. </p>
  85. <p class="paragraph"> A few moments later, I had the results. </p>
  86. <h3>😱 These results may shock you</h3>
  87. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142567580.png?alt=media&amp;token=15fd8e80-676d-47c3-91eb-b31c0e28b414" alt=""><figcaption class="fig-cap"></figcaption></figure>
  88. <p class="paragraph"> There were a lot of mistakes. </p>
  89. <p class="paragraph"> Despite being left-handed and smudging every birthday card I've ever written in, my handwriting is quite neat, so a paper website was not looking promising. </p>
  90. <p class="paragraph"> The software kind of understood my words, so I wondered if I could just fix the spelling mistakes somehow. </p>
  91. <p class="paragraph"> All I needed was a really good spellchecker. </p>
  92. <h3>🤖 A really good spellchecker</h3>
  93. <p class="paragraph"> GPT-3 has been hailed a breakthrough in Artificial Intelligence. </p>
  94. <p class="paragraph"> Billions of parameters work together like a human brain. It can generate whole books, brand new ideas, and chat like a human. </p>
  95. <p class="paragraph"> I needed it for one thing, and one thing only: to be a glorified spellchecker. </p>
  96. <p class="paragraph"> My idea was to feed this world-class AI sentences with spelling mistakes, and examples of how they should be corrected. </p>
  97. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142615331.png?alt=media&amp;token=38f149ec-1e68-4727-bc29-4857b5734c40" alt=""><figcaption class="fig-cap"></figcaption></figure>
  98. <p class="paragraph"> With some luck, it should then learn how to fix mistakes on all future sentences for my paper website. </p>
  99. <h3>🧪 Paper website experiment #2</h3>
  100. <p class="paragraph"> I strapped GPT-3 onto my handwriting recognition code, and retried the experiment. </p>
  101. <p class="paragraph"> <b><i>&gt; Snap picture. Upload. Cross fingers.</i></b> </p>
  102. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142623074.png?alt=media&amp;token=b12523d8-7482-4d31-90f2-3016dd911c71" alt=""><figcaption class="fig-cap"></figcaption></figure>
  103. <p class="paragraph"> Somehow, it worked! </p>
  104. <p class="paragraph"> It didn't take too much extra effort to build a small prototype that let me upload a photo of my page, turn it into code, and host it on a tiny website. </p>
  105. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639475066242.png?alt=media&amp;token=e9d71744-69f0-4cc0-8190-a3786f052be1" alt=""><figcaption class="fig-cap"></figcaption></figure>
  106. <p class="paragraph"> I also built a basic editor that let me add links, images and headings to make the website more interesting. </p>
  107. <p class="paragraph"> Can you build a website from a piece of paper? It seemed like it. </p>
  108. <p class="paragraph"> Was it practical to use paper for a <i>real</i> website though? No idea. </p>
  109. <h3>🌄 The first ever paper website</h3>
  110. <p class="paragraph"> A few days later, I set off for a week's holiday in the Peak District. Being me, I thought this would be the perfect time to build a test paper website about the trip. </p>
  111. <p class="paragraph"> On the first morning, I got up early and began writing my website on paper. </p>
  112. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639474586662.png?alt=media&amp;token=8b7ce2ef-dd17-424f-8adb-9de6d56ecbe9" alt=""><figcaption class="fig-cap"></figcaption></figure>
  113. <p class="paragraph"> My girlfriend watched me, puzzled. After convincing her that I hadn't gone crazy, I proudly took a photo of my page, and sent her the URL of my newly created paper blog post. </p>
  114. <p class="paragraph"> Although this was the lamest mic drop of all time, I think she was impressed. </p>
  115. <h3>📝 One week of paper blogging</h3>
  116. <p class="paragraph"> Every morning I kept adding to my new paper website until I had written a <a href="https://weekinthepeaks.com/" target="_blank">whole tiny travel blog</a> about the trip. </p>
  117. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142676075.png?alt=media&amp;token=f290fc46-74b2-4eaa-847d-e9598dbcad91" alt=""><figcaption class="fig-cap"></figcaption></figure>
  118. <p class="paragraph"> Despite no one reading it, I found myself genuinely looking forward to writing a new post each morning. </p>
  119. <p class="paragraph"> I wrote more without the distractions of the internet, and it was refreshing not being in front of a screen. It was also just really fun. </p>
  120. <p class="paragraph"> This made me wonder: </p>
  121. <p class="paragraph"> If I enjoyed this way of building websites, perhaps others would too? </p>
  122. <h3>💻 Starting a paper website business</h3>
  123. <p class="paragraph"> Fueled by the excitement of my paper travel blog, I decided to start a service that would let anyone build their own paper website. </p>
  124. <p class="paragraph"> Over a few weeks I fleshed out my prototype. I built an app for easily taking paper pictures, and created a payment system using Stripe for subscriptions. </p>
  125. <p class="paragraph"> The last step was choosing a name. Fortunately, <a href="https://paperwebsite.com/" target="_blank">paperwebsite.com</a> was available for £10, so I creatively called my service: <a href="https://paperwebsite.com/" target="_blank">Paper Website.</a> </p>
  126. <p class="paragraph"> Now I just needed some customers. </p>
  127. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142687737.png?alt=media&amp;token=993b8ba7-5b97-4f17-8eff-5e935a941bc3" alt=""><figcaption class="fig-cap"></figcaption></figure>
  128. <h3>🏷️ Marketing tips from the top</h3>
  129. <p class="paragraph"> To entice some potential customers, I decided to conjure up <i>the ultimate deal.</i> </p>
  130. <p class="paragraph"> For $99, you'd get a year long paper website, and a free Moleskine notebook to build your website in. </p>
  131. <p class="paragraph"> It was everything you needed to start your own paper website (although arguably, a pen might also be useful). </p>
  132. <p class="paragraph"> I started dropping links everywhere to spread the good word. </p>
  133. <h3>📈 Mysterious traffic</h3>
  134. <p class="paragraph"> One afternoon, I was sat in a cafe ready to chow down on some serious work. </p>
  135. <p class="paragraph"> I briefly opened Google Analytics, and noticed that for some reason there were 30 people on paperwebsite.com. </p>
  136. <p class="paragraph"> This was a lot more than the usual 0 website visitors. <i>Things</i> were happening. </p>
  137. <p class="paragraph"> After some investigation, I found that Paper Website had randomly been featured as a tiny footnote in a <a href="https://thehustle.co/%E2%9B%B3-golf-is-blowing-up/" target="_blank">massive newsletter.</a> </p>
  138. <p class="paragraph"> Just as I cracked the case, something amazing happened. </p>
  139. <h3>🎉 First customer</h3>
  140. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142697110.png?alt=media&amp;token=c858ea05-fa01-4326-b285-4147c7775bf4" alt=""><figcaption class="fig-cap"></figcaption></figure>
  141. <p class="paragraph"> I watched as Paper Website went from £0 in sales, to £7 as it got its first monthly subscription customer. </p>
  142. <p class="paragraph"> I let out a tiny fistpump in the middle of the cafe that I desperately hope no one saw. </p>
  143. <p class="paragraph"> It wasn't over yet though. Soon after, somebody was lured in by <i>the ultimate deal.</i> </p>
  144. <p class="paragraph"> I had two customers! Now my girlfriend was impressed: </p>
  145. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639168620794.png?alt=media&amp;token=cd5c9b0f-a841-4692-b62c-99c3895aec8c" alt=""><figcaption class="fig-cap"></figcaption></figure>
  146. <p class="paragraph"> I was the Dunder Mifflin of the internet. </p>
  147. <h3>🚚 Notebook woes</h3>
  148. <p class="paragraph"> My new users began building their paper websites, whilst I realised I now had to ship somebody a Moleskine notebook as part of <i>the ultimate deal.</i> </p>
  149. <p class="paragraph"> I loaded up the Moleskine website and saw this was going to cost a staggering $30. </p>
  150. <p class="paragraph"> Paper Website would go bankrupt at these prices, so somehow I needed to reduce costs. </p>
  151. <p class="paragraph"> Then I wondered: could I just create my own notebooks? </p>
  152. <h3>💳 Buying 100 custom notebooks</h3>
  153. <p class="paragraph"> I opened my browser and went to Alibaba.com. Ten minutes later I was talking to the <i>Jiaxing Banana Import &amp; Export Co.</i> - apparent experts in creating notebooks. </p>
  154. <p class="paragraph"> Their minimum order was 100 notebooks at $3.25 each. I could even have a custom logo on the front. </p>
  155. <p class="paragraph"> This was a point of no return. By purchasing these notebooks I was commiting to an idea that had only been validated by 2 sales. Shipping was also $395. </p>
  156. <p class="paragraph"> But hey, it would be really cool to have my own notebooks. </p>
  157. <p class="paragraph"> I clicked buy. They'd arrive in 4 weeks. </p>
  158. <h3>📦 Notebook Delivery</h3>
  159. <p class="paragraph"> One month later, two large brown cardboard boxes arrived on my doorstep. </p>
  160. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142711973.png?alt=media&amp;token=219c9ea3-aad8-4d4d-94c5-53a6d531ad4b" alt=""><figcaption class="fig-cap"></figcaption></figure>
  161. <p class="paragraph"> I eagerly cracked them open to see what on earth I'd purchased. </p>
  162. <p class="paragraph"> Fortunately, the <i>Jiaxing Banana Import &amp; Export Co.</i> hadn't let me down. </p>
  163. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142715882.png?alt=media&amp;token=dccb1a3c-f3a1-423c-84ac-3b22e25198f6" alt=""><figcaption class="fig-cap"></figcaption></figure>
  164. <p class="paragraph"> 100 white notebooks, each with my logo on the front. They were the perfect operating system for my paper-based internet. </p>
  165. <p class="paragraph"> My brief, unofficial partnership with Moleskine ended, and I proudly added the new notebooks to my website. </p>
  166. <h3>📆 Preparing for launch</h3>
  167. <p class="paragraph"> Now I had 100 notebooks sat in my kitchen, I needed to actually sell them, otherwise a lot of my family would be getting notebooks for Christmas. </p>
  168. <p class="paragraph"> I decided the best plan would be to generate some hype and do a big launch. </p>
  169. <p class="paragraph"> Over the next week I fine tuned my website, and created a video to try and explain to the public what on earth this paper website thing was. </p>
  170. <p class="embed"></p>
  171. <p class="paragraph"> On November 10th 2021, I typed up a launch tweet. </p>
  172. <p class="paragraph"> Then, I tweeted it. </p>
  173. <h3>💸 Going viral on twitter</h3>
  174. <p class="paragraph"> It couldn't have gone better. The tweet <a href="https://twitter.com/tinyprojectsdev/status/1458414762203795460" target="_blank">blew up.</a> </p>
  175. <p class="paragraph"> It quickly spread from my little following to other people on twitter, getting 230k impressions, over 1500 likes, and 300 retweets. </p>
  176. <p class="paragraph"> More importantly though, I was selling some paper websites! </p>
  177. <p class="paragraph"> Over 2 days I sold 11 subscriptions netting ~$1000/yr in revenue, a lot of them were <i>the ultimate deal</i>. </p>
  178. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142721019.png?alt=media&amp;token=3b4f6e60-e8ca-4d72-94f3-a785bdb292ed" alt=""><figcaption class="fig-cap"></figcaption></figure>
  179. <h3>🎊 Launch success</h3>
  180. <p class="paragraph"> After finishing <a href="https://www.producthunt.com/posts/paper-website">4th on Product Hunt</a> a few days later, Paper Website was sitting at a modest ~$3,600/yr in subscriptions. </p>
  181. <p class="paragraph"> Loads of people had also now started to build their own paper websites. </p>
  182. <p class="paragraph"> There were websites about <a href="https://doughnuts.design/" target="_blank">game design</a>, <a href="https://angry-catfish-36.web.app/" target="_blank">puzzles</a>, and even <a href="https://thirasoap.com//" target="_blank">making soap</a> - all created from pen &amp; paper. It was so awesome to see. </p>
  183. <p class="paragraph"> Can you build a website from a piece of paper? People were doing it right now! </p>
  184. <h3>📬 Becoming a mailman</h3>
  185. <p class="paragraph"> When the chaos died down, I bought some padded envelopes, and started packaging my notebooks into them. </p>
  186. <p class="paragraph"> Then, I opened my door, walked down the road, and posted the first ever paper website notebook to someone in London. </p>
  187. <p class="paragraph"> This was a surreal experience, when I first imagined a paper website, I never expected things to go this far. </p>
  188. <p class="paragraph"> But, here I was. This is where my story ends, standing in the middle of a random street in England, dropping a notebook into a Royal Mail postbox. </p>
  189. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142726875.png?alt=media&amp;token=484ecf78-de0f-417f-9dbc-b40c8405f63f" alt=""><figcaption class="fig-cap"></figcaption></figure>
  190. <h3>📘 The end</h3>
  191. <p class="paragraph"> The other day my dad (who's a farmer) tried out Paper Website, and created a <a href="https://red-chicken-48.web.app/" target="_blank">page</a> about building a gate out of horseshoes. </p>
  192. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639472924737.png?alt=media&amp;token=3126def4-25ef-4674-b30e-9733c93bcd75" alt=""><figcaption class="fig-cap"></figcaption></figure>
  193. <p class="paragraph"> Although I still have a big box of notebooks in my kitchen, what I'm really excited about is seeing more websites like his. </p>
  194. <p class="paragraph"> There's a lot of weird, wonderful and interesting ideas out there (like horseshoe gates) that never make it to the internet. Perhaps if starting a website was as simple as picking up a pen, we might see more of them. </p>
  195. <p class="paragraph"> Unknowingly stumbling across someone's paper website also sounds like a lot of fun, and I think the internet should be more fun. </p>
  196. <p class="paragraph"> By the way, I did end up starting my new daily blog. </p>
  197. <p class="paragraph"> I'm currently sat in my dressing gown, with a cup of tea and a biro, writing my latest post for it right now on a piece of paper. </p>
  198. <p class="paragraph"> It's called: <i>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business.</i> </p>
  199. <p class="paragraph"> You've been reading a paper website this whole time. </p>
  200. <figure class="fig-img"><img class="img " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639389131965.png?alt=media&amp;token=12be4dfa-72c5-4f7a-95c0-3b8db78bcf9e" alt=""><figcaption class="fig-cap"></figcaption></figure>
  201. <p class="paragraph"> I make <a href="https://tinyprojects.dev/">tiny projects</a> </p>
  202. </article>
  203. <hr>
  204. <footer>
  205. <p>
  206. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  207. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  208. </svg> Accueil</a> •
  209. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  211. </svg> Suivre</a> •
  212. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  213. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  214. </svg> Pro</a> •
  215. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  216. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  217. </svg> Email</a> •
  218. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  219. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  220. </svg> Légal</abbr>
  221. </p>
  222. <template id="theme-selector">
  223. <form>
  224. <fieldset>
  225. <legend><svg class="icon icon-brightness-contrast">
  226. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  227. </svg> Thème</legend>
  228. <label>
  229. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  230. </label>
  231. <label>
  232. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  233. </label>
  234. <label>
  235. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  236. </label>
  237. </fieldset>
  238. </form>
  239. </template>
  240. </footer>
  241. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  242. <script>
  243. function loadThemeForm(templateName) {
  244. const themeSelectorTemplate = document.querySelector(templateName)
  245. const form = themeSelectorTemplate.content.firstElementChild
  246. themeSelectorTemplate.replaceWith(form)
  247. form.addEventListener('change', (e) => {
  248. const chosenColorScheme = e.target.value
  249. localStorage.setItem('theme', chosenColorScheme)
  250. toggleTheme(chosenColorScheme)
  251. })
  252. const selectedTheme = localStorage.getItem('theme')
  253. if (selectedTheme && selectedTheme !== 'undefined') {
  254. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  255. }
  256. }
  257. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  258. window.addEventListener('load', () => {
  259. let hasDarkRules = false
  260. for (const styleSheet of Array.from(document.styleSheets)) {
  261. let mediaRules = []
  262. for (const cssRule of styleSheet.cssRules) {
  263. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  264. continue
  265. }
  266. // WARNING: Safari does not have/supports `conditionText`.
  267. if (cssRule.conditionText) {
  268. if (cssRule.conditionText !== prefersColorSchemeDark) {
  269. continue
  270. }
  271. } else {
  272. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  273. continue
  274. }
  275. }
  276. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  277. }
  278. // WARNING: do not try to insert a Rule to a styleSheet you are
  279. // currently iterating on, otherwise the browser will be stuck
  280. // in a infinite loop…
  281. for (const mediaRule of mediaRules) {
  282. styleSheet.insertRule(mediaRule.cssText)
  283. hasDarkRules = true
  284. }
  285. }
  286. if (hasDarkRules) {
  287. loadThemeForm('#theme-selector')
  288. }
  289. })
  290. </script>
  291. </body>
  292. </html>