https://goodinternetmagazine.com/my-website-is-ugly-because-i-made-it/

Good Internet
Sign In Subscribe

  * Home
  * About
  * Issues
  * Membership
  * Contact

  * Home
  * About
  * Issues
  * Membership
  * Contact

Webweaving

My website is ugly because I made it

An email sent to the author that says, "Hello - your homepage is the
worst thing I've seen in years."
May 27, 2025
Taylor Troesh
3 minutes read

If my mom wanted good art on her fridge, she could've purchased
reprints of works by Vermeer, Lichtenstein, Wyeth, etc. But she
didn't want good art - she wanted my art.

Somebody with good taste could've made my website, but then it
wouldn't be mine.

To bake bread, many feel compelled to grow wheat, mine salt, culture
yeast, etc. Not me. My puerile palate yearns for buckets of Olive
Garden breadsticks.

That's okay. Your "mine" is not my "mine."

Some folks run self-hosted websites on solar power. Others share
wisdom on Substack. This guy posts manufacturing deep-dives to
YouTube. Gwern does
whatever this is.

It's an itch - a feeling that something is really important, and you
need to do something about it, and nobody else can possibly do it
except you.

I am not compelled to bake bread, nor provision servers, nor build
chips. Yet that itch pervades, and it pulls me toward humor and
systems and life and software and structure. And when emotion becomes
unbearable, it erupts out of me: fiction, HTML/CSS, crappy robots,
sad songs, and so on.

My website is my website.

In the past, I just wanted simplicity and friendliness: remove noise,
boost contrast, flatten menu depth, boring HTML, reduce CSS, avoid
JS, etc.

My website looked like this:

[image-1]taylor.town in 2023

But things started going sour when I decided to occupy as much
horizontal space as possible.

The plan was simple: slap flex-wrap on a ul. Unfortunately, text
wraps too. It was unclear where one link ended and the other began.
Some folks read inline and others perceive inline-block.

More whitespace? Yikes. Borders around each link? No way. Dots
between the links? Yuck.

So, let's vary the links! The chaos you see on my homepage comes from
a few simple rules:

li:nth-child(4n + 0) { transform: rotate(1deg); }
li:nth-child(4n + 1) { transform: rotate(-0.6deg); }
li:nth-child(4n + 2) { transform: rotate(0.5deg); }
li:nth-child(4n + 3) { transform: rotate(-0.75deg); }
li:nth-child(6n + 0) { font-family: Times; }
li:nth-child(6n + 1) { font-family: Helvetica; }
li:nth-child(6n + 2) { font-family: Georgia; }
li:nth-child(6n + 3) { font-family: Times; }
li:nth-child(6n + 4) { font-family: Arial; }
li:nth-child(6n + 5) { font-family: "Trebuchet MS"; }

I originally chose coprime integers for more variation, but I rather
liked the subtle repetition in this pattern.

I love minimalism and hate sterility. I sprinkled three additional
surprises to evoke a "used bookstore" feeling:

li:nth-child(5n + 2) { font-weight: 100; }
li:nth-child(7n + 2) { letter-spacing: -1px; }
li:nth-child(41n + 31) { transform: rotate(181deg); }

The web remains an interactive medium. I wanted my site to react to
cursor movement without JS; this CSS produced a pleasant "touching
grass" feeling:

li:nth-child(2n + 0):hover { transform: rotate(-2deg); }
li:nth-child(2n + 1):hover { transform: rotate(2deg); }

Okay, now it reacts to cursor movements, but I also wanted to
exaggerate that scrolling feeling without scrolljacking. Simple
textured backgrounds make a webpage feel more like a page. So I
synthesized texture with css-doodle:

svg {
viewBox: .5 .5 10 10;
fill: #000;
circle*1000 {
  cx, cy: @r(10), @r(10);
  r: @r(.005, .01);
  }
}

So many little dots. In light mode, they become dust on paper. In
dark mode, they're stars in the sky.

Today, my site looks like this:

[image]taylor.town in 2024

Soon it will become something else entirely. Because it's my website
and I'm perpetually becoming somebody else.

You'll change too. Your passions and values will pollinate; your ugly
thing - whatever it is - will come alive again and again.

---------------------------------------------------------------------

Taylor Troesh is mayor of taylor.town, author of scrapscript, and
connoisseur of crap.

Share this article
    
[https://goodinternet]  The link has been copied!

Member comments

You might also like
[photo-1486]
Webweaving [?] Jan Miksovsky

Site creation as content transformation

Making a website would be so much easier if the web came with a good
conceptual model for thinking about site construction. If you're
making a spreadsheet, the spreadsheet grid provides a vital
conceptual and spatial scaffold for your work, helping you break down
your data entry and analysis
27 May 2025
Read More -
[photo-1611]
Theory [?] Ovi Demetrian Jr.

Close to the metal: web design and the browser

The craft of building websites evolves when it follows web browsers,
instead of fighting against them Websites have evolved over the
years, but in the name of evolution, there seems to be mistaken
thinking that the process of building a website needs to get more
complex, using Javascript frameworks and
27 May 2025
Read More -

Subscribe

Sign up to our newsletter for the latest content

[                    ] Sign Up
Processing your application
Please check your inbox and click the link to confirm your
subscription.
There was an error sending the email
Browse the good internet.

  

  * Become a member
  * Terms and Conditions
  * Cookie Policy
  * Privacy Policy
  * Disclaimer
  * Data Subject Access Request Form

(c)2025 Good Internet magazine
Back to Top