With over a hundred pages, my personal website is on the larger side. I started it all the way back in 1998 when I was 15, and I've lost track of all the different ways it has looked and functioned over the years. So I've done a bit of digital archaeology to rediscover its past. This page is the result.
Few personal websites have lasted this long, let alone been actively maintained and expanded throughout, while preserving all the original content too. It's my little digital garden on the Net, and I hope you'll enjoy this glimpse into how it has evolved alongside the Internet itself.
Blobby-blue design
When I launched my website on March 10 1998 it was called The RSJ Website after my initials. The initial focus was on 3D graphics and stereograms – both my own art pieces and experiments, and various utilities and tutorials I shared for others to use. I made all my 3D graphics with the free ray-tracer POV-Ray.
3D rendered menu
The site used a blobby blue/turquoise 3D shaded menu with red buttons, which I had designed and rendered in POV-Ray. Like many websites of the time, it used frames to keep a consistent menu across all the pages, without having to maintain copies of the menu on each page.
I gradually improved the design, for example by putting content inside boxes to make things more neat and tidy. One of the fun early things I did was displaying small random banners in the top right corner, which would advertise other pages on the site.
Cultivating contact
One thing that jumps out at me is how insistently I asked for feedback and encouraged people to sign up for my mailing list. Back then, before social media, you had to be proactive to connect with like-minded people, and if someone found and enjoyed your website, chances were they were about as like-minded as it got.
I had around 50 subscribers at the time; a number that would eventually grow to 950. I was very active in the POV-Ray community and newsgroups, and that shared interest is how most people discovered my website in the early years.
Frameless design
in December 1999 I made the website frameless. Frames were great for navigation, since the menu could stay onscreen while scrolling the page. However, they prevented users from bookmarking individual pages. And if a user arrived from a search engine at an individual page, the menu would be missing. These downsides were known even before I started the site, but I was still ahead of the curve by dropping frames as early as 1999.
To display the same menu across all the pages without using frames, I switched to technology called server side includes. The menu no longer stayed onscreen while scrolling, but this was the lesser evil. I also added sky-blue borders around each page.
Rune's World
In January 28 2001 I renamed the website to Rune's World. I also equipped the gray boxes with colored headers – a motif that would end up staying for many years across multiple redesigns.
I can't remember if the site had a hierarchical structure with sections and subpages right from the beginning, but I know from newsletters that it was at least well established already in 1999. In the screenshot below, the red boxes without content underneath are links to subpages.
I don't actually have more full size screenshots from this point on. Luckily, the Internet Archive started storing page snapshots of my site from around 2001, so screenshots on the remainder of the page are based on those. (Some of them required some reconstructive work, replacing missing images from the archive with my own local versions.) Since they're rendered in a modern browser in 2025, they may look slightly different than they would have back in the day, for example with smoother text.
Anyway, later in 2001 I designed a planet logo to accompany the name Rune's World. Here's the front page, and pages with my stereograms, 3D graphics and animation experiments.
Angled-pane design
On July 12 2002 I announced a new address for my website in my newsletter, along with a complete redesign:
My website Rune's World has changed into rune|vision !
http://runevision.com
The design is also new. What do you think of it? There are still some things I want to change about it though, but at least it's fully functional. The content on the website is still the same (3d images, animations, resources etc.), so you might call the new website for a new "skin"... Anyway, I thought you should know the new address.
The new design featured overlapping blue and teal panes with 45-degree angles, very loosely inspired by the briefing room UI in the game Starcraft.
I also placed some orange spheres to add visual interest. You may notice that complementary colors of blue/green against red/orange was a recurring theme in many of my designs.
The beginning of runevision
This was also when I came up with the domain name runevision, which I adopted as my online handle too and have used ever since. The reasoning behind the name was displayed in a little welcome message on the front page.
Vision is the sense of ours that perceives and interprets color, luminosity, shape and size. Vision is also the power of imagination...
Welcome to my web site!
Rune
I know, very #deep. Sarcasm at my former self aside, I'm clearly still on board with the basic premise, given I've been using the name runevision to this day.
Database backend
Besides the visual redesign, the site was now also based on an entirely different technology. Instead of relying on handcrafted HTML (albeit some of it a reusable menu), the site content was now stored in a Microsoft Access database and dynamically rendered on the fly using ASP pages (now known as Classic ASP as opposed to ASP.NET).
One table stored the page information and the parent-child relationships between pages, while another table stored the content, with one entry per gray box. Many of my pages were entry-centric – for example I'd add a new entry whenever I'd made a new image or animation.
Each entry had a data field and a type field. If the data was "triangle" and the type "art", the page would display a thumbnail image "triangle_.jpg" that linked to the full size image "triangle.jpg". If the type was "artzip" it would additionally display a "Download source" link to the file "triangle.zip". I had specified a handful of types to handle different types of content.
I programmed the side menu to display the position of the current page in the site hierarchy, along with its subpages. This aided navigation to be both more intuitive and efficient.
Content-wise, this was also the time I introduced a Multimedia section based on my early experiments in game development, whereas I de-emphasized the Stereograms section by moving it deeper into the hierarchy.
Page thumbnails
The angled-pane design stayed for many years with minimal changes. I did however introduce thumbnails for each subpage, a navigation aid that would evolve and persist through later designs, although the thumbnails (if you can still call them that) have since grown significantly in size.
I also programmed the horizontal alignment of the content boxes to be randomized for a more irregular look. This was handled server-side at each page request, so it changed randomly with every page load. If you're wondering, "But why?", well – aside from being a fun web design experiment, just take another look at that Starcraft screenshot. Irregular placement of elements is a vibe.
Another addition was an automatically generated table of contents on every content page.
Lime-box design
On February 6 2008 I sent out what would become the final newsletter. Along with various content updates, I announced the total redesign I had just completed:
Website makeover! Finally, rune|vision has gotten a completely new design. The six years old dark and blue angled design has been replaced with a bright smooth lime and orange design, aimed to make it look more professional, and the content has been revised as well. Hope you like it!
The design went back to using 3D shaded elements made with POV-Ray, this time not just for the menu, but for the header and all the content boxes too. You may think that 2008 was a bit late to introduce 3D shaded elements rather than shying away from them, but remember that trend-setting Apple was still embracing glossy, skeuomorphic interfaces at the time.
At this point I was writing my Master's Thesis and in the process of getting my foot in the door of the game industry.
I was thinking a lot about my website serving as my online portfolio and personal branding, and I decided to put my full name and a stylized portrait prominently into the page headers along with a chosen tagline "Programmer, Designer, Creative Spark". To match, I replaced the vertical bar in "rune|vision" with a very dynamic looking spark graphic, and used a slightly slanted font for good measure.
I also used the stylized portrait as my profile image in forums and social media, and I guess it worked well, because it happened with some frequency over the following years that I met people at industry events who recognized me based on my online presence.
Another design element of the lime-box phase was that I avoided having the page thumbnails appear as rectangular images, instead designing them as icon-like graphical elements with a white background matching the page.
Reshuffled structure and a blog
In terms of site structure, the Welcome section of the site – at this point a relic of the early Internet – was replaced with a less emphasized About rune|vision section. The Multimedia section was renamed to Multimedia & Games and moved to the forefront to reflect my current focus.
Furthermore, I added a blog to the website just a month later. The blog was (and is) using Google's Blogger platform, so it works in a completely different way from the rest of the website, but I created a custom Blogger template to visually integrate the blog seamlessly with the rest of the site.
Flat design and minimalism
In 2013 Apple released iOS 7, which shifted to a flat UI design. This accelerated a broad trend in digital design towards flat UI. While I'm skeptical to this day of completely flat design for applications (due to how it provably reduces affordances and increases ambiguities), I think it's fine for websites.
I began to feel that the 3D shaded elements on my site looked dated, and switched to making all the boxes flat in August 2014.
At the same time I removed the "spark" both from the tagline and the graphics. For the first time, the name runevision was stylized plainly, without any separator.
I also improved the mobile browsing experience by adjusting the layout and introducing a mobile-friendly menu.
Flat design was part of a broader trend of minimalism. The idea is to reduce graphical elements of a site or application to place maximum focus on the content. I very gradually wrapped my head around this idea over many years. When elements are no longer put into boxes, it places greater importance on conveying structure via careful balancing of emphasis and spacing, and it took a while for me to get used to.
In January 2015 I removed the borders around the content, keeping box shapes only for sidebar menus, subpage links, and the header. I also reintroduced drop shadows for those boxy elements, though much more subtle this time.
Finally in November 2019 I removed the lime boxes behind the sidebar menus, and the orange borders around subpage links.
I think the icon-like page thumbnails really shone in this iteration, now that they were no longer undermined by being trapped inside rectangular boxes anyway.
That said, as nice as the icon-like style looked, I was beginning to abandon it, as retrofitting arbitrary designs into this format was often labor-intensive and awkward. That's why the Multimedia & Games page below uses classic rectangular images for its subpage thumbnails.
The header was the only box that stayed. I removed my stylized portrait from it. Although it had served me well, it was beginning to look out of place, especially since it was based on a 2006 photo which was 13 years old by then. I also removed the orange elements from the design, leaving lime as the only accent color.
In retrospect, the header looked rather dull in this last iteration of the lime-box design, as it ended up being little more than a colored rectangle with some text inside. Only two years later though, I would introduce the next design phase.
Minimalist-teal design
Even after transforming the lime-box design into a fairly minimalist form, I kept trying to figure out if it still looked dated, and why. I posed these questions to myself and occasionally others. It might seem that for a personal website, I was overly concerned with other people's opinions, but that wasn't the point. Rather, such dialogue and questioning was a way for me to explore my own evolving aesthetic sensibilities.
I looked at other websites for inspiration, and was particularly inspired by the headers on John Romero's website. (I think it just uses a Squarespace template, but nothing wrong with that.)
I concluded a few things:
- A limited width header rectangle does just look dated in 2022. Most sites with a header uses the full width for it now, even if the rest of the content is still narrower.
- A content-centric way to do a bold header is to have the content be the header. Each page can use a representative graphic (the page's thumbnail image in my case) as the header background. And the title of the page can be inside the header rather than having the header be dominated by the name of the website.
- If the browser window is wide, there's no need for the side menu to be flush up against the content, but on the other hand it shouldn't be way out of reach to the side either. It's all about balance.
- In order to leave room for the side menu, the content may have to be off to one side in a narrow window. But in a wider window, it looks better if the content is centered.
- I really like teal; let's use that as accent color.
Obviously, none of these were novel or new insights as most of them mirrored established trends, but I had to conclude for myself which among the many modern trends I could see working well for me.
Between January 6 and 11 of 2022 I whipped up a new implementation that incorporated these ideas.
I also implemented many improvements that took advantage of new CSS features. I made the side menu sticky so it would finally stay onscreen while scrolling again – something it hadn't done since I dropped frames in 1999. I adjusted video embeds to match the paragraph width while preserving their aspect ratio, instead of using a fixed size.
Oh, the design principle I mentioned about the placement of the side menu being neither too close nor too far away from the content can be seen when viewing the site in a wide browser window like here.
Content-wise, I merged the Graphics and Animations pages into a single page, as I thought it was a bit much for a topic I hadn't touched for years to occupy two top level sections. Likewise, I replaced the top level section POV-Ray Resources with a more general Tools & Tech section, which has resources related to both game development and POV-Ray under it.
Finally, I wanted to make it easier to discover some of my more helpful and timeless blog posts, so I added a new top level section called Articles which is just the blog filtered to only show posts with the article tag.
Personal logo
I'm no stranger to logo design. Hell, I organized a logo contest for POV-Ray back in 2000 when I was 17, and I've designed various logos since then. But I hadn't had a logo for my own website since 2002, when the "planet logo" of Rune's World was abandoned with the introduction of the name runevision.
Now 20 years later, I was an independent game developer with a game published under my own name. On most social media, I just used a portrait as my profile picture, but in certain contexts like my developer Steam page and my YouTube channel, I felt a need for a graphic identity that wasn't based on a portrait – in other words, a logo.
After going through various design iterations, I arrived at a custom designed "R" shape displayed white on a teal background. It might seem generic, but I haven't seen other "R" logos with quite the same shape, and I don't need it to be super distinctive anyway. What's more important is that it feels right to me, which I couldn't say about the earlier iterations I went through, even if they were more distinctive.
A fun aside: Certain geometric elements of the logo can be traced back to the RSJ logo I designed as a kid. I found a pixelated version from 1997, though I'm pretty sure I first sketched it on paper years earlier.
In August 2022 I added the new logo to the website headers. While at it, I simplified the side menu a bit and added icons to the social media links.
Content backend overhaul
In May 2025 I took a break from gamedev to work on some fundamental website improvements. For 20+ years it had been powered by that Microsoft Access database I mentioned early on. Having to edit pages in this ancient database program was adding friction to updating individual pages, and made it completely impractical to carry out sweeping changes to all pages at once.
Lots of content didn't put text inside <p> paragraphs, instead relying on double line breaks (<br><br>), and this prevented me from implementing certain layout improvements. But I couldn't carry out a global search and replace (with oversight) as long as the text was trapped in the database.
I devised a plan and carried it out over the next few days:
- I exported all the page data to one text file per page, resulting is around 50 text files. I came up with my own format which is basically HTML, except headers are specified in Markdown format, paragraphs don't need to be wrapped in <p> tags, and certain keywords are used to specify metadata I previously kept in the database entries.
- I changed the website implementation (still in classic ASP) to get the data from these text files instead of the database, based on simple ad-hoc parser code.
- I then used my normal text editor (Visual Studio Code) to carry out a variety of regex (regular expressions, a language for pattern-matching) search and replace operations to clean up the HTML, such as removing double line breaks (<br><br>), and cleaning up the often inconsistent HTML code for images and video embeds that I had added over several decades.
- I also had to clean up my 132 blog posts, which are separate from the "site pages". As these reside in Google's Blogger platform, it was unfortunately a more manual affair going through one post at a time.
For many years I thought I ought to migrate from Access to a MySQL database, because Access was considered bad practice for various reasons. I'm happy I never went forward with that, as the text file approach is much simpler for me to work with than a database.
Wider images and videos
The cleaned up content gave me more freedom in the page layouts, and I implemented a change I'd been wanting to for a while: Images and video embeds were now shown wider than the text paragraphs, when viewing on desktop in a sufficiently wide window.
Finally, I implemented a dark theme for the website, as this is an increasingly supported and appreciated feature on the web. A switcher in the side menu lets you choose the light or dark theme explicitly, or set it to your system preference (which is the default behavior).
Here's a video that shows the responsive design at different page widths, and switching from light to dark mode.
Future changes
What's next for this site? I have a few ideas I could pursue the next time I'm in the mood for some web development.
The site is still using the Access database to manage page parent-child relationships. Replacing it isn't worth the effort as long as the site is still based on Classic ASP.
I'd eventually like to rewrite the site in ASP.NET, since I'm much more familiar with C# than with VBScript (the language used in Classic ASP). It would also ease my concern that the few remaining web hosts supporting Classic ASP and Access might drop support in the future.
With C#, I could easily reimplement the page relationship logic without needing a database. That said, I have very little experience with ASP.NET, and rewriting the site would be a significant project.
It would also be nice to bring back a table of contents for each page. Implementing it client-side in JavaScript might make more sense, since that would also allow it to work on blog posts.
Evolution overview
Lastly, for fun, let's have a look at a few select pages as they evolved over time. The front page, Graphics page and Site Map page are each shown as they looked in 2001, 2007, 2013, 2020 and 2025 (light and dark theme).
Front page
The front page always used a different layout than the other pages, especially in the early iterations.
Graphics
A page with my 3D graphics has been part of my website from the beginning.
Site map
The site map has always offered an overview of all the site's pages. During each redesign I've had fun presenting it in a nice and fitting way.
That's the end of this page. I hope you enjoyed the journey!
If you want to dig even deeper into the past of this site, you can find all the old content via the Site Map.