-{{< cards >}}
- {{< card link="about/" title="this.ven" image="img/profile.jpg"
- subtitle="FLOSS musician, tinkerer and privacy advocate" >}}
-{{< /cards >}}
\ No newline at end of file
+
+{{< hextra/feature-grid >}}
+ {{< hextra/feature-card
+ title="Influenca"
+ subtitle="Official Musicvideo From the Inconvenient EP"
+ class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+ image="music/inconvenient-ep/influenca/img/cover.jpg"
+ imageClass="hx-top-[40%] hx-w-[110%] sm:hx-w-[110%]"
+ style="background: linear-gradient(rgba(42,100,158,0),rgba(42,100,158,0.4));"
+ link="music/inconvenient-ep/influenca/"
+ >}}
+ {{< hextra/feature-card
+ title="MODEP With Pisound"
+ subtitle="Alternatives to the MOD Platform for Tinkerers Sonoj 2023 Talk"
+ class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
+ image="talks/modep-with-pisound/img/cover.jpg"
+ imageClass="hx-top-[40%] hx-w-[110%] sm:hx-w-[110%]"
+ style="background: linear-gradient(rgba(42,100,158,0),rgba(42,100,158,0.4));"
+ link="talks/modep-with-pisound/"
+ >}}
+ {{< hextra/feature-card
+ title="Profile"
+ subtitle="Plays guitar, bass, mandolin, and drums; Tinkers using Free/Libre Open Source Software; Advocates privacy and self-hosting."
+ class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+ image="images/profile.jpg"
+ imageClass="hx-top-[40%] hx-w-[110%] sm:hx-w-[110%] hx-opacity-80"
+ style="background: linear-gradient(rgba(42,100,158,0),rgba(42,100,158,0.4));"
+ link="about/"
+ >}}
+{{< /hextra/feature-grid >}}
+
+
+For news and announcements about my projects follow me via decentralized social
+media links in the header navigation and
+
+
+{{< hextra/hero-button text="Read the blog" link="blog/" >}}
+
\ No newline at end of file
diff --git a/content/about/_index.md b/content/about/_index.md
index cdf7987..ab2ba82 100644
--- a/content/about/_index.md
+++ b/content/about/_index.md
@@ -24,13 +24,14 @@ IT security and privacy.
### Profile
-{{< figure src="/img/profile.jpg" title="this.ven" width="50%"
- alt="Profile image" link="../img/profile.jpg"
+{{< figure src="/images/profile.jpg" title="this.ven" width="50%"
+ alt="Profile image" link="/images/profile.jpg" class="dark:hx-opacity-80"
caption="FLOSS musician, tinkerer and privacy advocate" >}}
### Contact
-Talk with me in the Matrix[^4] room:
+Talk with me in the {{< icon matrix >}} [Matrix](/docs/infrastructure/matrix/)
+room:
```
#talk2this:ven.uber.space
@@ -43,7 +44,7 @@ room alias above to join. Alternatively, to just get started:
{{< cards >}}
{{< card link="https://matrix.to/#/#talk2this:ven.uber.space"
- title="Join #talk2this via matrix.to" icon="external-link" >}}
+ title="Join chat via matrix.to" icon="chat" >}}
{{< /cards >}}
Otherwise [contact](imprint/#contact) me via email.
@@ -56,7 +57,7 @@ make some [cryptonoise](https://cryptonoise.org/).
{{< callout type="info" >}}
Let's put it this way: Your personal information is yours, and my content is
- mine. If you my content, please consider the [license](#license) below. More
+ mine. If you share my content, please consider the license below. More
information on data processing can be found on the [privacy](privacy/) page.
{{< /callout >}}
@@ -66,9 +67,9 @@ This work is licensed under [CC BY-SA 4.0](http://creativecommons.org/licenses/b
{{< icon creative-commons >}} {{< icon creative-commons-by >}}
{{< icon creative-commons-sa >}}
+Some content may use another license!
+
[^1]: This quote is from the lyrics of the song [Layer 8](/music/inconvenient-ep/layer-8/).
[^2]: [Free Software](https://fsfe.org/freesoftware/comparison.en.html)
comparison by the Free Software Foundation Europe.
[^3]: Switch to FLOSS: [get GNU/Linux!](https://www.getgnulinux.org/)
-[^4]: Learn about the [Matrix](https://matrix.org/) protocol for
-instant messaging.
diff --git a/content/docs/graphics/_index.md b/content/docs/graphics/_index.md
index a6801cd..2071e36 100644
--- a/content/docs/graphics/_index.md
+++ b/content/docs/graphics/_index.md
@@ -5,10 +5,15 @@ draft: true
---
{{< cards >}}
- {{< card link="profile-image/" title="Profile image"
- image="profile-image/img/gimp-manually-posterize.jpg"
- subtitle="Taking and editing a picture using Open Camera and GIMP" >}}
+ {{< card link="colors/" title="Colors" image="colors/img/parsley-figma.svg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
+ subtitle="Choosing colors to create schemes and a concept" >}}
{{< card link="logo-design/" title="Logo design"
image="logo-design/img/inkscape-edit-path.png"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Creating a logo using Inkscape and GIMP" >}}
+ {{< card link="profile-image/" title="Profile image"
+ image="profile-image/img/gimp-manually-posterize.jpg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
+ subtitle="Taking and editing a picture using Open Camera and GIMP" >}}
{{< /cards >}}
\ No newline at end of file
diff --git a/content/docs/graphics/colors/_index.md b/content/docs/graphics/colors/_index.md
new file mode 100644
index 0000000..ee425af
--- /dev/null
+++ b/content/docs/graphics/colors/_index.md
@@ -0,0 +1,80 @@
+---
+title: 'Colors'
+date: 2024-03-03T01:28:02+01:00
+draft: true
+---
+
+A color scheme[^1] is used to create the style and appeal of a project. It adds
+to the [logo design](../logo-design/) a palette of colors for recognition and
+and identity. Ideally, deciding on colors is a starting point for the visual
+appearance of a project. However, you may need to go through some iterations to
+learn the basics of how colors communicate to us psychologically[^2] and what
+are the technical details of the representation on displays[^3]. Don't be
+discouraged, if your color concept isn't perfect at first. In the following I
+document the process of choosing the colors for this project.
+
+## Inspiration first
+
+If you don't have a favorite color yet, you may start by browsing through some
+images and find motifs that appeal to you. Try to identify which color or colors
+in that image are most appealing. For exmaple, I like parsley. And searching the
+term `parsley` at Pixabay yields a nice photograph of a parsley tree:
+
+{{< icon link >}} URL:
+https://pixabay.com/photos/parsley-tree-food-healthy-nature-741996/
+
+I download and open it in [GIMP](https://www.gimp.org/) in order to use the tool
+[color picker](https://docs.gimp.org/en/gimp-tool-color-picker.html) for setting
+the foreground color, double click the foreground color box and finally copy its
+HTML notation[^4]. Alternatively, I would directly research images with my
+favorite color by using the color name to find images and copy the color value
+as described above.
+
+Applications such as [Paleta](https://github.com/nate-xyz/paleta) allow to
+directly extract the dominant colors from images and may be an automated option
+for absolute beginners.
+
+## Palette generation
+
+There are online tools such as [UI Colors](https://uicolors.app/) you can use to
+generate a palette providing shades of your chosen color. The color shades can
+be exported into several formats. A handy visual reference is the SVG (Figma):
+
+{{< figure src="img/parsley-figma.svg" alt="Persley SVG (Figma)"
+ caption="10 shades of the Persley color" >}}
+
+However, the Tailwind (HSL) export provides the values for Hue, Saturation, and
+Lighting to set the [Hugo theme colors](/docs/website/hugo/custom-css/#colors),
+for example. Thus, I copy and paste the text of each export option
+into single `.css` files in addition to the `.svg` (Figma) export:
+
+{{< filetree/container >}}
+ {{< filetree/folder name="colors" >}}
+ {{< filetree/file name="parsley-figma.svg" >}}
+ {{< filetree/file name="parsley-rgb.css" >}}
+ {{< filetree/file name="parsley-tailwind.css)" >}}
+ {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+## Variation and conception
+
+As I don't use automatic palette extraction, I repeat the previously described
+process with the remaining colors in a *Triadic* or *Tetradic* color scheme to
+obtain three or four colors for variation. The aim is to achieve visual contrast
+while maintaining balance.
+
+Each color should serve a distinct role in a visual application to provide user
+orientation. In addition, neutral colors such as black, white and shades of grey
+are neccessary to complete a full color concept.
+
+## Resources
+
+Repository: https://dri.ven.uber.space/thisven/Identity/src/branch/main/colors
+
+[^1]: [Color scheme](https://en.wikipedia.org/wiki/Color_scheme) in the
+Wikipedia
+[^2]: [Color Psychology](https://www.colorpsychology.org/) website
+[^3]: [Color basics](https://www.imagemagick.org/Usage/color_basics/)
+ImageMagick Examples
+[^4]: [HTML notation](https://docs.gimp.org/en/glossary.html#glossary-html-notation)
+in the GIMP glossary
\ No newline at end of file
diff --git a/content/docs/graphics/colors/img/parsley-figma.svg b/content/docs/graphics/colors/img/parsley-figma.svg
new file mode 100644
index 0000000..eb79e05
--- /dev/null
+++ b/content/docs/graphics/colors/img/parsley-figma.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/content/docs/infrastructure/_index.md b/content/docs/infrastructure/_index.md
index 4e58174..2c2ebc5 100644
--- a/content/docs/infrastructure/_index.md
+++ b/content/docs/infrastructure/_index.md
@@ -11,18 +11,23 @@ infrastructure setup.
{{< cards >}}
{{< card link="eturnal/" title="eturnal"
image="eturnal/img/stun-turn-server.svg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Supporting VoIP/Video calls with eturnal" >}}
{{< card link="forgejo/" title="Forgejo"
image="forgejo/img/forgejo-wordmark.svg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Using Forgejo for version control" >}}
{{< card link="icecast/" title="Icecast"
image="icecast/img/icecast-logo.svg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Live streaming media using Icecast" >}}
{{< card link="matrix/" title="Matrix"
image="matrix/img/matrix-logo.svg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Building a community using Matrix" >}}
{{< card link="nextcloud/" title="Nextcloud"
image="nextcloud/img/nextcloud-logo-blue.svg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Running a Nextcloud for file shares" >}}
{{< /cards >}}
diff --git a/content/docs/tinkering/_index.md b/content/docs/tinkering/_index.md
index e79a1b9..861a9e9 100644
--- a/content/docs/tinkering/_index.md
+++ b/content/docs/tinkering/_index.md
@@ -12,6 +12,7 @@ is too expensive, I try to find a tinkerer solution.
{{< cards >}}
{{< card link="vocal-booth/" title="Vocal booth"
image="vocal-booth/img/carton-wall.jpg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Building a vocal booth from carton boxes and blankets" >}}
{{< /cards >}}
diff --git a/content/docs/website/_index.md b/content/docs/website/_index.md
index 3d59b41..67dff0a 100644
--- a/content/docs/website/_index.md
+++ b/content/docs/website/_index.md
@@ -11,5 +11,6 @@ myself, too.
{{< cards >}}
{{< card link="hugo/" title="Hugo"
image="hugo/img/hugo-logo-wide.svg"
+ imageStyle="aspect-ratio: 16/9; object-fit:contain;"
subtitle="Website building using Hugo, a static site generator" >}}
{{< /cards >}}
\ No newline at end of file
diff --git a/content/docs/website/hugo/_index.md b/content/docs/website/hugo/_index.md
index 400ed18..c63bc11 100644
--- a/content/docs/website/hugo/_index.md
+++ b/content/docs/website/hugo/_index.md
@@ -116,6 +116,7 @@ quirks that I found useful.
{{< cards >}}
{{< card link="archetypes" title="Archetypes" icon="book-open" >}}
+ {{< card link="custom-css" title="custom.css" icon="code" >}}
{{< card link="shortcodes" title="Shortcodes" icon="collection" >}}
{{< /cards >}}
diff --git a/content/docs/website/hugo/custom-css.md b/content/docs/website/hugo/custom-css.md
new file mode 100644
index 0000000..1bef069
--- /dev/null
+++ b/content/docs/website/hugo/custom-css.md
@@ -0,0 +1,25 @@
+---
+title: 'custom.css'
+date: 2024-03-03T03:17:42+01:00
+draft: true
+---
+
+Any CSS[^1] customizations are maintained in the `assets/css/custom.css` file.
+The Hextra theme automatically loads this [custom.css](https://imfing.github.io/hextra/docs/advanced/customization/#custom-css).
+
+## Colors
+
+In the Hextra theme, the HSL[^2] representation is used to define the
+[primary color](https://imfing.github.io/hextra/docs/advanced/customization/#primary-color).
+However, the values are split into three variables:
+
+- `--primary-hue`: Hue (deg) value of the primary color.
+- `--primary-saturation`: Saturation (%) value of the primary color.
+- `--primary-lighting`: Lightning (%) value of the primary color.
+
+Thus, to override the default primary color with *Matisse (600)*, for example, a
+conversion may be necessary. For this task, the W3Schools provides a powerful
+[colors converter](https://www.w3schools.com/colors/colors_converter.asp).
+
+[^1]: [CSS](https://en.wikipedia.org/wiki/CSS) in the Wikipedia
+[^2]: [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) in the Wikipedia
\ No newline at end of file
diff --git a/content/music/drafts/_index.md b/content/music/drafts/_index.md
index 6053904..ed85b77 100644
--- a/content/music/drafts/_index.md
+++ b/content/music/drafts/_index.md
@@ -18,7 +18,7 @@ productions. You may want to listen to the [releases](../#releases) instead.
## All drafts
{{< filetree/container >}}
- {{< filetree/folder name="2018" state="closed" >}}
+ {{< filetree/folder name="2018" >}}
{{< filetree/file name="[Truth](truth/)" >}}
{{< filetree/file name="[Simple Melody](simple-melody/)" >}}
{{< filetree/file name="[Birthday](birthday/)" >}}
diff --git a/hugo.yaml b/hugo.yaml
index 40506d4..fb34174 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -4,6 +4,8 @@ title: this.ven
theme: hextra
params:
+ description: FLOSS musician, tinkerer and privacy advocate#
+ displayUpdatedDate: true
editURL:
enable: true
base: "https://dri.ven.uber.space/thisven/Website/_edit/main/content"
@@ -11,12 +13,15 @@ params:
displayTitle: true
displayLogo: true
logo:
- path: img/logo.svg
+ path: images/logo.svg
link: /
width: 64
height: 64
page:
- width: full
+ width: wide
+ footer:
+ displayCopyright: true
+ width: wide
menu:
main:
@@ -59,8 +64,8 @@ menu:
params:
type: separator
weight: 1
- - name: "Website Repo"
- url: "https://dri.ven.uber.space/thisven/Website"
+ - name: "About"
+ pageRef: /about
weight: 2
markup:
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 7676eb3..f4fd4a5 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1 +1,2 @@
+copyright: "This work is licensed under [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)
[Sources](https://dri.ven.uber.space/thisven/Website)"
editThisPage: "Edit this page via Forgejo →"
\ No newline at end of file
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
index e26edd3..e57fe7a 100644
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:13c1910df0b759fdea5fc8ff660f0aad3d8cddf12c9c00ac727c0fed15ca15c9
-size 7831
+oid sha256:bfb08e79671d4b5798f51234eb72688a906696ce2da50e4b7d47d63f5b720a89
+size 7873
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
index c868958..6e39051 100644
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:20ef06fc7db120afb99d277f9f41faadd0011e0ea1619a5f12bd2b049d5ebe09
-size 22712
+oid sha256:b6bc4afe5759e6b02d1f65bc923b75ac93f03258bb377a6c8756951ec56337b7
+size 22731
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
index a147a1c..d7a4ead 100644
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:b42bfec92c0619120395a6eff5ca9a6e8f4c794380756fa6bafc51af1472c9ba
-size 7421
+oid sha256:9e2f539d83fc85b7e0f20723a97df71107a610a090579c6f1995810c86758fe6
+size 7414
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
index 8f4f1b4..87183ef 100644
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:1e370776eabbbb1b208c8e1a7119ad7e0f6c6357a60be75346c53cff47f32e7f
-size 756
+oid sha256:40f5ed94aee1ff3970625db32655d31bb2636539d78e1f241b809497a6909b6d
+size 757
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
index 27e163a..30ea258 100644
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:70663ad046850098aefa9f0e91dec2db1c993b4eea7e8c4ab7a8aea989f5561b
-size 1345
+oid sha256:0854df3b3dfb3bc71cdb84555a35cf6df06aa23c78a2de99f2ee7f76b62f97f0
+size 1361
diff --git a/static/favicon-dark.svg b/static/favicon-dark.svg
index ffd1e01..7bd82bc 100644
--- a/static/favicon-dark.svg
+++ b/static/favicon-dark.svg
@@ -19,11 +19,11 @@
+
+
+
diff --git a/static/img/logo.svg b/static/images/logo.svg
similarity index 91%
rename from static/img/logo.svg
rename to static/images/logo.svg
index ffd1e01..7bd82bc 100644
--- a/static/img/logo.svg
+++ b/static/images/logo.svg
@@ -19,11 +19,11 @@