~vallode/vallode-com

779c1cdfeba2acc4723161a8780611d2735af798 — vallode a month ago 54881a1
Add updated changes
M content/_index.md => content/_index.md +6 -2
@@ 1,9 1,13 @@
+++
+++

# Hey, I'm Vallode
# Hi there,

**Web developer**, a bit of a handyperson. Focused on learning more about User Experience. I like sci-fi, sharing, and building things that last.
I'm **Mariusz**, also **Vallode** in many many places online.

I'm a **web developer**, a bit of a handyperson in many things tech. Focused on
learning more about User Experience. I like sci-fi, sharing, and building things
that last.

Feel free to explore this plot of digital land that I call my homepage.


M content/posts/2021-03-12-startpages.md => content/posts/2021-03-12-startpages.md +2 -3
@@ 3,10 3,9 @@ title = "Startpages"
updated = 2021-03-12
+++

One of the first hobbies that really and truly drove me to persue web development was the creation
of _startpages_.
The creation of startpages was one of my first true web hobbies.

A startpage is the website that appears when you press new tab, you might have that
A startpage is the website that appears when you open a new tab, you might have that
page be set to a search engine, or you might have let your browser keep it's page with news and
other widgets. All of these pages, so long as they open each and every time you click "new tab", are
**startpages**!

M content/posts/2021-04-13-inspirational-people.md => content/posts/2021-04-13-inspirational-people.md +3 -0
@@ 7,6 7,7 @@ A good friend of mine recently shared a list of people he finds inspirational,
I was then inspired by said list to make my own and try to keep it up-to-date.

* [Boyan Slat](#boyan-slat)
* [Beau Miles](#beau-miles)
* [Alan Watts](#alan-watts)

I want to dedicate a section to each of them, perhaps as an internal conversation


@@ 35,5 36,7 @@ think his speeches give me a form of inspiration.
"You're it" is a great speech by him, very short too, which I'd highly
recommend to anyone.

## Beau Miles

WIP


M content/posts/2021-05-05-small-not-minimal.md => content/posts/2021-05-05-small-not-minimal.md +17 -5
@@ 3,15 3,27 @@ title = "Efficiency does equate to minimalism"
updated = 2021-05-05
+++

I think websites are a form of art, and in the same way as when I paint with watercolours I strive
not to waste all of my paint in one go, I want to be efficient with the data I present to the user.
Preface most of what I say here with "I think", it's all within the bounds of my personal opinion.

There seems to be a correlation between what we think of as efficient and what we see as minimal.
---

Websites are a form of human art, from the [tiny plain-text blogs](https://web.archive.org/web/20210219212122/https://blog.notryan.com/009.txt) to the massive sprawling [hubs of information](https://web.archive.org/web/20220105200255/https://en.wikipedia.org/wiki/Wikipedia:Size_of_Wikipedia) on wikipedia, we express ourselves through this digital artform.

Let's brush the typical "is brushing your teeth art?" argument aside, since that is a topic for another day. I want to talk about how I approach creating websites (like this one) and why I dislike "minimalism" in web design. 

> **Miniamlism** - a style of art, music or design that uses very simple ideas or a very small number of simple elements

1. A good UX is not always achieved by minimal websites
2. Raw creativity is often squandered in favour of efficiency
3. 

There seems to be a common trend, especially in the tech community, that in order to be efficient
you have to adopt the mindset of a minimialist.

My opinions are based on mostly anecdotal evidence, I am going off of what I saw and heard through
my years on the internet and as a developer. Take them with more than a pinch of salt.
1
To put my thoughts on the matter plainly, I dislike minimalism for the sake of minimalism. Modern

I dislike minimalism for the sake of minimalism, Modern
web design is flawed in many, many ways but there are also many things we can learn from it. A good
few "small web" enthusiasts seem to take the road that everything we have done since the dawn of the
2000s is to be ignored.

A content/posts/2022-01-16-life-in-low-res.md => content/posts/2022-01-16-life-in-low-res.md +11 -0
@@ 0,0 1,11 @@
+++
title = "Life in low res"
draft = true
+++

Most desktop PCs are hooked up to monitors that are at least 1080p
in resolution, most phones have at least 720p screens, some flamoyant
individuals even go as high as 4k!

This is all wrong. As with black friday, pixel consumerism has gone too far and
I want to prove to myself that you can live without it.
\ No newline at end of file

M sass/_base.scss => sass/_base.scss +2 -2
@@ 1,6 1,6 @@
h1 {
  margin: 0 0 1.6rem;
  text-decoration: 3px underline $highlight;
  // text-decoration: 3px underline $highlight;
}

ul {


@@ 32,7 32,7 @@ a {
  &:hover {
    opacity: 0.5;
  }
  

  &:active,
  &:focus {
    outline: black dashed 2px;

M sass/style.scss => sass/style.scss +7 -3
@@ 7,13 7,13 @@ sacrifices developer experience.

i.e var(--teal) 11 bytes vs #36acb8 (7 bytes)
*/
$gray: #e6e6e6;
$green: #88b04b;
$darkGreen: #3F6209;
$gray: #e6e6e6;

$background: #ffffff;
$foreground: black;
$highlight: $green;
$background: #f9fbff;

*,
*::before,


@@ 26,6 26,7 @@ $background: #f9fbff;
:root {
  box-sizing: border-box;
  color: $foreground;
  background-color: $background;
  
  /**
  This value is debatably good, but I enjoy the simplicity of 1rem being equal


@@ 35,6 36,8 @@ $background: #f9fbff;
}

body {
  align-items: stretch;
  display: flex;
  font-size: 1.6rem;
  margin: 0;
  


@@ 47,7 50,7 @@ main {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  margin-right: auto;
  margin: 3.4rem auto 0;
  max-width: 60ch;
  padding: 1.2rem;
  position: relative;


@@ 63,4 66,5 @@ main {
@import "base";

@import "templates/header";
@import "templates/sidebar";
@import "templates/main";

M sass/templates/_header.scss => sass/templates/_header.scss +11 -23
@@ 1,31 1,19 @@
header {
  align-self: flex-start;
  border: 2px solid $highlight;
  display: flex;
  flex-direction: column;
  flex: 0 0 16rem;
  margin: 1.2rem;
  flex: 0 0 0%;
  padding: 2.4rem 1.6rem 1.6rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative;

  &::before {
    background-color: $background;
    background-size: 1.8rem 1.8rem;
    content: '';
    display: block;
    height: calc(100% + 1.8rem);
    left: -1rem;
    position: absolute;
    top: -0.6rem;
    transform: rotate(3deg);
    width: calc(100% + 1.8rem);
    z-index: -1;
  }
  
  
  .header__title {
    border-bottom: 2px solid $highlight;
  p {
    font-size: 3.2rem;
    font-weight: bold;
    margin: 0;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: $highlight;
  }
  
  nav {

A sass/templates/_sidebar.scss => sass/templates/_sidebar.scss +35 -0
@@ 0,0 1,35 @@
.sidebar {
  border-right: 1px solid darken($background, 2%);
  display: block;
  flex: 0 1 14rem;

  nav {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 0;

    a {
      padding: 0.8rem 3rem 0.8rem 1.2rem;
      position: relative;

      &:active,
      &:focus {
        outline-offset: -2px;
      }
    }
  }

  @media screen and (max-width: 700px) {
    flex: 0 1 0%;

    nav {
      padding-bottom: 0;
      flex-flow: row wrap;
      justify-content: space-around;

      a {
        padding: 0.8rem;
      }
    }
  }
}

M templates/base.html => templates/base.html +10 -6
@@ 20,11 20,15 @@
  <link rel="stylesheet" href="/style.css" media="print" onload="this.media='all'; this.onload=null;">
  <noscript><link href="/style.css" rel="stylesheet" /></noscript>
</head>
<body>
  {% include "header.html" %}

  <main>
    {% block content %} {% endblock content %}
  </main>
<body>  
  {% include "sidebar.html" %}
  
  <div class="wrap" style="flex: 1 1 0%;">
    {% include "header.html" %}
    
    <main>
      {% block content %} {% endblock content %}
    </main>
  </div>
</body>
</html>

M templates/header.html => templates/header.html +1 -12
@@ 1,14 1,3 @@
<header>
  <p class="header__title">
    <strong>~/vallode</strong>
  </p>

  <nav>
    <a href="/">index</a>
    <a href="/posts">posts</a>

    <h3>Meta</h3>
    <a href="/stack">stack</a>
    <a href="https://git.sr.ht/~vallode/vallode-com">source</a>
  </nav>
  <p class="h1">Mariusz Z.</p>
</header>

A templates/sidebar.html => templates/sidebar.html +8 -0
@@ 0,0 1,8 @@
<div class="sidebar">
  <nav>
    <a href="/">Index</a>
    <a href="/posts">Posts</a>
    <a href="/stack">Stack</a>
    <a href="https://git.sr.ht/~vallode/vallode-com">Source</a>
  </nav>
</div>
\ No newline at end of file