~npisanti/npisantidotcomssg

e445aead799eaa72a1585801dce62fd9057910e0 — Nicola Pisanti 26 days ago 0e6cc83
adds design and inventory pages
3 files changed, 77 insertions(+), 2 deletions(-)

M input/base/style.css
A input/pages/design.md
A input/pages/inventory.html
M input/base/style.css => input/base/style.css +0 -2
@@ 40,8 40,6 @@ ul {
    padding-left: 20px;
}

h3 { text-align: center; }

video {  outline: none; }

img { width:100%; }

A input/pages/design.md => input/pages/design.md +22 -0
@@ 0,0 1,22 @@

### On the design of this website

For my website I wanted to keep the aesthetic of a ~2015 cyberpunk tumblr with the simplicity, speed and control of a statically generated website, based on those principles:

* offline first: I should be able to view and work on it without having an internet connection.
* plain HTML+CSS, no Javascript, no cookies. no databases or PHP servers needed.
* no embedded surveillance capitalism, this means no SEO, no embedded Youtube or Google Fonts.
* images and videos compressed as much as possible to reduce used bandwidth.

This site is generated by a [script](https://git.sr.ht/~npisanti/npisantidotcomssg) counting less than 400 lines of code. It is also a proof that shell scripting, although not very efficient, can be a viable way for generating small to medium websites. For frequently edited platforms like a wiki or a [memex](https://en.wikipedia.org/wiki/Memex) a more performant language would have been a better fit, but for posting on my blog less than once a week a [fish](https://fishshell.com/) shell script is just enough.

All the images are optimized with optipng and jpegoptim, and resized to 600px wide (with full size versions on click). Videos are compressed to something like 500kb/s at HD resolution. Less than 1 kb of CSS is used for styling. Links don't open in a new tab by default, leaving the choice to the reader.

Further readings: 
* [Guide to Brutalist Web Design](https://www.brutalist-web.design/)
* [This Page is Designed To Last](https://jeffhuang.com/designed_to_last/)
* [Achieving accessibility through simplicity](https://sourcehut.org/blog/2020-05-27-accessibility-through-simplicity/)
* [How to build a lowtech website](https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website/)
* [POSSE](https://indieweb.org/POSSE) : Publish (on your) Own Site, Syndicate Elsewhere
* [Always Own Your Platform](http://www.alwaysownyourplatform.com/)
* [Building a Website using Pandoc, Markdown and Static HTML](http://wstyler.ucsd.edu/posts/pandoc_website.html)

A input/pages/inventory.html => input/pages/inventory.html +55 -0
@@ 0,0 1,55 @@
<section>
<p>There are some years that I practice what many people in the world call "creative coding": using code and crafting computer programs as mean of expression.</p> 

<p>Although the general trend in this field is to be enthusiast about every latest software trend, hardware vaporware or fashionable tech, I started being unsatisfied with this modus operandi, even more as it clearly goes against <a href="SITEROOTPATH/pages/objects.html">my ethics</a> on objects. What many people call "innovation" can be equally called a <a href="http://viznut.fi/texts-en/resource_leak_bug_of_our_civilization.html">bug of our civilization</a> by others.</p> 

<p>So I made a selection on the hardware and software I was using the most, and I started to rewrite my tools from scratch with less dependencies, to keep my things running without having to chase the "latest and greatest" stuff I don't actually need.</p>
<br>

<a href="SITEROOTPATH/data/inventory/hq/workstation.jpg"  style="border-bottom:none"><img src="SITEROOTPATH/data/inventory/lofi/workstation.jpg" width="100%" loading="lazy"></a>
<p> My workstation is an Asus Zenbook UX303LA. It's named "lazarus" as due to a faulty design it <a href="SITEROOTPATH/data/extradoc/lazarus.jpg">died once</a>, to be reborn. It has the low power version of the Intel i5 processor (4th gen) for a good balance between energy usage and processing power, with an integrated video card supporting openGL 3.3 (I love to code shaders).</p>

<br>
<a href="SITEROOTPATH/data/inventory/hq/recording_studio.jpg"  style="border-bottom:none"><img src="SITEROOTPATH/data/inventory/lofi/recording_studio.jpg" width="100%" loading="lazy"></a>
<p>My "recording studio" consisting of:
<ul>
    <li>EMF sniffer (thanks to <a href="https://www.peal.space">PEAL</a>)</li>
    <li>Sennheiser HD 4.20s</li>
    <li>Olympus LS-5</li>
    <li>NI Traktor Audio 2</li>
    <li>JBL Go v1</li>
</ul></p>

<br>
<a href="SITEROOTPATH/data/inventory/hq/visuals.jpg"  style="border-bottom:none"><img src="SITEROOTPATH/data/inventory/lofi/visuals.jpg" width="100%" loading="lazy"></a>
<p>The periphericals I use to receive input or control visuals are:
<ul>
    <li>raspberry pI 3 controlling 8 relays with <a href="https://git.sr.ht/~npisanti/gpiosc">gpiosc</a></li>
    <li>raspberry pI 3 with a DIY piezo shield to use with <a href="https://git.sr.ht/~npisanti/rpiezos">rpiezos</a></li>
    <li>UGreen USB Audio card with 1/4'' jack adapter</li>
    <li>Trust HD Webcam</li>
    <li>Thrustmaster Dual Analog 4</li>
</ul></p>

<br>
<a href="SITEROOTPATH/data/inventory/hq/ink.jpg"  style="border-bottom:none"><img src="SITEROOTPATH/data/inventory/lofi/ink.jpg" width="100%" loading="lazy"></a>
<p>For drawing I use:
<ul>
    <li>UnI Posca 0.7mm white</li>
    <li>UnI Posca 0.7mm black</li>
    <li>Tratto Marker (scalpel point)</li>
    <li>Faber Castell brushpen</li>
</ul></p>

<br>
<p>Various stuff not pictured here:
<ul>
	<li>A second hand Epson projector, 1280x720 resolution</li>
    <li>Sony Handycam camera (used to shoot most of the videos and pictures you can find here)</li>
    <li>Desk tripod (pictured <a href="SITEROOTPATH/posts/2019_02_11__orcamenti_II.html">here</a>), works both with cellphone, webcam, audio recorder and camera</li>
    <li>A Lenovo Thinkpad T440 named "atlante" (my <a href="SITEROOTPATH/posts/2017_03_11__thinkpad.html">fallback</a> laptop)</li>
    <li>Power chargers and a 10000mA powerbank</li>
    <li>USB ethernet adapter (the zenbook has no eth port)</li>
    <li>A good amount of cables</li>
</ul></p>
</section>