98 lines
5.3 KiB
HTML
98 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang='en'>
|
||
<head>
|
||
<title>gome — gomepage</title>
|
||
<meta charset='utf-8'/>
|
||
<meta name='theme-color' content='#efe5d7'>
|
||
<meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'/>
|
||
<link rel='icon' type='image/x-icon' href='../favicon.ico'>
|
||
<link rel='stylesheet' type='text/css' href='../css/fonts.css'/>
|
||
<link rel='stylesheet' type='text/css' href='../css/style.css'/>
|
||
</head>
|
||
<body>
|
||
<header id='header'>
|
||
<nav>
|
||
<a href='..'>back to gomepage</a>—<a href='.'>journal</a>
|
||
</nav>
|
||
</header>
|
||
<main>
|
||
<article>
|
||
<h1 id='title'>The design of gomepage</h1>
|
||
<time datetime='Mon, 2 Jan 2023 22:00:00 CST'>2 Jan. 2023, 10:00 PM</time>
|
||
<p>
|
||
Today I’m going to give a little history for my personal site here on Ctrl-C.
|
||
I’ve had the site for almost a year, starting on January 17<sup>th</sup>, 2022, and gradually built it up over that time.
|
||
Since my username is <i>gome</i>, I refer to my homepage as <i>gomepage</i>, and sometimes I refer to my site as a whole as <i>gomesite</i>.
|
||
</p><p>
|
||
Discovering the world of tilde servers and other small web pages was exciting to me.
|
||
One of the things I love about the internet is that despite how centralized it is now, it’s still possible to just build your own site and share it around the world.
|
||
The tools are fairly accessible and offer a lot of room to grow your skills.
|
||
</p><p>
|
||
I do web development professionally, and have a site I coded myself for my composition work.
|
||
But prior to 2022, I had not really built a website purely for the fun of it.
|
||
So it was really cool to discover servers of people who build stuff on the web just for the fun of making & sharing things.
|
||
It seemed exactly like something I’d like to be a part of.
|
||
</p>
|
||
<figure>
|
||
<img src='img/gomepage_mockup.webp' width='600' height='304' />
|
||
<figcaption>The first mockup I made for the gomepage design</figcaption>
|
||
</figure>
|
||
<p>
|
||
My vision for the site was something like the feeling of dry coziness that I associate with being in the woods on brisk fall days.
|
||
I love woods like this. They’re bright & clear & full of life, and they give me a deep sense of belonging.
|
||
At the same time, the woods don’t exist for your comfort like your home: they’re something separate from & greater than you.
|
||
So I wanted the design of gomepage to somehow convey a similar feeling.
|
||
</p><p>
|
||
Another design element I wanted to include was gnomes.
|
||
Gnomes and other folkloric creatures are associated with the aesthetic of comfy synth, a microgenre of music I enjoy.
|
||
Also, <i>gome</i> & <i>gnome</i> sound very similar, so I thought it would be fun to play up that comparison.
|
||
</p><p>
|
||
After some searching on Wikimedia, I discovered a <a href='https://commons.wikimedia.org/wiki/File:Werkende_kabouters_bij_een_bos,_RP-T-2015-41-1355.jpg'>wonderful drawing</a>
|
||
of working gnomes* in a wood by Gijsbertus Johannes van Overbeek.
|
||
What I love about these gnomes is that they’re not cute kitschy toy gnomes with their hats over their eyes.
|
||
They’re busy at work, in their own world with their own lives.
|
||
They fit perfectly with the feeling I described above, so I adapted them to create the first mockup of gomepage.
|
||
Now I consider them essential in establishing the aesthetic of the site.
|
||
</p>
|
||
<figure>
|
||
<img src='img/werkende_kabouters_bij_een_bos.webp' width='600' height='411' />
|
||
<figcaption>The original drawing the gnomes come from</figcaption>
|
||
</figure>
|
||
<p>
|
||
As time has gone on, gomesite has slowly grown with new pages and features:
|
||
</p>
|
||
<ul>
|
||
<li>Site navigation in the header</li>
|
||
<li>Word of the day</li>
|
||
<li>Socials page</li>
|
||
<li><a href='https://status.cafe/'>status.cafe</a> widget</li>
|
||
<li>Background images</li>
|
||
<li>Journal section</li>
|
||
<li>Listening widget</li>
|
||
</ul>
|
||
<p>
|
||
What I love about having a site like this as a side project is that it’s easy to work on intermittently.
|
||
Most of these features were finished in a few days, so I didn’t have to devote a ton of time to get them done or leave things in a half-finished state.
|
||
It’s like a digital garden where great things grow gradually over time.
|
||
I’m looking forward to another year of tinkering with it!
|
||
</p><p>
|
||
Have you ever built a website or page?
|
||
Have you ever made one just for fun?
|
||
Did you have a feeling you wanted to express with it?
|
||
Let me know your thoughts at my Ctrl-C email: <code>gome<span style='user-select: none;'> ​</span>@<span style='user-select: none;'> ​</span>ctrl-c.club</code>.
|
||
</p>
|
||
<figure>
|
||
<img src='img/gome_color.webp' width='500' height='303' />
|
||
<figcaption>
|
||
Bonus image: I once made a color version of the walking gnome, but didn’t use it.
|
||
He looks like he belongs on the cover of an old programming textbook.
|
||
</figcaption>
|
||
</figure>
|
||
<p class='footnote'>
|
||
* Since this is a Dutch drawing, they are actually <i>kabouters</i>.
|
||
</p>
|
||
</article>
|
||
</main>
|
||
</body>
|
||
</html>
|