My personal one-pager

I've been using "Darek Kay" as my pseudonym since school. My surname was long and difficult to pronounce, so I've been mostly using it in a formal context. Last year, I changed my legal name, which also influenced my online presence. Due to the change, looking up my new name via search engines returned mostly irrelevant results. To make things worse, the top search results included pictures of a wanted fugitive (not kidding). I've decided to build a personal one-pager to prevent identity mistakes. Fortunately, firstnamelastname.com was still available, so here it is: dariuszwinkler.com.

Screenshot from dariuszwinkler.com

I like reading write-ups about building personal websites, so here's mine.

Content

I consider my new website an entry point for anyone who looks for a brief overview about who I am. The content is short:

My legal name
My pseudonym
My main professions / hobbies with links
A handful of social media links

It's strange to reduce myself to a few keywords, but the external links provide more information.

Tech stack

The website is made with pure HTML and CSS, without JavaScript. I'm not a purist and I love all my over-engineered projects, but there is no need for anything special for a single web page that I'm not planning to update frequently.

I did opt-in for a custom web font, though: "Patrick Hand SC". It fits the playful design.

Bubbles

The overall design is inspired by the blog from Ana Rodrigues. I love the whimsical, hand-drawn look and feel:

Screenshot from ohhelloana.blog

I was especially intrigued by the bubbles. To my surprise, the first bubble is done with pure CSS. I've learned that border-radius supports a / notation:

.bubble {
  border-radius: 34% 60% 42% 72%/71% 40% 60% 40%;
}

The specification explains:

The first value is the horizontal radius, the second (is) the vertical radius. If the second value is omitted, it is copied from the first.

The browser support is excellent, including IE9.

My next thought was: can I animate the border radius? You bet!

40% 60% 28% 72% / 71% 40% 60% 29%

I use this technique to turn the bubbles into ellipses on hover/focus.

Background

I wanted a subtle yet interesting background. I like the triangle pattern from Dave Gamache:

Screenshot from davegamache.com

I shamelessly copied their idea and drew an SVG pattern:

A triangle pattern

It took me a few tries to get a random yet balanced pattern. My tip is to draw big triangles first and then fill in smaller triangles. I also think isosceles triangles look better than equilateral triangles.

SEO

I haven't done anything special to boost my site, apart from following best practices. After a few months, Google ranks my website third, right after my LinkedIn and Xing profiles. Bing does better, putting my page first. All in all, I have achieved my goal of making my name searchable.

Conclusion

I'm happy with my little website, and I've learned a few new things along the way. However, my digital garden will remain here at darekkay.com.